@expensify/react-native-live-markdown 0.1.116 → 0.1.118

package/src/MarkdownTextInput.web.tsx

@@ -11,48 +11,21 @@ import type {
   TextInputContentSizeChangeEventData,
 } from 'react-native';
 import React, {useEffect, useRef, useCallback, useMemo, useLayoutEffect} from 'react';
-import type {CSSProperties, MutableRefObject, ReactEventHandler, FocusEventHandler, MouseEvent, KeyboardEvent, SyntheticEvent} from 'react';
+import type {CSSProperties, MutableRefObject, ReactEventHandler, FocusEventHandler, MouseEvent, KeyboardEvent, SyntheticEvent, ClipboardEventHandler} from 'react';
 import {StyleSheet} from 'react-native';
-import * as ParseUtils from './web/parserUtils';
-import * as CursorUtils from './web/cursorUtils';
-import * as StyleUtils from './styleUtils';
-import type * as MarkdownTextInputDecoratorViewNativeComponent from './MarkdownTextInputDecoratorViewNativeComponent';
-import './web/MarkdownTextInput.css';
+import {updateInputStructure} from './web/utils/parserUtils';
 import InputHistory from './web/InputHistory';
+import type {TreeNode} from './web/utils/treeUtils';
+import {getCurrentCursorPosition, removeSelection, setCursorPosition} from './web/utils/cursorUtils';
+import './web/MarkdownTextInput.css';
+import type {MarkdownStyle} from './MarkdownTextInputDecoratorViewNativeComponent';
+import {getElementHeight, getPlaceholderValue, isEventComposing, normalizeValue, parseInnerHTMLToText} from './web/utils/inputUtils';
+import {parseToReactDOMStyle, processMarkdownStyle} from './web/utils/webStyleUtils';
 
 require('../parser/react-native-live-markdown-parser.js');
 
 const useClientEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
 
