diff --git a/apps/client/src/widgets/react/CKEditor.tsx b/apps/client/src/widgets/react/CKEditor.tsx index 27985fda5..8b8839a38 100644 --- a/apps/client/src/widgets/react/CKEditor.tsx +++ b/apps/client/src/widgets/react/CKEditor.tsx @@ -3,7 +3,15 @@ import { useEffect, useImperativeHandle, useRef } from "preact/compat"; import { MutableRef } from "preact/hooks"; 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 { @@ -34,6 +42,9 @@ export default function CKEditor({ apiRef, currentValue, editor, config, disable writer.setSelection(writer.createPositionAt(documentRoot, "end")); } }); + }, + setText(text: string) { + textEditorRef.current?.setData(text); } }; }, [ editorContainerRef ]); diff --git a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx index 73a37fb4a..9c6084541 100644 --- a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx +++ b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx @@ -86,10 +86,9 @@ export default function AttributeEditor({ note, componentId, notePath, ntxId, hi const [ state, setState ] = useState<"normal" | "showHelpTooltip" | "showAttributeDetail">(); const [ error, setError ] = useState(); const [ needsSaving, setNeedsSaving ] = useState(false); - const [ initialValue, setInitialValue ] = useState(""); const lastSavedContent = useRef(); - const currentValueRef = useRef(initialValue); + const currentValueRef = useRef(""); const wrapperRef = useRef(null); const editorRef = useRef(); @@ -126,7 +125,7 @@ export default function AttributeEditor({ note, componentId, notePath, ntxId, hi htmlAttrs += " "; } - setInitialValue(htmlAttrs); + editorRef.current?.setText(htmlAttrs); } function parseAttributes() { @@ -290,7 +289,7 @@ export default function AttributeEditor({ note, componentId, notePath, ntxId, hi className="attribute-list-editor" tabIndex={200} editor={CKEditorAttributeEditor} - currentValue={initialValue} + currentValue="" // handled imperatively config={{ toolbar: { items: [] }, placeholder: t("attribute_editor.placeholder"),