@expensify/react-native-live-markdown 0.1.186 → 0.1.188

package/src/MarkdownTextInput.web.tsx

@@ -23,14 +23,13 @@ import type {MarkdownStyle} from './MarkdownTextInputDecoratorViewNativeComponen
 import {getElementHeight, getPlaceholderValue, isEventComposing, normalizeValue, parseInnerHTMLToText} from './web/utils/inputUtils';
 import {parseToReactDOMStyle, processMarkdownStyle} from './web/utils/webStyleUtils';
 import {forceRefreshAllImages} from './web/inputElements/inlineImage';
-import type {InlineImagesInputProps} from './commonTypes';
-
-require('../parser/react-native-live-markdown-parser.js');
+import type {MarkdownRange, InlineImagesInputProps} from './commonTypes';
 
 const useClientEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
 
 interface MarkdownTextInputProps extends TextInputProps, InlineImagesInputProps {
   markdownStyle?: MarkdownStyle;
+  parser: (text: string) => MarkdownRange[];
   onClick?: (e: MouseEvent<HTMLDivElement>) => void;
   dir?: string;
   disabled?: boolean;
@@ -85,6 +84,7 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
       numberOfLines,
       multiline = false,
       markdownStyle,
+      parser,
       onBlur,
       onChange,
       onChangeText,
@@ -111,6 +111,13 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
     },
     ref,
   ) => {
+    if (parser === undefined) {
+      throw new Error('[react-native-live-markdown] `parser` is undefined');
+    }
+    if (typeof parser !== 'function') {
+      throw new Error('[react-native-live-markdown] `parser` is not a function');
+    }
+
     const compositionRef = useRef<boolean>(false);
     const divRef = useRef<MarkdownTextInputElement | null>(null);
     const currentlyFocusedField = useRef<HTMLDivElement | null>(null);
@@ -146,6 +153,7 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
 
     const parseText = useCallback(
       (
+        parserFunction: (input: string) => MarkdownRange[],
         target: MarkdownTextInputElement,
         text: string | null,
         customMarkdownStyles: MarkdownStyle,
@@ -161,7 +169,7 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
         if (text === null) {
           return {text: divRef.current.value, cursorPosition: null};
         }
-        const parsedText = updateInputStructure(target, text, cursorPosition, multiline, customMarkdownStyles, false, shouldForceDOMUpdate, shouldScrollIntoView, {
+        const parsedText = updateInputStructure(parserFunction, target, text, cursorPosition, multiline, customMarkdownStyles, false, shouldForceDOMUpdate, shouldScrollIntoView, {
           addAuthTokenToImageURLCallback,
           imagePreviewAuthRequiredURLs,
         });
@@ -179,10 +187,10 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
     const processedMarkdownStyle = useMemo(() => {
       const newMarkdownStyle = processMarkdownStyle(markdownStyle);
       if (divRef.current) {
-        parseText(divRef.current, divRef.current.value, newMarkdownStyle, null, false, false);
+        parseText(parser, divRef.current, divRef.current.value, newMarkdownStyle, null, false, false);
       }
       return newMarkdownStyle;
-    }, [markdownStyle, parseText]);
+    }, [parser, markdownStyle, parseText]);
 
     const inputStyles = useMemo(
       () =>
@@ -208,9 +216,9 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
         }
         const item = history.current.undo();
         const undoValue = item ? item.text : null;
-        return parseText(target, undoValue, processedMarkdownStyle, item ? item.cursorPosition : null, false);
+        return parseText(parser, target, undoValue, processedMarkdownStyle, item ? item.cursorPosition : null, false);
       },
-      [parseText, processedMarkdownStyle],
+      [parser, parseText, processedMarkdownStyle],
     );
 
     const redo = useCallback(
@@ -223,9 +231,9 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
         }
         const item = history.current.redo();
         const redoValue = item ? item.text : null;
-        return parseText(target, redoValue, processedMarkdownStyle, item ? item.cursorPosition : null, false);
+        return parseText(parser, target, redoValue, processedMarkdownStyle, item ? item.cursorPosition : null, false);
       },
-      [parseText, processedMarkdownStyle],
+      [parser, parseText, processedMarkdownStyle],
     );
 
     // Placeholder text color logic
