feat: support maxLength prop in web (#505)

Expensify · Oct 7, 2024 · e81fe7e · e81fe7e
1 parent c45c720
commit e81fe7e
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 13 deletions.
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -1497,7 +1497,7 @@ PODS:
     - React-logger (= 0.75.2)
     - React-perflogger (= 0.75.2)
     - React-utils (= 0.75.2)
-  - RNLiveMarkdown (0.1.160):
+  - RNLiveMarkdown (0.1.162):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1517,9 +1517,9 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNLiveMarkdown/newarch (= 0.1.160)
+    - RNLiveMarkdown/newarch (= 0.1.162)
     - Yoga
-  - RNLiveMarkdown/newarch (0.1.160):
+  - RNLiveMarkdown/newarch (0.1.162):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1805,9 +1805,9 @@ SPEC CHECKSUMS:
   React-utils: 81a715d9c0a2a49047e77a86f3a2247408540deb
   ReactCodegen: 60973d382704c793c605b9be0fc7f31cb279442f
   ReactCommon: 6ef348087d250257c44c0204461c03f036650e9b
-  RNLiveMarkdown: 201e1457f83d07376ae08c918c8ad14e3078d5a0
+  RNLiveMarkdown: 3071652e4e2b5a57cb647cfe5c76c392e58a98b3
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
-  Yoga: 2a45d7e59592db061217551fd3bbe2dd993817ae
+  Yoga: a1d7895431387402a674fd0d1c04ec85e87909b8
 
 PODFILE CHECKSUM: 9b81b0f7bfba9e6fb4fa10efe8319f7860794e08
 

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -49,6 +49,7 @@ export default function App() {
         onSelectionChange={e => setSelection(e.nativeEvent.selection)}
         selection={selection}
         id={TEST_CONST.INPUT_ID}
+        maxLength={30000}
       />
       <Text style={styles.text}>{JSON.stringify(value)}</Text>
       <Button

diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx
@@ -102,6 +102,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
       id,
       inputMode,
       onTouchStart,
+      maxLength,
       addAuthTokenToImageURLCallback,
       imagePreviewAuthRequiredURLs,
     },
@@ -175,7 +176,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
     const processedMarkdownStyle = useMemo(() => {
       const newMarkdownStyle = processMarkdownStyle(markdownStyle);
       if (divRef.current) {
-        parseText(divRef.current, divRef.current.value, newMarkdownStyle, null, false);
+        parseText(divRef.current, divRef.current.value, newMarkdownStyle, null, false, false);
       }
       return newMarkdownStyle;
     }, [markdownStyle, parseText]);
@@ -311,14 +312,18 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
 
         updateTextColor(divRef.current, e.target.textContent ?? '');
         const previousText = divRef.current.value;
-        const parsedText = normalizeValue(
+        let parsedText = normalizeValue(
           inputType === 'pasteText' ? pasteContent.current || '' : parseInnerHTMLToText(e.target as MarkdownTextInputElement, inputType, contentSelection.current.start),
         );
 
         if (pasteContent.current) {
           pasteContent.current = null;
         }
 
+        if (maxLength !== undefined && parsedText.length > maxLength) {
+          parsedText = previousText;
+        }
+
         const prevSelection = contentSelection.current ?? {start: 0, end: 0};
         const newCursorPosition =
           inputType === 'deleteContentForward' && contentSelection.current.start === contentSelection.current.end
@@ -337,7 +342,6 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
           }
           return;
         }
-
         let newInputUpdate: ParseTextResult;
         switch (inputType) {
           case 'historyUndo':
@@ -399,7 +403,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
 
         handleContentSizeChange();
       },
-      [updateTextColor, updateSelection, onChange, onChangeText, handleContentSizeChange, undo, redo, parseText, processedMarkdownStyle, setEventProps],
+      [updateTextColor, updateSelection, onChange, onChangeText, handleContentSizeChange, undo, redo, parseText, processedMarkdownStyle, setEventProps, maxLength],
     );
 
     const insertText = useCallback(
@@ -409,17 +413,25 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
         }
 
         const previousText = divRef.current.value;
-        const newText = `${divRef.current.value.substring(0, contentSelection.current.start)}${text}${divRef.current.value.substring(contentSelection.current.end)}`;
+        let insertedText = text;
+        let availableLength = text.length;
+        const prefix = divRef.current.value.substring(0, contentSelection.current.start);
+        const suffix = divRef.current.value.substring(contentSelection.current.end);
+        if (maxLength !== undefined) {
+          availableLength = maxLength - prefix.length - suffix.length;
+          insertedText = text.slice(0, Math.max(availableLength, 0));
+        }
+        const newText = `${prefix}${insertedText}${suffix}`;
         if (previousText === newText) {
           document.execCommand('delete');
         }
 
-        pasteContent.current = newText;
+        pasteContent.current = availableLength > 0 ? newText : previousText;
         (e.nativeEvent as MarkdownNativeEvent).inputType = 'pasteText';
 
         handleOnChangeText(e);
       },
-      [handleOnChangeText],
+      [handleOnChangeText, maxLength],
     );
 
     const handleKeyPress = useCallback(
@@ -643,11 +655,13 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
           return;
         }
         const normalizedValue = normalizeValue(value);
+
         divRef.current.value = normalizedValue;
         parseText(divRef.current, normalizedValue, processedMarkdownStyle, null, true, false, true);
+
         updateTextColor(divRef.current, value);
       },
-      [multiline, processedMarkdownStyle, value],
+      [multiline, processedMarkdownStyle, value, maxLength],
     );
 
     useClientEffect(