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

package/dist/typing/twoStepCaretMovement.js

@@ -0,0 +1,76 @@
+import { isForwardArrowKeyCode, keyCodes } from 'ckeditor5';
+/**
+ * Makes the left and right arrow keys move in two steps at the ends of inline elements, as CKEditor's two-step caret
+ * movement does at the ends of a bold: the first step goes into the element (or out of it), where the cursor looks the
+ * same, the next one moves in the text. `a[]<b>bc</b>` is `a<b>[]bc</b>`, then `a<b>b[]c</b>`. The browser would move by
+ * a character at once, and the positions on both sides of the end of an element would be out of reach.
+ *
+ * What is typed then goes where the cursor is. The listeners are the plugin's.
+ */
+export function enableTwoStepCaretMovement(plugin, names) {
+    const editor = plugin.editor;
+    const viewDocument = editor.editing.view.document;
+    const isElement = (node) => !!node?.is('element') && names.has(node.name);
+    // Before the other features: e.g. `ElementSelectable` selects an inline object that the cursor reaches, and it may
+    // be just after the end of an element.
+    plugin.listenTo(viewDocument, 'keydown', (evt, data) => {
+        const isPlain = !data.shiftKey && !data.ctrlKey && !data.altKey && !data.metaKey;
+        const isHorizontal = data.keyCode === keyCodes.arrowleft || data.keyCode === keyCodes.arrowright;
+        const isForward = isForwardArrowKeyCode(data.keyCode, editor.locale.contentLanguageDirection);
+        const position = isPlain && isHorizontal ? getStep(editor, isForward, isElement) : null;
+        if (position) {
+            editor.model.change(writer => {
+                writer.setSelection(position);
+            });
+            data.preventDefault();
+            evt.stop();
+        }
+    }, { priority: 'highest' });
+    // The browser types at a place of its own at an end of an element, e.g. at the end of the text before it, whichever
+    // side of the end the cursor is on. When that place differs from the cursor only by ends of elements, the text goes
+    // where the cursor is: at the view selection, which is the model one. The browser must not type it at its place, as
+    // CKEditor does for a fake selection; a composition is left to the browser.
+    plugin.listenTo(viewDocument, 'insertText', (evt, data) => {
+        const target = data.selection?.rangeCount === 1 ? data.selection.getFirstRange() : null;
+        const position = target?.isCollapsed ? editor.editing.mapper.toModelPosition(target.start) : null;
+        if (position && !data.isComposing && isAtCursor(editor, position, isElement)) {
+            data.selection = viewDocument.selection;
+            data.preventDefault();
+        }
+    }, { priority: 'high' });
+}
+/**
+ * Returns where the cursor goes with one step in the direction, when it is at an end of an element: into the element
+ * next to it, or out of the element it is in. `null` elsewhere, or for a selection that is not collapsed.
+ */
+function getStep(editor, isForward, isElement) {
+    const model = editor.model;
+    const selection = model.document.selection;
+    const position = selection.getFirstPosition();
+    if (!selection.isCollapsed || !position) {
+        return null;
+    }
+    const next = isForward ? position.nodeAfter : position.nodeBefore;
+    if (isElement(next)) {
+        return model.createPositionAt(next, isForward ? 0 : 'end');
+    }
+    if ((isForward ? position.isAtEnd : position.isAtStart) && isElement(position.parent)) {
+        return isForward ? model.createPositionAfter(position.parent) : model.createPositionBefore(position.parent);
+    }
+    return null;
+}
+/**
+ * Whether a position differs from the cursor only by ends of elements: `a[]<b>c</b>` and `a<b>[]c</b>` look the same.
+ */
+function isAtCursor(editor, position, isElement) {
+    const model = editor.model;
+    const selection = model.document.selection;
+    const cursor = selection.getFirstPosition();
+    // Where the cursor is exactly, the browser types as usual.
+    if (!selection.isCollapsed || !cursor || cursor.isEqual(position)) {
+        return false;
+    }
+    const range = cursor.isBefore(position) ? model.createRange(cursor, position) : model.createRange(position, cursor);
+    return Array.from(range.getWalker()).every(({ item }) => item.is('element') && isElement(item));
+}
+//# sourceMappingURL=twoStepCaretMovement.js.map

package/dist/typing/twoStepCaretMovement.js.map

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

