@expensify/react-native-live-markdown 0.1.157 → 0.1.159

package/src/MarkdownTextInput.web.tsx

@@ -112,6 +112,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
     const history = useRef<InputHistory>();
     const dimensions = useRef<Dimensions | null>(null);
     const pasteContent = useRef<string | null>(null);
+    const hasJustBeenFocused = useRef<boolean>(false);
 
     if (!history.current) {
       history.current = new InputHistory(100, 150, value || '');
@@ -144,6 +145,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
         cursorPosition: number | null = null,
         shouldAddToHistory = true,
         shouldForceDOMUpdate = false,
+        shouldScrollIntoView = false,
       ): ParseTextResult => {
         if (!divRef.current) {
           return {text: text || '', cursorPosition: null};
@@ -152,7 +154,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
         if (text === null) {
           return {text: divRef.current.value, cursorPosition: null};
         }
-        const parsedText = updateInputStructure(target, text, cursorPosition, multiline, customMarkdownStyles, false, shouldForceDOMUpdate);
+        const parsedText = updateInputStructure(target, text, cursorPosition, multiline, customMarkdownStyles, false, shouldForceDOMUpdate, shouldScrollIntoView);
         divRef.current.value = parsedText.text;
 
         if (history.current && shouldAddToHistory) {
@@ -262,6 +264,19 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
       [handleSelectionChange, updateRefSelectionVariables],
     );
 
+    const handleOnSelect = useCallback(
+      (e) => {
+        updateSelection(e);
+
+        // If the input has just been focused, we need to scroll the cursor into view
+        if (divRef.current && contentSelection.current && hasJustBeenFocused.current) {
+          setCursorPosition(divRef.current, contentSelection.current?.start, contentSelection.current?.end, true);
+          hasJustBeenFocused.current = false;
+        }
+      },
+      [updateSelection],
+    );
+
     const handleContentSizeChange = useCallback(() => {
       if (!divRef.current || !multiline || !onContentSizeChange) {
         return;
@@ -311,6 +326,9 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
             end: newCursorPosition,
           });
           divRef.current.value = parsedText;
+          if (onChangeText) {
+            onChangeText(parsedText);
+          }
           return;
         }
 
@@ -323,7 +341,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
             newInputUpdate = redo(divRef.current);
             break;
           default:
-            newInputUpdate = parseText(divRef.current, parsedText, processedMarkdownStyle, newCursorPosition, true, !inputType);
+            newInputUpdate = parseText(divRef.current, parsedText, processedMarkdownStyle, newCursorPosition, true, !inputType, inputType === 'pasteText');
         }
         const {text, cursorPosition} = newInputUpdate;
         updateTextColor(divRef.current, text);
@@ -457,6 +475,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
 
     const handleFocus: FocusEventHandler<HTMLDivElement> = useCallback(
       (event) => {
+        hasJustBeenFocused.current = true;
         const e = event as unknown as NativeSyntheticEvent<TextInputFocusEventData>;
         const hostNode = e.target as unknown as HTMLDivElement;
         currentlyFocusedField.current = hostNode;
@@ -465,11 +484,17 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
           if (contentSelection.current) {
             setCursorPosition(divRef.current, contentSelection.current.start, contentSelection.current.end);
           } else {
-            const valueLength = value ? value.length : divRef.current.value.length;
+            const valueLength = value ? value.length : (divRef.current.value || '').length;
             setCursorPosition(divRef.current, valueLength, null);
           }
         }
 
+        if (divRef.current) {
+          divRef.current.scrollIntoView({
+            block: 'nearest',
+          });
+        }
+
         if (onFocus) {
           setEventProps(e);
           onFocus(e);
@@ -613,7 +638,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
         }
         const normalizedValue = normalizeValue(value);
         divRef.current.value = normalizedValue;
-        parseText(divRef.current, normalizedValue, processedMarkdownStyle);
+        parseText(divRef.current, normalizedValue, processedMarkdownStyle, null, true, false, true);
         updateTextColor(divRef.current, value);
       },
       [multiline, processedMarkdownStyle, value],
@@ -697,7 +722,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
         spellCheck={spellCheck}
         dir={dir}
         inputMode={inputMode}
-        onSelect={updateSelection}
+        onSelect={handleOnSelect}
         onTouchStart={handleTouchStart}
       />
     );

