Fix single line input structure

Expensify · Sep 11, 2024 · 5f6bdaa · 5f6bdaa
1 parent 1701063
commit 5f6bdaa
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 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(() => {
@@ -683,7 +683,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
@@ -3,6 +3,14 @@
   overflow: auto;
 }
 
+.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 {
   display: 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',
       });