-let createReactDOMStyle: (style: any) => any;
-try {
-  createReactDOMStyle =
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    require('react-native-web/dist/exports/StyleSheet/compiler/createReactDOMStyle').default;
-} catch (e) {
-  throw new Error('[react-native-live-markdown] Function `createReactDOMStyle` from react-native-web not found. Please make sure that you are using React Native Web 0.18 or newer.');
-}
-
-let preprocessStyle: (style: any) => any;
-try {
-  preprocessStyle =
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    require('react-native-web/dist/exports/StyleSheet/preprocess').default;
-} catch (e) {
-  throw new Error('[react-native-live-markdown] Function `preprocessStyle` from react-native-web not found.');
-}
-
-let dangerousStyleValue: (name: string, value: any, isCustomProperty: boolean) => any;
-try {
-  dangerousStyleValue =
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    require('react-native-web/dist/modules/setValueForStyles/dangerousStyleValue').default;
-} catch (e) {
-  throw new Error('[react-native-live-markdown] Function `dangerousStyleValue` from react-native-web not found.');
-}
-
-type MarkdownStyle = MarkdownTextInputDecoratorViewNativeComponent.MarkdownStyle;
-
 interface MarkdownTextInputProps extends TextInputProps {
   markdownStyle?: MarkdownStyle;
   onClick?: (e: MouseEvent<HTMLDivElement>) => void;
@@ -81,62 +54,14 @@ type ParseTextResult = {
 
 let focusTimeout: NodeJS.Timeout | null = null;
 
-// Removes one '\n' from the end of the string that were added by contentEditable div
-function normalizeValue(value: string) {
-  return value.replace(/\n$/, '');
-}
-// Adds one '\n' at the end of the string if it's missing
-function denormalizeValue(value: string) {
-  return value.endsWith('\n') ? `${value}\n` : value;
-}
-
-// If an Input Method Editor is processing key input, the 'keyCode' is 229.
-// https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode
-function isEventComposing(nativeEvent: globalThis.KeyboardEvent) {
-  return nativeEvent.isComposing || nativeEvent.keyCode === 229;
-}
+type MarkdownTextInputElement = HTMLDivElement &
+  HTMLInputElement & {
+    tree: TreeNode;
+  };
 
-const ZERO_WIDTH_SPACE = '\u200B';
-
-function getPlaceholderValue(placeholder: string | undefined) {
-  if (!placeholder) {
-    return ZERO_WIDTH_SPACE;
-  }
-  return placeholder.length ? placeholder : ZERO_WIDTH_SPACE;
-}
-
-function processUnitsInMarkdownStyle(input: MarkdownStyle): MarkdownStyle {
-  const output = JSON.parse(JSON.stringify(input));
-
-  Object.keys(output).forEach((key) => {
-    const obj = output[key];
-    Object.keys(obj).forEach((prop) => {
-      obj[prop] = dangerousStyleValue(prop, obj[prop], false);
-    });
-  });
-
-  return output as MarkdownStyle;
-}
-
-function processMarkdownStyle(input: MarkdownStyle | undefined): MarkdownStyle {
-  return processUnitsInMarkdownStyle(StyleUtils.mergeMarkdownStyleWithDefault(input));
-}
-
-function getElementHeight(node: HTMLDivElement, styles: CSSProperties, numberOfLines: number | undefined) {
-  if (numberOfLines) {
-    const tempElement = document.createElement('div');
-    tempElement.setAttribute('contenteditable', 'true');
-    Object.assign(tempElement.style, styles);
-    tempElement.innerText = Array(numberOfLines).fill('A').join('\n');
-    if (node.parentElement) {
-      node.parentElement.appendChild(tempElement);
-      const height = tempElement.clientHeight;
-      node.parentElement.removeChild(tempElement);
-      return height ? `${height}px` : 'auto';
-    }
-  }
-  return styles.height ? `${styles.height}px` : 'auto';
-}
+type HTMLMarkdownElement = HTMLElement & {
+  value: string;
+};
 
 const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
   (
@@ -176,13 +101,13 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
     ref,
   ) => {
     const compositionRef = useRef<boolean>(false);
-    const pasteRef = useRef<boolean>(false);
-    const divRef = useRef<HTMLDivElement | null>(null);
+    const divRef = useRef<MarkdownTextInputElement | null>(null);
     const currentlyFocusedField = useRef<HTMLDivElement | null>(null);
     const contentSelection = useRef<Selection | null>(null);
     const className = `react-native-live-markdown-input-${multiline ? 'multiline' : 'singleline'}`;
     const history = useRef<InputHistory>();
-    const dimensions = React.useRef<Dimensions | null>(null);
+    const dimensions = useRef<Dimensions | null>(null);
+    const pasteContent = useRef<string | null>(null);
 
     if (!history.current) {
       history.current = new InputHistory(100, 150, value || '');
@@ -195,7 +120,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
 
     const setEventProps = useCallback((e: NativeSyntheticEvent<any>) => {
       if (divRef.current) {
-        const text = normalizeValue(divRef.current.innerText || '');
+        const text = divRef.current.value;
         if (e.target) {
           // TODO: change the logic here so every event have value property
           (e.target as unknown as HTMLInputElement).value = text;
@@ -208,14 +133,26 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
     }, []);
 
     const parseText = useCallback(
-      (target: HTMLDivElement, text: string | null, customMarkdownStyles: MarkdownStyle, cursorPosition: number | null = null, shouldAddToHistory = true): ParseTextResult => {
+      (
+        target: MarkdownTextInputElement,
+        text: string | null,
+        customMarkdownStyles: MarkdownStyle,
+        cursorPosition: number | null = null,
+        shouldAddToHistory = true,
+        shouldForceDOMUpdate = false,
+      ): ParseTextResult => {
+        if (!divRef.current) {
+          return {text: text || '', cursorPosition: null};
+        }
+
         if (text === null) {
-          return {text: target.innerText, cursorPosition: null};
+          return {text: divRef.current.value, cursorPosition: null};
         }
-        const parsedText = ParseUtils.parseText(target, text, cursorPosition, customMarkdownStyles, !multiline);
+        const parsedText = updateInputStructure(target, text, cursorPosition, customMarkdownStyles, !multiline, shouldForceDOMUpdate);
+        divRef.current.value = parsedText.text;
+
         if (history.current && shouldAddToHistory) {
-          // We need to normalize the value before saving it to the history to prevent situations when additional new lines break the cursor position calculation logic
-          history.current.throttledAdd(normalizeValue(parsedText.text), parsedText.cursorPosition);
+          history.current.throttledAdd(parsedText.text, parsedText.cursorPosition);
         }
 
         return parsedText;
@@ -226,7 +163,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
     const processedMarkdownStyle = useMemo(() => {
       const newMarkdownStyle = processMarkdownStyle(markdownStyle);
       if (divRef.current) {
-        parseText(divRef.current, divRef.current.innerText, newMarkdownStyle, null, false);
+        parseText(divRef.current, divRef.current.value, newMarkdownStyle, null, false);
       }
       return newMarkdownStyle;
     }, [markdownStyle, parseText]);
@@ -239,13 +176,13 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
             caretColor: (flattenedStyle as TextStyle).color || 'black',
           },
           disabled && styles.disabledInputStyles,
-          createReactDOMStyle(preprocessStyle(flattenedStyle)),
+          parseToReactDOMStyle(flattenedStyle),
         ]) as CSSProperties,
       [flattenedStyle, disabled],
     );
 
     const undo = useCallback(
-      (target: HTMLDivElement): ParseTextResult => {
+      (target: MarkdownTextInputElement): ParseTextResult => {
         if (!history.current) {
           return {
             text: '',
@@ -253,14 +190,14 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
           };
         }
         const item = history.current.undo();
-        const undoValue = item ? denormalizeValue(item.text) : null;
+        const undoValue = item ? item.text : null;
         return parseText(target, undoValue, processedMarkdownStyle, item ? item.cursorPosition : null, false);
       },
       [parseText, processedMarkdownStyle],
     );
 
     const redo = useCallback(
-      (target: HTMLDivElement): ParseTextResult => {
+      (target: MarkdownTextInputElement): ParseTextResult => {
         if (!history.current) {
           return {
             text: '',
@@ -268,20 +205,12 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
           };
         }
         const item = history.current.redo();
-        const redoValue = item ? denormalizeValue(item.text) : null;
+        const redoValue = item ? item.text : null;
         return parseText(target, redoValue, processedMarkdownStyle, item ? item.cursorPosition : null, false);
       },
       [parseText, processedMarkdownStyle],
     );
 
-    // We have to process value property since contentEditable div adds one additional '\n' at the end of the text if we are entering new line
-    const processedValue = useMemo(() => {
-      if (value && value[value.length - 1] === '\n') {
-        return `${value}\n`;
-      }
-      return value;
-    }, [value]);
-
     // Placeholder text color logic
     const updateTextColor = useCallback(
       (node: HTMLDivElement, text: string) => {
@@ -315,7 +244,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
         if (!divRef.current) {
           return;
         }
-        const newSelection = predefinedSelection || CursorUtils.getCurrentCursorPosition(divRef.current);
+        const newSelection = predefinedSelection || getCurrentCursorPosition(divRef.current);
 
         if (newSelection && (!contentSelection.current || contentSelection.current.start !== newSelection.start || contentSelection.current.end !== newSelection.end)) {
           updateRefSelectionVariables(newSelection);
@@ -349,20 +278,31 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
 
     const handleOnChangeText = useCallback(
       (e: SyntheticEvent<HTMLDivElement>) => {
-        if (!divRef.current || !(e.target instanceof HTMLElement)) {
+        if (!divRef.current || !(e.target instanceof HTMLElement) || !contentSelection.current) {
           return;
         }
+        const nativeEvent = e.nativeEvent as MarkdownNativeEvent;
+        const inputType = nativeEvent.inputType;
+
+        updateTextColor(divRef.current, e.target.textContent ?? '');
+        const previousText = divRef.current.value;
+        const parsedText = normalizeValue(inputType === 'pasteText' ? pasteContent.current || '' : parseInnerHTMLToText(e.target as MarkdownTextInputElement));
+
+        if (pasteContent.current) {
+          pasteContent.current = null;
+        }
+
         const prevSelection = contentSelection.current ?? {start: 0, end: 0};
-        const prevTextLength = CursorUtils.getPrevTextLength() ?? 0;
-        const changedText = e.target.innerText;
+        const newCursorPosition = Math.max(Math.max(contentSelection.current.end, 0) + (parsedText.length - previousText.length), 0);
+
         if (compositionRef.current) {
-          updateTextColor(divRef.current, changedText);
+          divRef.current.value = parsedText;
+          compositionRef.current = false;
+          contentSelection.current.end = newCursorPosition;
           return;
         }
 
         let newInputUpdate: ParseTextResult;
-        const nativeEvent = e.nativeEvent as MarkdownNativeEvent;
-        const inputType = nativeEvent.inputType;
         switch (inputType) {
           case 'historyUndo':
             newInputUpdate = undo(divRef.current);
@@ -370,26 +310,15 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
           case 'historyRedo':
             newInputUpdate = redo(divRef.current);
             break;
-          case 'insertFromPaste':
-            // if there is no newline at the end of the copied text, contentEditable adds invisible <br> tag at the end of the text, so we need to normalize it
-            if (changedText.length > 2 && changedText[changedText.length - 2] !== '\n' && changedText[changedText.length - 1] === '\n') {
-              newInputUpdate = parseText(divRef.current, normalizeValue(changedText), processedMarkdownStyle);
-              break;
-            }
-            newInputUpdate = parseText(divRef.current, changedText, processedMarkdownStyle);
-            break;
           default:
-            newInputUpdate = parseText(divRef.current, changedText, processedMarkdownStyle);
+            newInputUpdate = parseText(divRef.current, parsedText, processedMarkdownStyle, newCursorPosition, true, !inputType);
         }
-
         const {text, cursorPosition} = newInputUpdate;
-        const normalizedText = normalizeValue(text);
-
-        if (pasteRef?.current) {
-          pasteRef.current = false;
-          updateSelection(e);
-        }
         updateTextColor(divRef.current, text);
+        updateSelection(e, {
+          start: cursorPosition ?? 0,
+          end: cursorPosition ?? 0,
+        });
 
         if (onChange) {
           const event = e as unknown as NativeSyntheticEvent<{
@@ -400,7 +329,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
           setEventProps(event);
 
           // The new text is between the prev start selection and the new end selection, can be empty
-          const addedText = normalizedText.slice(prevSelection.start, cursorPosition ?? 0);
+          const addedText = text.slice(prevSelection.start, cursorPosition ?? 0);
           // The length of the text that replaced the before text
           const count = addedText.length;
           // The start index of the replacement operation
@@ -411,7 +340,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
           let before = prevSelectionRange;
           if (prevSelectionRange === 0 && (inputType === 'deleteContentBackward' || inputType === 'deleteContentForward')) {
             // its possible the user pressed a delete key without a selection range, so we need to adjust the before value to have the length of the deleted text
-            before = prevTextLength - normalizedText.length;
+            before = previousText.length - text.length;
           }
 
           if (inputType === 'deleteContentBackward') {
@@ -429,12 +358,33 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
         }
 
         if (onChangeText) {
-          onChangeText(normalizedText);
+          onChangeText(text);
         }
 
         handleContentSizeChange();
       },
-      [updateTextColor, handleContentSizeChange, onChange, onChangeText, undo, redo, parseText, processedMarkdownStyle, updateSelection, setEventProps],
+      [updateTextColor, updateSelection, onChange, onChangeText, handleContentSizeChange, undo, redo, parseText, processedMarkdownStyle, setEventProps],
+    );
+
+    const insertText = useCallback(
+      (e: SyntheticEvent<HTMLDivElement, Event>, text: string) => {
+        if (!contentSelection.current || !divRef.current) {
+          return;
+        }
+
+        const previousText = divRef.current.value;
+        const newText = `${divRef.current.value.substring(0, contentSelection.current.start)}${text}${divRef.current.value.substring(contentSelection.current.end)}`;
+        if (previousText === newText) {
+          document.execCommand('delete');
+        }
+
+        pasteContent.current = newText;
+        (e.nativeEvent as MarkdownNativeEvent).inputType = 'pasteText';
+
+        handleOnChangeText(e);
+        updateSelection(e);
+      },
+      [handleOnChangeText, updateSelection],
     );
 
     const handleKeyPress = useCallback(
@@ -446,7 +396,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
         const hostNode = e.target;
         e.stopPropagation();
 
-        if (e.key === 'z' && e.metaKey) {
+        if (e.key === 'z' && (e.ctrlKey || e.metaKey)) {
           e.preventDefault();
           const nativeEvent = e.nativeEvent as unknown as MarkdownNativeEvent;
           if (e.shiftKey) {
@@ -486,16 +436,14 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
           } else if (multiline) {
             //   We need to change normal behavior of "Enter" key to insert a line breaks, to prevent wrapping contentEditable text in <div> tags.
             //  Thanks to that in every situation we have proper amount of new lines in our parsed text. Without it pressing enter in empty lines will add 2 more new lines.
-            document.execCommand('insertLineBreak');
-            CursorUtils.scrollCursorIntoView(divRef.current as HTMLInputElement);
+            insertText(e, '\n');
           }
-
           if (!e.shiftKey && ((shouldBlurOnSubmit && hostNode !== null) || !multiline)) {
             setTimeout(() => divRef.current && divRef.current.blur(), 0);
           }
         }
       },
-      [multiline, blurOnSubmit, setEventProps, onKeyPress, updateSelection, handleOnChangeText, onSubmitEditing],
+      [multiline, blurOnSubmit, setEventProps, onKeyPress, updateSelection, handleOnChangeText, onSubmitEditing, insertText],
     );
 
     const handleFocus: FocusEventHandler<HTMLDivElement> = useCallback(
@@ -506,10 +454,10 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
         setEventProps(e);
         if (divRef.current) {
           if (contentSelection.current) {
-            CursorUtils.setCursorPosition(divRef.current, contentSelection.current.start, contentSelection.current.end);
+            setCursorPosition(divRef.current, contentSelection.current.start, contentSelection.current.end);
           } else {
-            const valueLength = value ? value.length : divRef.current.innerText.length;
-            CursorUtils.setCursorPosition(divRef.current, valueLength, null);
+            const valueLength = value ? value.length : divRef.current.value.length;
+            setCursorPosition(divRef.current, valueLength, null);
           }
           updateSelection(event, contentSelection.current);
         }
@@ -521,7 +469,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
 
         if (hostNode !== null) {
           if (clearTextOnFocus && divRef.current) {
-            divRef.current.innerText = '';
+            divRef.current.textContent = '';
           }
           if (selectTextOnFocus) {
             // Safari requires selection to occur in a setTimeout
@@ -543,7 +491,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
     const handleBlur: FocusEventHandler<HTMLDivElement> = useCallback(
       (event) => {
         const e = event as unknown as NativeSyntheticEvent<TextInputFocusEventData>;
-        CursorUtils.removeSelection();
+        removeSelection();
         currentlyFocusedField.current = null;
         if (onBlur) {
           setEventProps(e);
@@ -559,24 +507,47 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
         if (!onClick || !divRef.current) {
           return;
         }
-        (e.target as HTMLInputElement).value = normalizeValue(divRef.current.innerText || '');
+        (e.target as HTMLInputElement).value = divRef.current.value;
         onClick(e);
       },
       [onClick, updateSelection],
     );
 
-    const handlePaste = useCallback((e) => {
-      pasteRef.current = true;
-      if (e.isDefaultPrevented()) {
+    const handleCopy: ClipboardEventHandler<HTMLDivElement> = useCallback((e) => {
+      if (!divRef.current || !contentSelection.current) {
         return;
       }
-
       e.preventDefault();
-      const clipboardData = e.clipboardData;
-      const text = clipboardData.getData('text/plain');
-      document.execCommand('insertText', false, text);
+      const text = divRef.current?.value.substring(contentSelection.current.start, contentSelection.current.end);
+      e.clipboardData.setData('text/plain', text ?? '');
     }, []);
 
+    const handleCut = useCallback(
+      (e) => {
+        if (!divRef.current || !contentSelection.current) {
+          return;
+        }
+        handleCopy(e);
+        if (contentSelection.current.start !== contentSelection.current.end) {
+          document.execCommand('delete');
+        }
+      },
+      [handleCopy],
+    );
+
+    const handlePaste = useCallback(
+      (e) => {
+        if (e.isDefaultPrevented() || !divRef.current || !contentSelection.current) {
+          return;
+        }
+        e.preventDefault();
+        const clipboardData = e.clipboardData;
+        const text = clipboardData.getData('text/plain');
+        insertText(e, text);
+      },
+      [insertText],
+    );
+
     const startComposition = useCallback(() => {
       compositionRef.current = true;
     }, []);
@@ -594,13 +565,13 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
       if (r) {
         (r as unknown as TextInput).isFocused = () => document.activeElement === r;
         (r as unknown as TextInput).clear = () => {
-          r.innerText = '';
+          r.textContent = '';
           updateTextColor(r, '');
         };
 
         if (value === '' || value === undefined) {
           // update to placeholder color when value is empty
-          updateTextColor(r, r.innerText);
+          updateTextColor(r, r.textContent ?? '');
         }
       }
 
@@ -612,26 +583,25 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
           (ref as (elementRef: HTMLDivElement | null) => void)(r);
         }
       }
-      divRef.current = r;
+      divRef.current = r as MarkdownTextInputElement;
     };
 
     useClientEffect(
       function parseAndStyleValue() {
-        if (!divRef.current || processedValue === divRef.current.innerText) {
+        if (!divRef.current || value === divRef.current.value) {
           return;
         }
 
         if (value === undefined) {
-          parseText(divRef.current, divRef.current.innerText, processedMarkdownStyle);
+          parseText(divRef.current, divRef.current.value, processedMarkdownStyle);
           return;
         }
-
-        const text = processedValue !== undefined ? processedValue : '';
-
-        parseText(divRef.current, text, processedMarkdownStyle, text.length);
+        const normalizedValue = normalizeValue(value);
+        divRef.current.value = normalizedValue;
+        parseText(divRef.current, normalizedValue, processedMarkdownStyle);
         updateTextColor(divRef.current, value);
       },
-      [multiline, processedMarkdownStyle, processedValue],
+      [multiline, processedMarkdownStyle, value],
     );
 
     useClientEffect(
@@ -666,11 +636,10 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
       if (!divRef.current || !selection || (contentSelection.current && selection.start === contentSelection.current.start && selection.end === contentSelection.current.end)) {
         return;
       }
-
       const newSelection: Selection = {start: selection.start, end: selection.end ?? selection.start};
       contentSelection.current = newSelection;
       updateRefSelectionVariables(newSelection);
-      CursorUtils.setCursorPosition(divRef.current, newSelection.start, newSelection.end);
+      setCursorPosition(divRef.current, newSelection.start, newSelection.end);
     }, [selection, updateRefSelectionVariables]);
 
     return (
@@ -696,6 +665,8 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
         onClick={handleClick}
         onFocus={handleFocus}
         onBlur={handleBlur}
+        onCopy={handleCopy}
+        onCut={handleCut}
         onPaste={handlePaste}
         placeholder={heightSafePlaceholder}
         spellCheck={spellCheck}
@@ -727,4 +698,4 @@ const styles = StyleSheet.create({
 
 export default MarkdownTextInput;
 
-export type {MarkdownTextInputProps};
+export type {MarkdownTextInputProps, MarkdownTextInputElement, HTMLMarkdownElement};

package/src/styleUtils.ts

@@ -1,7 +1,5 @@
 import {Platform} from 'react-native';
-import type * as MarkdownTextInputDecoractorView from './MarkdownTextInputDecoratorViewNativeComponent';
-
-type MarkdownStyle = MarkdownTextInputDecoractorView.MarkdownStyle;
+import type {MarkdownStyle} from './MarkdownTextInputDecoratorViewNativeComponent';
 
 type PartialMarkdownStyle = Partial<{
   [K in keyof MarkdownStyle]: Partial<MarkdownStyle[K]>;

package/src/web/utils/blockUtils.ts

@@ -0,0 +1,72 @@
+import type {PartialMarkdownStyle} from '../../styleUtils';
+import type {NodeType} from './treeUtils';
+
+function addStyleToBlock(targetElement: HTMLElement, type: NodeType, markdownStyle: PartialMarkdownStyle) {
+  const node = targetElement;
+  switch (type) {
+    case 'line':
+      Object.assign(node.style, {
+        display: 'block',
+        margin: '0',
+        padding: '0',
+      });
+      break;
+    case 'syntax':
+      Object.assign(node.style, markdownStyle.syntax);
+      break;
+    case 'bold':
+      node.style.fontWeight = 'bold';
+      break;
+    case 'italic':
+      node.style.fontStyle = 'italic';
+      break;
+    case 'strikethrough':
+      node.style.textDecoration = 'line-through';
+      break;
+    case 'emoji':
+      Object.assign(node.style, {...markdownStyle.emoji, verticalAlign: 'middle'});
+      break;
+    case 'mention-here':
+      Object.assign(node.style, markdownStyle.mentionHere);
+      break;
+    case 'mention-user':
+      Object.assign(node.style, markdownStyle.mentionUser);
+      break;
+    case 'mention-report':
+      Object.assign(node.style, markdownStyle.mentionReport);
+      break;
+    case 'link':
+      Object.assign(node.style, {
+        ...markdownStyle.link,
+        textDecoration: 'underline',
+      });
+      break;
+    case 'code':
+      Object.assign(node.style, markdownStyle.code);
+      break;
+    case 'pre':
+      Object.assign(node.style, markdownStyle.pre);
+      break;
+
+    case 'blockquote':
+      Object.assign(node.style, {
+        ...markdownStyle.blockquote,
+        borderLeftStyle: 'solid',
+        display: 'inline-block',
+        maxWidth: '100%',
+        boxSizing: 'border-box',
+      });
+      break;
+    case 'h1':
+      Object.assign(node.style, {
+        ...markdownStyle.h1,
+        fontWeight: 'bold',
+      });
+      break;
+    default:
+      break;
+  }
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export {addStyleToBlock};

package/src/web/utils/browserUtils.ts

@@ -0,0 +1,13 @@
+const BrowserUtils = {
+  isFirefox: navigator.userAgent.toLowerCase().includes('firefox'),
+  isChromium: 'chrome' in window,
+
+  /**
+   * Whether the platform is a mobile browser.
+   * Copied from Expensify App https://github.com/Expensify/App/blob/90dee7accae79c49debf30354c160cab6c52c423/src/libs/Browser/index.website.ts#L41
+   *
+   */
+  isMobile: /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Silk|Opera Mini/i.test(navigator.userAgent),
+};
+
+export default BrowserUtils;