Merge branch 'main' into @Skalakid/add-selection-prop

Expensify · Mar 7, 2024 · b2e61c5 · b2e61c5
2 parents 002eeaf + 899a12d
commit b2e61c5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@expensify/react-native-live-markdown",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "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
@@ -157,6 +157,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
     },
     ref,
   ) => {
+    const compositionRef = useRef<boolean>(false);
     const divRef = useRef<HTMLDivElement | null>(null);
     const currentlyFocusedField = useRef<HTMLDivElement | null>(null);
     const valueLength = value ? value.length : 0;
@@ -260,6 +261,12 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
           return;
         }
 
+        if (compositionRef.current) {
+          updateTextColor(divRef.current, e.target.innerText);
+          compositionRef.current = false;
+          return;
+        }
+
         let text = '';
         const nativeEvent = e.nativeEvent as MarkdownNativeEvent;
         switch (nativeEvent.inputType) {
@@ -449,6 +456,10 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
       [onClick],
     );
 
+    const startComposition = useCallback(() => {
+      compositionRef.current = true;
+    }, []);
+
     const setRef = (currentRef: HTMLDivElement | null) => {
       const r = currentRef;
       if (r) {
@@ -557,6 +568,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
         autoCapitalize={autoCapitalize}
         className={className}
         onKeyDown={handleKeyPress}
+        onCompositionStart={startComposition}
         onKeyUp={updateSelection}
         onInput={handleOnChangeText}
         onClick={handleClick}