Add selection variables to web implementation

example/src/App.tsx

@@ -62,6 +62,7 @@ function getRandomColor() {
 export default function App() {
   const [value, setValue] = React.useState(DEFAULT_TEXT);
   const [markdownStyle, setMarkdownStyle] = React.useState({});
+  const [selection, setSelection] = React.useState({start: 0, end: 0});
 
   // TODO: use MarkdownTextInput ref instead of TextInput ref
   const ref = React.useRef<TextInput>(null);
@@ -98,6 +99,8 @@ export default function App() {
         ref={ref}
         markdownStyle={markdownStyle}
         placeholder="Type here..."
+        onSelectionChange={(e) => setSelection(e.nativeEvent.selection)}
+        selection={selection}
       />
       {/* <Text>TextInput singleline</Text>
       <TextInput
@@ -154,6 +157,16 @@ export default function App() {
           })
         }
       />
+      <Button
+        title="Change selection"
+        onPress={() => {
+          if (!ref.current) {
+            return;
+          }
+          ref.current.focus();
+          setSelection({start: 0, end: 20});
+        }}
+      />
     </View>
   );
 }

src/MarkdownTextInput.web.tsx

@@ -150,6 +150,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
       placeholderTextColor = `rgba(0,0,0,0.2)`,
       selectTextOnFocus,
       spellCheck,
+      selection,
       style = {},
       value,
       autoFocus = false,
@@ -159,7 +160,8 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
     const compositionRef = useRef<boolean>(false);
     const divRef = useRef<HTMLDivElement | null>(null);
     const currentlyFocusedField = useRef<HTMLDivElement | null>(null);
-    const contentSelection = useRef<Selection | null>(null);
+    const valueLength = value ? value.length : 0;
+    const contentSelection = useRef<Selection>({start: valueLength, end: valueLength});
     const className = `react-native-live-markdown-input-${multiline ? 'multiline' : 'singleline'}`;
     const history = useRef<InputHistory>();
     if (!history.current) {
@@ -171,15 +173,18 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
     // Empty placeholder would collapse the div, so we need to use zero-width space to prevent it
     const heightSafePlaceholder = useMemo(() => getPlaceholderValue(placeholder), [placeholder]);
 
-    const updateSelection = useCallback(() => {
-      if (!divRef.current) {
-        return;
+    const setEventProps = useCallback((e: NativeSyntheticEvent<any>) => {
+      if (divRef.current) {
+        const text = normalizeValue(divRef.current.innerText || '');
+        if (e.target) {
+          // TODO: change the logic here so every event have value property
+          (e.target as unknown as HTMLInputElement).value = text;
+        }
+        if (e.nativeEvent && e.nativeEvent.text) {
+          e.nativeEvent.text = text;
+        }
       }
-      const selection = CursorUtils.getCurrentCursorPosition(divRef.current);
-      const markdownHTMLInput = divRef.current as HTMLInputElement;
-      markdownHTMLInput.selectionStart = selection.start;
-      markdownHTMLInput.selectionEnd = selection.end;
-      contentSelection.current = selection;
+      return e;
     }, []);
 
     const parseText = useCallback(
@@ -192,8 +197,6 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
           history.current.debouncedAdd(parsedText.text, parsedText.cursorPosition);
         }
 
-        updateSelection();
-
         return parsedText;
       },
       [multiline],
@@ -246,18 +249,6 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
       return value;
     }, [value]);
 
-    const setEventProps = useCallback((e: NativeSyntheticEvent<any>) => {
-      if (divRef.current) {
-        const text = normalizeValue(divRef.current.innerText || '');
-        if (typeof e.target !== 'number') {
-          // TODO: change the logic here so every event have value property
-          (e.target as unknown as HTMLInputElement).value = text;
-        }
-        e.nativeEvent.text = text;
-      }
-      return e;
-    }, []);
-
     // Placeholder text color logic
     const updateTextColor = useCallback((node: HTMLDivElement, text: string) => {
       // eslint-disable-next-line no-param-reassign -- we need to change the style of the node, so we need to modify it
@@ -304,6 +295,41 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
       [multiline, onChange, onChangeText, setEventProps, processedMarkdownStyle],
     );
 
+    const handleSelectionChange: ReactEventHandler<HTMLDivElement> = useCallback(
+      (event) => {
+        const e = event as unknown as NativeSyntheticEvent<TextInputSelectionChangeEventData>;
+        setEventProps(e);
+        if (onSelectionChange && contentSelection.current) {
+          e.nativeEvent.selection = contentSelection.current;
+          onSelectionChange(e);
+        }
+      },
+      [onSelectionChange, setEventProps],
+    );
+
+    const updateRefSelectionVariables = useCallback((newSelection: Selection) => {
+      const {start, end} = newSelection;
+      const markdownHTMLInput = divRef.current as HTMLInputElement;
+      markdownHTMLInput.selectionStart = start;
+      markdownHTMLInput.selectionEnd = end;
+    }, []);
+
+    const updateSelection = useCallback((e: SyntheticEvent<HTMLDivElement> | null = null) => {
+      if (!divRef.current) {
+        return;
+      }
+      const newSelection = CursorUtils.getCurrentCursorPosition(divRef.current);
+
+      if (newSelection && (contentSelection.current.start !== newSelection.start || contentSelection.current.end !== newSelection.end)) {
+        updateRefSelectionVariables(newSelection);
+        contentSelection.current = newSelection;
+
+        if (e) {
+          handleSelectionChange(e);
+        }
+      }
+    }, []);
+
     const handleKeyPress = useCallback(
       (e: KeyboardEvent<HTMLDivElement>) => {
         if (!divRef.current) {
@@ -338,6 +364,8 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
           onKeyPress(event);
         }
 
+        updateSelection(event as unknown as SyntheticEvent<HTMLDivElement, Event>);
+
         if (
           e.key === 'Enter' &&
           !e.shiftKey &&
@@ -366,27 +394,14 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
       [onKeyPress],
     );
 
-    const handleSelectionChange: ReactEventHandler<HTMLDivElement> = useCallback(
-      (event) => {
-        const e = event as unknown as NativeSyntheticEvent<TextInputSelectionChangeEventData>;
-        setEventProps(e);
-        updateSelection();
-        if (onSelectionChange && contentSelection.current) {
-          e.nativeEvent.selection = contentSelection.current;
-          onSelectionChange(e);
-        }
-      },
-      [onSelectionChange, setEventProps],
-    );
-
     const handleFocus: FocusEventHandler<HTMLDivElement> = useCallback(
       (event) => {
         const e = event as unknown as NativeSyntheticEvent<TextInputFocusEventData>;
         const hostNode = e.target as unknown as HTMLDivElement;
         currentlyFocusedField.current = hostNode;
         setEventProps(e);
         if (divRef.current && contentSelection.current) {
-          CursorUtils.setCursorPosition(divRef.current, contentSelection.current.start || divRef.current.innerText.length, !multiline);
+          CursorUtils.setCursorPosition(divRef.current, contentSelection.current.end || contentSelection.current.start);
         }
 
         if (onFocus) {
@@ -418,6 +433,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
     const handleBlur: FocusEventHandler<HTMLDivElement> = useCallback(
       (event) => {
         const e = event as unknown as NativeSyntheticEvent<TextInputFocusEventData>;
+        CursorUtils.removeSelection();
         currentlyFocusedField.current = null;
         if (onBlur) {
           setEventProps(e);
@@ -429,7 +445,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
 
     const handleClick = useCallback(
       (e: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
-        updateSelection();
+        updateSelection(e);
         if (!onClick || !divRef.current) {
           return;
         }
@@ -439,6 +455,10 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
       [onClick],
     );
 
+    const startComposition = useCallback(() => {
+      compositionRef.current = true;
+    }, []);
+
     const setRef = (currentRef: HTMLDivElement | null) => {
       const r = currentRef;
       if (r) {
@@ -514,16 +534,23 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
     }, []);
 
     useEffect(() => {
-      // focus the input on mount if autoFocus is set
-      if (!(divRef.current && autoFocus)) {
+      if (!divRef.current) {
         return;
       }
-      divRef.current.focus();
+      // focus the input on mount if autoFocus is set
+      if (autoFocus) {
+        divRef.current.focus();
+      }
+      updateRefSelectionVariables(contentSelection.current);
     }, []);
 
-    const startComposition = useCallback(() => {
-      compositionRef.current = true;
-    }, []);
+    useEffect(() => {
+      if (!divRef.current || !selection || (selection.start === contentSelection.current.start && selection.end === contentSelection.current.end)) {
+        return;
+      }
+      CursorUtils.setCursorPosition(divRef.current, selection.start, selection.end);
+      updateSelection();
+    }, [selection]);
 
     return (
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -543,7 +570,6 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
         onCompositionStart={startComposition}
         onKeyUp={updateSelection}
         onInput={handleOnChangeText}
-        onSelect={handleSelectionChange}
         onClick={handleClick}
         onFocus={handleFocus}
         onBlur={handleBlur}
@@ -564,8 +590,8 @@ const styles = StyleSheet.create({
     // @ts-expect-error it works on web
     boxSizing: 'border-box',
     whiteSpace: 'pre-wrap',
-    overflowY: 'scroll',
-    overflowX: 'scroll',
+    overflowY: 'auto',
+    overflowX: 'auto',
     overflowWrap: 'break-word',
   },
   disabledInputStyles: {

src/web/cursorUtils.ts

@@ -1,46 +1,53 @@
-function createRange(node: HTMLElement, targetPosition: number, ignoreNewLines = false) {
+function findTextNodes(textNodes: Text[], node: ChildNode) {
+  if (node.nodeType === Node.TEXT_NODE) {
+    textNodes.push(node as Text);
+  } else {
+    for (let i = 0, length = node.childNodes.length; i < length; ++i) {
+      const childNode = node.childNodes[i];
+      if (childNode) {
+        findTextNodes(textNodes, childNode);
+      }
+    }
+  }
+}
+
+function setCursorPosition(target: HTMLElement, start: number, end: number | null = null) {
   const range = document.createRange();
-  range.selectNode(node);
+  range.selectNodeContents(target);
 
-  let pos = 0;
-  const stack: Node[] = [node];
-  while (stack.length > 0) {
-    const current = stack.pop();
-    if (!current) {
-      break;
-    }
-    if (current.nodeType === Node.TEXT_NODE || current.nodeName === 'BR') {
-      const textContentLength = current.textContent ? current.textContent.length : 0;
-      const len = current.nodeName === 'BR' ? 1 : textContentLength;
-      if (pos + len >= targetPosition) {
-        if (current.nodeName === 'BR') {
-          range.setStartAfter(current);
-          (current as HTMLElement).scrollIntoView();
-        } else {
-          range.setStart(current, targetPosition - pos);
+  const textNodes: Text[] = [];
+  findTextNodes(textNodes, target);
+
+  let charCount = 0;
+  let startNode: Text | null = null;
+  let endNode: Text | null = null;
+  const n = textNodes.length;
+  for (let i = 0; i < n; ++i) {
+    const textNode = textNodes[i];
+    if (textNode) {
+      const nextCharCount = charCount + textNode.length;
+
+      if (!startNode && start >= charCount && (start <= nextCharCount || (start === nextCharCount && i < n - 1))) {
+        startNode = textNode;
+        range.setStart(textNode, start - charCount);
+        if (!end) {
+          break;
         }
-        return range;
       }
-      pos += len;
-    } else if (current.childNodes && current.childNodes.length > 0) {
-      for (let i = current.childNodes.length - 1; i >= 0; i--) {
-        const currentNode = current.childNodes[i];
-        if (currentNode && (!ignoreNewLines || (ignoreNewLines && currentNode.nodeName !== 'BR'))) {
-          stack.push(currentNode);
-        }
+      if (end && !endNode && end >= charCount && (end <= nextCharCount || (end === nextCharCount && i < n - 1))) {
+        endNode = textNode;
+        range.setEnd(textNode, end - charCount);
       }
+      charCount = nextCharCount;
     }
   }
 
-  range.setStart(node, node.childNodes.length);
-  return range;
-}
+  if (!end) {
+    range.collapse(true);
+  }
 
-function setCursorPosition(target: HTMLElement, targetPosition: number, ignoreNewLines = false) {
-  const range = createRange(target, targetPosition, ignoreNewLines);
   const selection = window.getSelection();
   if (selection) {
-    range.collapse(true);
     selection.removeAllRanges();
     selection.addRange(range);
   }
@@ -57,31 +64,25 @@ function moveCursorToEnd(target: HTMLElement) {
   }
 }
 
-function getIndexedPosition(target: HTMLElement, range: Range, isStart: boolean) {
-  const marker = document.createTextNode('\0');
-  const rangeClone = range.cloneRange();
-
-  rangeClone.collapse(isStart);
-
-  rangeClone.insertNode(marker);
-  const position = target.innerText.indexOf('\0');
-  if (marker.parentNode) {
-    marker.parentNode.removeChild(marker);
-  }
-
-  return position;
-}
-
 function getCurrentCursorPosition(target: HTMLElement) {
-  const selection = document.getSelection();
-  if (!selection || selection.rangeCount === 0) {
-    return {start: target.innerText.length, end: target.innerText.length};
+  const selection = window.getSelection();
+  if (!selection || (selection && selection.rangeCount === 0)) {
+    return null;
   }
-
   const range = selection.getRangeAt(0);
-  const start = getIndexedPosition(target, range, true);
-  const end = getIndexedPosition(target, range, false);
+  const preSelectionRange = range.cloneRange();
+  preSelectionRange.selectNodeContents(target);
+  preSelectionRange.setEnd(range.startContainer, range.startOffset);
+  const start = preSelectionRange.toString().length;
+  const end = start + range.toString().length;
   return {start, end};
 }
 
-export {getCurrentCursorPosition, moveCursorToEnd, setCursorPosition};
+function removeSelection() {
+  const selection = window.getSelection();
+  if (selection) {
+    selection.removeAllRanges();
+  }
+}
+
+export {getCurrentCursorPosition, moveCursorToEnd, setCursorPosition, removeSelection};