Fix too quick red underline markdown applying

Expensify · Sep 6, 2024 · 24ab088 · 24ab088
1 parent 0824c62
commit 24ab088
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 10 deletions.
diff --git a/src/web/utils/cursorUtils.ts b/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);
 }
 

diff --git a/src/web/utils/parserUtils.ts b/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,11 @@ function moveCursor(isFocused: boolean, alwaysMoveCursorToTheEnd: boolean, curso
     setCursorPosition(target, cursorPosition);
   }
 }
+
+function normalizeHTMLStructure(target: MarkdownTextInputElement) {
+  return target.innerHTML.split('z-index: 1;').join('').split(' style=""').join('');
+}
+
 function updateInputStructure(
   target: MarkdownTextInputElement,
   text: string,
@@ -273,15 +278,14 @@ function updateInputStructure(
   if (text) {
     const {dom, tree} = parseRangesToHTMLNodes(text, markdownRanges, markdownStyle);
 
-    if (shouldForceDOMUpdate || targetElement.innerHTML !== dom.innerHTML) {
+    if (shouldForceDOMUpdate || normalizeHTMLStructure(targetElement) !== dom.innerHTML) {
       targetElement.innerHTML = '';
       targetElement.innerText = '';
-      Array.from(dom.children).forEach((child) => {
-        targetElement.appendChild(child);
-      });
+      targetElement.innerHTML = dom.innerHTML;
     }
 
     targetElement.tree = tree;
+    updateTreeElementRefs(tree, targetElement);
     moveCursor(isFocused, alwaysMoveCursorToTheEnd, cursorPosition, targetElement);
   }
 

diff --git a/src/web/utils/treeUtils.ts b/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};