@@ -275,7 +283,7 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
     );
 
     const handleOnSelect = useCallback(
-      (e) => {
+      (e: React.SyntheticEvent<HTMLDivElement>) => {
         updateSelection(e);
 
         // If the input has just been focused, we need to scroll the cursor into view
@@ -354,7 +362,7 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
             newInputUpdate = redo(divRef.current);
             break;
           default:
-            newInputUpdate = parseText(divRef.current, parsedText, processedMarkdownStyle, newCursorPosition, true, !inputType, inputType === 'pasteText');
+            newInputUpdate = parseText(parser, divRef.current, parsedText, processedMarkdownStyle, newCursorPosition, true, !inputType, inputType === 'pasteText');
         }
         const {text, cursorPosition} = newInputUpdate;
         updateTextColor(divRef.current, text);
@@ -406,7 +414,7 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
 
         handleContentSizeChange();
       },
-      [updateTextColor, updateSelection, onChange, onChangeText, handleContentSizeChange, undo, redo, parseText, processedMarkdownStyle, setEventProps, maxLength],
+      [parser, updateTextColor, updateSelection, onChange, onChangeText, handleContentSizeChange, undo, redo, parseText, processedMarkdownStyle, setEventProps, maxLength],
     );
 
     const insertText = useCallback(
@@ -576,7 +584,7 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
     }, []);
 
     const handleCut = useCallback(
-      (e) => {
+      (e: React.ClipboardEvent<HTMLDivElement>) => {
         if (!divRef.current || !contentSelection.current) {
           return;
         }
@@ -589,7 +597,7 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
     );
 
     const handlePaste = useCallback(
-      (e) => {
+      (e: React.ClipboardEvent<HTMLDivElement>) => {
         if (e.isDefaultPrevented() || !divRef.current || !contentSelection.current) {
           return;
         }
@@ -606,7 +614,7 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
     }, []);
 
     const endComposition = useCallback(
-      (e) => {
+      (e: React.CompositionEvent<HTMLDivElement>) => {
         compositionRef.current = false;
         handleOnChangeText(e);
       },
@@ -654,17 +662,17 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
         }
 
         if (value === undefined) {
-          parseText(divRef.current, divRef.current.value, processedMarkdownStyle);
+          parseText(parser, divRef.current, divRef.current.value, processedMarkdownStyle);
           return;
         }
         const normalizedValue = normalizeValue(value);
 
         divRef.current.value = normalizedValue;
-        parseText(divRef.current, normalizedValue, processedMarkdownStyle, null, true, false, true);
+        parseText(parser, divRef.current, normalizedValue, processedMarkdownStyle, null, true, false, true);
 
         updateTextColor(divRef.current, value);
       },
-      [multiline, processedMarkdownStyle, value, maxLength],
+      [parser, multiline, processedMarkdownStyle, value, maxLength],
     );
 
     useClientEffect(
@@ -741,6 +749,7 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
         onCopy={handleCopy}
         onCut={handleCut}
         onPaste={handlePaste}
+        // @ts-expect-error: we use placeholder prop to style it in CSS even though its not handled internally
         placeholder={heightSafePlaceholder}
         spellCheck={spellCheck}
         dir={dir}

package/src/MarkdownTextInputDecoratorViewNativeComponent.ts

@@ -1,6 +1,6 @@
 import type {ColorValue, ViewProps} from 'react-native';
 
-import type {Float} from 'react-native/Libraries/Types/CodegenTypes';
+import type {Float, Int32} from 'react-native/Libraries/Types/CodegenTypes';
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 
 interface MarkdownStyle {
@@ -74,6 +74,7 @@ interface MarkdownStyle {
 
 interface NativeProps extends ViewProps {
   markdownStyle: MarkdownStyle;
+  parserId: Int32;
 }
 
 export default codegenNativeComponent<NativeProps>('MarkdownTextInputDecoratorView', {

package/src/index.tsx

@@ -1,2 +1,4 @@
 export {default as MarkdownTextInput} from './MarkdownTextInput';
 export type {MarkdownTextInputProps, MarkdownStyle} from './MarkdownTextInput';
+export type {MarkdownType, MarkdownRange} from './commonTypes';
+export {default as parseExpensiMark} from './parseExpensiMark';

package/src/parseExpensiMark.ts

@@ -0,0 +1,277 @@
+'worklet';
+
+import {ExpensiMark} from 'expensify-common';
+import {unescapeText} from 'expensify-common/dist/utils';
+import type {MarkdownType, MarkdownRange} from './commonTypes';
+
+const MAX_PARSABLE_LENGTH = 4000;
+
+type Token = ['TEXT' | 'HTML', string];
+type StackItem = {tag: string; children: Array<StackItem | string>};
+
+function parseMarkdownToHTML(markdown: string): string {
+  const parser = new ExpensiMark();
+  const html = parser.replace(markdown, {
+    shouldKeepRawInput: true,
+  });
+  return html as string;
+}
+
+function parseHTMLToTokens(html: string): Token[] {
+  const tokens: Token[] = [];
+  let left = 0;
+  // eslint-disable-next-line no-constant-condition
+  while (true) {
+    const open = html.indexOf('<', left);
+    if (open === -1) {
+      if (left < html.length) {
+        tokens.push(['TEXT', html.substring(left)]);
+      }
+      break;
+    }
+    if (open !== left) {
+      tokens.push(['TEXT', html.substring(left, open)]);
+    }
+    const close = html.indexOf('>', open);
+    if (close === -1) {
+      throw new Error('[react-native-live-markdown] Error in function parseHTMLToTokens: Invalid HTML: no matching ">"');
+    }
+    tokens.push(['HTML', html.substring(open, close + 1)]);
+    left = close + 1;
+  }
+  return tokens;
+}
+
+function parseTokensToTree(tokens: Token[]): StackItem {
+  const stack: StackItem[] = [{tag: '<>', children: []}];
+  tokens.forEach(([type, payload]) => {
+    if (type === 'TEXT') {
+      const text = unescapeText(payload);
+      const top = stack[stack.length - 1];
+      top!.children.push(text);
+    } else if (type === 'HTML') {
+      if (payload.startsWith('</')) {
+        // closing tag
+        const child = stack.pop();
+        const top = stack[stack.length - 1];
+        top!.children.push(child!);
+      } else if (payload.endsWith('/>')) {
+        // self-closing tag
+        const top = stack[stack.length - 1];
+        top!.children.push({tag: payload, children: []});
+      } else {
+        // opening tag
+        stack.push({tag: payload, children: []});
+      }
+    } else {
+      throw new Error(
+        `[react-native-live-markdown] Error in function parseTokensToTree: Unknown token type: ${type as string}. Expected 'TEXT' or 'HTML'. Please ensure tokens only contain these types.`,
+      );
+    }
+  });
+  if (stack.length !== 1) {
+    const unclosedTags =
+      stack.length > 0
+        ? stack
+            .slice(1)
+            .map((item) => item.tag)
+            .join(', ')
+        : '';
+    throw new Error(
+      `[react-native-live-markdown] Invalid HTML structure: the following tags are not properly closed: ${unclosedTags}. Ensure each opening tag has a corresponding closing tag.`,
+    );
+  }
+  return stack[0]!;
+}
+
+function parseTreeToTextAndRanges(tree: StackItem): [string, MarkdownRange[]] {
+  let text = '';
+
+  function processChildren(node: StackItem | string) {
+    if (typeof node === 'string') {
+      text += node;
+    } else {
+      node.children.forEach(dfs);
+    }
+  }
+
+  function appendSyntax(syntax: string) {
+    addChildrenWithStyle(syntax, 'syntax');
+  }
+
+  function addChildrenWithStyle(node: StackItem | string, type: MarkdownType) {
+    const start = text.length;
+    processChildren(node);
+    const end = text.length;
+    ranges.push({type, start, length: end - start});
+  }
+
+  const ranges: MarkdownRange[] = [];
+  function dfs(node: StackItem | string) {
+    if (typeof node === 'string') {
+      text += node;
+    } else {
+      // eslint-disable-next-line no-lonely-if
+      if (node.tag === '<>') {
+        processChildren(node);
+      } else if (node.tag === '<strong>') {
+        appendSyntax('*');
+        addChildrenWithStyle(node, 'bold');
+        appendSyntax('*');
+      } else if (node.tag === '<em>') {
+        appendSyntax('_');
+        addChildrenWithStyle(node, 'italic');
+        appendSyntax('_');
+      } else if (node.tag === '<del>') {
+        appendSyntax('~');
+        addChildrenWithStyle(node, 'strikethrough');
+        appendSyntax('~');
+      } else if (node.tag === '<emoji>') {
+        addChildrenWithStyle(node, 'emoji');
+      } else if (node.tag === '<code>') {
+        appendSyntax('`');
+        addChildrenWithStyle(node, 'code');
+        appendSyntax('`');
+      } else if (node.tag === '<mention-here>') {
+        addChildrenWithStyle(node, 'mention-here');
+      } else if (node.tag === '<mention-user>') {
+        addChildrenWithStyle(node, 'mention-user');
+      } else if (node.tag === '<mention-report>') {
+        addChildrenWithStyle(node, 'mention-report');
+      } else if (node.tag === '<blockquote>') {
+        appendSyntax('>');
+        addChildrenWithStyle(node, 'blockquote');
+        // compensate for "> " at the beginning
+        if (ranges.length > 0) {
+          const curr = ranges[ranges.length - 1];
+          curr!.start -= 1;
+          curr!.length += 1;
+        }
+      } else if (node.tag === '<h1>') {
+        appendSyntax('# ');
+        addChildrenWithStyle(node, 'h1');
+      } else if (node.tag === '<br />') {
+        text += '\n';
+      } else if (node.tag.startsWith('<pre')) {
+        appendSyntax('```');
+        const content = node.children.join('').replaceAll('&#32;', ' ');
+        addChildrenWithStyle(content, 'pre');
+        appendSyntax('```');
+      } else if (node.tag.startsWith('<a href="')) {
+        const rawHref = node.tag.match(/href="([^"]*)"/)![1]!; // always present
+        const href = unescapeText(rawHref);
+        const isLabeledLink = node.tag.match(/data-link-variant="([^"]*)"/)![1] === 'labeled';
+        const dataRawHref = node.tag.match(/data-raw-href="([^"]*)"/);
+        const matchString = dataRawHref ? unescapeText(dataRawHref[1]!) : href;
+        if (!isLabeledLink && node.children.length === 1 && typeof node.children[0] === 'string' && (node.children[0] === matchString || `mailto:${node.children[0]}` === href)) {
+          addChildrenWithStyle(node.children[0], 'link');
+        } else {
+          appendSyntax('[');
+          processChildren(node);
+          appendSyntax('](');
+          addChildrenWithStyle(matchString, 'link');
+          appendSyntax(')');
+        }
+      } else if (node.tag.startsWith('<img src="')) {
+        const src = node.tag.match(/src="([^"]*)"/)![1]!; // always present
+        const alt = node.tag.match(/alt="([^"]*)"/);
+        const hasAlt = node.tag.match(/data-link-variant="([^"]*)"/)![1] === 'labeled';
+        const rawLink = node.tag.match(/data-raw-href="([^"]*)"/);
+        const linkString = rawLink ? unescapeText(rawLink[1]!) : src;
+
+        const start = text.length;
+        const length = 3 + (hasAlt ? 2 + unescapeText(alt?.[1] || '').length : 0) + linkString.length;
+        ranges.push({type: 'inline-image', start, length});
+
+        appendSyntax('!');
+        if (hasAlt) {
+          appendSyntax('[');
+          processChildren(unescapeText(alt?.[1] || ''));
+          appendSyntax(']');
+        }
+        appendSyntax('(');
+        addChildrenWithStyle(linkString, 'link');
+        appendSyntax(')');
+      } else if (node.tag.startsWith('<video data-expensify-source="')) {
+        const src = node.tag.match(/data-expensify-source="([^"]*)"/)![1]!; // always present
+        const rawLink = node.tag.match(/data-raw-href="([^"]*)"/);
+        const hasAlt = node.tag.match(/data-link-variant="([^"]*)"/)![1] === 'labeled';
+        const linkString = rawLink ? unescapeText(rawLink[1]!) : src;
+        appendSyntax('!');
+        if (hasAlt) {
+          appendSyntax('[');
+          node.children.forEach((child) => processChildren(child));
+          appendSyntax(']');
+        }
+        appendSyntax('(');
+        addChildrenWithStyle(linkString, 'link');
+        appendSyntax(')');
+      } else {
+        throw new Error(`[react-native-live-markdown] Error in function parseTreeToTextAndRanges: Unknown tag '${node.tag}'. This tag is not supported in this function's logic.`);
+      }
+    }
+  }
+  dfs(tree);
+  return [text, ranges];
+}
+
+// getTagPriority returns a priority for a tag, higher priority means the tag should be processed first
+function getTagPriority(tag: string) {
+  switch (tag) {
+    case 'blockquote':
+      return 2;
+    case 'h1':
+      return 1;
+    default:
+      return 0;
+  }
+}
+
+function sortRanges(ranges: MarkdownRange[]) {
+  // sort ranges by start position, then by length, then by tag hierarchy
+  return ranges.sort((a, b) => a.start - b.start || b.length - a.length || getTagPriority(b.type) - getTagPriority(a.type) || 0);
+}
+
+function groupRanges(ranges: MarkdownRange[]) {
+  const lastVisibleRangeIndex: {[key in MarkdownType]?: number} = {};
+
+  return ranges.reduce((acc, range) => {
+    const start = range.start;
+    const end = range.start + range.length;
+
+    const rangeWithSameStyleIndex = lastVisibleRangeIndex[range.type];
+    const sameStyleRange = rangeWithSameStyleIndex !== undefined ? acc[rangeWithSameStyleIndex] : undefined;
+
+    if (sameStyleRange && sameStyleRange.start <= start && sameStyleRange.start + sameStyleRange.length >= end && range.length > 1) {
+      // increment depth of overlapping range
+      sameStyleRange.depth = (sameStyleRange.depth || 1) + 1;
+    } else {
+      lastVisibleRangeIndex[range.type] = acc.length;
+      acc.push(range);
+    }
+
+    return acc;
+  }, [] as MarkdownRange[]);
+}
+
+function parseExpensiMark(markdown: string): MarkdownRange[] {
+  if (markdown.length > MAX_PARSABLE_LENGTH) {
+    return [];
+  }
+  const html = parseMarkdownToHTML(markdown);
+  const tokens = parseHTMLToTokens(html);
+  const tree = parseTokensToTree(tokens);
+  const [text, ranges] = parseTreeToTextAndRanges(tree);
+  if (text !== markdown) {
+    throw new Error(
+      `[react-native-live-markdown] Parsing error: the processed text does not match the original Markdown input. This may be caused by incorrect parsing functions or invalid input Markdown.\nProcessed input: '${JSON.stringify(
+        text,
+      )}'\nOriginal input: '${JSON.stringify(markdown)}'`,
+    );
+  }
+  const sortedRanges = sortRanges(ranges);
+  const groupedRanges = groupRanges(sortedRanges);
+  return groupedRanges;
+}
+
+export default parseExpensiMark;

