diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx index 230b11cd..d6edf7d8 100644 --- 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 index c2f7fd56..be7b4153 100644 --- 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 === '
' || (targetElement && targetElement.innerHTML === '\n')) { targetElement.innerHTML = ''; diff --git a/src/web/treeUtils.ts b/src/web/treeUtils.ts index f0315be7..9a9e4e20 100644 --- 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 & { +type TreeNode = Omit & { 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};