feat(ckeditor5/codeblock): add copy icon

This commit is contained in:
Elian Doran
2025-05-26 11:37:26 +03:00
parent 751ed0b5d4
commit 5eecea52bf
3 changed files with 27 additions and 2 deletions

View File

@@ -1,10 +1,11 @@
import { 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 ] as const;
return [ WidgetToolbarRepository, CodeBlock, CodeBlockLanguageDropdown, CopyToClipboardButton ] as const;
}
afterInit() {
@@ -13,7 +14,9 @@ export default class CodeBlockToolbar extends Plugin {
widgetToolbarRepository.register("codeblock", {
items: [
"codeBlockDropdown"
"codeBlockDropdown",
"|",
"copyToClipboard"
],
getRelatedElement(selection) {
const selectionPosition = selection.getFirstPosition();

View File

@@ -0,0 +1,21 @@
import { ButtonView, Plugin } from "ckeditor5";
import copyIcon from "../icons/copy.svg?raw";
export default class CopyToClipboardButton extends Plugin {
public init() {
const editor = this.editor;
const componentFactory = editor.ui.componentFactory;
componentFactory.add("copyToClipboard", locale => {
const button = new ButtonView(locale);
button.set({
tooltip: "Copy to clipboard",
icon: copyIcon
});
return button;
});
}
}