ckeditor5-elements-schema 49.0.0-alpha.2 → 49.0.0-alpha.4

package/README.md

@@ -33,12 +33,38 @@ elementSchemaConverters: true // Optional: converts the elements one to one, as
 ```
 
 The `empty` and `container` elements can be selected as a whole, by a click and by the arrow keys, when `ElementSelectable`
-(from `ckeditor5-elements-selectable`) is loaded too.
+(from `ckeditor5-elements-interaction`) is loaded too.
+
+`ElementSchemaCommands` gives elements of the schema a command, a toolbar button and a keystroke, by their kind: an
+inline `block` wraps text, as CKEditor's bold; a `block` renames blocks, as a heading; a `container` wraps blocks, as a
+block quote; an `empty` element and an inline `container` are inserted, as a horizontal line. At the ends of inline
+elements with text, the arrow keys move in two steps, as CKEditor's two-step caret movement does.
+
+```json
+{ "bold": { "type": "block", "isInline": true }, "divider": { "type": "empty" } }
+```
+
+```ts
+import { IconBold, IconHorizontalLine } from 'ckeditor5';
+import { ElementSchema, ElementSchemaCommands } from 'ckeditor5-elements';
+
+// In the editor config:
+plugins: [..., ElementSchema, ElementSchemaCommands],
+toolbar: ['bold', 'divider'],
+elementSchema: schema,
+elementSchemaCommands: {
+	bold: { title: 'Bold', icon: IconBold, keystroke: 'Ctrl+B', view: 'strong' },
+	divider: { title: 'Divider', icon: IconHorizontalLine, view: 'hr' }
+}
+```
 
 `validateElementSchema(schema)` checks a definition without an editor, e.g. in a test or in CI. In Node.js, import it from
 `ckeditor5-elements/validate-schema`: the main entry loads CKEditor, which needs a browser.
 
-See the [Element schema guide](https://ivankild.github.io/ckeditor5-elements/guide/schema) of the documentation.
+See the guide of the documentation: [Element schema](https://ivankild.github.io/ckeditor5-elements/guide/schema),
+[Converters](https://ivankild.github.io/ckeditor5-elements/guide/schema-converters),
+[Commands and buttons](https://ivankild.github.io/ckeditor5-elements/guide/schema-commands) and
+[Examples](https://ivankild.github.io/ckeditor5-elements/guide/schema-examples).
 
 ## License
 

package/dist/augmentation.d.ts

@@ -1,7 +1,8 @@
-import type { ElementSchema, ElementSchemaInput } from './index.js';
+import type { ElementSchema, ElementSchemaCommands, ElementSchemaCommandsConfig, ElementSchemaInput } from './index.js';
 declare module 'ckeditor5' {
     interface PluginsMap {
         [ElementSchema.pluginName]: ElementSchema;
+        [ElementSchemaCommands.pluginName]: ElementSchemaCommands;
     }
     interface EditorConfig {
         /**
@@ -14,6 +15,11 @@ declare module 'ckeditor5' {
          * element sets another tag for the editing view. See {@link ElementSchema}. Default: `false`.
          */
         elementSchemaConverters?: boolean;
+        /**
+         * The commands and the buttons of elements of the schema, as CKEditor's bold, heading, block quote or horizontal
+         * line, by the name of the command. See {@link ElementSchemaCommands}.
+         */
+        elementSchemaCommands?: ElementSchemaCommandsConfig;
     }
 }
 //# sourceMappingURL=augmentation.d.ts.map

package/dist/augmentation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"augmentation.d.ts","sourceRoot":"","sources":["../src/augmentation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEpE,OAAO,QAAQ,WAAW,CAAC;IAC1B,UAAU,UAAU;QACnB,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,aAAa,CAAC;KAC1C;IAED,UAAU,YAAY;QACrB;;WAEG;QACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;QAEnC;;;;WAIG;QACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;KAClC;CACD"}
+{"version":3,"file":"augmentation.d.ts","sourceRoot":"","sources":["../src/augmentation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,qBAAqB,EAAE,2BAA2B,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAExH,OAAO,QAAQ,WAAW,CAAC;IAC1B,UAAU,UAAU;QACnB,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,aAAa,CAAC;QAC1C,CAAC,qBAAqB,CAAC,UAAU,CAAC,EAAE,qBAAqB,CAAC;KAC1D;IAED,UAAU,YAAY;QACrB;;WAEG;QACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;QAEnC;;;;WAIG;QACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;QAElC;;;WAGG;QACH,qBAAqB,CAAC,EAAE,2BAA2B,CAAC;KACpD;CACD"}

package/dist/commands/elementBlockCommand.d.ts

@@ -0,0 +1,46 @@
+import type { ElementOrPosition } from 'ckeditor5-elements-core';
+import ElementSchemaCommand from './elementSchemaCommand.js';
+/**
+ * Turns blocks into the element, as CKEditor's heading command does, e.g. a `title` that is a `block` of the element
+ * schema: the selected blocks, or the block of the target, are renamed, and keep their content.
+ *
+ * ```ts
+ * editor.execute('title'); // The blocks of the selection.
+ * editor.commands.get('title').executeFor(paragraph);
+ * ```
+ *
+ * When all the blocks are the element already, it turns them back into paragraphs (the {@link defaultElement}). The
+ * blocks that cannot be renamed, e.g. where the element is not allowed, are left as they are.
+ *
+ * It is "on" when all the blocks are the element.
+ */
+export default class ElementBlockCommand extends ElementSchemaCommand {
+    isToggleable: boolean;
+    /**
+     * The element the blocks are turned back into.
+     */
+    defaultElement: string;
+    /**
+     * Renames the blocks of the target: to the element, or back to the {@link defaultElement} when they are all the
+     * element.
+     */
+    execute(elementOrPosition?: ElementOrPosition): void;
+    /**
+     * Enabled when the target can be edited, and one of its blocks can be renamed.
+     */
+    protected _isEnabledFor(elementOrPosition?: ElementOrPosition): boolean;
+    /**
+     * "On" when all the blocks of the target are the element.
+     */
+    protected _isOnFor(elementOrPosition?: ElementOrPosition): boolean;
+    /**
+     * Returns the name the blocks get: the element, or the {@link defaultElement} when they are the element already.
+     */
+    private _getNewName;
+    /**
+     * Whether a block can be renamed: it is not an object, nor the name already, and the schema allows it with its
+     * content.
+     */
+    private _canRename;
+}
+//# sourceMappingURL=elementBlockCommand.d.ts.map

package/dist/commands/elementBlockCommand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementBlockCommand.d.ts","sourceRoot":"","sources":["../../src/commands/elementBlockCommand.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,oBAAoB,MAAM,2BAA2B,CAAC;AAE7D;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,oBAAoB;IACpD,YAAY,UAAQ;IAEpC;;OAEG;IACI,cAAc,SAAe;IAEpC;;;OAGG;IACa,OAAO,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,GAAG,IAAI;IAcpE;;OAEG;cACgB,aAAa,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,GAAG,OAAO;IAShF;;OAEG;cACgB,QAAQ,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,GAAG,OAAO;IAM3E;;OAEG;IACH,OAAO,CAAC,WAAW;IAInB;;;OAGG;IACH,OAAO,CAAC,UAAU;CAUlB"}

package/dist/commands/elementBlockCommand.js

@@ -0,0 +1,71 @@
+import ElementSchemaCommand from './elementSchemaCommand.js';
+/**
+ * Turns blocks into the element, as CKEditor's heading command does, e.g. a `title` that is a `block` of the element
+ * schema: the selected blocks, or the block of the target, are renamed, and keep their content.
+ *
+ * ```ts
+ * editor.execute('title'); // The blocks of the selection.
+ * editor.commands.get('title').executeFor(paragraph);
+ * ```
+ *
+ * When all the blocks are the element already, it turns them back into paragraphs (the {@link defaultElement}). The
+ * blocks that cannot be renamed, e.g. where the element is not allowed, are left as they are.
+ *
+ * It is "on" when all the blocks are the element.
+ */
+export default class ElementBlockCommand extends ElementSchemaCommand {
+    isToggleable = true;
+    /**
+     * The element the blocks are turned back into.
+     */
+    defaultElement = 'paragraph';
+    /**
+     * Renames the blocks of the target: to the element, or back to the {@link defaultElement} when they are all the
+     * element.
+     */
+    execute(elementOrPosition) {
+        const name = this._getNewName(elementOrPosition);
+        const schema = this.editor.model.schema;
+        this.editor.model.change(writer => {
+            for (const block of this._getBlocks(elementOrPosition)) {
+                if (this._canRename(block, name)) {
+                    writer.rename(block, name);
+                    schema.removeDisallowedAttributes([block], writer);
+                }
+            }
+        });
+    }
+    /**
+     * Enabled when the target can be edited, and one of its blocks can be renamed.
+     */
+    _isEnabledFor(elementOrPosition) {
+        const name = this._getNewName(elementOrPosition);
+        return (super._isEnabledFor(elementOrPosition) &&
+            this._getBlocks(elementOrPosition).some(block => this._canRename(block, name)));
+    }
+    /**
+     * "On" when all the blocks of the target are the element.
+     */
+    _isOnFor(elementOrPosition) {
+        const blocks = this._getBlocks(elementOrPosition);
+        return blocks.length > 0 && blocks.every(block => this.isElement(block));
+    }
+    /**
+     * Returns the name the blocks get: the element, or the {@link defaultElement} when they are the element already.
+     */
+    _getNewName(elementOrPosition) {
+        return this._isOnFor(elementOrPosition) ? this.defaultElement : this.elementName;
+    }
+    /**
+     * Whether a block can be renamed: it is not an object, nor the name already, and the schema allows it with its
+     * content.
+     */
+    _canRename(block, name) {
+        const schema = this.editor.model.schema;
+        return (block.name !== name &&
+            !schema.isObject(block) &&
+            schema.isRegistered(name) &&
+            this._canHold(this.editor.model.createPositionBefore(block), block.getChildren(), name));
+    }
+}
+//# sourceMappingURL=elementBlockCommand.js.map

package/dist/commands/elementBlockCommand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementBlockCommand.js","sourceRoot":"","sources":["../../src/commands/elementBlockCommand.ts"],"names":[],"mappings":"AAEA,OAAO,oBAAoB,MAAM,2BAA2B,CAAC;AAE7D;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,oBAAoB;IACpD,YAAY,GAAG,IAAI,CAAC;IAEpC;;OAEG;IACI,cAAc,GAAG,WAAW,CAAC;IAEpC;;;OAGG;IACa,OAAO,CAAC,iBAAqC;QAC5D,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;QACjD,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC;QAExC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE;YACjC,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,CAAC;gBACxD,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC;oBAClC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;oBAC3B,MAAM,CAAC,0BAA0B,CAAC,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC;gBACpD,CAAC;YACF,CAAC;QACF,CAAC,CAAC,CAAC;IACJ,CAAC;IAED;;OAEG;IACgB,aAAa,CAAC,iBAAqC;QACrE,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;QAEjD,OAAO,CACN,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC;YACtC,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAC9E,CAAC;IACH,CAAC;IAED;;OAEG;IACgB,QAAQ,CAAC,iBAAqC;QAChE,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;QAElD,OAAO,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAC1E,CAAC;IAED;;OAEG;IACK,WAAW,CAAC,iBAAqC;QACxD,OAAO,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;IAClF,CAAC;IAED;;;OAGG;IACK,UAAU,CAAC,KAAmB,EAAE,IAAY;QACnD,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC;QAExC,OAAO,CACN,KAAK,CAAC,IAAI,KAAK,IAAI;YACnB,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;YACvB,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC;YACzB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,oBAAoB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,CACvF,CAAC;IACH,CAAC;CACD"}

package/dist/commands/elementContainerCommand.d.ts

@@ -0,0 +1,36 @@
+import type { ElementOrPosition } from 'ckeditor5-elements-core';
+import ElementSchemaCommand from './elementSchemaCommand.js';
+/**
+ * Wraps blocks with the element, as CKEditor's block quote command does, e.g. a `callout` that is a `container` of the
+ * element schema: the selected blocks, or the block-level element of the target, go in a new element.
+ *
+ * ```ts
+ * editor.execute('callout'); // The blocks of the selection.
+ * editor.commands.get('callout').executeFor(paragraph);
+ * ```
+ *
+ * In the element, it unwraps it: the whole element, not only the selected blocks.
+ *
+ * It is "on" when the target is in the element.
+ */
+export default class ElementContainerCommand extends ElementSchemaCommand {
+    isToggleable: boolean;
+    /**
+     * Unwraps the element the target is in, or wraps the blocks of the target with a new one.
+     */
+    execute(elementOrPosition?: ElementOrPosition): void;
+    /**
+     * Enabled when the target can be edited, and the element it is in can be unwrapped, or its blocks can be wrapped.
+     */
+    protected _isEnabledFor(elementOrPosition?: ElementOrPosition): boolean;
+    /**
+     * "On" when the target is in the element.
+     */
+    protected _isOnFor(elementOrPosition?: ElementOrPosition): boolean;
+    /**
+     * Returns the range to wrap: from the first block of the target to the last, as siblings: the blocks themselves, or
+     * their ancestors in the parent they share. `null` when the schema does not allow the element there.
+     */
+    private _getWrapRange;
+}
+//# sourceMappingURL=elementContainerCommand.d.ts.map

package/dist/commands/elementContainerCommand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementContainerCommand.d.ts","sourceRoot":"","sources":["../../src/commands/elementContainerCommand.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,oBAAoB,MAAM,2BAA2B,CAAC;AAE7D;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,OAAO,uBAAwB,SAAQ,oBAAoB;IACxD,YAAY,UAAQ;IAEpC;;OAEG;IACa,OAAO,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,GAAG,IAAI;IAapE;;OAEG;cACgB,aAAa,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,GAAG,OAAO;IAShF;;OAEG;cACgB,QAAQ,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,GAAG,OAAO;IAI3E;;;OAGG;IACH,OAAO,CAAC,aAAa;CAuBrB"}

package/dist/commands/elementContainerCommand.js

@@ -0,0 +1,67 @@
+import ElementSchemaCommand from './elementSchemaCommand.js';
+/**
+ * Wraps blocks with the element, as CKEditor's block quote command does, e.g. a `callout` that is a `container` of the
+ * element schema: the selected blocks, or the block-level element of the target, go in a new element.
+ *
+ * ```ts
+ * editor.execute('callout'); // The blocks of the selection.
+ * editor.commands.get('callout').executeFor(paragraph);
+ * ```
+ *
+ * In the element, it unwraps it: the whole element, not only the selected blocks.
+ *
+ * It is "on" when the target is in the element.
+ */
+export default class ElementContainerCommand extends ElementSchemaCommand {
+    isToggleable = true;
+    /**
+     * Unwraps the element the target is in, or wraps the blocks of the target with a new one.
+     */
+    execute(elementOrPosition) {
+        const element = this._findElement(elementOrPosition);
+        const range = element ? null : this._getWrapRange(elementOrPosition);
+        this.editor.model.change(writer => {
+            if (element) {
+                writer.unwrap(element);
+            }
+            else if (range) {
+                writer.wrap(range, this.elementName);
+            }
+        });
+    }
+    /**
+     * Enabled when the target can be edited, and the element it is in can be unwrapped, or its blocks can be wrapped.
+     */
+    _isEnabledFor(elementOrPosition) {
+        const element = this._findElement(elementOrPosition);
+        return (super._isEnabledFor(elementOrPosition) &&
+            (element ? this._canUnwrap(element) : !!this._getWrapRange(elementOrPosition)));
+    }
+    /**
+     * "On" when the target is in the element.
+     */
+    _isOnFor(elementOrPosition) {
+        return !!this._findElement(elementOrPosition);
+    }
+    /**
+     * Returns the range to wrap: from the first block of the target to the last, as siblings: the blocks themselves, or
+     * their ancestors in the parent they share. `null` when the schema does not allow the element there.
+     */
+    _getWrapRange(elementOrPosition) {
+        const model = this.editor.model;
+        const blocks = this._getBlocks(elementOrPosition);
+        const first = blocks[0];
+        const last = blocks.at(-1);
+        if (!first || !last) {
+            return null;
+        }
+        const parent = first === last ? first.parent : first.getCommonAncestor(last);
+        const [start, end] = [first, last].map(block => block.getAncestors({ includeSelf: true }).find((node) => node.parent === parent));
+        if (!start || !end) {
+            return null;
+        }
+        const range = model.createRange(model.createPositionBefore(start), model.createPositionAfter(end));
+        return this._canHold(range.start, range.getItems({ shallow: true })) ? range : null;
+    }
+}
+//# sourceMappingURL=elementContainerCommand.js.map

package/dist/commands/elementContainerCommand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementContainerCommand.js","sourceRoot":"","sources":["../../src/commands/elementContainerCommand.ts"],"names":[],"mappings":"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"}

package/dist/commands/elementInlineCommand.d.ts

@@ -0,0 +1,87 @@
+import { type ModelElement } from 'ckeditor5';
+import type { ElementOrPosition } from 'ckeditor5-elements-core';
+import ElementSchemaCommand from './elementSchemaCommand.js';
+/**
+ * Toggles an inline element with text, as CKEditor's `bold` toggles an attribute of text, but with an element, e.g. a
+ * `bold` that is an inline `block` of the element schema.
+ *
+ * ```ts
+ * editor.execute('bold'); // The selection.
+ * editor.commands.get('bold').executeFor(element); // An element, e.g. of a context menu.
+ * ```
+ *
+ * * On selected text, it wraps the text with the element, in each block, and merges it with the elements next to it.
+ *   When all the text is in the element already, it unwraps the elements: the whole ones, not only the selected part.
+ * * On the cursor, it inserts an empty element with the cursor in it. In the element, it moves the cursor out of it, at
+ *   its start or end, or it unwraps it.
+ * * On an element (selected, or given), it unwraps the element it is in, or wraps it.
+ *
+ * It is "on" ({@link isOn}) when the target is in the element: for selected text, when all of it is.
+ */
+export default class ElementInlineCommand extends ElementSchemaCommand {
+    isToggleable: boolean;
+    /**
+     * Puts the target in the element, or out of it: by default, the selection, also selected text.
+     */
+    execute(elementOrPosition?: ElementOrPosition): void;
+    /**
+     * Enabled when the target can be edited, and is in the element, or the element can be there.
+     */
+    protected _isEnabledFor(elementOrPosition?: ElementOrPosition): boolean;
+    /**
+     * "On" when the target is in the element: for selected text, when all of it is.
+     */
+    protected _isOnFor(elementOrPosition?: ElementOrPosition): boolean;
+    /**
+     * Whether all the text of the ranges is in the element: there are elements, and nothing to wrap.
+     */
+    private _isOnRanges;
+    /**
+     * Returns the elements of the command that a node is, or is in, in its line of text: the node and its ancestors, up to
+     * the first that is not inline, e.g. the paragraph. The inner first.
+     */
+    private _getElementsAround;
+    /**
+     * Returns the closest element of the command that the target is, or is in, in its line of text.
+     */
+    protected _findElement(elementOrPosition?: ElementOrPosition): ModelElement | null;
+    /**
+     * Returns the elements of the command in ranges, and around their ends.
+     */
+    private _getElementsIn;
+    /**
+     * Returns the ranges to wrap with the element to put the text of ranges in it: in each parent the element is allowed
+     * in, the runs of nodes it can hold, which are not in the element already. The other elements are looked into, e.g.
+     * the paragraphs of a selection across blocks.
+     */
+    private _getWrapRanges;
+    /**
+     * Wraps the text of ranges with new elements, merged with the ones next to them, and keeps the selection on the text.
+     */
+    private _wrapRanges;
+    /**
+     * Unwraps the elements in ranges and around their ends, and keeps the selection on the text.
+     */
+    private _unwrapRanges;
+    /**
+     * Changes the content of the selected ranges, and selects the same text then: the ends of the ranges stick to the
+     * text, so they follow it into the elements and out of them.
+     */
+    private _keepSelection;
+    /**
+     * Merges a new element with the elements of the command next to it that have no attributes, as it has none.
+     */
+    private _mergeWithSiblings;
+    /**
+     * Puts the target out of the element it is in: a cursor at the start or the end of the element goes before or after
+     * it, so that what is typed next is out of it; otherwise the element is unwrapped. A selected element that is
+     * unwrapped leaves its content selected.
+     */
+    private _leave;
+    /**
+     * Puts the target in a new element: at a position, an empty element with the cursor in it; an element, e.g. a
+     * selected inline object, is wrapped, and selected.
+     */
+    private _insert;
+}
+//# sourceMappingURL=elementInlineCommand.d.ts.map

package/dist/commands/elementInlineCommand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementInlineCommand.d.ts","sourceRoot":"","sources":["../../src/commands/elementInlineCommand.ts"],"names":[],"mappings":"AAAA,OAAO,EAIN,KAAK,YAAY,EAIjB,MAAM,WAAW,CAAC;AACnB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,oBAAoB,MAAM,2BAA2B,CAAC;AAE7D;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,oBAAoB;IACrD,YAAY,UAAQ;IAEpC;;OAEG;IACa,OAAO,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,GAAG,IAAI;IAuBpE;;OAEG;cACgB,aAAa,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,GAAG,OAAO;IAqBhF;;OAEG;cACgB,QAAQ,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,GAAG,OAAO;IAO3E;;OAEG;IACH,OAAO,CAAC,WAAW;IAInB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAa1B;;OAEG;cACgB,YAAY,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,GAAG,YAAY,GAAG,IAAI;IAM3F;;OAEG;IACH,OAAO,CAAC,cAAc;IAqBtB;;;;OAIG;IACH,OAAO,CAAC,cAAc;IA8CtB;;OAEG;IACH,OAAO,CAAC,WAAW;IAcnB;;OAEG;IACH,OAAO,CAAC,aAAa;IAUrB;;;OAGG;IACH,OAAO,CAAC,cAAc;IAmBtB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAa1B;;;;OAIG;IACH,OAAO,CAAC,MAAM;IAqBd;;;OAGG;IACH,OAAO,CAAC,OAAO;CAWf"}

package/dist/commands/elementInlineCommand.js

@@ -0,0 +1,253 @@
+import { ModelLivePosition, ModelLiveRange } from 'ckeditor5';
+import ElementSchemaCommand from './elementSchemaCommand.js';
+/**
+ * Toggles an inline element with text, as CKEditor's `bold` toggles an attribute of text, but with an element, e.g. a
+ * `bold` that is an inline `block` of the element schema.
+ *
+ * ```ts
+ * editor.execute('bold'); // The selection.
+ * editor.commands.get('bold').executeFor(element); // An element, e.g. of a context menu.
+ * ```
+ *
+ * * On selected text, it wraps the text with the element, in each block, and merges it with the elements next to it.
+ *   When all the text is in the element already, it unwraps the elements: the whole ones, not only the selected part.
+ * * On the cursor, it inserts an empty element with the cursor in it. In the element, it moves the cursor out of it, at
+ *   its start or end, or it unwraps it.
+ * * On an element (selected, or given), it unwraps the element it is in, or wraps it.
+ *
+ * It is "on" ({@link isOn}) when the target is in the element: for selected text, when all of it is.
+ */
+export default class ElementInlineCommand extends ElementSchemaCommand {
+    isToggleable = true;
+    /**
+     * Puts the target in the element, or out of it: by default, the selection, also selected text.
+     */
+    execute(elementOrPosition) {
+        const ranges = this._getSelectedRanges(elementOrPosition);
+        const target = this._getElementOrPosition(elementOrPosition);
+        this.editor.model.change(writer => {
+            if (ranges) {
+                if (this._isOnRanges(ranges)) {
+                    this._unwrapRanges(writer, ranges);
+                }
+                else {
+                    this._wrapRanges(writer, ranges);
+                }
+            }
+            else if (target) {
+                const element = this._findElement(target);
+                if (element) {
+                    this._leave(writer, element, target);
+                }
+                else {
+                    this._insert(writer, target);
+                }
+            }
+        });
+    }
+    /**
+     * Enabled when the target can be edited, and is in the element, or the element can be there.
+     */
+    _isEnabledFor(elementOrPosition) {
+        const ranges = this._getSelectedRanges(elementOrPosition);
+        const target = this._getElementOrPosition(elementOrPosition);
+        if (!target || !super._isEnabledFor(target)) {
+            return false;
+        }
+        if (ranges) {
+            return this._isOnRanges(ranges) || this._getWrapRanges(ranges).length > 0;
+        }
+        if (this._findElement(target)) {
+            return true;
+        }
+        return target.is('position')
+            ? this.editor.model.schema.checkChild(target, this.elementName)
+            : this._canHold(this.editor.model.createPositionBefore(target), [target]);
+    }
+    /**
+     * "On" when the target is in the element: for selected text, when all of it is.
+     */
+    _isOnFor(elementOrPosition) {
+        const ranges = this._getSelectedRanges(elementOrPosition);
+        const target = this._getElementOrPosition(elementOrPosition);
+        return ranges ? this._isOnRanges(ranges) : !!target && !!this._findElement(target);
+    }
+    /**
+     * Whether all the text of the ranges is in the element: there are elements, and nothing to wrap.
+     */
+    _isOnRanges(ranges) {
+        return this._getElementsIn(ranges).length > 0 && !this._getWrapRanges(ranges).length;
+    }
+    /**
+     * Returns the elements of the command that a node is, or is in, in its line of text: the node and its ancestors, up to
+     * the first that is not inline, e.g. the paragraph. The inner first.
+     */
+    _getElementsAround(node) {
+        const schema = this.editor.model.schema;
+        const elements = [];
+        for (let element = node; element?.is('element') && schema.isInline(element); element = element.parent) {
+            if (this.isElement(element)) {
+                elements.push(element);
+            }
+        }
+        return elements;
+    }
+    /**
+     * Returns the closest element of the command that the target is, or is in, in its line of text.
+     */
+    _findElement(elementOrPosition) {
+        const target = this._getElementOrPosition(elementOrPosition);
+        return target ? (this._getElementsAround(target.is('position') ? target.parent : target)[0] ?? null) : null;
+    }
+    /**
+     * Returns the elements of the command in ranges, and around their ends.
+     */
+    _getElementsIn(ranges) {
+        const elements = new Set();
+        for (const range of ranges) {
+            for (const element of [
+                ...this._getElementsAround(range.start.parent),
+                ...this._getElementsAround(range.end.parent)
+            ]) {
+                elements.add(element);
+            }
+            for (const item of range.getItems()) {
+                if (this.isElement(item)) {
+                    elements.add(item);
+                }
+            }
+        }
+        return Array.from(elements);
+    }
+    /**
+     * Returns the ranges to wrap with the element to put the text of ranges in it: in each parent the element is allowed
+     * in, the runs of nodes it can hold, which are not in the element already. The other elements are looked into, e.g.
+     * the paragraphs of a selection across blocks.
+     */
+    _getWrapRanges(ranges) {
+        const model = this.editor.model;
+        const wrapRanges = [];
+        const collect = (flatRange) => {
+            const parent = flatRange.start.parent;
+            if (this._getElementsAround(parent).length) {
+                return;
+            }
+            let run = null;
+            const close = () => {
+                if (run) {
+                    wrapRanges.push(run);
+                    run = null;
+                }
+            };
+            for (const item of flatRange.getItems({ shallow: true })) {
+                if (this.isElement(item)) {
+                    close();
+                }
+                else if (this._canHold(flatRange.start, [item])) {
+                    run = model.createRange(run?.start ?? model.createPositionBefore(item), model.createPositionAfter(item));
+                }
+                else {
+                    close();
+                    if (item.is('element')) {
+                        collect(model.createRangeIn(item));
+                    }
+                }
+            }
+            close();
+        };
+        for (const range of ranges) {
+            range.getMinimalFlatRanges().forEach(collect);
+        }
+        return wrapRanges;
+    }
+    /**
+     * Wraps the text of ranges with new elements, merged with the ones next to them, and keeps the selection on the text.
+     */
+    _wrapRanges(writer, ranges) {
+        // The last first: wrapping one does not move the ones before it.
+        const wrapRanges = this._getWrapRanges(ranges).reverse();
+        this._keepSelection(writer, ranges, () => {
+            for (const range of wrapRanges) {
+                const element = writer.createElement(this.elementName);
+                writer.wrap(range, element);
+                this._mergeWithSiblings(writer, element);
+            }
+        });
+    }
+    /**
+     * Unwraps the elements in ranges and around their ends, and keeps the selection on the text.
+     */
+    _unwrapRanges(writer, ranges) {
+        const elements = this._getElementsIn(ranges);
+        this._keepSelection(writer, ranges, () => {
+            for (const element of elements) {
+                writer.unwrap(element);
+            }
+        });
+    }
+    /**
+     * Changes the content of the selected ranges, and selects the same text then: the ends of the ranges stick to the
+     * text, so they follow it into the elements and out of them.
+     */
+    _keepSelection(writer, ranges, change) {
+        const backward = this.editor.model.document.selection.isBackward;
+        const ends = ranges.map(range => ({
+            start: ModelLivePosition.fromPosition(range.start, 'toNext'),
+            end: ModelLivePosition.fromPosition(range.end, 'toPrevious')
+        }));
+        change();
+        writer.setSelection(ends.map(({ start, end }) => writer.createRange(start, end)), { backward });
+        for (const { start, end } of ends) {
+            start.detach();
+            end.detach();
+        }
+    }
+    /**
+     * Merges a new element with the elements of the command next to it that have no attributes, as it has none.
+     */
+    _mergeWithSiblings(writer, element) {
+        const isPlain = (node) => this.isElement(node) && node.getAttributeKeys().next().done === true;
+        if (isPlain(element.nextSibling)) {
+            writer.merge(writer.createPositionAfter(element));
+        }
+        if (isPlain(element.previousSibling)) {
+            writer.merge(writer.createPositionBefore(element));
+        }
+    }
+    /**
+     * Puts the target out of the element it is in: a cursor at the start or the end of the element goes before or after
+     * it, so that what is typed next is out of it; otherwise the element is unwrapped. A selected element that is
+     * unwrapped leaves its content selected.
+     */
+    _leave(writer, element, target) {
+        if (target.is('position') && target.parent === element && !element.isEmpty) {
+            if (target.isAtEnd || target.isAtStart) {
+                writer.setSelection(element, target.isAtEnd ? 'after' : 'before');
+                return;
+            }
+        }
+        const isSelected = this.editor.model.document.selection.getSelectedElement() === element;
+        const content = ModelLiveRange.fromRange(writer.createRangeIn(element));
+        writer.unwrap(element);
+        if (isSelected) {
+            writer.setSelection(content.toRange());
+        }
+        content.detach();
+    }
+    /**
+     * Puts the target in a new element: at a position, an empty element with the cursor in it; an element, e.g. a
+     * selected inline object, is wrapped, and selected.
+     */
+    _insert(writer, target) {
+        if (target.is('position')) {
+            const element = writer.createElement(this.elementName);
+            writer.insert(element, target);
+            writer.setSelection(element, 0);
+        }
+        else {
+            writer.wrap(writer.createRangeOn(target), this.elementName);
+            writer.setSelection(target, 'on');
+        }
+    }
+}
+//# sourceMappingURL=elementInlineCommand.js.map