Revert "chore(client/dx): disable CK premium features for now"

This reverts commit a000b8a28ba21c6ed08cdca884beece3466a6a49.

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, PREMIUM_PLUGINS } from "@triliumnext/ckeditor5";
+import { buildExtraCommands, type EditorConfig, PREMIUM_PLUGINS } from "@triliumnext/ckeditor5";
 import { getHighlightJsNameForMime } from "../../../services/mime_types.js";
 import options from "../../../services/options.js";
 import { ensureMimeTypesForHighlighting, isSyntaxHighlightEnabled } from "../../../services/syntax_highlight.js";
@@ -154,7 +154,7 @@ export async function buildConfig(opts: BuildEditorOptions): Promise<EditorConfi
         slashCommand: {
             removeCommands: [],
             dropdownLimit: Number.MAX_SAFE_INTEGER,
-            // extraCommands: buildExtraCommands()
+            extraCommands: buildExtraCommands()
         },
         template: {
             definitions: await getTemplates()

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

@@ -12,6 +12,7 @@ import { buildSelectedBackgroundColor } from "../../components/touch_bar.js";
 import { buildConfig, BuildEditorOptions, OPEN_SOURCE_LICENSE_KEY } from "./ckeditor/config.js";
 import type FNote from "../../entities/fnote.js";
 import { PopupEditor, ClassicEditor, EditorWatchdog, type CKTextEditor, type MentionFeed, type WatchdogConfig, EditorConfig } from "@triliumnext/ckeditor5";
+import "@triliumnext/ckeditor5/index.css";
 import { updateTemplateCache } from "./ckeditor/snippets.js";
 
 const TPL = /*html*/`

packages/ckeditor5/src/extra_slash_commands.ts

@@ -0,0 +1,139 @@
+import type { Editor } from 'ckeditor5';
+import type { SlashCommandEditorConfig  } from 'ckeditor5-premium-features';
+import { icons as footnoteIcons } from '@triliumnext/ckeditor5-footnotes';
+import IconPageBreak from "@ckeditor/ckeditor5-icons/theme/icons/page-break.svg?raw";
+import IconAlignLeft from "@ckeditor/ckeditor5-icons/theme/icons/align-left.svg?raw";
+import IconAlignCenter from "@ckeditor/ckeditor5-icons/theme/icons/align-center.svg?raw";
+import IconAlignRight from "@ckeditor/ckeditor5-icons/theme/icons/align-right.svg?raw";
+import IconAlignJustify from "@ckeditor/ckeditor5-icons/theme/icons/align-justify.svg?raw";
+import bxInfoCircle from "boxicons/svg/regular/bx-info-circle.svg?raw";
+import bxBulb from "boxicons/svg/regular/bx-bulb.svg?raw";
+import bxCommentError from "boxicons/svg/regular/bx-comment-error.svg?raw";
+import bxErrorCircle from "boxicons/svg/regular/bx-error-circle.svg?raw";
+import bxError from "boxicons/svg/regular/bx-error.svg?raw";
+import { COMMAND_NAME as INSERT_DATE_TIME_COMMAND } from './plugins/insert_date_time.js';
+import { COMMAND_NAME as INTERNAL_LINK_COMMAND } from './plugins/internallink.js';
+import { COMMAND_NAME as INCLUDE_NOTE_COMMAND } from './plugins/includenote.js';
+import { COMMAND_NAME as MARKDOWN_IMPORT_COMMAND } from './plugins/markdownimport.js';
+import { ADMONITION_TYPES, type AdmonitionType } from '@triliumnext/ckeditor5-admonition';
+import dateTimeIcon from './icons/date-time.svg?raw';
+import internalLinkIcon from './icons/trilium.svg?raw';
+import noteIcon from './icons/note.svg?raw';
+import importMarkdownIcon from './icons/markdown-mark.svg?raw';
+import { icons as mathIcons, MathUI } from '@triliumnext/ckeditor5-math';
+
+type SlashCommandDefinition = SlashCommandEditorConfig["extraCommands"][number];
+
+export default function buildExtraCommands(): SlashCommandDefinition[] {
+    return [
+        ...buildAlignmentExtraCommands(),
+        ...buildAdmonitionExtraCommands(),
+        {
+            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: INSERT_DATE_TIME_COMMAND
+        },
+        {
+            id: "internal-link",
+            title: "Internal Trilium link",
+            description: "Insert a link to another Trilium note",
+            aliases: [ "internal link", "trilium link", "reference link" ],
+            icon: internalLinkIcon,
+            commandName: INTERNAL_LINK_COMMAND
+        },
+        {
+            id: "math",
+            title: "Math equation",
+            description: "Insert a math equation",
+            icon: mathIcons.ckeditor,
+            execute: (editor: Editor) => editor.plugins.get(MathUI)._showUI()
+        },
+        {
+            id: "include-note",
+            title: "Include note",
+            description: "Display the content of another note in this note",
+            icon: noteIcon,
+            commandName: INCLUDE_NOTE_COMMAND
+        },
+        {
+            id: "page-break",
+            title: "Page break",
+            description: "Insert a page break (for printing)",
+            icon: IconPageBreak,
+            commandName: "pageBreak"
+        },
+        {
+            id: "markdown-import",
+            title: "Markdown import",
+            description: "Import a markdown file into this note",
+            icon: importMarkdownIcon,
+            commandName: MARKDOWN_IMPORT_COMMAND
+        }
+    ];
+}
+
+function buildAlignmentExtraCommands(): SlashCommandDefinition[] {
+    return [
+        {
+            id: "align-left",
+            title: "Align Left",
+            description: "Align text to the left",
+            icon: IconAlignLeft,
+            execute: (editor: Editor) => editor.execute("alignment", { value: "left" }),
+        },
+        {
+            id: "align-center",
+            title: "Align Center",
+            description: "Align text to the center",
+            icon: IconAlignCenter,
+            execute: (editor: Editor) => editor.execute("alignment", { value: "center" }),
+        },
+        {
+            id: "align-right",
+            title: "Align Right",
+            description: "Align text to the right",
+            icon: IconAlignRight,
+            execute: (editor: Editor) => editor.execute("alignment", { value: "right" }),
+        },
+        {
+            id: "align-justify",
+            title: "Justify",
+            description: "Justify text alignment",
+            icon: IconAlignJustify,
+            execute: (editor: Editor) => editor.execute("alignment", { value: "justify" }),
+        }
+    ];
+}
+
+function buildAdmonitionExtraCommands(): SlashCommandDefinition[] {
+    const commands: SlashCommandDefinition[] = [];
+    const admonitionIcons: Record<AdmonitionType, string> = {
+        note: bxInfoCircle,
+        tip: bxBulb,
+        important: bxCommentError,
+        caution: bxErrorCircle,
+        warning: bxError,
+    };
+
+    for (const [ keyword, definition ] of Object.entries(ADMONITION_TYPES)) {
+        commands.push({
+            id: keyword,
+            title: definition.title,
+            description: "Inserts a new admonition",
+            icon: admonitionIcons[keyword as AdmonitionType],
+            execute: (editor: Editor) => editor.execute("admonition", { forceValue: keyword as AdmonitionType }),
+            aliases: [ "box" ]
+        });
+    }
+    return commands;
+}
+

packages/ckeditor5/src/index.ts

@@ -6,8 +6,8 @@ import "./translation_overrides.js";
 export { EditorWatchdog } from "ckeditor5";
 export { PREMIUM_PLUGINS } from "./plugins.js";
 export type { EditorConfig, MentionFeed, MentionFeedObjectItem, ModelNode, ModelPosition, ModelElement, WatchdogConfig } from "ckeditor5";
-// export type { TemplateDefinition } from "ckeditor5-premium-features";
-// export { default as buildExtraCommands } from "./extra_slash_commands.js";
+export type { TemplateDefinition } from "ckeditor5-premium-features";
+export { default as buildExtraCommands } from "./extra_slash_commands.js";
 
 // Import with sideffects to ensure that type augmentations are present.
 import "@triliumnext/ckeditor5-math";

packages/ckeditor5/src/plugins.ts

@@ -1,5 +1,5 @@
 import { Autoformat, AutoLink, BlockQuote, BlockToolbar, Bold, CKFinderUploadAdapter, Clipboard, Code, CodeBlock, Enter, FindAndReplace, Font, FontBackgroundColor, FontColor, GeneralHtmlSupport, Heading, HeadingButtonsUI, HorizontalLine, Image, ImageCaption, ImageInline, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Alignment, Indent, IndentBlock, Italic, Link, List, ListProperties, Mention, PageBreak, Paragraph, ParagraphButtonUI, PasteFromOffice, PictureEditing, RemoveFormat, SelectAll, ShiftEnter, SpecialCharacters, SpecialCharactersEssentials, Strikethrough, Style, Subscript, Superscript, Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableSelection, TableToolbar, TextPartLanguage, TextTransformation, TodoList, Typing, Underline, Undo, Bookmark, Emoji, Notification, EmojiMention, EmojiPicker } from "ckeditor5";
-// import { SlashCommand, Template } from "ckeditor5-premium-features";
+import { SlashCommand, Template } from "ckeditor5-premium-features";
 import type { Plugin } from "ckeditor5";
 import CutToNotePlugin from "./plugins/cuttonote.js";
 import UploadimagePlugin from "./plugins/uploadimage.js";
@@ -82,8 +82,8 @@ export const CORE_PLUGINS: typeof Plugin[] = [
  * Plugins that require a premium CKEditor license key to work.
  */
 export const PREMIUM_PLUGINS: typeof Plugin[] = [
-    // SlashCommand,
-    // Template
+    SlashCommand,
+    Template
 ];
 
 /**