ckeditor5-elements-menu 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,51 @@
-# Temporary Holding Version
+# ckeditor5-elements-menu
 
-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 menus for CKEditor 5 Elements: `ElementMenu` shows the menu of an element, built from commands, submenus and
+separators, in a balloon. The features that open it are in this package too:
+
+- `ElementContextMenu`: right-clicking an element (or Shift+F10, or the menu key) opens its menu, configured by the
+  `elementContextMenu` option.
+- `ElementBreadcrumbs`: the element path at the selection, e.g. `aside.note › p`, as labels, or as buttons that open the menu of
+  their element with the `elementBreadcrumbs.menu` option.
+- `ElementQuickInsert`: Alt+Enter opens a searchable list of the elements allowed at the cursor, and the `quickInsertBefore`
+  and `quickInsertAfter` commands are menu items that insert next to an element.
+
+## Installation
+
+This package is part of `ckeditor5-elements`. Install the whole package to use it:
+
+```sh
+npm install ckeditor5 ckeditor5-elements
+```
+
+Import the stylesheet of the package (`ckeditor5-elements/index.css` has the styles of all the features).
+
+## Usage
+
+```ts
+import { ElementBreadcrumbs, ElementClipboard, ElementContextMenu, ElementQuickInsert } from 'ckeditor5-elements';
+import 'ckeditor5-elements/index.css';
+
+// One menu for both: right-clicking an element, and clicking its breadcrumb.
+const menu = (element, editor) => [
+	{ title: 'Insert', items: [editor.commands.get('quickInsertBefore'), editor.commands.get('quickInsertAfter')] },
+	'|',
+	editor.commands.get('copyElement'),
+	editor.commands.get('cutElement')
+];
+
+// In the editor config:
+plugins: [..., ElementContextMenu, ElementBreadcrumbs, ElementQuickInsert, ElementClipboard],
+toolbar: ['bold', 'italic', '|', 'breadcrumbs'],
+elementContextMenu: menu,
+elementBreadcrumbs: { menu },
+elementQuickInsert: { labels: { paragraph: 'Paragraph', heading1: 'Heading 1' } }
+```
+
+See the [Context menu](https://ivankild.github.io/ckeditor5-elements/guide/context-menu),
+[Breadcrumbs](https://ivankild.github.io/ckeditor5-elements/guide/breadcrumbs) and
+[Quick insert](https://ivankild.github.io/ckeditor5-elements/guide/quick-insert) guides of the documentation.
+
+## License
+
+MIT

package/dist/augmentation.d.ts

@@ -0,0 +1,30 @@
+import type { ElementBreadcrumbs, ElementBreadcrumbsConfig, ElementContextMenu, ElementMenu, ElementMenuConfig, ElementQuickInsert, QuickInsertCommand, ElementQuickInsertConfig, QuickInsertPositionCommand } from './index.js';
+declare module 'ckeditor5' {
+    interface PluginsMap {
+        [ElementMenu.pluginName]: ElementMenu;
+        [ElementContextMenu.pluginName]: ElementContextMenu;
+        [ElementBreadcrumbs.pluginName]: ElementBreadcrumbs;
+        [ElementQuickInsert.pluginName]: ElementQuickInsert;
+    }
+    interface CommandsMap {
+        quickInsert: QuickInsertCommand;
+        quickInsertBefore: QuickInsertPositionCommand;
+        quickInsertAfter: QuickInsertPositionCommand;
+    }
+    interface EditorConfig {
+        /**
+         * Returns the items (commands, submenus and `'|'` separators) of the context menu of the right-clicked element.
+         * See {@link ElementContextMenu}.
+         */
+        elementContextMenu?: ElementMenuConfig;
+        /**
+         * The configuration of the {@link ElementBreadcrumbs} plugin.
+         */
+        elementBreadcrumbs?: ElementBreadcrumbsConfig;
+        /**
+         * The configuration of the {@link ElementQuickInsert} plugin.
+         */
+        elementQuickInsert?: ElementQuickInsertConfig;
+    }
+}
+//# 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,EACX,kBAAkB,EAClB,wBAAwB,EACxB,kBAAkB,EAClB,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,wBAAwB,EACxB,0BAA0B,EAC1B,MAAM,YAAY,CAAC;AAEpB,OAAO,QAAQ,WAAW,CAAC;IAC1B,UAAU,UAAU;QACnB,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,WAAW,CAAC;QACtC,CAAC,kBAAkB,CAAC,UAAU,CAAC,EAAE,kBAAkB,CAAC;QACpD,CAAC,kBAAkB,CAAC,UAAU,CAAC,EAAE,kBAAkB,CAAC;QACpD,CAAC,kBAAkB,CAAC,UAAU,CAAC,EAAE,kBAAkB,CAAC;KACpD;IAED,UAAU,WAAW;QACpB,WAAW,EAAE,kBAAkB,CAAC;QAChC,iBAAiB,EAAE,0BAA0B,CAAC;QAC9C,gBAAgB,EAAE,0BAA0B,CAAC;KAC7C;IAED,UAAU,YAAY;QACrB;;;WAGG;QACH,kBAAkB,CAAC,EAAE,iBAAiB,CAAC;QAEvC;;WAEG;QACH,kBAAkB,CAAC,EAAE,wBAAwB,CAAC;QAE9C;;WAEG;QACH,kBAAkB,CAAC,EAAE,wBAAwB,CAAC;KAC9C;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/breadcrumbs/breadcrumbItemView.d.ts

@@ -0,0 +1,47 @@
+import { ButtonView, type Locale, type ModelElement, type ViewElement } from 'ckeditor5';
+/**
+ * A single breadcrumb that can be clicked: a button labelled with one element of the data view, e.g. `section.title`.
+ * It opens the menu of its element (`aria-haspopup`), and is `aria-expanded` while the menu is open.
+ */
+export default class BreadcrumbItemView extends ButtonView {
+    /**
+     * The data view element this item stands for.
+     */
+    readonly viewElement: ViewElement;
+    /**
+     * The model element the menu of this item is for.
+     */
+    readonly modelElement: ModelElement | null;
+    /**
+     * Whether the menu of this item is open.
+     *
+     * @observable
+     */
+    isExpanded: boolean;
+    constructor(locale: Locale | undefined, { label, viewElement, modelElement }: BreadcrumbItem, { isCurrent }?: BreadcrumbItemViewOptions);
+}
+/**
+ * The options of {@link BreadcrumbItemView} and {@link BreadcrumbLabelView}.
+ */
+export interface BreadcrumbItemViewOptions {
+    /**
+     * Whether the item is the innermost element (where the cursor is). It is marked with `aria-current="location"`.
+     */
+    isCurrent?: boolean;
+}
+/**
+ * A breadcrumb: an element of the data view, its label, and the model element it belongs to.
+ */
+export interface BreadcrumbItem {
+    label: string;
+    /**
+     * The data view element (as in the editor data, e.g. `getData()`).
+     */
+    viewElement: ViewElement;
+    /**
+     * The model element of the view element: the mapped one, or for a part of a structure (e.g. a `tbody`), the closest
+     * mapped ancestor (the table). `null` for list items (`ul`, `li`), which come from block attributes.
+     */
+    modelElement: ModelElement | null;
+}
+//# sourceMappingURL=breadcrumbItemView.d.ts.map

package/dist/breadcrumbs/breadcrumbItemView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbItemView.d.ts","sourceRoot":"","sources":["../../src/breadcrumbs/breadcrumbItemView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,MAAM,EAAE,KAAK,YAAY,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAEzF;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,UAAU;IACzD;;OAEG;IACH,SAAgB,WAAW,EAAE,WAAW,CAAC;IAEzC;;OAEG;IACH,SAAgB,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;IAElD;;;;OAIG;IACY,UAAU,EAAE,OAAO,CAAC;gBAGlC,MAAM,EAAE,MAAM,GAAG,SAAS,EAC1B,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,EAAE,cAAc,EACpD,EAAE,SAAiB,EAAE,GAAE,yBAA8B;CAkBtD;AAED;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACzC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC9B,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,EAAE,WAAW,CAAC;IAEzB;;;OAGG;IACH,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;CAClC"}

package/dist/breadcrumbs/breadcrumbItemView.js

@@ -0,0 +1,30 @@
+import { ButtonView } from 'ckeditor5';
+/**
+ * A single breadcrumb that can be clicked: a button labelled with one element of the data view, e.g. `section.title`.
+ * It opens the menu of its element (`aria-haspopup`), and is `aria-expanded` while the menu is open.
+ */
+export default class BreadcrumbItemView extends ButtonView {
+    /**
+     * The data view element this item stands for.
+     */
+    viewElement;
+    /**
+     * The model element the menu of this item is for.
+     */
+    modelElement;
+    constructor(locale, { label, viewElement, modelElement }, { isCurrent = false } = {}) {
+        super(locale);
+        this.viewElement = viewElement;
+        this.modelElement = modelElement;
+        this.set({ label, withText: true, isExpanded: false });
+        this.extendTemplate({
+            attributes: {
+                class: 'ck-elements-breadcrumbs__item',
+                'aria-haspopup': 'menu',
+                'aria-expanded': this.bindTemplate.to('isExpanded', value => String(value)),
+                ...(isCurrent ? { 'aria-current': 'location' } : {})
+            }
+        });
+    }
+}
+//# sourceMappingURL=breadcrumbItemView.js.map

package/dist/breadcrumbs/breadcrumbItemView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbItemView.js","sourceRoot":"","sources":["../../src/breadcrumbs/breadcrumbItemView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAoD,MAAM,WAAW,CAAC;AAEzF;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,UAAU;IACzD;;OAEG;IACa,WAAW,CAAc;IAEzC;;OAEG;IACa,YAAY,CAAsB;IASlD,YACC,MAA0B,EAC1B,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAkB,EACpD,EAAE,SAAS,GAAG,KAAK,KAAgC,EAAE;QAErD,KAAK,CAAC,MAAM,CAAC,CAAC;QAEd,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;QAC/B,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;QAEjC,IAAI,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,CAAC;QAEvD,IAAI,CAAC,cAAc,CAAC;YACnB,UAAU,EAAE;gBACX,KAAK,EAAE,+BAA+B;gBACtC,eAAe,EAAE,MAAM;gBACvB,eAAe,EAAE,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBAC3E,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;aACpD;SACD,CAAC,CAAC;IACJ,CAAC;CACD"}

package/dist/breadcrumbs/breadcrumbLabelView.d.ts

@@ -0,0 +1,29 @@
+import { View, type Locale, type ModelElement, type ViewElement } from 'ckeditor5';
+import { type BreadcrumbItem, type BreadcrumbItemViewOptions } from './breadcrumbItemView.js';
+/**
+ * A single breadcrumb that cannot be clicked: the label of one element of the data view, e.g. `section.title`.
+ *
+ * It can be focused (but is not in the Tab order), so keyboard users can reach it in a toolbar.
+ */
+export default class BreadcrumbLabelView extends View {
+    /**
+     * The data view element this item stands for.
+     */
+    readonly viewElement: ViewElement;
+    /**
+     * The model element of the view element, if any.
+     */
+    readonly modelElement: ModelElement | null;
+    /**
+     * The label of the element.
+     *
+     * @observable
+     */
+    label: string;
+    constructor(locale: Locale | undefined, { label, viewElement, modelElement }: BreadcrumbItem, { isCurrent }?: BreadcrumbItemViewOptions);
+    /**
+     * Focuses the label.
+     */
+    focus(): void;
+}
+//# sourceMappingURL=breadcrumbLabelView.d.ts.map

package/dist/breadcrumbs/breadcrumbLabelView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbLabelView.d.ts","sourceRoot":"","sources":["../../src/breadcrumbs/breadcrumbLabelView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,MAAM,EAAE,KAAK,YAAY,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AACnF,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAE9F;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,IAAI;IACpD;;OAEG;IACH,SAAgB,WAAW,EAAE,WAAW,CAAC;IAEzC;;OAEG;IACH,SAAgB,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;IAElD;;;;OAIG;IACY,KAAK,EAAE,MAAM,CAAC;gBAG5B,MAAM,EAAE,MAAM,GAAG,SAAS,EAC1B,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,EAAE,cAAc,EACpD,EAAE,SAAiB,EAAE,GAAE,yBAA8B;IAmBtD;;OAEG;IACI,KAAK,IAAI,IAAI;CAGpB"}

package/dist/breadcrumbs/breadcrumbLabelView.js

@@ -0,0 +1,39 @@
+import { View } from 'ckeditor5';
+import {} from './breadcrumbItemView.js';
+/**
+ * A single breadcrumb that cannot be clicked: the label of one element of the data view, e.g. `section.title`.
+ *
+ * It can be focused (but is not in the Tab order), so keyboard users can reach it in a toolbar.
+ */
+export default class BreadcrumbLabelView extends View {
+    /**
+     * The data view element this item stands for.
+     */
+    viewElement;
+    /**
+     * The model element of the view element, if any.
+     */
+    modelElement;
+    constructor(locale, { label, viewElement, modelElement }, { isCurrent = false } = {}) {
+        super(locale);
+        this.viewElement = viewElement;
+        this.modelElement = modelElement;
+        this.set('label', label);
+        this.setTemplate({
+            tag: 'span',
+            attributes: {
+                class: ['ck', 'ck-elements-breadcrumbs__item', 'ck-elements-breadcrumbs__label'],
+                tabindex: '-1',
+                ...(isCurrent ? { 'aria-current': 'location' } : {})
+            },
+            children: [{ text: this.bindTemplate.to('label') }]
+        });
+    }
+    /**
+     * Focuses the label.
+     */
+    focus() {
+        this.element?.focus();
+    }
+}
+//# sourceMappingURL=breadcrumbLabelView.js.map

package/dist/breadcrumbs/breadcrumbLabelView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbLabelView.js","sourceRoot":"","sources":["../../src/breadcrumbs/breadcrumbLabelView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAoD,MAAM,WAAW,CAAC;AACnF,OAAO,EAAuD,MAAM,yBAAyB,CAAC;AAE9F;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,IAAI;IACpD;;OAEG;IACa,WAAW,CAAc;IAEzC;;OAEG;IACa,YAAY,CAAsB;IASlD,YACC,MAA0B,EAC1B,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAkB,EACpD,EAAE,SAAS,GAAG,KAAK,KAAgC,EAAE;QAErD,KAAK,CAAC,MAAM,CAAC,CAAC;QAEd,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;QAC/B,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;QACjC,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QAEzB,IAAI,CAAC,WAAW,CAAC;YAChB,GAAG,EAAE,MAAM;YACX,UAAU,EAAE;gBACX,KAAK,EAAE,CAAC,IAAI,EAAE,+BAA+B,EAAE,gCAAgC,CAAC;gBAChF,QAAQ,EAAE,IAAI;gBACd,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;aACpD;YACD,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC;SACnD,CAAC,CAAC;IACJ,CAAC;IAED;;OAEG;IACI,KAAK;QACX,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IACvB,CAAC;CACD"}

package/dist/breadcrumbs/breadcrumbsView.d.ts

@@ -0,0 +1,68 @@
+import { KeystrokeHandler, View, ViewCollection, type Locale } from 'ckeditor5';
+import BreadcrumbItemView, { type BreadcrumbItem } from './breadcrumbItemView.js';
+import BreadcrumbLabelView from './breadcrumbLabelView.js';
+/**
+ * The options of {@link BreadcrumbsView}.
+ */
+export interface BreadcrumbsViewOptions {
+    /**
+     * Whether the items are buttons that can be clicked, or labels. Defaults to `false`.
+     */
+    isClickable?: boolean;
+}
+/**
+ * Shows a path of elements, from the outermost to the innermost one, as a list (`<ol>`) in a `<nav>` landmark: buttons
+ * when the items can be clicked, labels otherwise. Items without a model element (list items) are labels too. The
+ * innermost item is marked with `aria-current="location"`.
+ *
+ * The left and right arrows move the focus between the items; past the first or the last one, they are left to the
+ * toolbar the view is in. Fires `execute` with the item when one of the buttons is clicked.
+ */
+export default class BreadcrumbsView extends View {
+    /**
+     * The breadcrumb items: the buttons or labels, from the outermost to the innermost one.
+     */
+    readonly items: ViewCollection<BreadcrumbItemView | BreadcrumbLabelView>;
+    /**
+     * Whether the items are buttons that can be clicked, or labels.
+     */
+    readonly isClickable: boolean;
+    /**
+     * Handles the keystrokes within the breadcrumbs.
+     */
+    readonly keystrokes: KeystrokeHandler;
+    /**
+     * The list items (`<li>`) that hold the {@link items}.
+     */
+    private readonly _listItems;
+    constructor(locale?: Locale, { isClickable }?: BreadcrumbsViewOptions);
+    /**
+     * Replaces the items.
+     */
+    setItems(items: readonly BreadcrumbItem[]): void;
+    /**
+     * Renders the view and starts handling the keystrokes.
+     */
+    render(): void;
+    /**
+     * Focuses an item: the first one when the focus moves forward (`1`, e.g. from the previous toolbar item), the
+     * innermost one otherwise.
+     */
+    focus(direction?: 1 | -1): void;
+    /**
+     * Destroys the view and its keystroke handler.
+     */
+    destroy(): void;
+    /**
+     * Focuses the item before (`-1`) or after (`1`) the focused one. Returns `false` when there is none.
+     */
+    private _focusSibling;
+}
+/**
+ * Fired by {@link BreadcrumbsView} when one of its buttons is clicked.
+ */
+export interface BreadcrumbsViewExecuteEvent {
+    name: 'execute';
+    args: [item: BreadcrumbItemView];
+}
+//# sourceMappingURL=breadcrumbsView.d.ts.map

package/dist/breadcrumbs/breadcrumbsView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbsView.d.ts","sourceRoot":"","sources":["../../src/breadcrumbs/breadcrumbsView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,MAAM,EAAE,MAAM,WAAW,CAAC;AAChF,OAAO,kBAAkB,EAAE,EAAE,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,mBAAmB,MAAM,0BAA0B,CAAC;AAE3D;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACtC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,IAAI;IAChD;;OAEG;IACH,SAAgB,KAAK,2DAAkE;IAEvF;;OAEG;IACH,SAAgB,WAAW,EAAE,OAAO,CAAC;IAErC;;OAEG;IACH,SAAgB,UAAU,mBAA0B;IAEpD;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,UAAU,CAA0C;gBAEzD,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE,WAAmB,EAAE,GAAE,sBAA2B;IAsCjF;;OAEG;IACI,QAAQ,CAAC,KAAK,EAAE,SAAS,cAAc,EAAE,GAAG,IAAI;IA0BvD;;OAEG;IACa,MAAM,IAAI,IAAI;IAQ9B;;;OAGG;IACI,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI;IAItC;;OAEG;IACa,OAAO,IAAI,IAAI;IAK/B;;OAEG;IACH,OAAO,CAAC,aAAa;CASrB;AAED;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC3C,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE,CAAC,IAAI,EAAE,kBAAkB,CAAC,CAAC;CACjC"}

package/dist/breadcrumbs/breadcrumbsView.js

@@ -0,0 +1,134 @@
+import { KeystrokeHandler, View, ViewCollection } from 'ckeditor5';
+import BreadcrumbItemView, {} from './breadcrumbItemView.js';
+import BreadcrumbLabelView from './breadcrumbLabelView.js';
+/**
+ * Shows a path of elements, from the outermost to the innermost one, as a list (`<ol>`) in a `<nav>` landmark: buttons
+ * when the items can be clicked, labels otherwise. Items without a model element (list items) are labels too. The
+ * innermost item is marked with `aria-current="location"`.
+ *
+ * The left and right arrows move the focus between the items; past the first or the last one, they are left to the
+ * toolbar the view is in. Fires `execute` with the item when one of the buttons is clicked.
+ */
+export default class BreadcrumbsView extends View {
+    /**
+     * The breadcrumb items: the buttons or labels, from the outermost to the innermost one.
+     */
+    items = new ViewCollection();
+    /**
+     * Whether the items are buttons that can be clicked, or labels.
+     */
+    isClickable;
+    /**
+     * Handles the keystrokes within the breadcrumbs.
+     */
+    keystrokes = new KeystrokeHandler();
+    /**
+     * The list items (`<li>`) that hold the {@link items}.
+     */
+    _listItems;
+    constructor(locale, { isClickable = false } = {}) {
+        super(locale);
+        this._listItems = this.createCollection();
+        this.isClickable = isClickable;
+        const isRtl = locale?.uiLanguageDirection === 'rtl';
+        this.keystrokes.set(isRtl ? 'arrowright' : 'arrowleft', (data, cancel) => {
+            if (this._focusSibling(-1)) {
+                cancel();
+            }
+        });
+        this.keystrokes.set(isRtl ? 'arrowleft' : 'arrowright', (data, cancel) => {
+            if (this._focusSibling(1)) {
+                cancel();
+            }
+        });
+        this.setTemplate({
+            tag: 'nav',
+            attributes: {
+                class: ['ck', 'ck-elements-breadcrumbs'],
+                'aria-label': locale?.t('Element path') ?? 'Element path'
+            },
+            children: [
+                {
+                    tag: 'ol',
+                    attributes: {
+                        class: ['ck', 'ck-elements-breadcrumbs__list']
+                    },
+                    children: this._listItems
+                }
+            ]
+        });
+    }
+    /**
+     * Replaces the items.
+     */
+    setItems(items) {
+        for (const listItem of this._listItems) {
+            listItem.destroy();
+        }
+        this._listItems.clear();
+        this.items.clear();
+        items.forEach((item, index) => {
+            const isCurrent = index === items.length - 1;
+            const view = this.isClickable && item.modelElement
+                ? new BreadcrumbItemView(this.locale, item, { isCurrent })
+                : new BreadcrumbLabelView(this.locale, item, { isCurrent });
+            if (view instanceof BreadcrumbItemView) {
+                view.on('execute', () => {
+                    this.fire('execute', view);
+                });
+            }
+            this.items.add(view);
+            this._listItems.add(new BreadcrumbsListItemView(this.locale, view));
+        });
+    }
+    /**
+     * Renders the view and starts handling the keystrokes.
+     */
+    render() {
+        super.render();
+        if (this.element) {
+            this.keystrokes.listenTo(this.element);
+        }
+    }
+    /**
+     * Focuses an item: the first one when the focus moves forward (`1`, e.g. from the previous toolbar item), the
+     * innermost one otherwise.
+     */
+    focus(direction) {
+        (direction === 1 ? this.items.first : this.items.last)?.focus();
+    }
+    /**
+     * Destroys the view and its keystroke handler.
+     */
+    destroy() {
+        super.destroy();
+        this.keystrokes.destroy();
+    }
+    /**
+     * Focuses the item before (`-1`) or after (`1`) the focused one. Returns `false` when there is none.
+     */
+    _focusSibling(step) {
+        const items = Array.from(this.items);
+        const index = items.findIndex(item => item.element === document.activeElement);
+        const sibling = index === -1 ? undefined : items[index + step];
+        sibling?.focus();
+        return !!sibling;
+    }
+}
+/**
+ * A list item (`<li>`) of the breadcrumbs, holding a button or a label.
+ */
+class BreadcrumbsListItemView extends View {
+    constructor(locale, item) {
+        super(locale);
+        // Rendering registers the item as a child, so it is destroyed with the list item.
+        this.setTemplate({
+            tag: 'li',
+            attributes: {
+                class: ['ck', 'ck-elements-breadcrumbs__list-item']
+            },
+            children: [item]
+        });
+    }
+}
+//# sourceMappingURL=breadcrumbsView.js.map

package/dist/breadcrumbs/breadcrumbsView.js.map

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

package/dist/breadcrumbs/elementBreadcrumbs.d.ts

@@ -0,0 +1,73 @@
+import { Plugin, type Editor, type Locale } from 'ckeditor5';
+import ElementMenu, { type ElementMenuConfig } from '../elementMenu.js';
+import { type BreadcrumbItem } from './breadcrumbItemView.js';
+import BreadcrumbsView from './breadcrumbsView.js';
+/**
+ * The configuration of the {@link ElementBreadcrumbs} plugin.
+ */
+export interface ElementBreadcrumbsConfig {
+    /**
+     * Returns the items of the menu that opens when a breadcrumb is clicked, for the element of the breadcrumb: the
+     * same items as in the `elementContextMenu` option (commands, submenus and `'|'` separators), so one callback can
+     * serve both. Without this option, breadcrumbs are labels, and cannot be clicked.
+     */
+    menu?: ElementMenuConfig;
+}
+/**
+ * Shows the data view structure at the current selection (the elements of the editor data, as in `getData()`), e.g.
+ * `aside.note › p`, `ul › li` or `figure.table › table › tbody › tr › td`.
+ *
+ * Inline elements are items, as any element. CKEditor's text attributes, marks on the text such as its `<strong>`, are
+ * skipped. The selected element, e.g. an image, is the innermost item.
+ *
+ * Place them in a toolbar as the `breadcrumbs` component, or anywhere else using a view from {@link createView}.
+ *
+ * Clicking is configured only by the `elementBreadcrumbs.menu` editor config option (see {@link ElementBreadcrumbsConfig}): with it,
+ * the items are buttons that open the menu of their element, with `ElementMenu`, as the context menu does; without it,
+ * they are labels.
+ *
+ * The data view is converted again only when elements change, not when typing or moving the cursor. For a large
+ * document, that happens at most every 250 ms.
+ */
+export default class ElementBreadcrumbs extends Plugin {
+    /**
+     * The elements at the current selection, from the outermost to the innermost one.
+     *
+     * @observable
+     */
+    items: readonly BreadcrumbItem[];
+    private _dataView;
+    private _isDataViewOutdated;
+    private _isConversionSlow;
+    private _conversionTimeout;
+    static get pluginName(): 'ElementBreadcrumbs';
+    static get requires(): readonly [typeof ElementMenu];
+    constructor(editor: Editor);
+    init(): void;
+    /**
+     * Creates a breadcrumbs view that follows {@link items}.
+     */
+    createView(locale?: Locale): BreadcrumbsView;
+    /**
+     * Updates {@link items} from the current selection, converting the data view first when elements changed.
+     */
+    refresh(): void;
+    destroy(): void;
+    /**
+     * Refreshes the items after a change. When converting is slow, the data view is converted later, and the items
+     * follow the outdated data view until then.
+     */
+    private _update;
+    /**
+     * Converts the root to the data view, and maps its model elements to their view elements.
+     */
+    private _convert;
+    private _cancelConversion;
+    /**
+     * Returns the data view elements at the selection: the view element of the selected element, or of the innermost
+     * element with the selection, and its ancestors.
+     */
+    private _getItems;
+    private _openMenu;
+}
+//# sourceMappingURL=elementBreadcrumbs.d.ts.map

package/dist/breadcrumbs/elementBreadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementBreadcrumbs.d.ts","sourceRoot":"","sources":["../../src/breadcrumbs/elementBreadcrumbs.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,MAAM,EAEN,KAAK,MAAM,EACX,KAAK,MAAM,EAQX,MAAM,WAAW,CAAC;AAEnB,OAAO,WAAW,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,KAAK,cAAc,EAAsC,MAAM,yBAAyB,CAAC;AAClG,OAAO,eAAqD,MAAM,sBAAsB,CAAC;AASzF;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACxC;;;;OAIG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CACzB;AAWD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,MAAM;IACrD;;;;OAIG;IACY,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IAEhD,OAAO,CAAC,SAAS,CAAyB;IAC1C,OAAO,CAAC,mBAAmB,CAAQ;IACnC,OAAO,CAAC,iBAAiB,CAAS;IAClC,OAAO,CAAC,kBAAkB,CAA8C;IAExE,WAAkB,UAAU,IAAI,oBAAoB,CAEnD;IAED,WAAkB,QAAQ,IAAI,SAAS,CAAC,OAAO,WAAW,CAAC,CAE1D;gBAEW,MAAM,EAAE,MAAM;IAMnB,IAAI,IAAI,IAAI;IAmBnB;;OAEG;IACI,UAAU,CAAC,MAAM,GAAE,MAA2B,GAAG,eAAe;IAgBvE;;OAEG;IACI,OAAO,IAAI,IAAI;IAcN,OAAO,IAAI,IAAI;IAK/B;;;OAGG;IACH,OAAO,CAAC,OAAO;IAqBf;;OAEG;IACH,OAAO,CAAC,QAAQ;IAwBhB,OAAO,CAAC,iBAAiB;IAOzB;;;OAGG;IACH,OAAO,CAAC,SAAS;IAwBjB,OAAO,CAAC,SAAS;CAwBjB"}