feat(ckeditor5): create an empty toolbar for code blocks

2025-11-09 06:45:49 +01:00 · 2025-05-26 09:17:35 +03:00
parent bab679fd2a
commit a1d5719fe0
2 changed files with 48 additions and 1 deletions
--- a/packages/ckeditor5/src/plugins/code_block_toolbar.ts
+++ 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;
+            }
+        });
+    }
+
+}