Skip to content

Commit 578dc3c

Browse files
fix spaces not preserved issue in rich text editor comp
1 parent a04a57b commit 578dc3c

File tree

1 file changed

+24
-2
lines changed

1 file changed

+24
-2
lines changed

client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -344,10 +344,23 @@ const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => {
344344
const propsRef = useRef(props);
345345
propsRef.current = props;
346346

347+
// Local state to manage editor content
348+
const [localValue, setLocalValue] = useState(props.value.value);
349+
const isUserTyping = useRef(false);
350+
351+
// Sync local state with props when they change externally (not from user typing)
352+
useEffect(() => {
353+
if (!isUserTyping.current) {
354+
setLocalValue(props.value.value);
355+
}
356+
}, [props.value.value]);
357+
347358
const debouncedOnChangeRef = useRef(
348359
debounce((html: string, deltaJSON: string, text: string) => {
349-
propsRef.current.value.onChange(html);
360+
// Update delta first as it's the primary source of truth
350361
propsRef.current.delta.onChange(deltaJSON);
362+
// Update value with the HTML representation
363+
propsRef.current.value.onChange(html);
351364
propsRef.current.onEvent("change");
352365
}, 1000)
353366
);
@@ -359,7 +372,16 @@ const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => {
359372
}, []);
360373

361374
const handleChange = (html: string, deltaJSON: string, text: string) => {
375+
// Mark that user is typing
376+
isUserTyping.current = true;
377+
// Update local state immediately for responsive UI
378+
setLocalValue(html);
379+
// Debounce the prop updates
362380
debouncedOnChangeRef.current?.(html, deltaJSON, text);
381+
// Reset the flag after a brief delay
382+
setTimeout(() => {
383+
isUserTyping.current = false;
384+
}, 100);
363385
};
364386

365387
return (
@@ -368,7 +390,7 @@ const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => {
368390
hideToolbar={props.hideToolbar}
369391
toolbar={props.toolbar}
370392
readOnly={props.readOnly}
371-
value={props.value.value}
393+
value={localValue}
372394
placeholder={props.placeholder}
373395
onChange={handleChange}
374396
$style={props.style}

0 commit comments

Comments
 (0)