chore(react/ribbon): add some CKEditor events

apps/client/src/widgets/attribute_widgets/attribute_editor.ts

@@ -212,29 +212,6 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem
         return $("<div>").html(str).text();
     }
 
-    async initEditor() {
-        this.$widget.show();
-
-        this.$editor.on("click", (e) => this.handleEditorClick(e));
-
-        this.textEditor.model.document.on("change:data", () => this.dataChanged());
-        this.textEditor.editing.view.document.on(
-            "enter",
-            (event, data) => {
-                // disable entering new line - see https://github.com/ckeditor/ckeditor5/issues/9422
-                data.preventDefault();
-                event.stop();
-            },
-            { priority: "high" }
-        );
-
-        // disable spellcheck for attribute editor
-        const documentRoot = this.textEditor.editing.view.document.getRoot();
-        if (documentRoot) {
-            this.textEditor.editing.view.change((writer) => writer.setAttribute("spellcheck", "false", documentRoot));
-        }
-    }
-
     dataChanged() {
         this.lastUpdatedNoteId = this.noteId;
 

apps/client/src/widgets/ribbon/components/AttributeEditor.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "preact/hooks"
+import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks"
 import { AttributeEditor as CKEditor, EditorConfig, MentionFeed } from "@triliumnext/ckeditor5";
 import { t } from "../../../services/i18n";
 import server from "../../../services/server";
@@ -61,17 +61,43 @@ const editorConfig: EditorConfig = {
 
 export default function AttributeEditor() {
     const editorContainerRef = useRef<HTMLDivElement>(null);    
+    const [ attributeDetailVisible, setAttributeDetailVisible ] = useState(false);
+
+    const onClick = useCallback(() => {
+        console.log("Clicked");
+    }, []);
 
     useEffect(() => {        
         if (!editorContainerRef.current) return;
 
         CKEditor.create(editorContainerRef.current, editorConfig).then((textEditor) => {
+            function onDataChanged() {
+                console.log("Data changed");
+            }
 
+            // Prevent newlines
+            textEditor.editing.view.document.on(
+                "enter",
+                (event, data) => {
+                    // disable entering new line - see https://github.com/ckeditor/ckeditor5/issues/9422
+                    data.preventDefault();
+                    event.stop();
+                },
+                { priority: "high" }
+            );
+
+            // disable spellcheck for attribute editor
+            const documentRoot = textEditor.editing.view.document.getRoot();
+            if (documentRoot) {
+                textEditor.editing.view.change((writer) => writer.setAttribute("spellcheck", "false", documentRoot));
+            }
+
+            textEditor.model.document.on("change:data", onDataChanged);
         });
     }, []);
 
     return (
-        <div style="position: relative; padding-top: 10px; padding-bottom: 10px">
+        <div style="position: relative; padding-top: 10px; padding-bottom: 10px" onClick={onClick}>
             <div ref={editorContainerRef} class="attribute-list-editor" tabindex={200} />
         </div>
     )