package/src/web/inputElements/inlineImage.ts

@@ -95,7 +95,7 @@ function createImageElement(currentInput: MarkdownTextInputElement, targetNode:
   if (timeoutMap.has(targetNode.orderIndex)) {
     const mapItem = timeoutMap.get(targetNode.orderIndex);
     // Check if the image URL has been changed, if not, early return so the image can be loaded asynchronously
-    const currentElement = document.querySelector(`[data-type="block"][data-id="${targetNode.orderIndex}"]`) as HTMLMarkdownElement;
+    const currentElement = currentInput.querySelector(`[data-type="block"][data-id="${targetNode.orderIndex}"]`) as HTMLMarkdownElement;
     if (mapItem?.url === url && currentElement && getImagePreviewElement(currentElement)) {
       return;
     }

package/src/web/utils/cursorUtils.ts

@@ -2,7 +2,7 @@ import type {MarkdownTextInputElement} from '../../MarkdownTextInput.web';
 import {findHTMLElementInTree, getTreeNodeByIndex} from './treeUtils';
 import type {TreeNode} from './treeUtils';
 
-function setCursorPosition(target: MarkdownTextInputElement, startIndex: number, endIndex: number | null = null) {
+function setCursorPosition(target: MarkdownTextInputElement, startIndex: number, endIndex: number | null = null, shouldScrollIntoView = false) {
   // We don't want to move the cursor if the target is not focused
   if (!target.tree || target !== document.activeElement) {
     return;
@@ -45,16 +45,31 @@ function setCursorPosition(target: MarkdownTextInputElement, startIndex: number,
     selection.setBaseAndExtent(range.startContainer, range.startOffset, range.endContainer, range.endOffset);
   }
 
-  scrollIntoView(startTreeNode);
+  if (shouldScrollIntoView) {
+    scrollIntoView(target, endTreeNode);
+  }
 }
 
-function scrollIntoView(node: TreeNode) {
+function scrollIntoView(target: MarkdownTextInputElement, node: TreeNode) {
+  const targetElement = target;
   if (node.type === 'br' && node.parentNode?.parentNode?.type === 'line') {
     // If the node is a line break, scroll to the parent paragraph, because Safari doesn't support scrollIntoView on br elements
     node.parentNode.parentNode.element.scrollIntoView({
       block: 'nearest',
     });
   } else {
+    const selection = window.getSelection();
+    if (selection && selection.rangeCount > 0) {
+      const range = selection.getRangeAt(0);
+      const caretRect = range.getBoundingClientRect();
+      const targetRect = target.getBoundingClientRect();
+
+      // In case the caret is below the visible input area, scroll to the end of the node
+      if (caretRect.top + caretRect.height > targetRect.top + targetRect.height) {
+        targetElement.scrollTop = caretRect.top + caretRect.height - targetRect.top - targetRect.height + target.scrollTop;
+      }
+    }
+
     node.element.scrollIntoView({
       block: 'nearest',
     });

package/src/web/utils/parserUtils.ts

@@ -1,5 +1,5 @@
 import type {HTMLMarkdownElement, MarkdownTextInputElement} from '../../MarkdownTextInput.web';
-import {addNodeToTree, updateTreeElementRefs} from './treeUtils';
+import {addNodeToTree, createRootTreeNode, updateTreeElementRefs} from './treeUtils';
 import type {NodeType, TreeNode} from './treeUtils';
 import type {PartialMarkdownStyle} from '../../styleUtils';
 import {getCurrentCursorPosition, moveCursorToEnd, setCursorPosition} from './cursorUtils';
@@ -154,16 +154,8 @@ function parseRangesToHTMLNodes(
 ) {
   const rootElement: HTMLMarkdownElement = document.createElement('span') as HTMLMarkdownElement;
   const textLength = text.length;
-  const rootNode: TreeNode = {
-    element: rootElement,
-    start: 0,
-    length: textLength,
-    parentNode: null,
-    childNodes: [],
-    type: 'root',
-    orderIndex: '',
-    isGeneratingNewline: false,
-  };
+  const rootNode: TreeNode = createRootTreeNode(rootElement, textLength);
+
   let currentParentNode: TreeNode = rootNode;
   let lines = splitTextIntoLines(text);
 
@@ -266,7 +258,7 @@ function parseRangesToHTMLNodes(
   return {dom: rootElement, tree: rootNode};
 }
 
-function moveCursor(isFocused: boolean, alwaysMoveCursorToTheEnd: boolean, cursorPosition: number | null, target: MarkdownTextInputElement) {
+function moveCursor(isFocused: boolean, alwaysMoveCursorToTheEnd: boolean, cursorPosition: number | null, target: MarkdownTextInputElement, shouldScrollIntoView = false) {
   if (!isFocused) {
     return;
   }
@@ -274,7 +266,7 @@ function moveCursor(isFocused: boolean, alwaysMoveCursorToTheEnd: boolean, curso
   if (alwaysMoveCursorToTheEnd || cursorPosition === null) {
     moveCursorToEnd(target);
   } else if (cursorPosition !== null) {
-    setCursorPosition(target, cursorPosition);
+    setCursorPosition(target, cursorPosition, null, shouldScrollIntoView);
   }
 }
 
@@ -286,6 +278,7 @@ function updateInputStructure(
   markdownStyle: PartialMarkdownStyle = {},
   alwaysMoveCursorToTheEnd = false,
   shouldForceDOMUpdate = false,
+  shouldScrollIntoView = false,
 ) {
   const targetElement = target;
 
@@ -317,7 +310,9 @@ function updateInputStructure(
     updateTreeElementRefs(tree, targetElement);
     targetElement.tree = tree;
 
-    moveCursor(isFocused, alwaysMoveCursorToTheEnd, cursorPosition, targetElement);
+    moveCursor(isFocused, alwaysMoveCursorToTheEnd, cursorPosition, targetElement, shouldScrollIntoView);
+  } else {
+    targetElement.tree = createRootTreeNode(targetElement);
   }
 
   return {text, cursorPosition: cursorPosition || 0};

package/src/web/utils/treeUtils.ts

@@ -12,6 +12,19 @@ type TreeNode = Omit<MarkdownRange, 'type'> & {
   isGeneratingNewline: boolean;
 };
 
+function createRootTreeNode(target: HTMLMarkdownElement, length = 0): TreeNode {
+  return {
+    element: target,
+    start: 0,
+    length,
+    parentNode: null,
+    childNodes: [],
+    type: 'root',
+    orderIndex: '',
+    isGeneratingNewline: false,
+  };
+}
+
 function addNodeToTree(element: HTMLMarkdownElement, parentTreeNode: TreeNode, type: NodeType, length: number | null = null) {
   const contentLength = length || (element.nodeName === 'BR' || type === 'br' ? 1 : element.value?.length) || 0;
   const isGeneratingNewline = type === 'line' && !(element.childNodes.length === 1 && (element.childNodes[0] as HTMLElement)?.getAttribute?.('data-type') === 'br');
@@ -115,6 +128,6 @@ function getTreeNodeByIndex(treeRoot: TreeNode, index: number): TreeNode | null
   return null;
 }
 
-export {addNodeToTree, findHTMLElementInTree, getTreeNodeByIndex, updateTreeElementRefs};
+export {addNodeToTree, findHTMLElementInTree, getTreeNodeByIndex, updateTreeElementRefs, createRootTreeNode};
 
 export type {TreeNode, NodeType};