chore(react/ribbon): add blur & keydown events

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

@@ -1,42 +1,4 @@
-import { t } from "../../services/i18n.js";
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import contextMenuService from "../../menus/context_menu.js";
-import { AttributeEditor, type EditorConfig, type ModelElement, type MentionFeed, type ModelNode, type ModelPosition } from "@triliumnext/ckeditor5";
-import noteCreateService from "../../services/note_create.js";
-import attributeService from "../../services/attributes.js";
-import type AttributeDetailWidget from "./attribute_detail.js";
-import type { CommandData, EventData, EventListener, FilteredCommandNames } from "../../components/app_context.js";
-import type { default as FAttribute, AttributeType } from "../../entities/fattribute.js";
-
 export default class AttributeEditorWidget extends NoteContextAwareWidget implements EventListener<"entitiesReloaded">, EventListener<"addNewLabel">, EventListener<"addNewRelation"> {
-    private attributeDetailWidget: AttributeDetailWidget;
-    private $editor!: JQuery<HTMLElement>;
-    private $addNewAttributeButton!: JQuery<HTMLElement>;
-    private $saveAttributesButton!: JQuery<HTMLElement>;
-
-    private textEditor!: AttributeEditor;
-    private lastUpdatedNoteId!: string | undefined;
-
-    constructor(attributeDetailWidget: AttributeDetailWidget) {
-        super();
-
-        this.attributeDetailWidget = attributeDetailWidget;
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$editor = this.$widget.find(".attribute-list-editor");
-
-        this.initialized = this.initEditor();
-
-        this.$editor.on("keydown", async (e) => {
-            this.attributeDetailWidget.hide();
-        });
-
-        this.$editor.on("blur", () => setTimeout(() => this.save(), 100)); // Timeout to fix https://github.com/zadam/trilium/issues/4160
-
-        this.$saveAttributesButton.on("click", () => this.save());
-    }
 
     // triggered from keyboard shortcut
     async addNewLabelEvent({ ntxId }: EventData<"addNewLabel">) {

apps/client/src/widgets/react/CKEditor.tsx

@@ -11,9 +11,11 @@ interface CKEditorOpts {
     disableSpellcheck?: boolean;
     onChange?: (newValue?: string) => void;
     onClick?: (e: MouseEvent, pos?: ModelPosition | null) => void;
+    onKeyDown?: (e: KeyboardEvent) => void;
+    onBlur?: () => void;
 }
 
-export default function CKEditor({ currentValue, className, tabIndex, editor, config, disableNewlines, disableSpellcheck, onChange, onClick }: CKEditorOpts) {
+export default function CKEditor({ currentValue, editor, config, disableNewlines, disableSpellcheck, onChange, onClick, ...restProps }: CKEditorOpts) {
     const editorContainerRef = useRef<HTMLDivElement>(null);    
     const textEditorRef = useRef<CKTextEditor>(null);
 
@@ -62,14 +64,13 @@ export default function CKEditor({ currentValue, className, tabIndex, editor, co
     return (
         <div
             ref={editorContainerRef}
-            className={className}
-            tabIndex={tabIndex}
             onClick={(e) => {
                 if (onClick) {
                     const pos = textEditorRef.current?.model.document.selection.getFirstPosition();
                     onClick(e, pos);
                 }
             }}
+            {...restProps}
         />
     )
 }

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

@@ -282,6 +282,8 @@ export default function AttributeEditor({ note, componentId }: { note: FNote, co
                             setState("showHelpTooltip");
                         }
                     }}
+                    onKeyDown={() => attributeDetailWidget.hide()}
+                    onBlur={() => save()}
                     disableNewlines disableSpellcheck
                 />