chore(ckeditor5/plugins): integrate mention customization

packages/ckeditor5/src/augmentation.ts

@@ -7,6 +7,7 @@ declare global {
 
     interface EditorComponent extends Component {
         loadReferenceLinkTitle($el: JQuery<HTMLElement>, href: string): Promise<void>;
+        createNoteForReferenceLink(title: string): Promise<string>;
     }
 
     var glob: {

packages/ckeditor5/src/plugins.ts

@@ -10,6 +10,7 @@ import RemoveFormatLinksPlugin from "./plugins/remove_format_links.js";
 import SpecialCharactersEmojiPlugin from "./plugins/special_characters_emoji.js";
 import IndentBlockShortcutPlugin from "./plugins/indent_block_shortcut.js";
 import MarkdownImportPlugin from "./plugins/markdownimport.js";
+import MentionCustomization from "./plugins/mention_customization.js";
 
 const TRILIUM_PLUGINS: typeof Plugin[] = [
     CutToNotePlugin,
@@ -21,7 +22,8 @@ const TRILIUM_PLUGINS: typeof Plugin[] = [
     RemoveFormatLinksPlugin,
     SpecialCharactersEmojiPlugin,
     IndentBlockShortcutPlugin,
-    MarkdownImportPlugin
+    MarkdownImportPlugin,
+    MentionCustomization
 ];
 
 export const COMMON_PLUGINS: typeof Plugin[] = [
@@ -79,7 +81,6 @@ export const COMMON_PLUGINS: typeof Plugin[] = [
 	SpecialCharactersEssentials,
 	FindAndReplace,
 	Mention,
-	// MentionCustomization,
 	// IncludeNote,
 	PageBreak,
 	GeneralHtmlSupport,

packages/ckeditor5/src/plugins/mention_customization.ts

@@ -0,0 +1,78 @@
+import { Command, Mention, Plugin, Range, type Selectable } from "ckeditor5";
+
+/**
+ * Overrides the actions taken by the Mentions plugin (triggered by `@` in the text editor, or `~` & `#` in the attribute editor):
+ *
+ * - Auto-completes attributes and relations in the attribute editor.
+ * - Triggers the modal to create notes.
+ * - Inserts a reference link when a mention is selected.
+ */
+export default class MentionCustomization extends Plugin {
+
+    static get requires() {
+		return [ Mention ];
+	}
+
+	afterInit() {
+		const editor = this.editor;
+		// override standard mention command (see https://github.com/ckeditor/ckeditor5/issues/6470)
+		editor.commands.add('mention', new CustomMentionCommand(editor));
+	}
+}
+
+interface MentionOpts {
+    mention: string | {
+        id: string;
+        [key: string]: unknown;
+    };
+    marker: string;
+    text?: string;
+    range?: Range;
+}
+
+interface MentionAttribute {
+    id: string;
+    action?: "create-note";
+    noteTitle: string;
+    notePath: string;
+}
+
+class CustomMentionCommand extends Command {
+
+	override execute(options: MentionOpts) {
+		const {model} = this.editor;
+		const {document} = model;
+		const {selection} = document;
+		const mention = options.mention as unknown as MentionAttribute;
+		const range = (options.range || selection.getFirstRange()) as Selectable;
+
+		if (mention.id.startsWith('#') || mention.id.startsWith('~')) {
+			model.change(writer => {
+				// Replace a range with the text with a mention.
+				model.insertContent( writer.createText( mention.id, {} ), range );
+			});
+		}
+		else if (mention.action === 'create-note') {
+			const editorEl = this.editor.editing.view.getDomRoot();
+			const component = glob.getComponentByEl<EditorComponent>(editorEl);
+
+			component.createNoteForReferenceLink(mention.noteTitle).then(notePath => {
+				this.insertReference(range, notePath);
+			});
+		}
+		else {
+			this.insertReference(range, mention.notePath);
+		}
+	}
+
+	insertReference(range: Selectable, notePath: string) {
+		const {model} = this.editor;
+
+		model.change(writer => {
+			// override the selection or at least the beginning @ character
+			model.insertContent(writer.createText('', {}), range);
+
+			this.editor.execute('referenceLink', {href: '#' + notePath});
+		});
+	}
+}