chore(react/type_widget): insert date/time to text

apps/client/src/widgets/type_widgets/text/EditableText.tsx

@@ -2,12 +2,14 @@ import { useRef, useState } from "preact/hooks";
 import dialog from "../../../services/dialog";
 import toast from "../../../services/toast";
 import utils, { deferred, isMobile } from "../../../services/utils";
-import { useEditorSpacedUpdate, useNoteLabel, useTriliumEvent, useTriliumOption } from "../../react/hooks";
+import { useEditorSpacedUpdate, useKeyboardShortcuts, useNoteLabel, useTriliumEvent, useTriliumOption } from "../../react/hooks";
 import { TypeWidgetProps } from "../type_widget";
 import CKEditorWithWatchdog from "./CKEditorWithWatchdog";
 import "./EditableText.css";
 import { CKTextEditor, ClassicEditor, EditorWatchdog } from "@triliumnext/ckeditor5";
 import Component from "../../../components/component";
+import { RefObject } from "preact";
+import options from "../../../services/options";
 
 /**
  * The editor can operate into two distinct modes:
@@ -15,7 +17,8 @@ import Component from "../../../components/component";
  * - Ballon block mode, in which there is a floating toolbar for the selected text, but another floating button for the entire block (i.e. paragraph).
  * - Decoupled mode, in which the editing toolbar is actually added on the client side (in {@link ClassicEditorToolbar}), see https://ckeditor.com/docs/ckeditor5/latest/examples/framework/bottom-toolbar-editor.html for an example on how the decoupled editor works.
  */
-export default function EditableText({ note, parentComponent, ntxId }: TypeWidgetProps) {
+export default function EditableText({ note, parentComponent, ntxId, noteContext }: TypeWidgetProps) {
+    const containerRef = useRef<HTMLDivElement>(null);
     const [ content, setContent ] = useState<string>();
     const watchdogRef = useRef<EditorWatchdog>(null);
     const [ language ] = useNoteLabel(note, "language");
@@ -59,14 +62,43 @@ export default function EditableText({ note, parentComponent, ntxId }: TypeWidge
 
     useTriliumEvent("focusOnDetail", async ({ ntxId: eventNtxId }) => {
         if (eventNtxId !== ntxId) return;
+        const editor = await waitForEditor();
+        editor?.editing.view.focus();
+    });
+
+    async function waitForEditor() {
         await initialized.current;
         const editor = watchdogRef.current?.editor;
         if (!editor) return;
-        editor.editing.view.focus();
+        return editor;
+    }
+
+    async function addTextToEditor(text: string) {
+        const editor = await waitForEditor();
+        editor?.model.change((writer) => {
+            const insertPosition = editor.model.document.selection.getLastPosition();
+            if (insertPosition) {
+                writer.insertText(text, insertPosition);
+            }
+        });
+    }
+
+    useKeyboardShortcuts("text-detail", containerRef, parentComponent);
+    useTriliumEvent("insertDateTimeToText", ({ ntxId: eventNtxId }) => {
+        if (eventNtxId !== ntxId) return;
+        const date = new Date();
+        const customDateTimeFormat = options.get("customDateTimeFormat");
+        const dateString = utils.formatDateTime(date, customDateTimeFormat);
+
+        addTextToEditor(dateString);
+    });
+    useTriliumEvent("addTextToActiveEditor", ({ text }) => {
+        if (!noteContext?.isActive()) return;
+        addTextToEditor(text);
     });
 
     return (
-        <div class="note-detail-editable-text note-detail-printable">
+        <div ref={containerRef} class="note-detail-editable-text note-detail-printable">
             {note && <CKEditorWithWatchdog
                 className="note-detail-editable-text-editor use-tn-links" tabIndex={300}
                 content={content}

apps/client/src/widgets/type_widgets_old/editable_text.ts

@@ -29,8 +29,6 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
 
         this.initialized = this.initEditor();
 
-        keyboardActionService.setupActionsForElement("text-detail", this.$widget, this);
-
         this.setupImageOpening(false);
 
         super.doRender();
@@ -57,14 +55,6 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
         return this.watchdog?.editor;
     }
 
-    insertDateTimeToTextCommand() {
-        const date = new Date();
-        const customDateTimeFormat = options.get("customDateTimeFormat");
-        const dateString = utils.formatDateTime(date, customDateTimeFormat);
-
-        this.addTextToEditor(dateString);
-    }
-
     async addLinkToEditor(linkHref: string, linkTitle: string) {
         await this.initialized;
 
@@ -76,25 +66,6 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
         });
     }
 
-    async addTextToEditor(text: string) {
-        await this.initialized;
-
-        this.watchdog.editor?.model.change((writer) => {
-            const insertPosition = this.watchdog.editor?.model.document.selection.getLastPosition();
-            if (insertPosition) {
-                writer.insertText(text, insertPosition);
-            }
-        });
-    }
-
-    addTextToActiveEditorEvent({ text }: EventData<"addTextToActiveEditor">) {
-        if (!this.isActive()) {
-            return;
-        }
-
-        this.addTextToEditor(text);
-    }
-
     async addLink(notePath: string, linkTitle: string | null, externalLink: boolean = false) {
         await this.initialized;