feat(slash): insert date/time

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

@@ -19,7 +19,7 @@ import { PopupEditor, ClassicEditor, EditorWatchdog, type CKTextEditor, type Men
 import "@triliumnext/ckeditor5/index.css";
 import { normalizeMimeTypeForCKEditor } from "@triliumnext/commons";
 
-const ENABLE_INSPECTOR = false;
+const ENABLE_INSPECTOR = true;
 
 const mentionSetup: MentionFeed[] = [
     {

packages/ckeditor5/src/extra_slash_commands.ts

@@ -3,13 +3,27 @@ import type { SlashCommandEditorConfig  } from 'ckeditor5-premium-features';
 import { icons as admonitionIcons } from '@triliumnext/ckeditor5-admonition';
 import { icons as footnoteIcons } from '@triliumnext/ckeditor5-footnotes';
 import { ADMONITION_TYPES, type AdmonitionType } from '@triliumnext/ckeditor5-admonition';
+import dateTimeIcon from './icons/date-time.svg?raw';
 
 type SlashCommandDefinition = SlashCommandEditorConfig["extraCommands"][number];
 
 export default function buildExtraCommands(): SlashCommandDefinition[] {
     return [
         ...buildAdmonitionExtraCommands(),
-        ...buildFootnoteExtraCommands()
+        {
+            id: 'footnote',
+            title: 'Footnote',
+            description: 'Create a new footnote and reference it here',
+            icon: footnoteIcons.insertFootnoteIcon,
+            commandName: "InsertFootnote"
+        },
+        {
+            id: "datetime",
+            title: "Insert Date/Time",
+            description: "Insert the current date and time",
+            icon: dateTimeIcon,
+            commandName: "insertDateTimeToText"
+        }
     ];
 }
 
@@ -27,14 +41,3 @@ function buildAdmonitionExtraCommands(): SlashCommandDefinition[] {
     return commands;
 }
 
-function buildFootnoteExtraCommands(): SlashCommandDefinition[] {
-    return [
-        {
-            id: 'footnote',
-            title: 'Footnote',
-            description: 'Create a new footnote and reference it here',
-            icon: footnoteIcons.insertFootnoteIcon,
-            execute: (editor: Editor) => editor.execute("InsertFootnote")
-        }
-    ];
-}

packages/ckeditor5/src/plugins/insert_date_time.ts

@@ -1,10 +1,14 @@
-import { ButtonView, Plugin } from 'ckeditor5';
+import { ButtonView, Command, Plugin } from 'ckeditor5';
 import dateTimeIcon from '../icons/date-time.svg?raw';
 
+const COMMAND_NAME = 'insertDateTimeToText';
+
 export default class InsertDateTimePlugin extends Plugin {
     init() {
         const editor = this.editor;
 
+        editor.commands.add(COMMAND_NAME, new InsertDateTimeCommand(editor));
+
         editor.ui.componentFactory.add('dateTime', locale => {
             const view = new ButtonView( locale );
 
@@ -15,17 +19,30 @@ export default class InsertDateTimePlugin extends Plugin {
             } );
 
             // enable only if the editor is not read only
-            view.bind('isEnabled').to(editor, 'isReadOnly', isReadOnly => !isReadOnly);
+            const command = editor.commands.get(COMMAND_NAME)!;
-
+            view.bind('isEnabled').to(command, 'isEnabled');
             view.on('execute', () => {
-                const editorEl = editor.editing.view.getDomRoot();
+                editor.execute(COMMAND_NAME);
-                const component = glob.getComponentByEl(editorEl);
-
-                component.triggerCommand('insertDateTimeToText');
                 editor.editing.view.focus();
-            } );
+            });
-
             return view;
         });
     }
-}
+}
+
+class InsertDateTimeCommand extends Command {
+
+    refresh() {
+        this.isEnabled = !this.editor.isReadOnly;
+    }
+
+    execute() {
+        const editor = this.editor;
+        const editorEl = editor.editing.view.getDomRoot();
+        const component = glob.getComponentByEl(editorEl);
+
+        component.triggerCommand('insertDateTimeToText');
+        editor.editing.view.focus();
+    }
+
+}