diff --git a/packages/ckeditor5/src/plugins.ts b/packages/ckeditor5/src/plugins.ts index 19fbc748e..c53dfb924 100644 --- a/packages/ckeditor5/src/plugins.ts +++ b/packages/ckeditor5/src/plugins.ts @@ -23,6 +23,7 @@ import "@triliumnext/ckeditor5-mermaid/index.css"; import "@triliumnext/ckeditor5-admonition/index.css"; import "@triliumnext/ckeditor5-footnotes/index.css"; import "@triliumnext/ckeditor5-math/index.css"; +import CodeBlockToolbar from "./plugins/code_block_toolbar.js"; /** * Plugins that are specific to Trilium and not part of the CKEditor 5 core, included in both text editors but not in the attribute editor. @@ -38,7 +39,8 @@ const TRILIUM_PLUGINS: typeof Plugin[] = [ MarkdownImportPlugin, IncludeNote, Uploadfileplugin, - SyntaxHighlighting + SyntaxHighlighting, + CodeBlockToolbar ]; /** diff --git a/packages/ckeditor5/src/plugins/code_block_toolbar.ts b/packages/ckeditor5/src/plugins/code_block_toolbar.ts new file mode 100644 index 000000000..58e322381 --- /dev/null +++ b/packages/ckeditor5/src/plugins/code_block_toolbar.ts @@ -0,0 +1,45 @@ +import { CodeBlock, Plugin, Position, ViewDocumentFragment, WidgetToolbarRepository, type Node, type ViewNode } from "ckeditor5"; + +export default class CodeBlockToolbar extends Plugin { + + static get requires() { + return [ WidgetToolbarRepository, CodeBlock ] as const; + } + + afterInit() { + const editor = this.editor; + const widgetToolbarRepository = editor.plugins.get(WidgetToolbarRepository); + + widgetToolbarRepository.register("codeblock", { + items: [ + { + label: "Hello", + items: [ + { + label: "world", + items: [] + } + ] + } + ], + getRelatedElement(selection) { + const selectionPosition = selection.getFirstPosition(); + if (!selectionPosition) { + return null; + } + + let parent: ViewNode | ViewDocumentFragment | null = selectionPosition.parent; + while (parent) { + if (parent.is("element", "pre")) { + return parent; + } + + parent = parent.parent; + } + + return null; + } + }); + } + +}