Fix input behavior on text behind the inline image

Expensify · Aug 30, 2024 · ee19f1f · ee19f1f
1 parent ade3501
commit ee19f1f
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 4 deletions.
diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx
@@ -286,7 +286,9 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
 
         updateTextColor(divRef.current, e.target.textContent ?? '');
         const previousText = divRef.current.value;
-        const parsedText = normalizeValue(inputType === 'pasteText' ? pasteContent.current || '' : parseInnerHTMLToText(e.target as MarkdownTextInputElement));
+        const parsedText = normalizeValue(
+          inputType === 'pasteText' ? pasteContent.current || '' : parseInnerHTMLToText(e.target as MarkdownTextInputElement, inputType, contentSelection.current.start),
+        );
 
         if (pasteContent.current) {
           pasteContent.current = null;

diff --git a/src/web/markdown/inlineImages.ts → src/web/markdown/inlineImage.ts b/src/web/markdown/inlineImages.ts → src/web/markdown/inlineImage.ts
diff --git a/src/web/utils/blockUtils.ts b/src/web/utils/blockUtils.ts
@@ -1,6 +1,6 @@
 import type {MarkdownTextInputElement} from '../../MarkdownTextInput.web';
 import type {PartialMarkdownStyle} from '../../styleUtils';
-import {addInlineImagePreview} from '../markdown/inlineImages';
+import {addInlineImagePreview} from '../markdown/inlineImage';
 import type {MarkdownRange} from './parserUtils';
 import type {NodeType, TreeNode} from './treeUtils';
 

diff --git a/src/web/utils/inputUtils.ts b/src/web/utils/inputUtils.ts
@@ -37,7 +37,7 @@ function normalizeValue(value: string) {
 }
 
 // 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 {
+function parseInnerHTMLToText(target: MarkdownTextInputElement, inputType: string, cursorPosition: number): 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'
   function getTopParentNode(node: ChildNode) {
     let currentParentNode = node.parentNode;
@@ -99,8 +99,13 @@ function parseInnerHTMLToText(target: MarkdownTextInputElement): string {
       }
     }
   }
+  text = text.replaceAll('\r\n', '\n');
 
-  return text.replaceAll('\r\n', '\n');
+  // Force letter removal if the input value haven't changed but input type is 'delete'
+  if (text === target.value && inputType.includes('delete')) {
+    text = text.slice(0, cursorPosition - 1) + text.slice(cursorPosition);
+  }
+  return text;
 }
 
 export {isEventComposing, getPlaceholderValue, getElementHeight, parseInnerHTMLToText, normalizeValue};