botris.social/femto-webapp
1
0
Fork 0
Code Issues 9 Pull requests Projects Releases Packages Wiki Activity Actions

fix fancy text editor bug

Browse source
This commit is contained in:
john 2025-05-26 22:30:34 +02:00
parent 578d348728
commit 48ea06294e
1 changed files with 6 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/components/inputs/FancyTextEditor.tsx
View file

@ -15,7 +15,7 @@ export interface TextInputKeyDownEvent {
} }
export default function FancyTextEditor({ export default function FancyTextEditor({
value: _value, value: value,
onInput, onInput,
onKeyDown, onKeyDown,
className: extraClasses = '', className: extraClasses = '',
@ -24,10 +24,7 @@ export default function FancyTextEditor({
const divRef = useRef<HTMLDivElement>(null) const divRef = useRef<HTMLDivElement>(null)
const [hasFocus, setHasFocus] = useState(false) const [hasFocus, setHasFocus] = useState(false)
// the contenteditable likes to slip in newlines at the bottom of our innerText const trimmedValue = value.trim()
// 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()
// The funky mechanics here are to stop the cursor from jumping back the start. // 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, // It probably will have the cursor jump to the start if anything changes programmatically,
@ -38,12 +35,12 @@ export default function FancyTextEditor({
return return
} }
if (!value && !hasFocus) { if (!trimmedValue && !hasFocus) {
div.innerText = placeholder div.innerText = placeholder
} else if (div.innerText !== value) { } else if (div.innerText.trim() !== trimmedValue) {
div.innerText = value div.innerText = trimmedValue
} }
}, [hasFocus, placeholder, value]) }, [hasFocus, placeholder, trimmedValue])
useEffect(() => { useEffect(() => {
const div = divRef.current! const div = divRef.current!