@expensify/react-native-live-markdown 0.1.132 → 0.1.134

package/src/web/utils/cursorUtils.ts

@@ -45,10 +45,6 @@ function setCursorPosition(target: MarkdownTextInputElement, startIndex: number,
     selection.setBaseAndExtent(range.startContainer, range.startOffset, range.endContainer, range.endOffset);
   }
 
-  // Update the focused elements zIndex to make sure they are on top and the cursor is beeing set correctly
-  startTreeNode.element.style.zIndex = '1';
-  endTreeNode.element.style.zIndex = '1';
-
   scrollIntoView(startTreeNode);
 }
 

package/src/web/utils/parserUtils.ts

@@ -1,5 +1,5 @@
 import type {HTMLMarkdownElement, MarkdownTextInputElement} from '../../MarkdownTextInput.web';
-import {addNodeToTree} from './treeUtils';
+import {addNodeToTree, updateTreeElementRefs} from './treeUtils';
 import type {NodeType, TreeNode} from './treeUtils';
 import type {PartialMarkdownStyle} from '../../styleUtils';
 import {getCurrentCursorPosition, moveCursorToEnd, setCursorPosition} from './cursorUtils';
@@ -246,6 +246,7 @@ function moveCursor(isFocused: boolean, alwaysMoveCursorToTheEnd: boolean, curso
     setCursorPosition(target, cursorPosition);
   }
 }
+
 function updateInputStructure(
   target: MarkdownTextInputElement,
   text: string,
@@ -276,12 +277,12 @@ function updateInputStructure(
     if (shouldForceDOMUpdate || targetElement.innerHTML !== dom.innerHTML) {
       targetElement.innerHTML = '';
       targetElement.innerText = '';
-      Array.from(dom.children).forEach((child) => {
-        targetElement.appendChild(child);
-      });
+      targetElement.innerHTML = dom.innerHTML;
     }
 
+    updateTreeElementRefs(tree, targetElement);
     targetElement.tree = tree;
+
     moveCursor(isFocused, alwaysMoveCursorToTheEnd, cursorPosition, targetElement);
   }
 

package/src/web/utils/treeUtils.ts

@@ -41,6 +41,23 @@ function addNodeToTree(element: HTMLMarkdownElement, parentTreeNode: TreeNode, t
   return item;
 }
 
+function updateTreeElementRefs(treeRoot: TreeNode, element: HTMLMarkdownElement) {
+  const stack: TreeNode[] = [treeRoot];
+  while (stack.length > 0) {
+    const node = stack.pop() as TreeNode;
+    stack.push(...node.childNodes);
+
+    const currentElement = element.querySelector(`[data-id="${node.orderIndex}"]`) as HTMLMarkdownElement;
+    node.element = currentElement;
+
+    node.childNodes.forEach((child) => {
+      stack.push(child);
+    });
+  }
+
+  return treeRoot;
+}
+
 function findHTMLElementInTree(treeRoot: TreeNode, element: HTMLElement): TreeNode | null {
   if (element.hasAttribute?.('contenteditable')) {
     return treeRoot;
@@ -98,6 +115,6 @@ function getTreeNodeByIndex(treeRoot: TreeNode, index: number): TreeNode | null
   return null;
 }
 
-export {addNodeToTree, findHTMLElementInTree, getTreeNodeByIndex};
+export {addNodeToTree, findHTMLElementInTree, getTreeNodeByIndex, updateTreeElementRefs};
 
 export type {TreeNode, NodeType};