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
No known key found for this signature in database
3 changed files with 27 additions and 2 deletions

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);transform: ;msFilter:;"><path d="M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z"></path></svg>

After

Width:  |  Height:  |  Size: 366 B

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;
});
}
}