package/src/web/utils/parserUtils.ts

@@ -117,7 +117,7 @@ function addTextToElement(node: TreeNode, text: string) {
   });
 }
 
-function addParagraph(node: TreeNode, text: string | null = null, length: number, disableInlineStyles = false) {
+function addParagraph(node: TreeNode, text: string | null, length: number, disableInlineStyles = false) {
   const p = document.createElement('p');
   p.setAttribute('data-type', 'line');
   if (!disableInlineStyles) {
@@ -272,6 +272,7 @@ function moveCursor(isFocused: boolean, alwaysMoveCursorToTheEnd: boolean, curso
 }
 
 function updateInputStructure(
+  parserFunction: (input: string) => MarkdownRange[],
   target: MarkdownTextInputElement,
   text: string,
   cursorPositionIndex: number | null,
@@ -291,7 +292,7 @@ function updateInputStructure(
     const selection = getCurrentCursorPosition(target);
     cursorPosition = selection ? selection.start : null;
   }
-  const markdownRanges = global.parseExpensiMarkToRanges(text);
+  const markdownRanges = parserFunction(text);
   if (!text || targetElement.innerHTML === '<br>' || (targetElement && targetElement.innerHTML === '\n')) {
     targetElement.innerHTML = '';
     targetElement.innerText = '';

package/apple/RCTLiveMarkdownModule.h

@@ -1,16 +0,0 @@
-#ifdef RCT_NEW_ARCH_ENABLED
-
-#import <RNLiveMarkdownSpec/RNLiveMarkdownSpec.h>
-#import <React/RCTEventEmitter.h>
-#import <React/RCTUIManager.h>
-
-NS_ASSUME_NONNULL_BEGIN
-
-// Without inheriting after RCTEventEmitter we don't get access to bridge
-@interface RCTLiveMarkdownModule
-    : RCTEventEmitter <NativeLiveMarkdownModuleSpec>
-@end
-
-NS_ASSUME_NONNULL_END
-
-#endif // RCT_NEW_ARCH_ENABLED