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

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,32 @@
-# Temporary Holding Version
+# ckeditor5-elements-attributes
 
-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 attributes for CKEditor 5 Elements: `ElementAttributes` registers the `showElementAttributes` command, which shows
+the attributes of an element, as key-value pairs, in CKEditor's modal dialog.
+
+## Installation
+
+This package is part of `ckeditor5-elements`. Install the whole package to use it:
+
+```sh
+npm install ckeditor5 ckeditor5-elements
+```
+
+## Usage
+
+```ts
+import { ElementAttributes } from 'ckeditor5-elements';
+import 'ckeditor5-elements/index.css';
+
+// In the editor config: it is a command, so it can be a menu item, a toolbar button, or a callback.
+plugins: [..., ElementAttributes],
+elementContextMenu: (element, editor) => [editor.commands.get('showElementAttributes')]
+
+// From code:
+editor.commands.get('showElementAttributes').executeFor(element);
+```
+
+See the [Attributes guide](https://ivankild.github.io/ckeditor5-elements/guide/attributes) of the documentation.
+
+## License
+
+MIT

package/dist/augmentation.d.ts

@@ -0,0 +1,10 @@
+import type { ElementAttributes, ElementAttributesCommand } from './index.js';
+declare module 'ckeditor5' {
+    interface PluginsMap {
+        [ElementAttributes.pluginName]: ElementAttributes;
+    }
+    interface CommandsMap {
+        showElementAttributes: ElementAttributesCommand;
+    }
+}
+//# 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,iBAAiB,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;AAE9E,OAAO,QAAQ,WAAW,CAAC;IAC1B,UAAU,UAAU;QACnB,CAAC,iBAAiB,CAAC,UAAU,CAAC,EAAE,iBAAiB,CAAC;KAClD;IAED,UAAU,WAAW;QACpB,qBAAqB,EAAE,wBAAwB,CAAC;KAChD;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/elementAttributes.d.ts

@@ -0,0 +1,18 @@
+import { Dialog, Plugin } from 'ckeditor5';
+/**
+ * Registers the `showElementAttributes` command, which shows the attributes of an element, as key-value pairs, in a
+ * modal dialog.
+ *
+ * ```ts
+ * editor.commands.get('showElementAttributes').executeFor(element);
+ * ```
+ *
+ * The command has a title and an icon, so it can be a menu item (e.g. in the `elementContextMenu` config of
+ * `ElementContextMenu`), a toolbar button, or the callback of a clickable element (see `ElementClickable`).
+ */
+export default class ElementAttributes extends Plugin {
+    static get requires(): readonly [typeof Dialog];
+    static get pluginName(): 'ElementAttributes';
+    init(): void;
+}
+//# sourceMappingURL=elementAttributes.d.ts.map

package/dist/elementAttributes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementAttributes.d.ts","sourceRoot":"","sources":["../src/elementAttributes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAG3C;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,MAAM;IACpD,WAAkB,QAAQ,IAAI,SAAS,CAAC,OAAO,MAAM,CAAC,CAErD;IAED,WAAkB,UAAU,IAAI,mBAAmB,CAElD;IAEM,IAAI,IAAI,IAAI;CAGnB"}

package/dist/elementAttributes.js

@@ -0,0 +1,25 @@
+import { Dialog, Plugin } from 'ckeditor5';
+import ElementAttributesCommand from './elementAttributesCommand.js';
+/**
+ * Registers the `showElementAttributes` command, which shows the attributes of an element, as key-value pairs, in a
+ * modal dialog.
+ *
+ * ```ts
+ * editor.commands.get('showElementAttributes').executeFor(element);
+ * ```
+ *
+ * The command has a title and an icon, so it can be a menu item (e.g. in the `elementContextMenu` config of
+ * `ElementContextMenu`), a toolbar button, or the callback of a clickable element (see `ElementClickable`).
+ */
+export default class ElementAttributes extends Plugin {
+    static get requires() {
+        return [Dialog];
+    }
+    static get pluginName() {
+        return 'ElementAttributes';
+    }
+    init() {
+        this.editor.commands.add('showElementAttributes', new ElementAttributesCommand(this.editor));
+    }
+}
+//# sourceMappingURL=elementAttributes.js.map

package/dist/elementAttributes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementAttributes.js","sourceRoot":"","sources":["../src/elementAttributes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAErE;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,MAAM;IAC7C,MAAM,KAAK,QAAQ;QACzB,OAAO,CAAC,MAAM,CAAU,CAAC;IAC1B,CAAC;IAEM,MAAM,KAAK,UAAU;QAC3B,OAAO,mBAA4B,CAAC;IACrC,CAAC;IAEM,IAAI;QACV,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,uBAAuB,EAAE,IAAI,wBAAwB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;IAC9F,CAAC;CACD"}

package/dist/elementAttributesCommand.d.ts

@@ -0,0 +1,23 @@
+import { type Editor } from 'ckeditor5';
+import { ElementOrPositionCommand, type ElementOrPosition } from 'ckeditor5-elements-core';
+/**
+ * Shows the attributes of an element, as key-value pairs, in CKEditor's modal dialog.
+ *
+ * The element is the given one, the parent of the given position, or the selected element or the parent of the
+ * selection (see {@link ElementOrPositionCommand}). It does not change the data, so it works in read-only mode.
+ *
+ * Strings are shown as they are, other values (numbers, booleans, objects) as JSON. Long values are cut.
+ */
+export default class ElementAttributesCommand extends ElementOrPositionCommand {
+    constructor(editor: Editor);
+    /**
+     * Returns the attributes of the element as key-value pairs of text, as the dialog shows them.
+     */
+    getAttributes(elementOrPosition?: ElementOrPosition): [key: string, value: string][];
+    /**
+     * Shows the dialog with the attributes of the element, in place of the one that is open.
+     */
+    execute(elementOrPosition?: ElementOrPosition): void;
+    protected _isEnabledFor(elementOrPosition?: ElementOrPosition): boolean;
+}
+//# sourceMappingURL=elementAttributesCommand.d.ts.map

package/dist/elementAttributesCommand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementAttributesCommand.d.ts","sourceRoot":"","sources":["../src/elementAttributesCommand.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,wBAAwB,EAAE,KAAK,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAS3F;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,wBAAyB,SAAQ,wBAAwB;gBACjE,MAAM,EAAE,MAAM;IAU1B;;OAEG;IACI,aAAa,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,EAAE;IAM3F;;OAEG;IACa,OAAO,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,GAAG,IAAI;cA2BjD,aAAa,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,GAAG,OAAO;CAGhF"}

package/dist/elementAttributesCommand.js

@@ -0,0 +1,66 @@
+import { Dialog } from 'ckeditor5';
+import { ElementOrPositionCommand } from 'ckeditor5-elements-core';
+import ElementAttributesView from './elementAttributesView.js';
+import { attributesIcon } from './icons.js';
+/**
+ * The longest value shown in full. Longer ones, e.g. the data of an image, are cut.
+ */
+const MAX_VALUE_LENGTH = 120;
+/**
+ * Shows the attributes of an element, as key-value pairs, in CKEditor's modal dialog.
+ *
+ * The element is the given one, the parent of the given position, or the selected element or the parent of the
+ * selection (see {@link ElementOrPositionCommand}). It does not change the data, so it works in read-only mode.
+ *
+ * Strings are shown as they are, other values (numbers, booleans, objects) as JSON. Long values are cut.
+ */
+export default class ElementAttributesCommand extends ElementOrPositionCommand {
+    constructor(editor) {
+        super(editor);
+        this.title = editor.t('Show attributes');
+        this.icon = attributesIcon;
+        // It only reads the element.
+        this.affectsData = false;
+    }
+    /**
+     * Returns the attributes of the element as key-value pairs of text, as the dialog shows them.
+     */
+    getAttributes(elementOrPosition) {
+        const element = this._getElement(elementOrPosition);
+        return element ? Array.from(element.getAttributes(), ([key, value]) => [key, formatValue(value)]) : [];
+    }
+    /**
+     * Shows the dialog with the attributes of the element, in place of the one that is open.
+     */
+    execute(elementOrPosition) {
+        const editor = this.editor;
+        const element = this._getElement(elementOrPosition);
+        if (!element) {
+            return;
+        }
+        const dialog = editor.plugins.get(Dialog);
+        dialog.show({
+            id: 'elementAttributes',
+            isModal: true,
+            title: `<${element.name}>`,
+            content: new ElementAttributesView(editor.locale, this.getAttributes(element), editor.t('No attributes')),
+            actionButtons: [
+                {
+                    label: editor.t('Close'),
+                    withText: true,
+                    onExecute: () => {
+                        dialog.hide();
+                    }
+                }
+            ]
+        });
+    }
+    _isEnabledFor(elementOrPosition) {
+        return !!this._getElement(elementOrPosition);
+    }
+}
+function formatValue(value) {
+    const text = typeof value === 'string' ? value : JSON.stringify(value);
+    return text.length > MAX_VALUE_LENGTH ? `${text.slice(0, MAX_VALUE_LENGTH - 1)}…` : text;
+}
+//# sourceMappingURL=elementAttributesCommand.js.map

package/dist/elementAttributesCommand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementAttributesCommand.js","sourceRoot":"","sources":["../src/elementAttributesCommand.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAe,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,wBAAwB,EAA0B,MAAM,yBAAyB,CAAC;AAC3F,OAAO,qBAAqB,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAE5C;;GAEG;AACH,MAAM,gBAAgB,GAAG,GAAG,CAAC;AAE7B;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,wBAAyB,SAAQ,wBAAwB;IAC7E,YAAY,MAAc;QACzB,KAAK,CAAC,MAAM,CAAC,CAAC;QAEd,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC;QACzC,IAAI,CAAC,IAAI,GAAG,cAAc,CAAC;QAE3B,6BAA6B;QAC7B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC1B,CAAC;IAED;;OAEG;IACI,aAAa,CAAC,iBAAqC;QACzD,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;QAEpD,OAAO,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACxG,CAAC;IAED;;OAEG;IACa,OAAO,CAAC,iBAAqC;QAC5D,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;QAEpD,IAAI,CAAC,OAAO,EAAE,CAAC;YACd,OAAO;QACR,CAAC;QAED,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAE1C,MAAM,CAAC,IAAI,CAAC;YACX,EAAE,EAAE,mBAAmB;YACvB,OAAO,EAAE,IAAI;YACb,KAAK,EAAE,IAAI,OAAO,CAAC,IAAI,GAAG;YAC1B,OAAO,EAAE,IAAI,qBAAqB,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC;YACzG,aAAa,EAAE;gBACd;oBACC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;oBACxB,QAAQ,EAAE,IAAI;oBACd,SAAS,EAAE,GAAG,EAAE;wBACf,MAAM,CAAC,IAAI,EAAE,CAAC;oBACf,CAAC;iBACD;aACD;SACD,CAAC,CAAC;IACJ,CAAC;IAEkB,aAAa,CAAC,iBAAqC;QACrE,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;IAC9C,CAAC;CACD;AAED,SAAS,WAAW,CAAC,KAAc;IAClC,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAEvE,OAAO,IAAI,CAAC,MAAM,GAAG,gBAAgB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,gBAAgB,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;AAC1F,CAAC"}

package/dist/elementAttributesView.d.ts

@@ -0,0 +1,9 @@
+import { View, type Locale } from 'ckeditor5';
+/**
+ * The content of the attributes dialog: a table of the attributes of an element, a row for each, with the key and the
+ * value as text.
+ */
+export default class ElementAttributesView extends View {
+    constructor(locale: Locale, attributes: readonly (readonly [key: string, value: string])[], emptyText: string);
+}
+//# sourceMappingURL=elementAttributesView.d.ts.map

package/dist/elementAttributesView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementAttributesView.d.ts","sourceRoot":"","sources":["../src/elementAttributesView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,MAAM,EAAE,MAAM,WAAW,CAAC;AAE9C;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,IAAI;gBAC1C,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,EAAE,EAAE,SAAS,EAAE,MAAM;CA+B7G"}

package/dist/elementAttributesView.js

@@ -0,0 +1,37 @@
+import { View } from 'ckeditor5';
+/**
+ * The content of the attributes dialog: a table of the attributes of an element, a row for each, with the key and the
+ * value as text.
+ */
+export default class ElementAttributesView extends View {
+    constructor(locale, attributes, emptyText) {
+        super(locale);
+        const rows = attributes.length
+            ? attributes.map(([key, value]) => ({
+                tag: 'tr',
+                children: [
+                    { tag: 'th', attributes: { scope: 'row' }, children: [{ text: key }] },
+                    { tag: 'td', children: [{ text: value }] }
+                ]
+            }))
+            : [
+                {
+                    tag: 'tr',
+                    children: [
+                        {
+                            tag: 'td',
+                            attributes: { class: 'ck-elements-attributes__empty' },
+                            children: [{ text: emptyText }]
+                        }
+                    ]
+                }
+            ];
+        // CKEditor's reset styles all elements of its UI; `ck-reset_all-excluded` leaves the table in it to our styles.
+        this.setTemplate({
+            tag: 'div',
+            attributes: { class: ['ck-reset_all-excluded', 'ck-elements-attributes'] },
+            children: [{ tag: 'table', children: rows }]
+        });
+    }
+}
+//# sourceMappingURL=elementAttributesView.js.map

package/dist/elementAttributesView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementAttributesView.js","sourceRoot":"","sources":["../src/elementAttributesView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAe,MAAM,WAAW,CAAC;AAE9C;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,IAAI;IACtD,YAAY,MAAc,EAAE,UAA8D,EAAE,SAAiB;QAC5G,KAAK,CAAC,MAAM,CAAC,CAAC;QAEd,MAAM,IAAI,GAAG,UAAU,CAAC,MAAM;YAC7B,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;gBAClC,GAAG,EAAE,IAAI;gBACT,QAAQ,EAAE;oBACT,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,EAAE;oBACtE,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE;iBAC1C;aACD,CAAC,CAAC;YACJ,CAAC,CAAC;gBACA;oBACC,GAAG,EAAE,IAAI;oBACT,QAAQ,EAAE;wBACT;4BACC,GAAG,EAAE,IAAI;4BACT,UAAU,EAAE,EAAE,KAAK,EAAE,+BAA+B,EAAE;4BACtD,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;yBAC/B;qBACD;iBACD;aACD,CAAC;QAEJ,gHAAgH;QAChH,IAAI,CAAC,WAAW,CAAC;YAChB,GAAG,EAAE,KAAK;YACV,UAAU,EAAE,EAAE,KAAK,EAAE,CAAC,uBAAuB,EAAE,wBAAwB,CAAC,EAAE;YAC1E,QAAQ,EAAE,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;SAC5C,CAAC,CAAC;IACJ,CAAC;CACD"}

package/dist/icons.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The icon of the command: CKEditor's own info icon.
+ */
+export declare const attributesIcon: string;
+//# sourceMappingURL=icons.d.ts.map

package/dist/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../src/icons.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,cAAc,QAAW,CAAC"}

package/dist/icons.js

@@ -0,0 +1,6 @@
+import { IconInfo } from 'ckeditor5';
+/**
+ * The icon of the command: CKEditor's own info icon.
+ */
+export const attributesIcon = IconInfo;
+//# sourceMappingURL=icons.js.map

package/dist/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../src/icons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAErC;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Element attributes: show the attributes of an element, as key-value pairs, in a modal dialog.
+ *
+ * @module ckeditor5-elements-attributes
+ */
+export { default as ElementAttributes } from './elementAttributes.js';
+export { default as ElementAttributesCommand } from './elementAttributesCommand.js';
+export { default as ElementAttributesView } from './elementAttributesView.js';
+export { attributesIcon } from './icons.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,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAGtE,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAGpF,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAG9E,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAE5C,OAAO,mBAAmB,CAAC"}

package/dist/index.js

@@ -0,0 +1,15 @@
+/**
+ * Element attributes: show the attributes of an element, as key-value pairs, in a modal dialog.
+ *
+ * @module ckeditor5-elements-attributes
+ */
+// Plugins.
+export { default as ElementAttributes } from './elementAttributes.js';
+// Commands.
+export { default as ElementAttributesCommand } from './elementAttributesCommand.js';
+// Views.
+export { default as ElementAttributesView } from './elementAttributesView.js';
+// Icons.
+export { attributesIcon } from './icons.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,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAEtE,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAEpF,SAAS;AACT,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAE9E,SAAS;AACT,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAE5C,OAAO,mBAAmB,CAAC"}

package/package.json

@@ -1,6 +1,52 @@
 {
   "name": "ckeditor5-elements-attributes",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "49.0.0-alpha.2",
+  "description": "Element attributes for CKEditor 5: show the attributes of an element, as key-value pairs, in a modal dialog.",
+  "keywords": [
+    "ckeditor",
+    "ckeditor5",
+    "ckeditor 5",
+    "ckeditor5-feature",
+    "ckeditor5-plugin"
+  ],
+  "license": "MIT",
+  "author": "Ivan Kildyushov",
+  "homepage": "https://ivankild.github.io/ckeditor5-elements/guide/attributes",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ivankild/ckeditor5-elements.git",
+    "directory": "packages/ckeditor5-elements-attributes"
+  },
+  "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/elementAttributes.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,11 @@
+import type { ElementAttributes, ElementAttributesCommand } from './index.js';
+
+declare module 'ckeditor5' {
+	interface PluginsMap {
+		[ElementAttributes.pluginName]: ElementAttributes;
+	}
+
+	interface CommandsMap {
+		showElementAttributes: ElementAttributesCommand;
+	}
+}

package/src/elementAttributes.ts

@@ -0,0 +1,27 @@
+import { Dialog, Plugin } from 'ckeditor5';
+import ElementAttributesCommand from './elementAttributesCommand.js';
+
+/**
+ * Registers the `showElementAttributes` command, which shows the attributes of an element, as key-value pairs, in a
+ * modal dialog.
+ *
+ * ```ts
+ * editor.commands.get('showElementAttributes').executeFor(element);
+ * ```
+ *
+ * The command has a title and an icon, so it can be a menu item (e.g. in the `elementContextMenu` config of
+ * `ElementContextMenu`), a toolbar button, or the callback of a clickable element (see `ElementClickable`).
+ */
+export default class ElementAttributes extends Plugin {
+	public static get requires(): readonly [typeof Dialog] {
+		return [Dialog] as const;
+	}
+
+	public static get pluginName(): 'ElementAttributes' {
+		return 'ElementAttributes' as const;
+	}
+
+	public init(): void {
+		this.editor.commands.add('showElementAttributes', new ElementAttributesCommand(this.editor));
+	}
+}

package/src/elementAttributesCommand.ts

@@ -0,0 +1,78 @@
+import { Dialog, type Editor } from 'ckeditor5';
+import { ElementOrPositionCommand, type ElementOrPosition } from 'ckeditor5-elements-core';
+import ElementAttributesView from './elementAttributesView.js';
+import { attributesIcon } from './icons.js';
+
+/**
+ * The longest value shown in full. Longer ones, e.g. the data of an image, are cut.
+ */
+const MAX_VALUE_LENGTH = 120;
+
+/**
+ * Shows the attributes of an element, as key-value pairs, in CKEditor's modal dialog.
+ *
+ * The element is the given one, the parent of the given position, or the selected element or the parent of the
+ * selection (see {@link ElementOrPositionCommand}). It does not change the data, so it works in read-only mode.
+ *
+ * Strings are shown as they are, other values (numbers, booleans, objects) as JSON. Long values are cut.
+ */
+export default class ElementAttributesCommand extends ElementOrPositionCommand {
+	constructor(editor: Editor) {
+		super(editor);
+
+		this.title = editor.t('Show attributes');
+		this.icon = attributesIcon;
+
+		// It only reads the element.
+		this.affectsData = false;
+	}
+
+	/**
+	 * Returns the attributes of the element as key-value pairs of text, as the dialog shows them.
+	 */
+	public getAttributes(elementOrPosition?: ElementOrPosition): [key: string, value: string][] {
+		const element = this._getElement(elementOrPosition);
+
+		return element ? Array.from(element.getAttributes(), ([key, value]) => [key, formatValue(value)]) : [];
+	}
+
+	/**
+	 * Shows the dialog with the attributes of the element, in place of the one that is open.
+	 */
+	public override execute(elementOrPosition?: ElementOrPosition): void {
+		const editor = this.editor;
+		const element = this._getElement(elementOrPosition);
+
+		if (!element) {
+			return;
+		}
+
+		const dialog = editor.plugins.get(Dialog);
+
+		dialog.show({
+			id: 'elementAttributes',
+			isModal: true,
+			title: `<${element.name}>`,
+			content: new ElementAttributesView(editor.locale, this.getAttributes(element), editor.t('No attributes')),
+			actionButtons: [
+				{
+					label: editor.t('Close'),
+					withText: true,
+					onExecute: () => {
+						dialog.hide();
+					}
+				}
+			]
+		});
+	}
+
+	protected override _isEnabledFor(elementOrPosition?: ElementOrPosition): boolean {
+		return !!this._getElement(elementOrPosition);
+	}
+}
+
+function formatValue(value: unknown): string {
+	const text = typeof value === 'string' ? value : JSON.stringify(value);
+
+	return text.length > MAX_VALUE_LENGTH ? `${text.slice(0, MAX_VALUE_LENGTH - 1)}…` : text;
+}

package/src/elementAttributesView.ts

@@ -0,0 +1,39 @@
+import { View, type Locale } from 'ckeditor5';
+
+/**
+ * The content of the attributes dialog: a table of the attributes of an element, a row for each, with the key and the
+ * value as text.
+ */
+export default class ElementAttributesView extends View {
+	constructor(locale: Locale, attributes: readonly (readonly [key: string, value: string])[], emptyText: string) {
+		super(locale);
+
+		const rows = attributes.length
+			? attributes.map(([key, value]) => ({
+					tag: 'tr',
+					children: [
+						{ tag: 'th', attributes: { scope: 'row' }, children: [{ text: key }] },
+						{ tag: 'td', children: [{ text: value }] }
+					]
+				}))
+			: [
+					{
+						tag: 'tr',
+						children: [
+							{
+								tag: 'td',
+								attributes: { class: 'ck-elements-attributes__empty' },
+								children: [{ text: emptyText }]
+							}
+						]
+					}
+				];
+
+		// CKEditor's reset styles all elements of its UI; `ck-reset_all-excluded` leaves the table in it to our styles.
+		this.setTemplate({
+			tag: 'div',
+			attributes: { class: ['ck-reset_all-excluded', 'ck-elements-attributes'] },
+			children: [{ tag: 'table', children: rows }]
+		});
+	}
+}

package/src/icons.ts

@@ -0,0 +1,6 @@
+import { IconInfo } from 'ckeditor5';
+
+/**
+ * The icon of the command: CKEditor's own info icon.
+ */
+export const attributesIcon = IconInfo;

package/src/index.ts

@@ -0,0 +1,19 @@
+/**
+ * Element attributes: show the attributes of an element, as key-value pairs, in a modal dialog.
+ *
+ * @module ckeditor5-elements-attributes
+ */
+
+// Plugins.
+export { default as ElementAttributes } from './elementAttributes.js';
+
+// Commands.
+export { default as ElementAttributesCommand } from './elementAttributesCommand.js';
+
+// Views.
+export { default as ElementAttributesView } from './elementAttributesView.js';
+
+// Icons.
+export { attributesIcon } from './icons.js';
+
+import './augmentation.js';

package/theme/elementAttributes.css

@@ -0,0 +1,30 @@
+/*
+ * The table of the attributes dialog. It is excluded from CKEditor's reset (`ck-reset_all-excluded`), so it has its own
+ * styles.
+ */
+.ck-elements-attributes table {
+	width: min(32em, 80vw);
+	border-collapse: collapse;
+	table-layout: fixed;
+}
+
+.ck-elements-attributes th,
+.ck-elements-attributes td {
+	padding: 0.3em 0.8em;
+	border-bottom: 1px solid var(--ck-color-base-border);
+	text-align: left;
+	vertical-align: top;
+	/* The dialog does not wrap its content, but long values, such as the data of an image, must wrap. */
+	white-space: normal;
+	overflow-wrap: anywhere;
+}
+
+.ck-elements-attributes th {
+	width: 7em;
+	font-weight: 600;
+}
+
+.ck-elements-attributes .ck-elements-attributes__empty {
+	color: var(--ck-color-text);
+	opacity: 0.65;
+}