fix selection when rerendering because of markdownStyle change

Expensify · Nov 18, 2024 · 37fe064 · 37fe064
1 parent 824e698
commit 37fe064
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 8 deletions.
diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx
@@ -165,6 +165,7 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
         shouldAddToHistory = true,
         shouldForceDOMUpdate = false,
         shouldScrollIntoView = false,
+        shouldPreserveSelection = false,
       ): ParseTextResult => {
         if (!divRef.current) {
           return {text: text || '', cursorPosition: null};
@@ -173,10 +174,21 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
         if (text === null) {
           return {text: divRef.current.value, cursorPosition: null};
         }
-        const parsedText = updateInputStructure(target, text, cursorPosition, multiline, customMarkdownStyles, false, shouldForceDOMUpdate, shouldScrollIntoView, {
-          addAuthTokenToImageURLCallback,
-          imagePreviewAuthRequiredURLs,
-        });
+        const parsedText = updateInputStructure(
+          target,
+          text,
+          cursorPosition,
+          multiline,
+          customMarkdownStyles,
+          false,
+          shouldForceDOMUpdate,
+          shouldScrollIntoView,
+          {
+            addAuthTokenToImageURLCallback,
+            imagePreviewAuthRequiredURLs,
+          },
+          shouldPreserveSelection,
+        );
         divRef.current.value = parsedText.text;
 
         if (history.current && shouldAddToHistory) {
@@ -191,7 +203,7 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
     const processedMarkdownStyle = useMemo(() => {
       const newMarkdownStyle = processMarkdownStyle(memoizedMarkdownStyle);
       if (divRef.current) {
-        parseText(divRef.current, divRef.current.value, newMarkdownStyle, null, false, false);
+        parseText(divRef.current, divRef.current.value, newMarkdownStyle, null, false, false, false, true);
       }
       return newMarkdownStyle;
     }, [memoizedMarkdownStyle, parseText]);

diff --git a/src/web/utils/parserUtils.ts b/src/web/utils/parserUtils.ts
@@ -259,15 +259,22 @@ function parseRangesToHTMLNodes(
   return {dom: rootElement, tree: rootNode};
 }
 
-function moveCursor(isFocused: boolean, alwaysMoveCursorToTheEnd: boolean, cursorPosition: number | null, target: MarkdownTextInputElement, shouldScrollIntoView = false) {
+function moveCursor(
+  isFocused: boolean,
+  alwaysMoveCursorToTheEnd: boolean,
+  cursorPosition: number | null,
+  target: MarkdownTextInputElement,
+  selectionEnd: number | null = null,
+  shouldScrollIntoView = false,
+) {
   if (!isFocused) {
     return;
   }
 
   if (alwaysMoveCursorToTheEnd || cursorPosition === null) {
     moveCursorToEnd(target);
   } else if (cursorPosition !== null) {
-    setCursorPosition(target, cursorPosition, null, shouldScrollIntoView);
+    setCursorPosition(target, cursorPosition, selectionEnd, shouldScrollIntoView);
   }
 }
 
@@ -281,15 +288,19 @@ function updateInputStructure(
   shouldForceDOMUpdate = false,
   shouldScrollIntoView = false,
   inlineImagesProps: InlineImagesInputProps = {},
+  shouldPreserveSelection = false,
 ) {
   const targetElement = target;
 
   // in case the cursorPositionIndex is larger than text length, cursorPosition will be null, i.e: move the caret to the end
   let cursorPosition: number | null = cursorPositionIndex !== null && cursorPositionIndex <= text.length ? cursorPositionIndex : null;
+  let selectionEndPosition: number | null = null;
   const isFocused = document.activeElement === target;
   if (isFocused && cursorPositionIndex === null) {
     const selection = getCurrentCursorPosition(target);
     cursorPosition = selection ? selection.start : null;
+    // in some cases like rerendering because style was changed we want to preserve selection
+    selectionEndPosition = shouldPreserveSelection && selection ? selection.end : null;
   }
   const markdownRanges = global.parseExpensiMarkToRanges(text);
   if (!text || targetElement.innerHTML === '<br>' || (targetElement && targetElement.innerHTML === '\n')) {
@@ -312,7 +323,7 @@ function updateInputStructure(
     updateTreeElementRefs(tree, targetElement);
     targetElement.tree = tree;
 
-    moveCursor(isFocused, alwaysMoveCursorToTheEnd, cursorPosition, targetElement, shouldScrollIntoView);
+    moveCursor(isFocused, alwaysMoveCursorToTheEnd, cursorPosition, targetElement, selectionEndPosition, shouldScrollIntoView);
   } else {
     targetElement.tree = createRootTreeNode(targetElement);
   }