implement maxParsableTextLength for web

Expensify · Sep 15, 2024 · 505a6dd · 505a6dd
1 parent 5638b54
commit 505a6dd
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx
@@ -28,6 +28,7 @@ const useClientEffect = typeof window === 'undefined' ? useEffect : useLayoutEff
 
 interface MarkdownTextInputProps extends TextInputProps {
   markdownStyle?: MarkdownStyle;
+  maxParsableTextLength?: number;
   onClick?: (e: MouseEvent<HTMLDivElement>) => void;
   dir?: string;
   disabled?: boolean;
@@ -79,6 +80,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
       numberOfLines,
       multiline = false,
       markdownStyle,
+      maxParsableTextLength = null,
       onBlur,
       onChange,
       onChangeText,
@@ -149,7 +151,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, maxParsableTextLength, multiline, customMarkdownStyles, false, shouldForceDOMUpdate);
         divRef.current.value = parsedText.text;
 
         if (history.current && shouldAddToHistory) {
@@ -158,7 +160,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
 
         return parsedText;
       },
-      [multiline],
+      [maxParsableTextLength, multiline],
     );
 
     const processedMarkdownStyle = useMemo(() => {

diff --git a/src/web/utils/parserUtils.ts b/src/web/utils/parserUtils.ts
@@ -282,6 +282,7 @@ function updateInputStructure(
   target: MarkdownTextInputElement,
   text: string,
   cursorPositionIndex: number | null,
+  maxParsableTextLength: number | null,
   isMultiline = true,
   markdownStyle: PartialMarkdownStyle = {},
   alwaysMoveCursorToTheEnd = false,
@@ -296,7 +297,7 @@ function updateInputStructure(
     const selection = getCurrentCursorPosition(target);
     cursorPosition = selection ? selection.start : null;
   }
-  const markdownRanges = global.parseExpensiMarkToRanges(text);
+  const markdownRanges = maxParsableTextLength !== null && text.length <= maxParsableTextLength ? global.parseExpensiMarkToRanges(text) : [];
   if (!text || targetElement.innerHTML === '<br>' || (targetElement && targetElement.innerHTML === '\n')) {
     targetElement.innerHTML = '';
     targetElement.innerText = '';