Add text normalization to fix problems with \r\n

Expensify · Aug 20, 2024 · 4e895e9 · 4e895e9
1 parent ea8c204
commit 4e895e9
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx
@@ -19,7 +19,7 @@ import type {TreeNode} from './web/utils/treeUtils';
 import {getCurrentCursorPosition, removeSelection, setCursorPosition} from './web/utils/cursorUtils';
 import './web/MarkdownTextInput.css';
 import type {MarkdownStyle} from './MarkdownTextInputDecoratorViewNativeComponent';
-import {getElementHeight, getPlaceholderValue, isEventComposing, parseInnerHTMLToText} from './web/utils/inputUtils';
+import {getElementHeight, getPlaceholderValue, isEventComposing, normalizeValue, parseInnerHTMLToText} from './web/utils/inputUtils';
 import {parseToReactDOMStyle, processMarkdownStyle} from './web/utils/webStyleUtils';
 
 require('../parser/react-native-live-markdown-parser.js');
@@ -286,7 +286,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
 
         updateTextColor(divRef.current, e.target.textContent ?? '');
         const previousText = divRef.current.value;
-        const parsedText = inputType === 'pasteText' ? pasteContent.current || '' : parseInnerHTMLToText(e.target as MarkdownTextInputElement);
+        const parsedText = normalizeValue(inputType === 'pasteText' ? pasteContent.current || '' : parseInnerHTMLToText(e.target as MarkdownTextInputElement));
 
         if (pasteContent.current) {
           pasteContent.current = null;
@@ -596,9 +596,9 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
           parseText(divRef.current, divRef.current.value, processedMarkdownStyle);
           return;
         }
-
-        divRef.current.value = value;
-        parseText(divRef.current, value, processedMarkdownStyle);
+        const normalizedValue = normalizeValue(value);
+        divRef.current.value = normalizedValue;
+        parseText(divRef.current, normalizedValue, processedMarkdownStyle);
         updateTextColor(divRef.current, value);
       },
       [multiline, processedMarkdownStyle, value],

diff --git a/src/web/utils/inputUtils.ts b/src/web/utils/inputUtils.ts
@@ -32,6 +32,10 @@ function getElementHeight(node: HTMLDivElement, styles: CSSProperties, numberOfL
   return styles.height ? `${styles.height}px` : 'auto';
 }
 
+function normalizeValue(value: string) {
+  return value.replaceAll('\r\n', '\n');
+}
+
 // Parses the HTML structure of a MarkdownTextInputElement to a plain text string. Used for getting the correct value of the input element.
 function parseInnerHTMLToText(target: MarkdownTextInputElement): string {
   // Returns the parent of a given node that is higher in the hierarchy and is of a different type than 'text', 'br' or 'line'
@@ -96,7 +100,7 @@ function parseInnerHTMLToText(target: MarkdownTextInputElement): string {
     }
   }
 
-  return text;
+  return text.replaceAll('\r\n', '\n');
 }
 
-export {isEventComposing, getPlaceholderValue, getElementHeight, parseInnerHTMLToText};
+export {isEventComposing, getPlaceholderValue, getElementHeight, parseInnerHTMLToText, normalizeValue};