ckeditor5-elements-toolbar 0.0.0-stage → 49.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ivan Kildyushov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,31 @@
-# Temporary Holding Version
+# ckeditor5-elements-toolbar
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Element toolbars for CKEditor 5 Elements: `ElementToolbar` shows a floating toolbar next to the element with the cursor,
+for the elements that match a model name or a filter function. Its command buttons act on that element.
+
+## Installation
+
+This package is part of `ckeditor5-elements`. Install the whole package to use it:
+
+```sh
+npm install ckeditor5 ckeditor5-elements
+```
+
+## Usage
+
+```ts
+import { ElementActions, ElementToolbar } from 'ckeditor5-elements';
+
+// In the editor config:
+plugins: [..., ElementActions, ElementToolbar],
+elementToolbar: [
+	{ element: 'note', items: ['moveElementUp', 'moveElementDown', '|', 'duplicateElement', 'deleteElement'] },
+	{ element: element => element.name.startsWith('heading'), items: ['heading', '|', 'deleteElement'] }
+]
+```
+
+See the [Element toolbar guide](https://ivankild.github.io/ckeditor5-elements/guide/toolbar) of the documentation.
+
+## License
+
+MIT

package/dist/augmentation.d.ts

@@ -0,0 +1,13 @@
+import type { ElementToolbar, ElementToolbarDefinition } from './index.js';
+declare module 'ckeditor5' {
+    interface PluginsMap {
+        [ElementToolbar.pluginName]: ElementToolbar;
+    }
+    interface EditorConfig {
+        /**
+         * The floating toolbars of elements. See {@link ElementToolbar}.
+         */
+        elementToolbar?: ElementToolbarDefinition[];
+    }
+}
+//# sourceMappingURL=augmentation.d.ts.map

package/dist/augmentation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"augmentation.d.ts","sourceRoot":"","sources":["../src/augmentation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;AAE3E,OAAO,QAAQ,WAAW,CAAC;IAC1B,UAAU,UAAU;QACnB,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,cAAc,CAAC;KAC5C;IAED,UAAU,YAAY;QACrB;;WAEG;QACH,cAAc,CAAC,EAAE,wBAAwB,EAAE,CAAC;KAC5C;CACD"}

package/dist/augmentation.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=augmentation.js.map

package/dist/augmentation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"augmentation.js","sourceRoot":"","sources":["../src/augmentation.ts"],"names":[],"mappings":""}

package/dist/elementToolbar.d.ts

@@ -0,0 +1,54 @@
+import { Plugin, WidgetToolbarRepository, type ModelElement, type ToolbarConfigItem } from 'ckeditor5';
+import { type ElementMatcher } from 'ckeditor5-elements-core';
+/**
+ * A floating toolbar of the elements that match `element`.
+ */
+export interface ElementToolbarDefinition {
+    /**
+     * The elements the toolbar is for: the name of a model element (e.g. `'note'`), or a function that returns whether it
+     * is for the given element (e.g. `element => element.name.startsWith('heading')`).
+     */
+    element: ElementMatcher;
+    /**
+     * The toolbar items, as in CKEditor's toolbar config:
+     *
+     * * the name of a command that acts on an element (an `ElementOrPositionCommand`, e.g. `'moveElementUp'`): a button
+     *   that acts on the element of the toolbar,
+     * * the name of another UI component (e.g. `'bold'`), as in the main toolbar,
+     * * `'|'`, a separator.
+     */
+    items: ToolbarConfigItem[];
+    /**
+     * The accessible name of the toolbar. Defaults to "Element toolbar".
+     */
+    ariaLabel?: string;
+}
+/**
+ * Shows floating toolbars for elements, configured by the `elementToolbar` editor config option (see
+ * {@link ElementToolbarDefinition}): the toolbar of the closest element at the selection that matches, next to it,
+ * while the editor is focused. When toolbars match nested elements, the toolbar of the innermost one shows.
+ *
+ * The toolbars are CKEditor's widget toolbars (`WidgetToolbarRepository`), as the image and table toolbars: they are
+ * placed and hidden by CKEditor, and Alt+F10 focuses them. Unlike widget toolbars, they show for any element, also when
+ * the selection is inside it, and their command buttons act on that element: "Move up" in the toolbar of a note moves the
+ * note, not the paragraph with the cursor.
+ */
+export default class ElementToolbar extends Plugin {
+    static get requires(): readonly [typeof WidgetToolbarRepository];
+    static get pluginName(): 'ElementToolbar';
+    /**
+     * Registers the toolbars, after the other plugins registered their commands and components.
+     */
+    afterInit(): void;
+    /**
+     * Returns the closest element at the selection that matches: the selected element, or the innermost element with the
+     * selection, or one of their ancestors. Never a root.
+     */
+    getElement(element: ElementToolbarDefinition['element']): ModelElement | null;
+    /**
+     * Returns the toolbar item for the config item: for a command that acts on an element, the name of a new component,
+     * a button that acts on the element of the toolbar; otherwise, the config item itself.
+     */
+    private _createItem;
+}
+//# sourceMappingURL=elementToolbar.d.ts.map

