ckeditor5-elements 49.0.0-alpha.0 → 49.0.0

package/README.md

@@ -1,15 +1,22 @@
 # ckeditor5-elements
 
-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             |
+Element-first editing for CKEditor 5 v49, in one package. The content is a tree of named elements, each with its
+attributes, and every feature acts on an element:
+
+| Feature              | Exports                                                                                                                                 |
+| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| Commands and buttons | `ElementOrPositionCommand`, `ElementCommand` and a command for each kind of element, `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 the elements of the content from a JSON file, with a validation; `ElementSchemaCommands`: their commands       |
+| 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         | `ElementQuickInsert`: Alt+Enter opens a searchable list of the elements allowed at the cursor                                           |
+| Breadcrumbs          | `ElementBreadcrumbs`: the element path at the cursor, as labels or buttons that open the element menu                                   |
 
 ## Installation
 
@@ -23,7 +30,7 @@ Import the features from `ckeditor5-elements`, and its stylesheet, which styles
 
 ```ts
 import { ClassicEditor, Essentials, Paragraph } from 'ckeditor5';
-import { Breadcrumbs, ElementClipboard, ElementContextMenu, QuickInsert } from 'ckeditor5-elements';
+import { ElementBreadcrumbs, ElementClipboard, ElementContextMenu, ElementQuickInsert } from 'ckeditor5-elements';
 
 import 'ckeditor5/ckeditor5.css';
 import 'ckeditor5-elements/index.css';
@@ -42,23 +49,24 @@ const menu = (element, editor) => [
 await ClassicEditor.create({
 	attachTo: document.querySelector('#editor'),
 	licenseKey: 'GPL',
-	plugins: [Essentials, Paragraph, ElementContextMenu, ElementClipboard, QuickInsert, Breadcrumbs],
+	plugins: [Essentials, Paragraph, ElementContextMenu, ElementClipboard, ElementQuickInsert, ElementBreadcrumbs],
 	toolbar: ['undo', 'redo', '|', 'breadcrumbs'],
 	elementContextMenu: menu,
-	breadcrumbs: { menu }
+	elementBreadcrumbs: { 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
+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/examples/) shows all the features together in one editor.
+
 ## License
 
 MIT

package/dist/index.css

@@ -1,4 +1,46 @@
-/* ckeditor5-elements-core */
+/* 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.
  */
@@ -14,7 +56,6 @@
 	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.
@@ -119,7 +160,6 @@
 	pointer-events: none;
 }
 
-/* ckeditor5-elements-quick-insert */
 .ck.ck-elements-quick-insert {
 	width: 260px;
 }
@@ -132,3 +172,12 @@
 .ck.ck-elements-quick-insert .ck-list__item > .ck.ck-button {
 	width: 100%;
 }
+
+/* ckeditor5-elements-schema */
+/*
+ * A verbatim block of the element schema, in the editor: it keeps its whitespace, whatever its tag, e.g. the
+ * `editingTag` of the element. (In a `pre`, the browser keeps it anyway.)
+ */
+.ck-content .ck-elements-verbatim {
+	white-space: pre-wrap;
+}

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 /**
- * 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.
+ * CKEditor 5 Elements: element-first editing. The content is a tree of named elements, each with its attributes,
+ * formatting included, declared by an element schema; every feature acts on an element: commands and their buttons, the
+ * element menu and context menu, element actions (move, duplicate, delete, and the clipboard), element attributes,
+ * 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.
@@ -8,8 +10,10 @@
  * @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';
+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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;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

@@ -1,6 +1,8 @@
 /**
- * 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.
+ * CKEditor 5 Elements: element-first editing. The content is a tree of named elements, each with its attributes,
+ * formatting included, declared by an element schema; every feature acts on an element: commands and their buttons, the
+ * element menu and context menu, element actions (move, duplicate, delete, and the clipboard), element attributes,
+ * 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.
@@ -8,8 +10,10 @@
  * @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';
+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

@@ -1 +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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;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,7 +1,7 @@
 {
   "name": "ckeditor5-elements",
-  "version": "49.0.0-alpha.0",
-  "description": "Element commands, an element context menu, clipboard commands, quick insert and breadcrumbs for CKEditor 5.",
+  "version": "49.0.0",
+  "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",
@@ -29,6 +29,10 @@
       "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": [
@@ -40,14 +44,16 @@
     "*.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"
+    "ckeditor5-elements-actions": "49.0.0",
+    "ckeditor5-elements-attributes": "49.0.0",
+    "ckeditor5-elements-core": "49.0.0",
+    "ckeditor5-elements-interaction": "49.0.0",
+    "ckeditor5-elements-menu": "49.0.0",
+    "ckeditor5-elements-schema": "49.0.0",
+    "ckeditor5-elements-toolbar": "49.0.0"
   },
   "peerDependencies": {
-    "ckeditor5": ">=49.0.0"
+    "ckeditor5": "^49.0.0"
   },
   "scripts": {
     "build": "tsc --build && node ../../scripts/buildUmbrellaStyles.js"

package/src/index.ts

@@ -1,6 +1,8 @@
 /**
- * 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.
+ * CKEditor 5 Elements: element-first editing. The content is a tree of named elements, each with its attributes,
+ * formatting included, declared by an element schema; every feature acts on an element: commands and their buttons, the
+ * element menu and context menu, element actions (move, duplicate, delete, and the clipboard), element attributes,
+ * 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.
@@ -9,7 +11,9 @@
  */
 
 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';
+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';