feat(slash): insert internal link

This commit is contained in:
Elian Doran 2025-06-16 20:48:01 +03:00
parent 9bfff03cff
commit 13afcb8a49
No known key found for this signature in database
3 changed files with 35 additions and 9 deletions

View File

@ -2,8 +2,11 @@ import type { Editor } from 'ckeditor5';
import type { SlashCommandEditorConfig } from 'ckeditor5-premium-features'; import type { SlashCommandEditorConfig } from 'ckeditor5-premium-features';
import { icons as admonitionIcons } from '@triliumnext/ckeditor5-admonition'; import { icons as admonitionIcons } from '@triliumnext/ckeditor5-admonition';
import { icons as footnoteIcons } from '@triliumnext/ckeditor5-footnotes'; import { icons as footnoteIcons } from '@triliumnext/ckeditor5-footnotes';
import { COMMAND_NAME as INSERT_DATE_TIME_COMMAND } from './plugins/insert_date_time';
import { COMMAND_NAME as INTERNAL_LINK_COMMAND } from './plugins/internallink';
import { ADMONITION_TYPES, type AdmonitionType } from '@triliumnext/ckeditor5-admonition'; import { ADMONITION_TYPES, type AdmonitionType } from '@triliumnext/ckeditor5-admonition';
import dateTimeIcon from './icons/date-time.svg?raw'; import dateTimeIcon from './icons/date-time.svg?raw';
import internalLinkIcon from './icons/trilium.svg?raw';
type SlashCommandDefinition = SlashCommandEditorConfig["extraCommands"][number]; type SlashCommandDefinition = SlashCommandEditorConfig["extraCommands"][number];
@ -22,7 +25,14 @@ export default function buildExtraCommands(): SlashCommandDefinition[] {
title: "Insert Date/Time", title: "Insert Date/Time",
description: "Insert the current date and time", description: "Insert the current date and time",
icon: dateTimeIcon, icon: dateTimeIcon,
commandName: "insertDateTimeToText" commandName: INSERT_DATE_TIME_COMMAND
},
{
id: "internal-link",
title: "Internal Trilium link",
description: "Insert a link to another Trilium note",
icon: internalLinkIcon,
commandName: INTERNAL_LINK_COMMAND
} }
]; ];
} }

View File

@ -1,7 +1,7 @@
import { ButtonView, Command, Plugin } from 'ckeditor5'; import { ButtonView, Command, Plugin } from 'ckeditor5';
import dateTimeIcon from '../icons/date-time.svg?raw'; import dateTimeIcon from '../icons/date-time.svg?raw';
const COMMAND_NAME = 'insertDateTimeToText'; export const COMMAND_NAME = 'insertDateTimeToText';
export default class InsertDateTimePlugin extends Plugin { export default class InsertDateTimePlugin extends Plugin {
init() { init() {

View File

@ -1,7 +1,9 @@
import { ButtonView, Plugin } from 'ckeditor5'; import { ButtonView, Command, Plugin } from 'ckeditor5';
import internalLinkIcon from '../icons/trilium.svg?raw'; import internalLinkIcon from '../icons/trilium.svg?raw';
import ReferenceLink from './referencelink'; import ReferenceLink from './referencelink';
export const COMMAND_NAME = 'insertInternalLink';
export default class InternalLinkPlugin extends Plugin { export default class InternalLinkPlugin extends Plugin {
static get requires() { static get requires() {
@ -11,6 +13,8 @@ export default class InternalLinkPlugin extends Plugin {
init() { init() {
const editor = this.editor; const editor = this.editor;
editor.commands.add(COMMAND_NAME, new InsertInternalLinkCommand(editor));
editor.ui.componentFactory.add('internalLink', locale => { editor.ui.componentFactory.add('internalLink', locale => {
const view = new ButtonView( locale ); const view = new ButtonView( locale );
@ -21,16 +25,28 @@ export default class InternalLinkPlugin extends Plugin {
} ); } );
// enable internal link only if the editor is not read only // enable internal link only if the editor is not read only
view.bind('isEnabled').to(editor, 'isReadOnly', isReadOnly => !isReadOnly); const command = editor.commands.get(COMMAND_NAME)!;
view.bind('isEnabled').to(command, 'isEnabled');
view.on('execute', () => { view.on('execute', () => {
const editorEl = editor.editing.view.getDomRoot(); editor.execute(COMMAND_NAME);
const component = glob.getComponentByEl(editorEl);
component.triggerCommand('addLinkToText');
} ); } );
return view; return view;
}); });
} }
} }
class InsertInternalLinkCommand extends Command {
refresh() {
this.isEnabled = !this.editor.isReadOnly;
}
execute() {
const editor = this.editor;
const editorEl = editor.editing.view.getDomRoot();
const component = glob.getComponentByEl(editorEl);
component.triggerCommand('addLinkToText');
}
}