Fix pasting in composition mode (#599)

Co-authored-by: Tomek Zawadzki <[email protected]>
Expensify · Jan 22, 2025 · ba3c4f8 · ba3c4f8
1 parent 761e29e
commit ba3c4f8
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 11 deletions.
diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx
@@ -38,6 +38,8 @@ interface MarkdownTextInputProps extends TextInputProps, InlineImagesInputProps
 
 interface MarkdownNativeEvent extends Event {
   inputType?: string;
+  isComposing?: boolean;
+  keyCode?: number;
 }
 
 type MarkdownTextInput = TextInput & React.Component<MarkdownTextInputProps>;
@@ -120,7 +122,6 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
       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);
     const contentSelection = useRef<Selection | null>(null);
@@ -349,6 +350,7 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
         }
         const nativeEvent = e.nativeEvent as MarkdownNativeEvent;
         const inputType = nativeEvent.inputType;
+        const isComposing = isEventComposing(nativeEvent);
 
         updateTextColor(divRef.current, e.target.textContent ?? '');
         const previousText = divRef.current.value;
@@ -370,7 +372,7 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
             ? Math.max(contentSelection.current.start, 0) // Don't move the caret when deleting forward with no characters selected
             : Math.max(Math.max(contentSelection.current.end, 0) + (parsedText.length - previousText.length), 0);
 
-        if (compositionRef.current) {
+        if (isComposing) {
           updateTextColor(divRef.current, parsedText);
           updateSelection(e, {
             start: newCursorPosition,
@@ -657,13 +659,8 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
       [insertText],
     );
 
-    const startComposition = useCallback(() => {
-      compositionRef.current = true;
-    }, []);
-
     const endComposition = useCallback(
       (e: React.CompositionEvent<HTMLDivElement>) => {
-        compositionRef.current = false;
         handleOnChangeText(e);
       },
       [handleOnChangeText],
@@ -788,7 +785,6 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
         autoCapitalize={autoCapitalize}
         className={className}
         onKeyDown={handleKeyPress}
-        onCompositionStart={startComposition}
         onCompositionEnd={endComposition}
         onInput={handleOnChangeText}
         onClick={handleClick}
@@ -829,7 +825,7 @@ const styles = StyleSheet.create({
 
 export default MarkdownTextInput;
 
-export type {MarkdownTextInputProps, MarkdownTextInputElement, HTMLMarkdownElement};
+export type {MarkdownNativeEvent, MarkdownTextInputProps, MarkdownTextInputElement, HTMLMarkdownElement};
 
 function getWorkletRuntime() {
   throw new Error('[react-native-live-markdown] `getWorkletRuntime` is not available on web. Please make sure to use it only on native Android or iOS.');

diff --git a/src/web/utils/inputUtils.ts b/src/web/utils/inputUtils.ts
@@ -1,11 +1,11 @@
 import type {CSSProperties} from 'react';
-import type {MarkdownTextInputElement} from '../../MarkdownTextInput.web';
+import type {MarkdownNativeEvent, MarkdownTextInputElement} from '../../MarkdownTextInput.web';
 
 const ZERO_WIDTH_SPACE = '\u200B';
 
 // If an Input Method Editor is processing key input, the 'keyCode' is 229.
 // https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode
-function isEventComposing(nativeEvent: globalThis.KeyboardEvent) {
+function isEventComposing(nativeEvent: globalThis.KeyboardEvent | MarkdownNativeEvent) {
   return nativeEvent.isComposing || nativeEvent.keyCode === 229;
 }