chore(ckeditor5/plugins): integrate mention customization

This commit is contained in:
Elian Doran 2025-05-03 17:48:22 +03:00
parent a44eaeaf10
commit 9d11f0e9c3
No known key found for this signature in database
3 changed files with 41 additions and 11 deletions

View File

@ -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: {

View File

@ -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,

View File

@ -1,7 +1,18 @@
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import Command from '@ckeditor/ckeditor5-core/src/command';
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)
@ -9,14 +20,31 @@ export default class MentionCustomization extends Plugin {
}
}
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 {
execute(options) {
override execute(options: MentionOpts) {
const {model} = this.editor;
const {document} = model;
const {selection} = document;
const {mention} = options;
const range = options.range || selection.getFirstRange();
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 => {
@ -26,18 +54,18 @@ class CustomMentionCommand extends Command {
}
else if (mention.action === 'create-note') {
const editorEl = this.editor.editing.view.getDomRoot();
const component = glob.getComponentByEl(editorEl);
const component = glob.getComponentByEl<EditorComponent>(editorEl);
component.createNoteForReferenceLink(mention.noteTitle).then(notePath => {
this.insertReference(range, notePath);
});
}
else {
this.insertReference(range, options.mention.notePath);
this.insertReference(range, mention.notePath);
}
}
insertReference(range, notePath) {
insertReference(range: Selectable, notePath: string) {
const {model} = this.editor;
model.change(writer => {