diff --git a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts index 4baecd691..3a9a62dbf 100644 --- a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts +++ b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts @@ -289,22 +289,7 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem $el.text(title); } - async refreshWithNote(note: FNote) { - await this.renderOwnedAttributes(note.getOwnedAttributes(), true); - } - async renderOwnedAttributes(ownedAttributes: FAttribute[], saved: boolean) { - // attrs are not resorted if position changes after the initial load - ownedAttributes.sort((a, b) => a.position - b.position); - - let htmlAttrs = (await attributeRenderer.renderAttributes(ownedAttributes, true)).html(); - - if (htmlAttrs.length > 0) { - htmlAttrs += " "; - } - - this.textEditor.setData(htmlAttrs); - if (saved) { this.lastSavedContent = this.textEditor.getData(); diff --git a/apps/client/src/widgets/react/CKEditor.tsx b/apps/client/src/widgets/react/CKEditor.tsx index 8f521a827..60d5f37ab 100644 --- a/apps/client/src/widgets/react/CKEditor.tsx +++ b/apps/client/src/widgets/react/CKEditor.tsx @@ -2,6 +2,7 @@ import { CKTextEditor, type AttributeEditor, type EditorConfig, type ModelPositi import { useEffect, useRef } from "preact/compat"; interface CKEditorOpts { + currentValue?: string; className: string; tabIndex?: number; config: EditorConfig; @@ -12,7 +13,7 @@ interface CKEditorOpts { onClick?: (pos?: ModelPosition | null) => void; } -export default function CKEditor({ className, tabIndex, editor, config, disableNewlines, disableSpellcheck, onChange, onClick }: CKEditorOpts) { +export default function CKEditor({ currentValue, className, tabIndex, editor, config, disableNewlines, disableSpellcheck, onChange, onClick }: CKEditorOpts) { const editorContainerRef = useRef(null); const textEditorRef = useRef(null); @@ -44,9 +45,18 @@ export default function CKEditor({ className, tabIndex, editor, config, disableN if (onChange) { textEditor.model.document.on("change:data", onChange); } + + if (currentValue) { + textEditor.setData(currentValue); + } }); }, []); + useEffect(() => { + if (!textEditorRef.current) return; + textEditorRef.current.setData(currentValue ?? ""); + }, [ currentValue ]); + return (
- + { note && }
) } \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx index d8071f7b9..716c0f25c 100644 --- a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx +++ b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx @@ -5,6 +5,9 @@ import server from "../../../services/server"; import note_autocomplete, { Suggestion } from "../../../services/note_autocomplete"; import CKEditor from "../../react/CKEditor"; import { useTooltip } from "../../react/hooks"; +import FAttribute from "../../../entities/fattribute"; +import attribute_renderer from "../../../services/attribute_renderer"; +import FNote from "../../../entities/fnote"; const HELP_TEXT = `

${t("attribute_editor.help_text_body1")}

@@ -58,9 +61,10 @@ const mentionSetup: MentionFeed[] = [ ]; -export default function AttributeEditor() { +export default function AttributeEditor({ note }: { note: FNote }) { const [ state, setState ] = useState<"normal" | "showHelpTooltip" | "showAttributeDetail">(); + const [ currentValue, setCurrentValue ] = useState(""); const wrapperRef = useRef(null); const { showTooltip, hideTooltip } = useTooltip(wrapperRef, { trigger: "focus", @@ -77,6 +81,23 @@ export default function AttributeEditor() { hideTooltip(); } }, [ state ]); + + async function renderOwnedAttributes(ownedAttributes: FAttribute[], saved: boolean) { + // attrs are not resorted if position changes after the initial load + ownedAttributes.sort((a, b) => a.position - b.position); + + let htmlAttrs = (await attribute_renderer.renderAttributes(ownedAttributes, true)).html(); + + if (htmlAttrs.length > 0) { + htmlAttrs += " "; + } + + setCurrentValue(htmlAttrs); + } + + useEffect(() => { + renderOwnedAttributes(note.getOwnedAttributes(), true); + }, [ note ]); return (
@@ -84,6 +105,7 @@ export default function AttributeEditor() { className="attribute-list-editor" tabIndex={200} editor={CKEditorAttributeEditor} + currentValue={currentValue} config={{ toolbar: { items: [] }, placeholder: t("attribute_editor.placeholder"),