package/dist/elementToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementToolbar.d.ts","sourceRoot":"","sources":["../src/elementToolbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,uBAAuB,EAAE,KAAK,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AACvG,OAAO,EAMN,KAAK,cAAc,EACnB,MAAM,yBAAyB,CAAC;AAEjC;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACxC;;;OAGG;IACH,OAAO,EAAE,cAAc,CAAC;IAExB;;;;;;;OAOG;IACH,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAE3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,MAAM;IACjD,WAAkB,QAAQ,IAAI,SAAS,CAAC,OAAO,uBAAuB,CAAC,CAEtE;IAED,WAAkB,UAAU,IAAI,gBAAgB,CAE/C;IAED;;OAEG;IACI,SAAS,IAAI,IAAI;IAoBxB;;;OAGG;IACI,UAAU,CAAC,OAAO,EAAE,wBAAwB,CAAC,SAAS,CAAC,GAAG,YAAY,GAAG,IAAI;IAUpF;;;OAGG;IACH,OAAO,CAAC,WAAW;CA0BnB"}

package/dist/elementToolbar.js

@@ -0,0 +1,71 @@
+import { Plugin, WidgetToolbarRepository } from 'ckeditor5';
+import { ElementOrPositionButtonView, ElementOrPositionCommand, getAncestorElements, getElementAtSelection, matchesElement } from 'ckeditor5-elements-core';
+/**
+ * Shows floating toolbars for elements, configured by the `elementToolbar` editor config option (see
+ * {@link ElementToolbarDefinition}): the toolbar of the closest element at the selection that matches, next to it,
+ * while the editor is focused. When toolbars match nested elements, the toolbar of the innermost one shows.
+ *
+ * The toolbars are CKEditor's widget toolbars (`WidgetToolbarRepository`), as the image and table toolbars: they are
+ * placed and hidden by CKEditor, and Alt+F10 focuses them. Unlike widget toolbars, they show for any element, also when
+ * the selection is inside it, and their command buttons act on that element: "Move up" in the toolbar of a note moves the
+ * note, not the paragraph with the cursor.
+ */
+export default class ElementToolbar extends Plugin {
+    static get requires() {
+        return [WidgetToolbarRepository];
+    }
+    static get pluginName() {
+        return 'ElementToolbar';
+    }
+    /**
+     * Registers the toolbars, after the other plugins registered their commands and components.
+     */
+    afterInit() {
+        const editor = this.editor;
+        const repository = editor.plugins.get(WidgetToolbarRepository);
+        (editor.config.get('elementToolbar') ?? []).forEach((definition, index) => {
+            const toolbarId = `elementToolbar${String(index)}`;
+            const getElement = () => this.getElement(definition.element);
+            repository.register(toolbarId, {
+                ariaLabel: definition.ariaLabel ?? editor.t('Element toolbar'),
+                items: definition.items.map(item => this._createItem(item, toolbarId, getElement)),
+                getRelatedElement: () => {
+                    const element = getElement();
+                    return (element && editor.editing.mapper.toViewElement(element)) ?? null;
+                }
+            });
+        });
+    }
+    /**
+     * Returns the closest element at the selection that matches: the selected element, or the innermost element with the
+     * selection, or one of their ancestors. Never a root.
+     */
+    getElement(element) {
+        for (const node of getAncestorElements(getElementAtSelection(this.editor.model.document.selection))) {
+            if (matchesElement(element, node)) {
+                return node;
+            }
+        }
+        return null;
+    }
+    /**
+     * Returns the toolbar item for the config item: for a command that acts on an element, the name of a new component,
+     * a button that acts on the element of the toolbar; otherwise, the config item itself.
+     */
+    _createItem(item, toolbarId, getElement) {
+        if (typeof item !== 'string') {
+            return { ...item, items: item.items.map(child => this._createItem(child, toolbarId, getElement)) };
+        }
+        const editor = this.editor;
+        const command = editor.commands.get(item);
+        const name = `${toolbarId}:${item}`;
+        if (!(command instanceof ElementOrPositionCommand)) {
+            return item;
+        }
+        if (!editor.ui.componentFactory.has(name)) {
+            editor.ui.componentFactory.add(name, locale => new ElementOrPositionButtonView(locale, command, { target: getElement }));
+        }
+        return name;
+    }
+}
+//# sourceMappingURL=elementToolbar.js.map

