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({
value: _value,
value: value,
onInput,
onKeyDown,
className: extraClasses = '',
@ -24,10 +24,7 @@ export default function FancyTextEditor({
const divRef = useRef<HTMLDivElement>(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!