Merge branch 'main' into @tomekzaw/worklets

Expensify · Oct 7, 2024 · 75b914e · 75b914e
2 parents 2729fe6 + dad2cfd
commit 75b914e
Show file tree

Hide file tree

Showing 4 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.3)
     - React-perflogger (= 0.75.3)
     - React-utils (= 0.75.3)
-  - RNLiveMarkdown (0.1.166):
+  - RNLiveMarkdown (0.1.168):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1517,10 +1517,10 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNLiveMarkdown/newarch (= 0.1.166)
+    - RNLiveMarkdown/newarch (= 0.1.168)
     - RNReanimated/worklets
     - Yoga
-  - RNLiveMarkdown/newarch (0.1.166):
+  - RNLiveMarkdown/newarch (0.1.168):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1897,7 +1897,7 @@ SPEC CHECKSUMS:
   React-utils: f2afa6acd905ca2ce7bb8ffb4a22f7f8a12534e8
   ReactCodegen: ff95a93d5ab5d9b2551571886271478eaa168565
   ReactCommon: 289214026502e6a93484f4a46bcc0efa4f3f2864
-  RNLiveMarkdown: 5d874242cb46b89ae9f42e80c1ec156496ab6113
+  RNLiveMarkdown: f30db4453a74611815e71a18d13a9b30de9b7493
   RNReanimated: fe05b2cab00f0e01a5eb7df3383296974faa83fa
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   Yoga: 1354c027ab07c7736f99a3bef16172d6f1b12b47

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -63,6 +63,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/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@expensify/react-native-live-markdown",
-  "version": "0.1.166",
+  "version": "0.1.168",
   "description": "Drop-in replacement for React Native's TextInput component with Markdown formatting.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx
@@ -103,6 +103,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
       id,
       inputMode,
       onTouchStart,
+      maxLength,
       addAuthTokenToImageURLCallback,
       imagePreviewAuthRequiredURLs,
     },
@@ -184,7 +185,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
     const processedMarkdownStyle = useMemo(() => {
       const newMarkdownStyle = processMarkdownStyle(markdownStyle);
       if (divRef.current) {
-        parseText(parser, divRef.current, divRef.current.value, newMarkdownStyle, null, false);
+        parseText(parser, divRef.current, divRef.current.value, newMarkdownStyle, null, false, false);
       }
       return newMarkdownStyle;
     }, [parser, markdownStyle, parseText]);
@@ -320,14 +321,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
@@ -346,7 +351,6 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
           }
           return;
         }
-
         let newInputUpdate: ParseTextResult;
         switch (inputType) {
           case 'historyUndo':
@@ -408,7 +412,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(
@@ -418,17 +422,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(
@@ -652,11 +664,13 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
           return;
         }
         const normalizedValue = normalizeValue(value);
+
         divRef.current.value = normalizedValue;
         parseText(parser, divRef.current, normalizedValue, processedMarkdownStyle, null, true, false, true);
+
         updateTextColor(divRef.current, value);
       },
-      [multiline, processedMarkdownStyle, value],
+      [multiline, processedMarkdownStyle, value, maxLength],
     );
 
     useClientEffect(