package/dist/elementToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementToolbar.js","sourceRoot":"","sources":["../src/elementToolbar.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Element toolbars: floating toolbars for the elements that match a name or a filter, with buttons that act on the
+ * element.
+ *
+ * @module ckeditor5-elements-toolbar
+ */
+export { default as ElementToolbar, type ElementToolbarDefinition } from './elementToolbar.js';
+import './augmentation.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,KAAK,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAE/F,OAAO,mBAAmB,CAAC"}

package/dist/index.js

@@ -0,0 +1,10 @@
+/**
+ * Element toolbars: floating toolbars for the elements that match a name or a filter, with buttons that act on the
+ * element.
+ *
+ * @module ckeditor5-elements-toolbar
+ */
+// Plugins.
+export { default as ElementToolbar } from './elementToolbar.js';
+import './augmentation.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,WAAW;AACX,OAAO,EAAE,OAAO,IAAI,cAAc,EAAiC,MAAM,qBAAqB,CAAC;AAE/F,OAAO,mBAAmB,CAAC"}

package/package.json

@@ -1,6 +1,52 @@
 {
   "name": "ckeditor5-elements-toolbar",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "49.0.0",
+  "description": "Element toolbars for CKEditor 5: floating toolbars for the elements that match a name or a filter, with buttons that act on the element.",
+  "keywords": [
+    "ckeditor",
+    "ckeditor5",
+    "ckeditor 5",
+    "ckeditor5-feature",
+    "ckeditor5-plugin"
+  ],
+  "license": "MIT",
+  "author": "Ivan Kildyushov",
+  "homepage": "https://ivankild.github.io/ckeditor5-elements/guide/toolbar",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ivankild/ckeditor5-elements.git",
+    "directory": "packages/ckeditor5-elements-toolbar"
+  },
+  "bugs": {
+    "url": "https://github.com/ivankild/ckeditor5-elements/issues"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "dependencies": {
+    "ckeditor5-elements-core": "49.0.0"
+  },
+  "devDependencies": {
+    "ckeditor5-elements-actions": "49.0.0",
+    "ckeditor5-elements-menu": "49.0.0"
+  },
+  "peerDependencies": {
+    "ckeditor5": "^49.0.0"
+  },
+  "scripts": {
+    "build": "tsc --build"
+  }
 }

package/src/augmentation.ts

@@ -0,0 +1,14 @@
+import type { ElementToolbar, ElementToolbarDefinition } from './index.js';
+
+declare module 'ckeditor5' {
+	interface PluginsMap {
+		[ElementToolbar.pluginName]: ElementToolbar;
+	}
+
+	interface EditorConfig {
+		/**
+		 * The floating toolbars of elements. See {@link ElementToolbar}.
+		 */
+		elementToolbar?: ElementToolbarDefinition[];
+	}
+}

package/src/elementToolbar.ts

