ckeditor5-elements 0.0.0-stage → 49.0.0-alpha.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,64 @@
-# 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 or later, 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` |
+| 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`, `-clipboard`, `-context-menu`, `-quick-insert`,
+`-breadcrumbs`), 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.
+
+## License
+
+MIT

package/dist/index.css

@@ -0,0 +1,134 @@
+/* ckeditor5-elements-core */
+/*
+ * 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));
+}
+
+/* ckeditor5-elements-breadcrumbs */
+/*
+ * 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;
+}
+
+/* ckeditor5-elements-quick-insert */
+.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,15 @@
+/**
+ * CKEditor 5 Elements: commands that act on an element and their buttons, the element menu, the element context menu,
+ * clipboard commands for elements, 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-clipboard';
+export * from 'ckeditor5-elements-context-menu';
+export * from 'ckeditor5-elements-quick-insert';
+export * from 'ckeditor5-elements-breadcrumbs';
+//# 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;;;;;;;;GAQG;AAEH,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,gCAAgC,CAAC"}

package/dist/index.js

@@ -0,0 +1,15 @@
+/**
+ * CKEditor 5 Elements: commands that act on an element and their buttons, the element menu, the element context menu,
+ * clipboard commands for elements, 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-clipboard';
+export * from 'ckeditor5-elements-context-menu';
+export * from 'ckeditor5-elements-quick-insert';
+export * from 'ckeditor5-elements-breadcrumbs';
+//# 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;;;;;;;;GAQG;AAEH,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,gCAAgC,CAAC"}

package/package.json

@@ -1,6 +1,55 @@
 {
   "name": "ckeditor5-elements",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "49.0.0-alpha.0",
+  "description": "Element commands, an element context menu, clipboard commands, 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",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "dependencies": {
+    "ckeditor5-elements-breadcrumbs": "49.0.0-alpha.0",
+    "ckeditor5-elements-clipboard": "49.0.0-alpha.0",
+    "ckeditor5-elements-context-menu": "49.0.0-alpha.0",
+    "ckeditor5-elements-core": "49.0.0-alpha.0",
+    "ckeditor5-elements-quick-insert": "49.0.0-alpha.0"
+  },
+  "peerDependencies": {
+    "ckeditor5": ">=49.0.0"
+  },
+  "scripts": {
+    "build": "tsc --build && node ../../scripts/buildUmbrellaStyles.js"
+  }
 }

package/src/index.ts

@@ -0,0 +1,15 @@
+/**
+ * CKEditor 5 Elements: commands that act on an element and their buttons, the element menu, the element context menu,
+ * clipboard commands for elements, 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-clipboard';
+export * from 'ckeditor5-elements-context-menu';
+export * from 'ckeditor5-elements-quick-insert';
+export * from 'ckeditor5-elements-breadcrumbs';