Fix cursor position issue after introducing block separators

Expensify · Oct 11, 2024 · 1b1e801 · 1b1e801
1 parent 03811f0
commit 1b1e801
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/src/web/utils/cursorUtils.ts b/src/web/utils/cursorUtils.ts
@@ -88,6 +88,18 @@ function moveCursorToEnd(target: HTMLElement) {
   }
 }
 
+function getNodeOffset(targetNode: TreeNode, rangeContainer: Node, rangeOffset: number) {
+  let index = targetNode.start;
+  if (rangeContainer.nodeType !== Node.TEXT_NODE) {
+    targetNode.childNodes.forEach((node) => {
+      index += node.element.value.length;
+    });
+  } else {
+    index += rangeOffset;
+  }
+  return index;
+}
+
 function getCurrentCursorPosition(target: MarkdownTextInputElement) {
   function getHTMLElement(node: Node) {
     let element = node as HTMLElement | Text;
@@ -117,7 +129,7 @@ function getCurrentCursorPosition(target: MarkdownTextInputElement) {
     if (endTreeNode?.parentNode === null) {
       end = target.value.length;
     } else {
-      end = endTreeNode.start + range.endOffset;
+      end = getNodeOffset(endTreeNode, range.endContainer, range.endOffset);
     }
   }
   return {start, end};

diff --git a/src/web/utils/parserUtils.ts b/src/web/utils/parserUtils.ts
@@ -205,7 +205,9 @@ function parseRangesToHTMLNodes(
       // wrap all elements before the first block type markdown range with a span element
       const blockRange = getFirstBlockMarkdownRange([range, ...lineMarkdownRanges]);
       if (!wasBlockGenerated && blockRange) {
-        currentParentNode = addBlockWrapper(currentParentNode, line.text.substring(lastRangeEndIndex - line.start, blockRange.start + blockRange.length - line.start).length, markdownStyle);
+        const blockText = line.text.substring(lastRangeEndIndex - line.start, blockRange.start + blockRange.length - line.start);
+        currentParentNode = addBlockWrapper(currentParentNode, blockText.length, markdownStyle);
+        currentParentNode.element.value = blockText;
         wasBlockGenerated = true;
       }
       // add text before the markdown range

diff --git a/src/web/utils/treeUtils.ts b/src/web/utils/treeUtils.ts
@@ -72,7 +72,9 @@ function updateTreeElementRefs(treeRoot: TreeNode, element: HTMLMarkdownElement)
 
     const currentElement = dataIDToElementMap[node.orderIndex];
     if (currentElement) {
+      const nodeValue = node.element.value;
       node.element = currentElement;
+      node.element.value = nodeValue;
     }
   }