chore(react/ribbon): load current attributes in editor

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();
 

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<HTMLDivElement>(null);    
     const textEditorRef = useRef<CKTextEditor>(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 (
         <div
             ref={editorContainerRef}

apps/client/src/widgets/ribbon/OwnedAttributesTab.tsx

@@ -4,7 +4,7 @@ import { TabContext } from "./ribbon-interface";
 export default function OwnedAttributesTab({ note }: TabContext) {
     return (
         <div className="attribute-list">
-            <AttributeEditor />
+            { note && <AttributeEditor note={note} /> }
         </div>
     )
 }

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 = `
 <p>${t("attribute_editor.help_text_body1")}</p>
@@ -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<string>("");
     const wrapperRef = useRef<HTMLDivElement>(null);
     const { showTooltip, hideTooltip } = useTooltip(wrapperRef, {
         trigger: "focus",
@@ -78,12 +82,30 @@ export default function AttributeEditor() {
         }
     }, [ 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 += "&nbsp;";
+        }
+
+        setCurrentValue(htmlAttrs);
+    }
+
+    useEffect(() => {
+        renderOwnedAttributes(note.getOwnedAttributes(), true);
+    }, [ note ]);
+    
     return (
         <div ref={wrapperRef} style="position: relative; padding-top: 10px; padding-bottom: 10px">
             <CKEditor
                 className="attribute-list-editor"
                 tabIndex={200}
                 editor={CKEditorAttributeEditor}
+                currentValue={currentValue}
                 config={{
                     toolbar: { items: [] },
                     placeholder: t("attribute_editor.placeholder"),