fix(react/ribbon): attribute editor sometimes not clearing between notes

This commit is contained in:
Elian Doran 2025-08-27 15:53:27 +03:00
parent 470edc4d70
commit 461eb273d9
No known key found for this signature in database
2 changed files with 15 additions and 5 deletions

View file

@ -3,7 +3,15 @@ import { useEffect, useImperativeHandle, useRef } from "preact/compat";
import { MutableRef } from "preact/hooks"; import { MutableRef } from "preact/hooks";
export interface CKEditorApi { export interface CKEditorApi {
focus: () => void; focus(): void;
/**
* Imperatively sets the text in the editor.
*
* Prefer setting `currentValue` prop where possible.
*
* @param text text to set in the editor
*/
setText(text: string): void;
} }
interface CKEditorOpts { interface CKEditorOpts {
@ -34,6 +42,9 @@ export default function CKEditor({ apiRef, currentValue, editor, config, disable
writer.setSelection(writer.createPositionAt(documentRoot, "end")); writer.setSelection(writer.createPositionAt(documentRoot, "end"));
} }
}); });
},
setText(text: string) {
textEditorRef.current?.setData(text);
} }
}; };
}, [ editorContainerRef ]); }, [ editorContainerRef ]);

View file

@ -86,10 +86,9 @@ export default function AttributeEditor({ note, componentId, notePath, ntxId, hi
const [ state, setState ] = useState<"normal" | "showHelpTooltip" | "showAttributeDetail">(); const [ state, setState ] = useState<"normal" | "showHelpTooltip" | "showAttributeDetail">();
const [ error, setError ] = useState<unknown>(); const [ error, setError ] = useState<unknown>();
const [ needsSaving, setNeedsSaving ] = useState(false); const [ needsSaving, setNeedsSaving ] = useState(false);
const [ initialValue, setInitialValue ] = useState<string>("");
const lastSavedContent = useRef<string>(); const lastSavedContent = useRef<string>();
const currentValueRef = useRef(initialValue); const currentValueRef = useRef("");
const wrapperRef = useRef<HTMLDivElement>(null); const wrapperRef = useRef<HTMLDivElement>(null);
const editorRef = useRef<CKEditorApi>(); const editorRef = useRef<CKEditorApi>();
@ -126,7 +125,7 @@ export default function AttributeEditor({ note, componentId, notePath, ntxId, hi
htmlAttrs += "&nbsp;"; htmlAttrs += "&nbsp;";
} }
setInitialValue(htmlAttrs); editorRef.current?.setText(htmlAttrs);
} }
function parseAttributes() { function parseAttributes() {
@ -290,7 +289,7 @@ export default function AttributeEditor({ note, componentId, notePath, ntxId, hi
className="attribute-list-editor" className="attribute-list-editor"
tabIndex={200} tabIndex={200}
editor={CKEditorAttributeEditor} editor={CKEditorAttributeEditor}
currentValue={initialValue} currentValue="" // handled imperatively
config={{ config={{
toolbar: { items: [] }, toolbar: { items: [] },
placeholder: t("attribute_editor.placeholder"), placeholder: t("attribute_editor.placeholder"),