diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx index e057771e..e6cdce6a 100644 --- a/src/MarkdownTextInput.web.tsx +++ b/src/MarkdownTextInput.web.tsx @@ -124,6 +124,12 @@ const MarkdownTextInput = React.forwardRef( return e; }, []); + // Placeholder text color logic + const updateTextColor = useCallback((target: HTMLDivElement, text: string) => { + const node = target; + node.style.color = String(placeholder && (text === '' || text === '\n') ? placeholderTextColor : (style as TextStyle).color || 'black'); + }, []); + const handleKeyPress = useCallback( (e: KeyboardEvent) => { const hostNode = e.target; @@ -173,6 +179,8 @@ const MarkdownTextInput = React.forwardRef( return; } + updateTextColor(divRef.current, e.target.innerText); + const text = parseText(divRef.current, e.target.innerText, processedMarkdownStyle, !multiline); if (onChange) { const event = e as unknown as NativeSyntheticEvent; @@ -182,9 +190,7 @@ const MarkdownTextInput = React.forwardRef( if (onChangeText) { const normalizedText = normalizeValue(text); - if (onChangeText !== undefined) { - onChangeText(normalizedText); - } + onChangeText(normalizedText); } }, [multiline, onChange, onChangeText, setEventProps], @@ -267,10 +273,14 @@ const MarkdownTextInput = React.forwardRef( const r = currentRef; if (r) { (r as unknown as TextInput).isFocused = () => document.activeElement === r; - (r as unknown as TextInput).clear = () => r.innerText && (r.innerText = ''); + (r as unknown as TextInput).clear = () => { + r.innerText = ''; + updateTextColor(r, ''); + }; - // Placeholder text color logic - r.style.color = String(placeholder && ((!value && (r.innerText === '' || r.innerText === '\n')) || value === '') ? placeholderTextColor : (style as TextStyle).color || 'black'); + if (value === undefined) { + updateTextColor(r, r.innerText); + } } if (ref) { @@ -298,6 +308,7 @@ const MarkdownTextInput = React.forwardRef( }; setCursorPosition(divRef.current, text.length, !multiline); } + updateTextColor(divRef.current, value); }, [multiline, processedMarkdownStyle, processedValue]); return (