diff --git a/src/components/inputs/FancyTextEditor.tsx b/src/components/inputs/FancyTextEditor.tsx index f23c28d..d72c391 100644 --- a/src/components/inputs/FancyTextEditor.tsx +++ b/src/components/inputs/FancyTextEditor.tsx @@ -15,7 +15,7 @@ export interface TextInputKeyDownEvent { } export default function FancyTextEditor({ - value: _value, + value: value, onInput, onKeyDown, className: extraClasses = '', @@ -24,10 +24,7 @@ export default function FancyTextEditor({ const divRef = useRef(null) const [hasFocus, setHasFocus] = useState(false) - // the contenteditable likes to slip in newlines at the bottom of our innerText - // which makes it bad to check for empty string because it might be "\n" - // so we just trim it upfront and then fogeddaboudit - const value = _value.trim() + const trimmedValue = value.trim() // The funky mechanics here are to stop the cursor from jumping back the start. // It probably will have the cursor jump to the start if anything changes programmatically, @@ -38,12 +35,12 @@ export default function FancyTextEditor({ return } - if (!value && !hasFocus) { + if (!trimmedValue && !hasFocus) { div.innerText = placeholder - } else if (div.innerText !== value) { - div.innerText = value + } else if (div.innerText.trim() !== trimmedValue) { + div.innerText = trimmedValue } - }, [hasFocus, placeholder, value]) + }, [hasFocus, placeholder, trimmedValue]) useEffect(() => { const div = divRef.current!