Merge branch 'develop' into note-create

apps/client/src/services/utils.ts

@@ -332,8 +332,6 @@ async function openDialog($dialog: JQuery<HTMLElement>, closeActDialog = true) {
         }
     });
 
-    // TODO: Fix once keyboard_actions is ported.
-    // @ts-ignore
     const keyboardActionsService = (await import("./keyboard_actions.js")).default;
     keyboardActionsService.updateDisplayedShortcuts($dialog);
 

apps/client/src/stylesheets/style.css

@@ -25,6 +25,7 @@
     --bs-body-font-weight: var(--main-font-weight) !important;
     --bs-body-color: var(--main-text-color) !important;
     --bs-body-bg: var(--main-background-color) !important;    
+    --ck-mention-list-max-height: 500px;
 }
 
 .table {
@@ -1273,6 +1274,26 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
     white-space: normal !important;
 }
 
+/* Slash commands */
+
+.ck.ck-slash-command-button {
+    padding: 0.5em 1em !important;
+}
+
+.ck.ck-slash-command-button__text-part {
+    margin-left: 0.5em;
+    line-height: 1.2em !important;
+}
+
+.ck.ck-slash-command-button__text-part > span {
+    line-height: inherit !important;
+}
+
+.ck.ck-slash-command-button__text-part .ck.ck-slash-command-button__description {
+    display: block;
+    opacity: 0.8;
+}
+
 .area-expander {
     display: flex;
     flex-direction: row;

apps/client/src/stylesheets/theme-next/notes/text.css

@@ -201,6 +201,11 @@
     color: var(--menu-item-icon-color);
 }
 
+/* Slash commands */
+.ck.ck-slash-command-button__text-part .ck.ck-button__label {
+    font-weight: bold;
+}
+
 /* Separator */
 :root .ck .ck-list__separator {
     margin: .5em 0;

apps/client/src/vite-env.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="vite/client" />
+
+interface ViteTypeOptions {
+  strictImportMetaEnv: unknown
+}
+
+interface ImportMetaEnv {
+    /** The license key for CKEditor premium features. */
+    readonly VITE_CKEDITOR_KEY?: string;
+    /** Whether to enable the CKEditor inspector (see https://ckeditor.com/docs/ckeditor5/latest/framework/develpment-tools/inspector.html). */
+    readonly VITE_CKEDITOR_ENABLE_INSPECTOR?: "true" | "false";
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

apps/client/src/widgets/dialogs/add_link.ts

@@ -111,7 +111,7 @@ export default class AddLinkDialog extends BasicWidget {
 
         this.updateTitleSettingsVisibility();
 
-        utils.openDialog(this.$widget);
+        await utils.openDialog(this.$widget);
 
         this.$autoComplete.val("");
         this.$linkTitle.val("");

apps/client/src/widgets/type_widgets/ckeditor/config.ts

@@ -1,6 +1,6 @@
 import { ALLOWED_PROTOCOLS } from "../../../services/link.js";
 import { MIME_TYPE_AUTO } from "@triliumnext/commons";
-import type { EditorConfig } from "@triliumnext/ckeditor5";
+import { buildExtraCommands, type EditorConfig } from "@triliumnext/ckeditor5";
 import { getHighlightJsNameForMime } from "../../../services/mime_types.js";
 import options from "../../../services/options.js";
 import { ensureMimeTypesForHighlighting, isSyntaxHighlightEnabled } from "../../../services/syntax_highlight.js";
@@ -121,6 +121,11 @@ export function buildConfig(): EditorConfig {
         clipboard: {
             copy: copyTextWithToast
         },
+        slashCommand: {
+            removeCommands: [],
+            dropdownLimit: Number.MAX_SAFE_INTEGER,
+            extraCommands: buildExtraCommands()
+        },
         // This value must be kept in sync with the language defined in webpack.config.js.
         language: "en"
     };

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

@@ -19,8 +19,6 @@ import { PopupEditor, ClassicEditor, EditorWatchdog, type CKTextEditor, type Men
 import "@triliumnext/ckeditor5/index.css";
 import { normalizeMimeTypeForCKEditor } from "@triliumnext/commons";
 
-const ENABLE_INSPECTOR = false;
-
 const mentionSetup: MentionFeed[] = [
     {
         marker: "@",
@@ -203,7 +201,7 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
                     classes: true,
                     attributes: true
                 },
-                licenseKey: "GPL"
+                licenseKey: getLicenseKey()
             };
 
             const contentLanguage = this.note?.getLabelValue("language");
@@ -278,7 +276,7 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
 
             editor.model.document.on("change:data", () => this.spacedUpdate.scheduleUpdate());
 
-            if (glob.isDev && ENABLE_INSPECTOR) {
+            if (import.meta.env.VITE_CKEDITOR_ENABLE_INSPECTOR === "true") {
                 const CKEditorInspector = (await import("@ckeditor/ckeditor5-inspector")).default;
                 CKEditorInspector.attach(editor);
             }
@@ -640,3 +638,13 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
     }
 
 }
+
+function getLicenseKey() {
+    const premiumLicenseKey = import.meta.env.VITE_CKEDITOR_KEY;
+    if (!premiumLicenseKey) {
+        logError("CKEditor license key is not set, premium features will not be available.");
+        return "GPL";
+    }
+
+    return premiumLicenseKey;
+}