trilium/packages/ckeditor5/src/plugins/code_block_toolbar.ts

55 lines
2.0 KiB
TypeScript

import { BalloonToolbarShowEvent, CodeBlock, Plugin, ViewDocumentFragment, WidgetToolbarRepository, type ViewNode } from "ckeditor5";
import CodeBlockLanguageDropdown from "./code_block_language_dropdown";
import CopyToClipboardButton from "./copy_to_clipboard_button";
export default class CodeBlockToolbar extends Plugin {
static get requires() {
return [ WidgetToolbarRepository, CodeBlock, CodeBlockLanguageDropdown, CopyToClipboardButton ] as const;
}
afterInit() {
const editor = this.editor;
const widgetToolbarRepository = editor.plugins.get(WidgetToolbarRepository);
widgetToolbarRepository.register("codeblock", {
items: [
"codeBlockDropdown",
"|",
"copyToClipboard"
],
balloonClassName: "ck-toolbar-container codeblock-language-list",
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;
}
});
// Hide balloon toolbar when in a code block
if (editor.plugins.has("BalloonToolbar")) {
editor.listenTo(editor.plugins.get('BalloonToolbar'), 'show', (evt) => {
const firstPosition = editor.model.document.selection.getFirstPosition();
const isInCodeBlock = firstPosition?.findAncestor('codeBlock');
if (isInCodeBlock) {
evt.stop(); // Prevent the balloon toolbar from showing
}
}, { priority: 'high' });
}
}
}