diff --git a/package.json b/package.json index 9e6e16c5..fed5fc20 100644 --- 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 index bc03ef48..750755a6 100644 --- a/src/MarkdownTextInput.web.tsx +++ b/src/MarkdownTextInput.web.tsx @@ -157,6 +157,7 @@ const MarkdownTextInput = React.forwardRef( }, ref, ) => { + const compositionRef = useRef(false); const divRef = useRef(null); const currentlyFocusedField = useRef(null); const valueLength = value ? value.length : 0; @@ -260,6 +261,12 @@ const MarkdownTextInput = React.forwardRef( 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( [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( autoCapitalize={autoCapitalize} className={className} onKeyDown={handleKeyPress} + onCompositionStart={startComposition} onKeyUp={updateSelection} onInput={handleOnChangeText} onClick={handleClick}