ckeditor5-elements-breadcrumbs 0.0.0-stage → 49.0.0-alpha.2

package/dist/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/breadcrumbsView.d.ts.map

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

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

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Breadcrumbs: the element path at the selection, optionally clickable with a configured menu.
+ *
+ * @module ckeditor5-elements-breadcrumbs
+ */
+export { default as Breadcrumbs, type BreadcrumbsConfig, type BreadcrumbsMenu, type BreadcrumbsMenuItems, type BreadcrumbsMenuOptions } from './breadcrumbs.js';
+export { default as BreadcrumbsView, type BreadcrumbsViewExecuteEvent, type BreadcrumbsViewOptions } from './breadcrumbsView.js';
+export { default as BreadcrumbItemView, type BreadcrumbItem, type BreadcrumbItemViewOptions } from './breadcrumbItemView.js';
+export { default as BreadcrumbLabelView } from './breadcrumbLabelView.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;;;;GAIG;AAGH,OAAO,EACN,OAAO,IAAI,WAAW,EACtB,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACpB,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,EAC3B,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EACN,OAAO,IAAI,eAAe,EAC1B,KAAK,2BAA2B,EAChC,KAAK,sBAAsB,EAC3B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACN,OAAO,IAAI,kBAAkB,EAC7B,KAAK,cAAc,EACnB,KAAK,yBAAyB,EAC9B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE1E,OAAO,mBAAmB,CAAC"}

package/dist/index.js

@@ -0,0 +1,13 @@
+/**
+ * Breadcrumbs: the element path at the selection, optionally clickable with a configured menu.
+ *
+ * @module ckeditor5-elements-breadcrumbs
+ */
+// Plugins.
+export { default as Breadcrumbs } from './breadcrumbs.js';
+// Views.
+export { default as BreadcrumbsView } from './breadcrumbsView.js';
+export { default as BreadcrumbItemView } from './breadcrumbItemView.js';
+export { default as BreadcrumbLabelView } from './breadcrumbLabelView.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;;;;GAIG;AAEH,WAAW;AACX,OAAO,EACN,OAAO,IAAI,WAAW,EAKtB,MAAM,kBAAkB,CAAC;AAE1B,SAAS;AACT,OAAO,EACN,OAAO,IAAI,eAAe,EAG1B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACN,OAAO,IAAI,kBAAkB,EAG7B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE1E,OAAO,mBAAmB,CAAC"}

package/package.json

@@ -1,6 +1,52 @@
 {
   "name": "ckeditor5-elements-breadcrumbs",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "49.0.0-alpha.2",
+  "description": "Breadcrumbs for CKEditor 5: the element path at the selection, as a toolbar component.",
+  "keywords": [
+    "ckeditor",
+    "ckeditor5",
+    "ckeditor 5",
+    "ckeditor5-feature",
+    "ckeditor5-plugin"
+  ],
+  "license": "MIT",
+  "author": "Ivan Kildyushov",
+  "homepage": "https://ivankild.github.io/ckeditor5-elements/guide/breadcrumbs",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ivankild/ckeditor5-elements.git",
+    "directory": "packages/ckeditor5-elements-breadcrumbs"
+  },
+  "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"
+    },
+    "./index.css": "./theme/breadcrumbs.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "theme",
+    "README.md"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "dependencies": {
+    "ckeditor5-elements-core": "49.0.0-alpha.2"
+  },
+  "peerDependencies": {
+    "ckeditor5": "^49.0.0"
+  },
+  "scripts": {
+    "build": "tsc --build"
+  }
 }

package/src/augmentation.ts

@@ -0,0 +1,14 @@
+import type { Breadcrumbs, BreadcrumbsConfig } from './index.js';
+
+declare module 'ckeditor5' {
+	interface PluginsMap {
+		[Breadcrumbs.pluginName]: Breadcrumbs;
+	}
+
+	interface EditorConfig {
+		/**
+		 * The configuration of the {@link Breadcrumbs} plugin.
+		 */
+		breadcrumbs?: BreadcrumbsConfig;
+	}
+}

package/src/breadcrumbItemView.ts

@@ -0,0 +1,74 @@
+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.
+	 */
+	public readonly viewElement: ViewElement;
+
+	/**
+	 * The model element the menu of this item is for.
+	 */
+	public readonly modelElement: ModelElement | null;
+
+	/**
+	 * Whether the menu of this item is open.
+	 *
+	 * @observable
+	 */
+	declare public isExpanded: boolean;
+
+	constructor(
+		locale: Locale | undefined,
+		{ label, viewElement, modelElement }: BreadcrumbItem,
+		{ isCurrent = false }: BreadcrumbItemViewOptions = {}
+	) {
+		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' } : {})
+			}
+		});
+	}
+}
+
+/**
+ * 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;
+}

package/src/breadcrumbLabelView.ts

@@ -0,0 +1,55 @@
+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.
+	 */
+	public readonly viewElement: ViewElement;
+
+	/**
+	 * The model element of the view element, if any.
+	 */
+	public readonly modelElement: ModelElement | null;
+
+	/**
+	 * The label of the element.
+	 *
+	 * @observable
+	 */
+	declare public label: string;
+
+	constructor(
+		locale: Locale | undefined,
+		{ label, viewElement, modelElement }: BreadcrumbItem,
+		{ isCurrent = false }: BreadcrumbItemViewOptions = {}
+	) {
+		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.
+	 */
+	public focus(): void {
+		this.element?.focus();
+	}
+}