fix: use setBaseAndExtent instead of removeAllRanges (#357)

Signed-off-by: dominictb <[email protected]>
Expensify · May 28, 2024 · 591af40 · 591af40
1 parent 377ab57
commit 591af40
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx
@@ -559,7 +559,8 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
         }
 
         const text = processedValue !== undefined ? processedValue : '';
-        parseText(divRef.current, text, processedMarkdownStyle, text.length);
+
+        parseText(divRef.current, text, processedMarkdownStyle, contentSelection.current?.end);
         updateTextColor(divRef.current, value);
       },
       [multiline, processedMarkdownStyle, processedValue],

diff --git a/src/web/cursorUtils.ts b/src/web/cursorUtils.ts
@@ -94,8 +94,7 @@ function setCursorPosition(target: HTMLElement, start: number, end: number | nul
 
   const selection = window.getSelection();
   if (selection) {
-    selection.removeAllRanges();
-    selection.addRange(range);
+    selection.setBaseAndExtent(range.startContainer, range.startOffset, range.endContainer, range.endOffset);
   }
 
   scrollCursorIntoView(target as HTMLInputElement);
@@ -107,8 +106,7 @@ function moveCursorToEnd(target: HTMLElement) {
   if (selection) {
     range.setStart(target, target.childNodes.length);
     range.collapse(true);
-    selection.removeAllRanges();
-    selection.addRange(range);
+    selection.setBaseAndExtent(range.startContainer, range.startOffset, range.endContainer, range.endOffset);
   }
 }
 

diff --git a/src/web/parserUtils.ts b/src/web/parserUtils.ts
@@ -179,12 +179,13 @@ function moveCursor(isFocused: boolean, alwaysMoveCursorToTheEnd: boolean, curso
   }
 }
 
-function parseText(target: HTMLElement, text: string, curosrPositionIndex: number | null, markdownStyle: PartialMarkdownStyle = {}, alwaysMoveCursorToTheEnd = false) {
+function parseText(target: HTMLElement, text: string, cursorPositionIndex: number | null, markdownStyle: PartialMarkdownStyle = {}, alwaysMoveCursorToTheEnd = false) {
   const targetElement = target;
 
-  let cursorPosition: number | null = curosrPositionIndex;
+  // 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 && cursorPositionIndex <= text.length ? cursorPositionIndex : null;
   const isFocused = document.activeElement === target;
-  if (isFocused && curosrPositionIndex === null) {
+  if (isFocused && cursorPositionIndex === null) {
     const selection = CursorUtils.getCurrentCursorPosition(target);
     cursorPosition = selection ? selection.end : null;
   }