Diacritics fix

src/MarkdownTextInput.web.tsx

@@ -156,6 +156,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 contentSelection = useRef<Selection | null>(null);
@@ -257,18 +258,17 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
       return e;
     }, []);
 
-    // Placeholder text color logic
-    const updateTextColor = useCallback((node: HTMLDivElement, text: string) => {
-      // eslint-disable-next-line no-param-reassign -- we need to change the style of the node, so we need to modify it
-      node.style.color = String(placeholder && (text === '' || text === '\n') ? placeholderTextColor : flattenedStyle.color || 'black');
-    }, []);
-
     const handleOnChangeText = useCallback(
       (e: SyntheticEvent<HTMLDivElement>) => {
         if (!divRef.current || !(e.target instanceof HTMLElement)) {
           return;
         }
 
+        if (compositionRef.current) {
+          compositionRef.current = false;
+          return;
+        }
+
         let text = '';
         const nativeEvent = e.nativeEvent as MarkdownNativeEvent;
         switch (nativeEvent.inputType) {
@@ -281,7 +281,6 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
           default:
             text = parseText(divRef.current, e.target.innerText, processedMarkdownStyle).text;
         }
-        updateTextColor(divRef.current, e.target.innerText);
 
         if (onChange) {
           const event = e as unknown as NativeSyntheticEvent<any>;
@@ -438,13 +437,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
         (r as unknown as TextInput).isFocused = () => document.activeElement === r;
         (r as unknown as TextInput).clear = () => {
           r.innerText = '';
-          updateTextColor(r, '');
         };
-
-        if (value === '' || value === undefined) {
-          // update to placeholder color when value is empty
-          updateTextColor(r, r.innerText);
-        }
       }
 
       if (ref) {
@@ -471,7 +464,6 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
 
         const text = processedValue !== undefined ? processedValue : '';
         parseText(divRef.current, text, processedMarkdownStyle, text.length);
-        updateTextColor(divRef.current, value);
       },
       [multiline, processedMarkdownStyle, processedValue],
     );
@@ -507,13 +499,18 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
     }, []);
 
     useEffect(() => {
+      document.documentElement.style.setProperty('--placeholder-color', placeholderTextColor as string);
       // focus the input on mount if autoFocus is set
       if (!(divRef.current && autoFocus)) {
         return;
       }
       divRef.current.focus();
     }, []);
 
+    const startComposition = useCallback(() => {
+      compositionRef.current = true;
+    }, []);
+
     return (
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       <div
@@ -529,6 +526,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
         autoCapitalize={autoCapitalize}
         className={className}
         onKeyDown={handleKeyPress}
+        onCompositionStart={startComposition}
         onKeyUp={updateSelection}
         onInput={handleOnChangeText}
         onSelect={handleSelectionChange}

src/web/MarkdownTextInput.css

@@ -21,4 +21,5 @@
   pointer-events: none;
   display: block; /* For Firefox */
   content: attr(placeholder);
+  color: var(--placeholder-color);
 }