feat(text-snippets): basic integration

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

@@ -7,13 +7,14 @@ import { ensureMimeTypesForHighlighting, isSyntaxHighlightEnabled } from "../../
 import utils from "../../../services/utils.js";
 import emojiDefinitionsUrl from "@triliumnext/ckeditor5/emoji_definitions/en.json?url";
 import { copyTextWithToast } from "../../../services/clipboard_ext.js";
+import getTemplates from "./snippets.js";
 
 const TEXT_FORMATTING_GROUP = {
     label: "Text formatting",
     icon: "text"
 };
 
-export function buildConfig(): EditorConfig {
+export async function buildConfig(): Promise<EditorConfig> {
     return {
         image: {
             styles: {
@@ -126,6 +127,9 @@ export function buildConfig(): EditorConfig {
             dropdownLimit: Number.MAX_SAFE_INTEGER,
             extraCommands: buildExtraCommands()
         },
+        template: {
+            definitions: await getTemplates()
+        },
         // This value must be kept in sync with the language defined in webpack.config.js.
         language: "en"
     };

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

@@ -0,0 +1,19 @@
+import search from "../../../services/search";
+import type { TemplateDefinition } from "@triliumnext/ckeditor5";
+
+/**
+ * Generates the list of snippets based on the user's notes to be passed down to the CKEditor configuration.
+ *
+ * @returns the list of templates.
+ */
+export default async function getTemplates() {
+    const definitions: TemplateDefinition[] = [];
+    const snippets = await search.searchForNotes("#textSnippet");
+    for (const snippet of snippets) {
+        definitions.push({
+            title: snippet.title,
+            data: await snippet.getContent() ?? ""
+        })
+    }
+    return definitions;
+}

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

@@ -193,7 +193,7 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
 
             const finalConfig = {
                 ...editorConfig,
-                ...buildConfig(),
+                ...(await buildConfig()),
                 ...buildToolbarConfig(isClassicEditor),
                 htmlSupport: {
                     allow: JSON.parse(options.get("allowedHtmlTags")),

packages/ckeditor5/src/index.ts

@@ -4,6 +4,7 @@ import { COMMON_PLUGINS, CORE_PLUGINS, POPUP_EDITOR_PLUGINS } from "./plugins";
 import { BalloonEditor, DecoupledEditor, FindAndReplaceEditing, FindCommand } from "ckeditor5";
 export { EditorWatchdog } from "ckeditor5";
 export type { EditorConfig, MentionFeed, MentionFeedObjectItem, Node, Position, Element, WatchdogConfig } from "ckeditor5";
+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.

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 } from "ckeditor5";
-import { SlashCommand } 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,7 +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
+    SlashCommand,
+    Template
 ];
 
 /**