Merge branch 'main' into @Skalakid/inline-images-feature

Expensify · Sep 12, 2024 · 5206134 · 5206134
2 parents d9bb184 + 286eab7
commit 5206134
Show file tree

Hide file tree

Showing 15 changed files with 57 additions and 29 deletions.
diff --git a/cpp/react/renderer/components/RNLiveMarkdownSpec/MarkdownShadowFamilyRegistry.cpp b/cpp/react/renderer/components/RNLiveMarkdownSpec/MarkdownShadowFamilyRegistry.cpp
@@ -2,6 +2,9 @@
 
 #include "MarkdownShadowFamilyRegistry.h"
 
+namespace expensify {
+namespace livemarkdown {
+
 std::set<facebook::react::ShadowNodeFamily::Shared>
     MarkdownShadowFamilyRegistry::familiesToUpdate_;
 std::set<facebook::react::Tag> MarkdownShadowFamilyRegistry::forcedUpdates_;
@@ -55,4 +58,7 @@ bool MarkdownShadowFamilyRegistry::shouldForceUpdate(facebook::react::Tag tag) {
   return false;
 }
 
+} // namespace livemarkdown
+} // namespace expensify
+
 #endif
diff --git a/cpp/react/renderer/components/RNLiveMarkdownSpec/MarkdownShadowFamilyRegistry.h b/cpp/react/renderer/components/RNLiveMarkdownSpec/MarkdownShadowFamilyRegistry.h
@@ -6,6 +6,9 @@
 #include <mutex>
 #include <set>
 
+namespace expensify {
+namespace livemarkdown {
+
 // A registry to store pointers to the ShadowNodeFamilies of markdown
 // decorators. The only place we can _legally_ access the family of shadow node
 // is in the constructor and we need it inside commit hook. To achieve it, we
@@ -32,4 +35,7 @@ class MarkdownShadowFamilyRegistry {
   static std::mutex mutex_;
 };
 
+} // namespace livemarkdown
+} // namespace expensify
+
 #endif
diff --git a/cpp/react/renderer/components/RNLiveMarkdownSpec/MarkdownTextInputDecoratorShadowNode.cpp b/cpp/react/renderer/components/RNLiveMarkdownSpec/MarkdownTextInputDecoratorShadowNode.cpp
@@ -5,6 +5,8 @@
 #include "MarkdownShadowFamilyRegistry.h"
 #include "MarkdownTextInputDecoratorShadowNode.h"
 