package/dist/validate.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The part of the element schema that needs no editor and no browser: the validation, the compiling to schema
+ * definitions, the error and the types. It is in its own module, so that it can be used in Node.js, e.g. to validate a
+ * schema file in a test or in CI: the main entry loads CKEditor, which needs a DOM.
+ *
+ * @module ckeditor5-elements-schema/validate
+ */
+export { validateElementSchema } from './definition/validateElementSchema.js';
+export { compileElementSchema, type CompiledElementSchema } from './definition/compileElementSchema.js';
+export { default as ElementSchemaError } from './definition/elementSchemaError.js';
+export type { ElementSchemaDefinition, ElementSchemaElement, ElementSchemaInput, ElementSchemaIssue, ElementSchemaKind, ElementSchemaType, ValidateElementSchemaOptions } from './definition/types.js';
+//# sourceMappingURL=validate.d.ts.map

package/dist/validate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validate.d.ts","sourceRoot":"","sources":["../src/validate.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAC9E,OAAO,EAAE,oBAAoB,EAAE,KAAK,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AACxG,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACnF,YAAY,EACX,uBAAuB,EACvB,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,4BAA4B,EAC5B,MAAM,uBAAuB,CAAC"}

package/dist/validate.js

@@ -0,0 +1,11 @@
+/**
+ * The part of the element schema that needs no editor and no browser: the validation, the compiling to schema
+ * definitions, the error and the types. It is in its own module, so that it can be used in Node.js, e.g. to validate a
+ * schema file in a test or in CI: the main entry loads CKEditor, which needs a DOM.
+ *
+ * @module ckeditor5-elements-schema/validate
+ */
+export { validateElementSchema } from './definition/validateElementSchema.js';
+export { compileElementSchema } from './definition/compileElementSchema.js';
+export { default as ElementSchemaError } from './definition/elementSchemaError.js';
+//# sourceMappingURL=validate.js.map

package/dist/validate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validate.js","sourceRoot":"","sources":["../src/validate.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAC9E,OAAO,EAAE,oBAAoB,EAA8B,MAAM,sCAAsC,CAAC;AACxG,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,oCAAoC,CAAC"}

package/package.json

@@ -1,6 +1,52 @@
 {
   "name": "ckeditor5-elements-schema",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "49.0.0-alpha.4",
+  "description": "Element schema for CKEditor 5: declare elements in the model schema from a simple definition, e.g. a JSON file, with three types of elements and a validation.",
+  "keywords": [
+    "ckeditor",
+    "ckeditor5",
+    "ckeditor 5",
+    "ckeditor5-feature",
+    "ckeditor5-plugin"
+  ],
+  "license": "MIT",
+  "author": "Ivan Kildyushov",
+  "homepage": "https://ivankild.github.io/ckeditor5-elements/guide/schema",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ivankild/ckeditor5-elements.git",
+    "directory": "packages/ckeditor5-elements-schema"
+  },
+  "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"
+    },
+    "./validate": {
+      "types": "./dist/validate.d.ts",
+      "import": "./dist/validate.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "dependencies": {
+    "ckeditor5-elements-core": "49.0.0-alpha.4"
+  },
+  "peerDependencies": {
+    "ckeditor5": "^49.0.0"
+  },
+  "scripts": {
+    "build": "tsc --build"
+  }
 }

package/src/augmentation.ts

