ckeditor5-elements 0.0.0-stage → 49.0.0-alpha.4

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,71 @@
-# Temporary Holding Version
+# ckeditor5-elements
 
-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-level features for CKEditor 5 v49, in one package:
+
+| Feature              | Exports                                                                                                                      |
+| -------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| Commands and buttons | `ElementOrPositionCommand`, `ElementCommand`, `ElementOrPositionButtonView`, `ElementButtonView`                             |
+| Element menu         | `ElementMenu` (the plugin that shows the menus below), `ElementMenuView`                                                     |
+| Context menu         | `ElementContextMenu`: a menu of commands for the right-clicked element (or Shift+F10)                                        |
+| Clipboard            | `ElementClipboard`: `copyElement`, `cutElement`, `pasteElement`, `pasteElementBefore`, `pasteElementAfter`                   |
+| Actions              | `ElementActions`: `moveElementUp`, `moveElementDown`, `duplicateElement`, `deleteElement`                                    |
+| Attributes           | `ElementAttributes`: `showElementAttributes` shows the attributes of an element in a modal                                   |
+| Element schema       | `ElementSchema`: declare elements from a JSON file, with three types of elements and a validation; `validateElementSchema()` |
+| Element toolbar      | `ElementToolbar`: floating toolbars for the elements that match a name or a filter                                           |
+| Selectable elements  | `ElementSelectable`: select an element as a whole, by a click or by the arrow keys, without widgets                          |
+| Clickable elements   | `ElementClickable`: a callback with the model element when an element is clicked or double-clicked                           |
+| Quick insert         | `QuickInsert`: Alt+Enter opens a searchable list of the elements allowed at the cursor                                       |
+| Breadcrumbs          | `Breadcrumbs`: the element path at the cursor, as labels or buttons that open the element menu                               |
+
+## Installation
+
+```sh
+npm install ckeditor5 ckeditor5-elements
+```
+
+## Usage
+
+Import the features from `ckeditor5-elements`, and its stylesheet, which styles all of them:
+
+```ts
+import { ClassicEditor, Essentials, Paragraph } from 'ckeditor5';
+import { Breadcrumbs, ElementClipboard, ElementContextMenu, QuickInsert } from 'ckeditor5-elements';
+
+import 'ckeditor5/ckeditor5.css';
+import 'ckeditor5-elements/index.css';
+
+const menu = (element, editor) => [
+	{
+		title: 'Insert',
+		items: [editor.commands.get('quickInsertBefore'), editor.commands.get('quickInsertAfter')]
+	},
+	'|',
+	editor.commands.get('copyElement'),
+	editor.commands.get('cutElement'),
+	editor.commands.get('pasteElement')
+];
+
+await ClassicEditor.create({
+	attachTo: document.querySelector('#editor'),
+	licenseKey: 'GPL',
+	plugins: [Essentials, Paragraph, ElementContextMenu, ElementClipboard, QuickInsert, Breadcrumbs],
+	toolbar: ['undo', 'redo', '|', 'breadcrumbs'],
+	elementContextMenu: menu,
+	breadcrumbs: { menu }
+});
+```
+
+Load only the plugins you use: the others are not part of your build.
+
+The features come in packages of their own (`ckeditor5-elements-core`, `-actions`, `-attributes`, `-schema`, `-interaction`, `-toolbar`, `-menu`), in the same version as this package, which installs them. Do not install or import them yourself: two
+versions of them would be loaded, which fails.
+
+## Documentation
+
+[CKEditor 5 Elements documentation](https://ivankild.github.io/ckeditor5-elements/): guides with live examples, and the API reference.
+
+The [full example](https://ivankild.github.io/ckeditor5-elements/example) shows all the features together in one editor.
+
+## License
+
+MIT

package/dist/index.css

@@ -0,0 +1,174 @@
+/* ckeditor5-elements-attributes */
+/*
+ * 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;
+}
+
+/* ckeditor5-elements-interaction */
+/*
+ * A selected element: the editing view marks it with this class, and the selection is a fake one, so the browser draws
+ * nothing on the element itself.
+ */
+.ck-content .ck-elements-selected {
+	outline: 2px solid var(--ck-color-focus-border);
+	outline-offset: 1px;
+}
+
+/* ckeditor5-elements-menu */
+/*
+ * The menu of an element is CKEditor's dropdown menu, so CKEditor styles it. Only the alignment of labels is added.
+ */
+
+/* In a menu with icons (or a nested menu of it), items without an icon get the space of one, so that all labels line up. */
+:is(.ck.ck-elements-menu, .ck.ck-elements-menu__panel > .ck-dropdown-menu-list):has(
+		> .ck-list__item > :is(.ck-button, .ck-dropdown-menu-list__nested-menu > .ck-button) > .ck-button__icon
+	)
+	> .ck-list__item
+	> :is(.ck-button, .ck-dropdown-menu-list__nested-menu > .ck-button):not(:has(> .ck-button__icon))
+	> .ck-button__label {
+	/* The width of an icon, and the gap after it. */
+	margin-inline-start: calc(var(--ck-icon-size) + var(--ck-button-icon-gap));
+}
+
+/*
+ * The element path: ancestors are muted, the innermost element (where the cursor is) is emphasised. Items are separated
+ * by chevrons. Buttons (with a menu) and labels (without one) look the same, except buttons react to hover and focus.
+ */
+.ck.ck-elements-breadcrumbs {
+	--ck-elements-breadcrumbs-item-height: 24px;
+	--ck-elements-breadcrumbs-separator-size: 0.38em;
+
+	display: flex;
+	align-items: center;
+	min-width: 0;
+	font-size: var(--ck-font-size-sm);
+	color: var(--ck-color-text);
+}
+
+.ck.ck-toolbar .ck.ck-elements-breadcrumbs {
+	min-height: var(--ck-size-control-min-height);
+}
+
+.ck.ck-elements-breadcrumbs__list {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 2px 0;
+	min-width: 0;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.ck.ck-elements-breadcrumbs__list-item {
+	display: flex;
+	align-items: center;
+	min-width: 0;
+	margin: 0;
+	padding: 0;
+}
+
+/* Both item kinds: buttons and labels. */
+.ck.ck-elements-breadcrumbs__item,
+.ck.ck-button.ck-elements-breadcrumbs__item {
+	display: inline-flex;
+	align-items: center;
+	min-width: 0;
+	min-height: var(--ck-elements-breadcrumbs-item-height);
+	height: var(--ck-elements-breadcrumbs-item-height);
+	padding: 0 var(--ck-spacing-sm);
+	border-radius: var(--ck-border-radius-control);
+	font-family: var(--ck-font-family);
+	font-size: inherit;
+	line-height: 1;
+	white-space: nowrap;
+	color: color-mix(in srgb, var(--ck-color-text) 65%, transparent);
+}
+
+.ck.ck-button.ck-elements-breadcrumbs__item .ck-button__label {
+	font-size: inherit;
+	line-height: 1;
+}
+
+/* The innermost element: where the cursor is. */
+.ck.ck-elements-breadcrumbs__item[aria-current] {
+	color: var(--ck-color-text);
+	font-weight: 600;
+}
+
+/* Labels cannot be clicked, but can be focused with the keyboard. */
+.ck.ck-elements-breadcrumbs__label {
+	cursor: default;
+}
+
+.ck.ck-elements-breadcrumbs__label:focus {
+	outline: none;
+	box-shadow:
+		0 0 0 1px var(--ck-color-focus-border),
+		var(--ck-focus-shadow);
+}
+
+/* Buttons show they can be clicked. */
+.ck.ck-button.ck-elements-breadcrumbs__item:hover,
+.ck.ck-button.ck-elements-breadcrumbs__item:focus,
+.ck.ck-button.ck-elements-breadcrumbs__item.ck-on {
+	color: var(--ck-color-text);
+}
+
+/* A chevron between items, in the gap before each item, so it is not part of a button's hover area. */
+.ck.ck-elements-breadcrumbs__list-item + .ck.ck-elements-breadcrumbs__list-item {
+	position: relative;
+	margin-left: calc(var(--ck-spacing-base) + var(--ck-elements-breadcrumbs-separator-size));
+}
+
+.ck.ck-elements-breadcrumbs__list-item + .ck.ck-elements-breadcrumbs__list-item::before {
+	content: '';
+	position: absolute;
+	top: 50%;
+	left: calc(-0.5 * var(--ck-spacing-base) - var(--ck-elements-breadcrumbs-separator-size));
+	width: var(--ck-elements-breadcrumbs-separator-size);
+	height: var(--ck-elements-breadcrumbs-separator-size);
+	border-top: 1.5px solid color-mix(in srgb, var(--ck-color-text) 40%, transparent);
+	border-right: 1.5px solid color-mix(in srgb, var(--ck-color-text) 40%, transparent);
+	transform: translateY(-50%) rotate(45deg);
+	pointer-events: none;
+}
+
+.ck.ck-elements-quick-insert {
+	width: 260px;
+}
+
+.ck.ck-elements-quick-insert .ck-search__results {
+	max-height: 240px;
+	overflow-y: auto;
+}
+
+.ck.ck-elements-quick-insert .ck-list__item > .ck.ck-button {
+	width: 100%;
+}

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * CKEditor 5 Elements: commands that act on an element and their buttons, the element menu, the element context menu,
+ * element actions (move, duplicate, delete, and the clipboard), element attributes, an element schema, selectable and
+ * clickable elements, element toolbars, quick insert and breadcrumbs.
+ *
+ * This package brings them all, as `ckeditor5` does for CKEditor: install it, and import everything from it. Its
+ * stylesheet, `ckeditor5-elements/index.css`, has the styles of all of them.
+ *
+ * @module ckeditor5-elements
+ */
+export * from 'ckeditor5-elements-core';
+export * from 'ckeditor5-elements-actions';
+export * from 'ckeditor5-elements-schema';
+export * from 'ckeditor5-elements-interaction';
+export * from 'ckeditor5-elements-attributes';
+export * from 'ckeditor5-elements-toolbar';
+export * from 'ckeditor5-elements-menu';
+//# 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;;;;;;;;;GASG;AAEH,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC"}

package/dist/index.js

@@ -0,0 +1,18 @@
+/**
+ * CKEditor 5 Elements: commands that act on an element and their buttons, the element menu, the element context menu,
+ * element actions (move, duplicate, delete, and the clipboard), element attributes, an element schema, selectable and
+ * clickable elements, element toolbars, quick insert and breadcrumbs.
+ *
+ * This package brings them all, as `ckeditor5` does for CKEditor: install it, and import everything from it. Its
+ * stylesheet, `ckeditor5-elements/index.css`, has the styles of all of them.
+ *
+ * @module ckeditor5-elements
+ */
+export * from 'ckeditor5-elements-core';
+export * from 'ckeditor5-elements-actions';
+export * from 'ckeditor5-elements-schema';
+export * from 'ckeditor5-elements-interaction';
+export * from 'ckeditor5-elements-attributes';
+export * from 'ckeditor5-elements-toolbar';
+export * from 'ckeditor5-elements-menu';
+//# 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;;;;;;;;;GASG;AAEH,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC"}

package/dist/validateSchema.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The validation of an element schema without CKEditor, so that it works in Node.js, e.g. to validate a schema file in a
+ * test or in CI: `import { validateElementSchema } from 'ckeditor5-elements/validate-schema'`. The main entry loads
+ * CKEditor, which needs a DOM.
+ *
+ * @module ckeditor5-elements/validate-schema
+ */
+export * from 'ckeditor5-elements-schema/validate';
+//# sourceMappingURL=validateSchema.d.ts.map

package/dist/validateSchema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validateSchema.d.ts","sourceRoot":"","sources":["../src/validateSchema.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,cAAc,oCAAoC,CAAC"}

package/dist/validateSchema.js

@@ -0,0 +1,9 @@
+/**
+ * The validation of an element schema without CKEditor, so that it works in Node.js, e.g. to validate a schema file in a
+ * test or in CI: `import { validateElementSchema } from 'ckeditor5-elements/validate-schema'`. The main entry loads
+ * CKEditor, which needs a DOM.
+ *
+ * @module ckeditor5-elements/validate-schema
+ */
+export * from 'ckeditor5-elements-schema/validate';
+//# sourceMappingURL=validateSchema.js.map

package/dist/validateSchema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validateSchema.js","sourceRoot":"","sources":["../src/validateSchema.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,cAAc,oCAAoC,CAAC"}

package/package.json

@@ -1,6 +1,61 @@
 {
   "name": "ckeditor5-elements",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "49.0.0-alpha.4",
+  "description": "Element commands, an element context menu, element actions and clipboard commands, element attributes, an element schema, selectable and clickable elements, element toolbars, quick insert and breadcrumbs for CKEditor 5.",
+  "keywords": [
+    "ckeditor",
+    "ckeditor5",
+    "ckeditor 5",
+    "ckeditor5-feature",
+    "ckeditor5-plugin"
+  ],
+  "license": "MIT",
+  "author": "Ivan Kildyushov",
+  "homepage": "https://ivankild.github.io/ckeditor5-elements/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ivankild/ckeditor5-elements.git",
+    "directory": "packages/ckeditor5-elements"
+  },
+  "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": "./dist/index.css",
+    "./validate-schema": {
+      "types": "./dist/validateSchema.d.ts",
+      "import": "./dist/validateSchema.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "dependencies": {
+    "ckeditor5-elements-actions": "49.0.0-alpha.4",
+    "ckeditor5-elements-attributes": "49.0.0-alpha.4",
+    "ckeditor5-elements-core": "49.0.0-alpha.4",
+    "ckeditor5-elements-interaction": "49.0.0-alpha.4",
+    "ckeditor5-elements-menu": "49.0.0-alpha.4",
+    "ckeditor5-elements-schema": "49.0.0-alpha.4",
+    "ckeditor5-elements-toolbar": "49.0.0-alpha.4"
+  },
+  "peerDependencies": {
+    "ckeditor5": "^49.0.0"
+  },
+  "scripts": {
+    "build": "tsc --build && node ../../scripts/buildUmbrellaStyles.js"
+  }
 }

package/src/index.ts

@@ -0,0 +1,18 @@
+/**
+ * CKEditor 5 Elements: commands that act on an element and their buttons, the element menu, the element context menu,
+ * element actions (move, duplicate, delete, and the clipboard), element attributes, an element schema, selectable and
+ * clickable elements, element toolbars, quick insert and breadcrumbs.
+ *
+ * This package brings them all, as `ckeditor5` does for CKEditor: install it, and import everything from it. Its
+ * stylesheet, `ckeditor5-elements/index.css`, has the styles of all of them.
+ *
+ * @module ckeditor5-elements
+ */
+
+export * from 'ckeditor5-elements-core';
+export * from 'ckeditor5-elements-actions';
+export * from 'ckeditor5-elements-schema';
+export * from 'ckeditor5-elements-interaction';
+export * from 'ckeditor5-elements-attributes';
+export * from 'ckeditor5-elements-toolbar';
+export * from 'ckeditor5-elements-menu';

package/src/validateSchema.ts

@@ -0,0 +1,9 @@
+/**
+ * The validation of an element schema without CKEditor, so that it works in Node.js, e.g. to validate a schema file in a
+ * test or in CI: `import { validateElementSchema } from 'ckeditor5-elements/validate-schema'`. The main entry loads
+ * CKEditor, which needs a DOM.
+ *
+ * @module ckeditor5-elements/validate-schema
+ */
+
+export * from 'ckeditor5-elements-schema/validate';