ckeditor5-elements 49.0.0-alpha.0 → 49.0.0-alpha.4

package/README.md

@@ -1,15 +1,21 @@
 # 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-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
 
@@ -51,14 +57,15 @@ await ClassicEditor.create({
 
 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/example) 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;
 }

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 /**
  * 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.
+ * 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.
@@ -8,8 +9,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;;;;;;;;;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

@@ -1,6 +1,7 @@
 /**
  * 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.
+ * 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.
@@ -8,8 +9,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;;;;;;;;;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,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-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",
@@ -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-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"
+    "ckeditor5": "^49.0.0"
   },
   "scripts": {
     "build": "tsc --build && node ../../scripts/buildUmbrellaStyles.js"

package/src/index.ts

@@ -1,6 +1,7 @@
 /**
  * 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.
+ * 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.
@@ -9,7 +10,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';