Fix single line input (#482)

Expensify · Sep 12, 2024 · 6d52e57 · 6d52e57
1 parent b91644b
commit 6d52e57
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
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, customMarkdownStyles, !multiline, shouldForceDOMUpdate);
+        const parsedText = updateInputStructure(target, text, cursorPosition, customMarkdownStyles, false, shouldForceDOMUpdate);
         divRef.current.value = parsedText.text;
 
         if (history.current && shouldAddToHistory) {
@@ -158,7 +158,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
 
         return parsedText;
       },
-      [multiline],
+      [],
     );
 
     const processedMarkdownStyle = useMemo(() => {
@@ -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(
@@ -683,7 +684,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
@@ -6,7 +6,6 @@ function addStyleToBlock(targetElement: HTMLElement, type: NodeType, markdownSty
   switch (type) {
     case 'line':
       Object.assign(node.style, {
-        display: 'block',
         margin: '0',
         padding: '0',
       });