@@ -0,0 +1,123 @@
+import { Plugin, WidgetToolbarRepository, type ModelElement, type ToolbarConfigItem } from 'ckeditor5';
+import {
+	ElementOrPositionButtonView,
+	ElementOrPositionCommand,
+	getAncestorElements,
+	getElementAtSelection,
+	matchesElement,
+	type ElementMatcher
+} from 'ckeditor5-elements-core';
+
+/**
+ * A floating toolbar of the elements that match `element`.
+ */
+export interface ElementToolbarDefinition {
+	/**
+	 * The elements the toolbar is for: the name of a model element (e.g. `'note'`), or a function that returns whether it
+	 * is for the given element (e.g. `element => element.name.startsWith('heading')`).
+	 */
+	element: ElementMatcher;
+
+	/**
+	 * The toolbar items, as in CKEditor's toolbar config:
+	 *
+	 * * the name of a command that acts on an element (an `ElementOrPositionCommand`, e.g. `'moveElementUp'`): a button
+	 *   that acts on the element of the toolbar,
+	 * * the name of another UI component (e.g. `'bold'`), as in the main toolbar,
+	 * * `'|'`, a separator.
+	 */
+	items: ToolbarConfigItem[];
+
+	/**
+	 * The accessible name of the toolbar. Defaults to "Element toolbar".
+	 */
+	ariaLabel?: string;
+}
+
+/**
+ * Shows floating toolbars for elements, configured by the `elementToolbar` editor config option (see
+ * {@link ElementToolbarDefinition}): the toolbar of the closest element at the selection that matches, next to it,
+ * while the editor is focused. When toolbars match nested elements, the toolbar of the innermost one shows.
+ *
+ * The toolbars are CKEditor's widget toolbars (`WidgetToolbarRepository`), as the image and table toolbars: they are
+ * placed and hidden by CKEditor, and Alt+F10 focuses them. Unlike widget toolbars, they show for any element, also when
+ * the selection is inside it, and their command buttons act on that element: "Move up" in the toolbar of a note moves the
+ * note, not the paragraph with the cursor.
+ */
+export default class ElementToolbar extends Plugin {
+	public static get requires(): readonly [typeof WidgetToolbarRepository] {
+		return [WidgetToolbarRepository] as const;
+	}
+
+	public static get pluginName(): 'ElementToolbar' {
+		return 'ElementToolbar' as const;
+	}
+
+	/**
+	 * Registers the toolbars, after the other plugins registered their commands and components.
+	 */
+	public afterInit(): void {
+		const editor = this.editor;
+		const repository = editor.plugins.get(WidgetToolbarRepository);
+
+		(editor.config.get('elementToolbar') ?? []).forEach((definition, index) => {
+			const toolbarId = `elementToolbar${String(index)}`;
+			const getElement = (): ModelElement | null => this.getElement(definition.element);
+
+			repository.register(toolbarId, {
+				ariaLabel: definition.ariaLabel ?? editor.t('Element toolbar'),
+				items: definition.items.map(item => this._createItem(item, toolbarId, getElement)),
+				getRelatedElement: () => {
+					const element = getElement();
+
+					return (element && editor.editing.mapper.toViewElement(element)) ?? null;
+				}
+			});
+		});
+	}
+
+	/**
+	 * Returns the closest element at the selection that matches: the selected element, or the innermost element with the
+	 * selection, or one of their ancestors. Never a root.
+	 */
+	public getElement(element: ElementToolbarDefinition['element']): ModelElement | null {
+		for (const node of getAncestorElements(getElementAtSelection(this.editor.model.document.selection))) {
+			if (matchesElement(element, node)) {
+				return node;
+			}
+		}
+
+		return null;
+	}
+
+	/**
+	 * Returns the toolbar item for the config item: for a command that acts on an element, the name of a new component,
+	 * a button that acts on the element of the toolbar; otherwise, the config item itself.
+	 */
+	private _createItem(
+		item: ToolbarConfigItem,
+		toolbarId: string,
+		getElement: () => ModelElement | null
+	): ToolbarConfigItem {
+		if (typeof item !== 'string') {
+			return { ...item, items: item.items.map(child => this._createItem(child, toolbarId, getElement)) };
+		}
+
+		const editor = this.editor;
+		const command = editor.commands.get(item);
+		const name = `${toolbarId}:${item}`;
+
+		if (!(command instanceof ElementOrPositionCommand)) {
+			return item;
+		}
+
+		if (!editor.ui.componentFactory.has(name)) {
+			editor.ui.componentFactory.add(
+				name,
+				locale => new ElementOrPositionButtonView(locale, command, { target: getElement })
+			);
+		}
+
+		return name;
+	}
+}

package/src/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Element toolbars: floating toolbars for the elements that match a name or a filter, with buttons that act on the
+ * element.
+ *
+ * @module ckeditor5-elements-toolbar
+ */
+
+// Plugins.
+export { default as ElementToolbar, type ElementToolbarDefinition } from './elementToolbar.js';
+
+import './augmentation.js';