@@ -0,0 +1,28 @@
+import type { ElementSchema, ElementSchemaCommands, ElementSchemaCommandsConfig, ElementSchemaInput } from './index.js';
+
+declare module 'ckeditor5' {
+	interface PluginsMap {
+		[ElementSchema.pluginName]: ElementSchema;
+		[ElementSchemaCommands.pluginName]: ElementSchemaCommands;
+	}
+
+	interface EditorConfig {
+		/**
+		 * The elements to declare in the model schema: an object, e.g. a JSON file. See {@link ElementSchema}.
+		 */
+		elementSchema?: ElementSchemaInput;
+
+		/**
+		 * Whether to declare the converters of the elements of `elementSchema`, one to one: `div` or `span` with the name as
+		 * the class, and the attributes as `data-*` attributes, in the data and in the editing view; `editingTag` of an
+		 * 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;
+	}
+}

package/src/commands/elementBlockCommand.ts

@@ -0,0 +1,87 @@
+import type { ModelElement } from 'ckeditor5';
+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 {
+	public override isToggleable = true;
+
+	/**
+	 * The element the blocks are turned back into.
+	 */
+	public defaultElement = 'paragraph';
+
+	/**
+	 * Renames the blocks of the target: to the element, or back to the {@link defaultElement} when they are all the
+	 * element.
+	 */
+	public override execute(elementOrPosition?: ElementOrPosition): void {
+		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.
+	 */
+	protected override _isEnabledFor(elementOrPosition?: ElementOrPosition): boolean {
+		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.
+	 */
+	protected override _isOnFor(elementOrPosition?: ElementOrPosition): boolean {
+		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.
+	 */
+	private _getNewName(elementOrPosition?: ElementOrPosition): string {
+		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.
+	 */
+	private _canRename(block: ModelElement, name: string): boolean {
+		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)
+		);
+	}
+}

package/src/commands/elementContainerCommand.ts

@@ -0,0 +1,83 @@
+import type { ModelElement, ModelRange } from 'ckeditor5';
+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 {
+	public override isToggleable = true;
+
+	/**
+	 * Unwraps the element the target is in, or wraps the blocks of the target with a new one.
+	 */
+	public override execute(elementOrPosition?: ElementOrPosition): void {
+		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.
+	 */
+	protected override _isEnabledFor(elementOrPosition?: ElementOrPosition): boolean {
+		const element = this._findElement(elementOrPosition);
+
+		return (
+			super._isEnabledFor(elementOrPosition) &&
+			(element ? this._canUnwrap(element) : !!this._getWrapRange(elementOrPosition))
+		);
+	}
+
+	/**
+	 * "On" when the target is in the element.
+	 */
+	protected override _isOnFor(elementOrPosition?: ElementOrPosition): boolean {
+		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.
+	 */
+	private _getWrapRange(elementOrPosition?: ElementOrPosition): ModelRange | null {
+		const model = this.editor.model;
+		const blocks = this._getBlocks(elementOrPosition);
+		const first = blocks[0] as ModelElement | undefined;
+		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 is ModelElement => 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;
+	}
+}

package/src/commands/elementInlineCommand.ts

@@ -0,0 +1,311 @@
+import {
+	ModelLivePosition,
+	ModelLiveRange,
+	type ModelDocumentFragment,
+	type ModelElement,
+	type ModelNode,
+	type ModelRange,
+	type ModelWriter
+} 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 {
+	public override isToggleable = true;
+
+	/**
+	 * Puts the target in the element, or out of it: by default, the selection, also selected text.
+	 */
+	public override execute(elementOrPosition?: ElementOrPosition): void {
+		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.
+	 */
+	protected override _isEnabledFor(elementOrPosition?: ElementOrPosition): boolean {
+		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.
+	 */
+	protected override _isOnFor(elementOrPosition?: ElementOrPosition): boolean {
+		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.
+	 */
+	private _isOnRanges(ranges: ModelRange[]): boolean {
+		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.
+	 */
+	private _getElementsAround(node: ModelElement | ModelDocumentFragment | null): ModelElement[] {
+		const schema = this.editor.model.schema;
+		const elements: ModelElement[] = [];
+
+		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.
+	 */
+	protected override _findElement(elementOrPosition?: ElementOrPosition): ModelElement | null {
+		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.
+	 */
+	private _getElementsIn(ranges: ModelRange[]): ModelElement[] {
+		const elements = new Set<ModelElement>();
+
+		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.
+	 */
+	private _getWrapRanges(ranges: ModelRange[]): ModelRange[] {
+		const model = this.editor.model;
+		const wrapRanges: ModelRange[] = [];
+
+		const collect = (flatRange: ModelRange): void => {
+			const parent = flatRange.start.parent as ModelElement;
+
+			if (this._getElementsAround(parent).length) {
+				return;
+			}
+
+			let run: ModelRange | null = null;
+			const close = (): void => {
+				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.
+	 */
+	private _wrapRanges(writer: ModelWriter, ranges: ModelRange[]): void {
+		// 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.
+	 */
+	private _unwrapRanges(writer: ModelWriter, ranges: ModelRange[]): void {
+		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.
+	 */
+	private _keepSelection(writer: ModelWriter, ranges: ModelRange[], change: () => void): void {
+		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.
+	 */
+	private _mergeWithSiblings(writer: ModelWriter, element: ModelElement): void {
+		const isPlain = (node: ModelNode | null): boolean =>
+			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.
+	 */
+	private _leave(writer: ModelWriter, element: ModelElement, target: ElementOrPosition): void {
+		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.
+	 */
+	private _insert(writer: ModelWriter, target: ElementOrPosition): void {
+		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');
+		}
+	}
+}