Clean up treeUtils

Expensify · Jun 20, 2024 · 7d5c4d2 · 7d5c4d2
1 parent c9b802d
commit 7d5c4d2
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 32 deletions.
diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx
@@ -81,7 +81,7 @@ let focusTimeout: NodeJS.Timeout | null = null;
 
 type MarkdownTextInputElement = HTMLDivElement &
   HTMLInputElement & {
-    tree: TreeUtilsTypes.TreeItem;
+    tree: TreeUtilsTypes.TreeNode;
   };
 
 // If an Input Method Editor is processing key input, the 'keyCode' is 229.

diff --git a/src/web/parserUtils.ts b/src/web/parserUtils.ts
@@ -5,7 +5,7 @@ import * as TreeUtils from './treeUtils';
 import type * as TreeUtilsTypes from './treeUtils';
 
 type PartialMarkdownStyle = StyleUtilsTypes.PartialMarkdownStyle;
-type TreeItem = TreeUtilsTypes.TreeItem;
+type TreeNode = TreeUtilsTypes.TreeNode;
 
 type MarkdownType = 'bold' | 'italic' | 'strikethrough' | 'emoji' | 'link' | 'code' | 'pre' | 'blockquote' | 'h1' | 'syntax' | 'mention-here' | 'mention-user' | 'mention-report';
 
@@ -334,7 +334,7 @@ function parseText(target: HTMLElement, text: string, cursorPositionIndex: numbe
   }
   const ranges = global.parseExpensiMarkToRanges(text);
   const markdownRanges: MarkdownRange[] = ranges as MarkdownRange[];
-  let tree: TreeItem | null = null;
+  let tree: TreeNode | null = null;
 
   if (!text || targetElement.innerHTML === '<br>' || (targetElement && targetElement.innerHTML === '\n')) {
     targetElement.innerHTML = '';

diff --git a/src/web/treeUtils.ts b/src/web/treeUtils.ts
@@ -6,43 +6,41 @@ type MarkdownRange = ParserUtilsTypes.MarkdownRange;
 
 type ElementType = MarkdownType | 'line' | 'text' | 'br';
 
-type TreeItem = Omit<MarkdownRange, 'type'> & {
+type TreeNode = Omit<MarkdownRange, 'type'> & {
   element: HTMLElement;
-  parent: TreeItem | null;
-  children: TreeItem[];
-  relativeStart: number;
+  parentNode: TreeNode | null;
+  childNodes: TreeNode[];
   type: ElementType;
   orderIndex: string;
   isGeneratingNewline: boolean;
 };
 
-function addItemToTree(element: HTMLElement, parentTreeItem: TreeItem, type: ElementType) {
+function addItemToTree(element: HTMLElement, parentTreeNode: TreeNode, type: ElementType) {
   const contentLength = element.nodeName === 'BR' ? 1 : element.innerText.length;
   const isGeneratingNewline = type === 'line' && !(element.childNodes.length === 1 && element.childNodes[0]?.getAttribute('data-type') === 'br');
-  const parentChildrenCount = parentTreeItem?.children.length || 0;
-  let startIndex = parentTreeItem.start;
+  const parentChildrenCount = parentTreeNode?.childNodes.length || 0;
+  let startIndex = parentTreeNode.start;
   if (parentChildrenCount > 0) {
-    const lastParentChild = parentTreeItem.children[parentChildrenCount - 1];
+    const lastParentChild = parentTreeNode.childNodes[parentChildrenCount - 1];
     if (lastParentChild) {
       startIndex = lastParentChild.start + lastParentChild.length;
       startIndex += lastParentChild.isGeneratingNewline ? 1 : 0;
     }
   }
 
-  const item: TreeItem = {
+  const item: TreeNode = {
     element,
-    parent: parentTreeItem,
-    children: [],
-    relativeStart: startIndex - (parentTreeItem?.start || 0),
+    parentNode: parentTreeNode,
+    childNodes: [],
     start: startIndex,
     length: contentLength,
     type,
-    orderIndex: parentTreeItem.parent === null ? `${parentChildrenCount}` : `${parentTreeItem.orderIndex},${parentChildrenCount}`,
+    orderIndex: parentTreeNode.parentNode === null ? `${parentChildrenCount}` : `${parentTreeNode.orderIndex},${parentChildrenCount}`,
     isGeneratingNewline,
   };
 
   element.setAttribute('data-id', item.orderIndex);
-  parentTreeItem.children.push(item);
+  parentTreeNode.childNodes.push(item);
   return item;
 }
 
@@ -57,11 +55,10 @@ function buildTree(rootElement: HTMLElement, text: string) {
 
     return (element.getAttribute('data-type') as ElementType) || 'text';
   }
-  const rootTreeItem: TreeItem = {
+  const rootTreeItem: TreeNode = {
     element: rootElement,
-    parent: null,
-    children: [],
-    relativeStart: 0,
+    parentNode: null,
+    childNodes: [],
     start: 0,
     length: text.replace(/\n/g, '\\n').length,
     type: 'text',
@@ -84,7 +81,7 @@ function buildTree(rootElement: HTMLElement, text: string) {
   return rootTreeItem;
 }
 
-function findElementInTree(treeRoot: TreeItem, element: HTMLElement) {
+function findElementInTree(treeRoot: TreeNode, element: HTMLElement) {
   if (element.hasAttribute('contenteditable')) {
     return treeRoot;
   }
@@ -93,7 +90,7 @@ function findElementInTree(treeRoot: TreeItem, element: HTMLElement) {
     return;
   }
   const indexes = element.getAttribute('data-id')?.split(',');
-  let el: TreeItem | null = treeRoot;
+  let el: TreeNode | null = treeRoot;
 
   while (el && indexes && indexes.length > 0) {
     const index = Number(indexes.shift() || -1);
@@ -102,38 +99,38 @@ function findElementInTree(treeRoot: TreeItem, element: HTMLElement) {
     }
 
     if (el) {
-      el = el.children[index] || null;
+      el = el.childNodes[index] || null;
     }
   }
 
   return el;
 }
 
-function getElementByIndex(treeRoot: TreeItem, index: number) {
-  let el: TreeItem | null = treeRoot;
+function getElementByIndex(treeRoot: TreeNode, index: number) {
+  let el: TreeNode | null = treeRoot;
 
   let i = 0;
   let newLineGenerated = false;
-  while (el && el.children.length > 0 && i < el.children.length) {
-    const child = el.children[i] as TreeItem;
+  while (el && el.childNodes.length > 0 && i < el.childNodes.length) {
+    const child = el.childNodes[i] as TreeNode;
 
     if (!child) {
       break;
     }
 
     if (index >= child.start && index < child.start + child.length) {
-      if (child.children.length === 0) {
+      if (child.childNodes.length === 0) {
         return child;
       }
       el = child;
       i = 0;
     } else if ((child.isGeneratingNewline || newLineGenerated) && index === child.start + child.length) {
       newLineGenerated = true;
-      if (child.children.length === 0) {
+      if (child.childNodes.length === 0) {
         return child;
       }
       el = child;
-      i = el.children.length - 1;
+      i = el.childNodes.length - 1;
     } else {
       i++;
     }
@@ -143,4 +140,4 @@ function getElementByIndex(treeRoot: TreeItem, index: number) {
 
 export {addItemToTree, findElementInTree, getElementByIndex, buildTree};
 
-export type {TreeItem};
+export type {TreeNode};