+using namespace expensify::livemarkdown;
+
 namespace facebook {
 namespace react {
 

diff --git a/cpp/react/renderer/components/RNLiveMarkdownSpec/MarkdownTextInputDecoratorShadowNode.h b/cpp/react/renderer/components/RNLiveMarkdownSpec/MarkdownTextInputDecoratorShadowNode.h
@@ -8,6 +8,8 @@
 #include <react/renderer/components/RNLiveMarkdownSpec/Props.h>
 #include <react/renderer/components/view/ConcreteViewShadowNode.h>
 
+using namespace expensify::livemarkdown;
+
 namespace facebook {
 namespace react {
 

diff --git a/example/android/settings.gradle b/example/android/settings.gradle
@@ -4,11 +4,11 @@ extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autoli
 rootProject.name = 'LiveMarkdownExample'
 include ':app'
 includeBuild('../node_modules/@react-native/gradle-plugin')
-includeBuild('../node_modules/react-native') {
-    dependencySubstitution {
-        substitute(module("com.facebook.react:react-android")).using(project(":packages:react-native:ReactAndroid"))
-        substitute(module("com.facebook.react:react-native")).using(project(":packages:react-native:ReactAndroid"))
-        substitute(module("com.facebook.react:hermes-android")).using(project(":packages:react-native:ReactAndroid:hermes-engine"))
-        substitute(module("com.facebook.react:hermes-engine")).using(project(":packages:react-native:ReactAndroid:hermes-engine"))
-    }
-}
+// includeBuild('../node_modules/react-native') {
+//     dependencySubstitution {
+//         substitute(module("com.facebook.react:react-android")).using(project(":packages:react-native:ReactAndroid"))
+//         substitute(module("com.facebook.react:react-native")).using(project(":packages:react-native:ReactAndroid"))
+//         substitute(module("com.facebook.react:hermes-android")).using(project(":packages:react-native:ReactAndroid:hermes-engine"))
+//         substitute(module("com.facebook.react:hermes-engine")).using(project(":packages:react-native:ReactAndroid:hermes-engine"))
+//     }
+// }
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -1497,7 +1497,7 @@ PODS:
     - React-logger (= 0.75.2)
     - React-perflogger (= 0.75.2)
     - React-utils (= 0.75.2)
-  - RNLiveMarkdown (0.1.128):
+  - RNLiveMarkdown (0.1.137):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1517,9 +1517,9 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNLiveMarkdown/common (= 0.1.128)
+    - RNLiveMarkdown/common (= 0.1.137)
     - Yoga
-  - RNLiveMarkdown/common (0.1.128):
+  - RNLiveMarkdown/common (0.1.137):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1805,10 +1805,10 @@ SPEC CHECKSUMS:
   React-utils: 81a715d9c0a2a49047e77a86f3a2247408540deb
   ReactCodegen: 60973d382704c793c605b9be0fc7f31cb279442f
   ReactCommon: 6ef348087d250257c44c0204461c03f036650e9b
-  RNLiveMarkdown: 44cc9af8742cfd5355733d29fa54e64e4edf0f0d
+  RNLiveMarkdown: b2d706acf1bbd968b8dab0be0dc69f130a14db6d
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   Yoga: 2a45d7e59592db061217551fd3bbe2dd993817ae
 
 PODFILE CHECKSUM: 9b81b0f7bfba9e6fb4fa10efe8319f7860794e08
 
-COCOAPODS: 1.14.3
+COCOAPODS: 1.15.2
diff --git a/ios/MarkdownCommitHook.h b/ios/MarkdownCommitHook.h
@@ -11,6 +11,7 @@
 
 using namespace facebook::react;
 
+namespace expensify {
 namespace livemarkdown {
 
 struct MarkdownTextInputDecoratorPair {
@@ -38,5 +39,6 @@ class MarkdownCommitHook : public UIManagerCommitHook {
 };
 
 } // namespace livemarkdown
+} // namespace expensify
 
 #endif // RCT_NEW_ARCH_ENABLED
diff --git a/ios/MarkdownCommitHook.mm b/ios/MarkdownCommitHook.mm
@@ -11,6 +11,7 @@
 
 using namespace facebook::react;
 
+namespace expensify {
 namespace livemarkdown {
 
 MarkdownCommitHook::MarkdownCommitHook(
@@ -192,5 +193,6 @@
 }
 
 } // namespace livemarkdown
+} // namespace expensify
 
 #endif // RCT_NEW_ARCH_ENABLED
diff --git a/ios/RCTLiveMarkdownModule.h b/ios/RCTLiveMarkdownModule.h
@@ -4,9 +4,13 @@
 #import <React/RCTEventEmitter.h>
 #import <React/RCTUIManager.h>
 
+NS_ASSUME_NONNULL_BEGIN
+
 // Without inheriting after RCTEventEmitter we don't get access to bridge
 @interface RCTLiveMarkdownModule
     : RCTEventEmitter <NativeLiveMarkdownModuleSpec>
 @end
 
+NS_ASSUME_NONNULL_END
+
 #endif // RCT_NEW_ARCH_ENABLED
diff --git a/ios/RCTLiveMarkdownModule.mm b/ios/RCTLiveMarkdownModule.mm
@@ -7,13 +7,15 @@
 #import "MarkdownShadowFamilyRegistry.h"
 #import "RCTLiveMarkdownModule.h"
 
+using namespace expensify::livemarkdown;
+
 // A turbomodule used to register the commit hook
 // I think this is the easiest way to access the UIManager, which we need to
 // actually register the hook
 
 @implementation RCTLiveMarkdownModule {
   BOOL installed_;
-  std::shared_ptr<livemarkdown::MarkdownCommitHook> commitHook_;
+  std::shared_ptr<MarkdownCommitHook> commitHook_;
   __weak RCTSurfacePresenter *surfacePresenter_;
 }
 
@@ -23,8 +25,7 @@ - (NSNumber *)install {
   if (!installed_ && surfacePresenter_ != nil) {
     RCTScheduler *scheduler = [surfacePresenter_ scheduler];
 
-    commitHook_ =
-      std::make_shared<livemarkdown::MarkdownCommitHook>(scheduler.uiManager);
+    commitHook_ = std::make_shared<MarkdownCommitHook>(scheduler.uiManager);
     installed_ = YES;
   }
   return @1;

diff --git a/ios/RCTTextInputComponentView+Markdown.mm b/ios/RCTTextInputComponentView+Markdown.mm
@@ -8,6 +8,8 @@
 
 #import "MarkdownShadowFamilyRegistry.h"
 
+using namespace expensify::livemarkdown;
+
 @implementation RCTTextInputComponentView (Markdown)
 
 - (void)setMarkdownUtils:(RCTMarkdownUtils *)markdownUtils {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@expensify/react-native-live-markdown",
-  "version": "0.1.135",
+  "version": "0.1.139",
   "description": "Drop-in replacement for React Native's TextInput component with Markdown formatting.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx
@@ -149,7 +149,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
         if (text === null) {
           return {text: divRef.current.value, cursorPosition: null};
         }
-        const parsedText = updateInputStructure(target, text, cursorPosition, multiline, customMarkdownStyles, !multiline, shouldForceDOMUpdate);
+        const parsedText = updateInputStructure(target, text, cursorPosition, multiline, customMarkdownStyles, false, shouldForceDOMUpdate);
         divRef.current.value = parsedText.text;
 
         if (history.current && shouldAddToHistory) {
@@ -176,10 +176,11 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
           flattenedStyle && {
             caretColor: (flattenedStyle as TextStyle).color || 'black',
           },
+          {whiteSpace: multiline ? 'pre-wrap' : 'nowrap'},
           disabled && styles.disabledInputStyles,
           parseToReactDOMStyle(flattenedStyle),
         ]) as CSSProperties,
-      [flattenedStyle, disabled],
+      [flattenedStyle, multiline, disabled],
     );
 
     const undo = useCallback(
@@ -685,7 +686,6 @@ const styles = StyleSheet.create({
     fontFamily: 'sans-serif',
     // @ts-expect-error it works on web
     boxSizing: 'border-box',
-    whiteSpace: 'pre-wrap',
     overflowY: 'auto',
     overflowX: 'auto',
     overflowWrap: 'break-word',

diff --git a/src/web/MarkdownTextInput.css b/src/web/MarkdownTextInput.css
@@ -1,6 +1,13 @@
-.react-native-live-markdown-input-singleline {
-  white-space: nowrap;
-  overflow: auto;
+.react-native-live-markdown-input-multiline {
+  white-space: pre-wrap;
+}
+
+.react-native-live-markdown-input-singleline p {
+  display: inline-block;
+}
+
+.react-native-live-markdown-input-multiline p {
+  display: block;
 }
 
 .react-native-live-markdown-input-singleline::-webkit-scrollbar {
@@ -11,11 +18,6 @@
   display: none;
 }
 
-.react-native-live-markdown-input-singleline * {
-  display: inline;
-  white-space: nowrap;
-}
-
 .react-native-live-markdown-input-singleline:empty::before,
 .react-native-live-markdown-input-multiline:empty::before {
   pointer-events: none;

diff --git a/src/web/utils/blockUtils.ts b/src/web/utils/blockUtils.ts
@@ -9,7 +9,6 @@ function addStyleToBlock(targetElement: HTMLElement, type: NodeType, markdownSty
   switch (type) {
     case 'line':
       Object.assign(node.style, {
-        display: 'block',
         margin: '0',
         padding: '0',
       });