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

package/src/elementMoveCommand.ts

@@ -0,0 +1,74 @@
+import { type Editor, type ModelElement } from 'ckeditor5';
+import { ElementOrPositionCommand, isStandalone, type ElementOrPosition } from 'ckeditor5-elements-core';
+import { moveDownIcon, moveUpIcon } from './icons.js';
+
+/**
+ * Where the element moves.
+ */
+export type ElementMoveDirection = 'up' | 'down';
+
+/**
+ * Moves an element up or down: swaps it with the element before or after it, in the same parent. The selection stays
+ * in the element.
+ *
+ * The element is the given one, the parent of the given position, or the selected element or the parent of the
+ * selection (see {@link ElementOrPositionCommand}). The command is disabled when there is no element before it (up) or
+ * after it (down), e.g. for the first element of a note, and for parts of a structure, such as table cells.
+ */
+export default class ElementMoveCommand extends ElementOrPositionCommand {
+	/**
+	 * Where the element moves.
+	 */
+	public readonly direction: ElementMoveDirection;
+
+	constructor(editor: Editor, direction: ElementMoveDirection) {
+		super(editor);
+
+		this.direction = direction;
+		this.title = direction === 'up' ? editor.t('Move up') : editor.t('Move down');
+		this.icon = direction === 'up' ? moveUpIcon : moveDownIcon;
+	}
+
+	/**
+	 * Moves the element up or down.
+	 */
+	public override execute(elementOrPosition?: ElementOrPosition): void {
+		const element = this._getElement(elementOrPosition);
+		const sibling = element && this._getSibling(element);
+
+		if (!element || !sibling || !this._canMove(element, sibling)) {
+			return;
+		}
+
+		this.editor.model.change(writer => {
+			// Either way, the selection stays in the element: it moves with the element, or the sibling moves past it.
+			if (this.direction === 'up') {
+				writer.move(writer.createRangeOn(element), writer.createPositionBefore(sibling));
+			} else {
+				writer.move(writer.createRangeOn(sibling), writer.createPositionBefore(element));
+			}
+		});
+	}
+
+	protected override _isEnabledFor(elementOrPosition?: ElementOrPosition): boolean {
+		const element = this._getElement(elementOrPosition);
+		const sibling = element && this._getSibling(element);
+
+		return !!element && !!sibling && this._canMove(element, sibling);
+	}
+
+	/**
+	 * Returns the element the element swaps with: the one before it (up) or after it (down), if it is an element.
+	 */
+	private _getSibling(element: ModelElement): ModelElement | null {
+		const sibling = this.direction === 'up' ? element.previousSibling : element.nextSibling;
+
+		return sibling?.is('element') ? sibling : null;
+	}
+
+	private _canMove(element: ModelElement, sibling: ModelElement): boolean {
+		const model = this.editor.model;
+
+		return isStandalone(model.schema, element) && model.canEditAt(element) && model.canEditAt(sibling);
+	}
+}

package/src/elementPasteCommand.ts

@@ -0,0 +1,129 @@
+import { ViewDataTransfer, plainTextToHtml, type ClipboardInputEventData, type Editor } from 'ckeditor5';
+import { ElementOrPositionCommand, isInDocument, isStandalone, type ElementOrPosition } from 'ckeditor5-elements-core';
+import { pasteAfterIcon, pasteBeforeIcon, pasteIcon } from './icons.js';
+
+/**
+ * Where the pasted content goes, relative to the element:
+ *
+ * * `'replace'` – replaces the element,
+ * * `'before'` – before the element,
+ * * `'after'` – after the element.
+ */
+export type ElementPastePlacement = 'replace' | 'before' | 'after';
+
+/**
+ * Pastes the system clipboard content relative to an element.
+ *
+ * The element is the given one, the parent of the given position, or the selected element or the parent of the
+ * selection (see {@link ElementOrPositionCommand}). Parts of a structure, such as table cells, rows and captions, cannot
+ * be replaced, nor have content pasted next to them, so the command is disabled for them.
+ *
+ * The content is pasted as with Ctrl+V: it goes through the clipboard pipeline (the `clipboardInput` event of the
+ * editing view document), so other plugins process it, e.g. paste from Office cleans up content from Word, and image
+ * upload uploads the images on the clipboard. The selection is moved to the pasted content.
+ *
+ * Requires a secure context (HTTPS or `localhost`), as it uses the asynchronous Clipboard API.
+ * The browser may ask the user for permission.
+ */
+export default class ElementPasteCommand extends ElementOrPositionCommand {
+	/**
+	 * Where the pasted content goes, relative to the element.
+	 */
+	public readonly placement: ElementPastePlacement;
+
+	constructor(editor: Editor, placement: ElementPastePlacement) {
+		super(editor);
+
+		this.placement = placement;
+		this.title = {
+			replace: editor.t('Paste'),
+			before: editor.t('Paste before'),
+			after: editor.t('Paste after')
+		}[placement];
+		this.icon = { replace: pasteIcon, before: pasteBeforeIcon, after: pasteAfterIcon }[placement];
+	}
+
+	protected override _isEnabledFor(elementOrPosition?: ElementOrPosition): boolean {
+		const element = this._getElement(elementOrPosition);
+
+		return window.isSecureContext && !!element && isStandalone(this.editor.model.schema, element);
+	}
+
+	/**
+	 * Pastes the clipboard content relative to the element. Resolves when the content has been pasted; rejects when the
+	 * browser does not allow reading the clipboard.
+	 */
+	public override async execute(elementOrPosition?: ElementOrPosition): Promise<void> {
+		// Resolve the element before reading the clipboard, as the selection may change in the meantime.
+		const element = this._getElement(elementOrPosition);
+
+		if (!element || !isStandalone(this.editor.model.schema, element)) {
+			return;
+		}
+
+		const dataTransfer = await readClipboard();
+
+		if (!dataTransfer || !isInDocument(element)) {
+			return;
+		}
+
+		const editing = this.editor.editing;
+		const model = this.editor.model;
+		const viewElement = editing.mapper.toViewElement(element);
+
+		if (!viewElement) {
+			return;
+		}
+
+		model.change(writer => {
+			const target =
+				this.placement === 'before'
+					? writer.createRange(writer.createPositionBefore(element))
+					: this.placement === 'after'
+						? writer.createRange(writer.createPositionAfter(element))
+						: writer.createRangeOn(element);
+
+			if (!model.canEditAt(target)) {
+				return;
+			}
+
+			// The same data as `ClipboardObserver` fires for Ctrl+V. The pipeline pastes at the selection.
+			const data: ClipboardInputEventData = {
+				dataTransfer,
+				content:
+					dataTransfer.getData('text/html') || plainTextToHtmlOrEmpty(dataTransfer.getData('text/plain')),
+				method: 'paste',
+				target: viewElement,
+				targetRanges: [editing.mapper.toViewRange(target)]
+			};
+
+			writer.setSelection(target);
+			editing.view.document.fire('clipboardInput', data);
+		});
+	}
+}
+
+/**
+ * Reads the system clipboard into a data transfer: HTML, plain text and images (as files).
+ */
+async function readClipboard(): Promise<ViewDataTransfer | null> {
+	const nativeDataTransfer = new DataTransfer();
+
+	for (const item of await navigator.clipboard.read()) {
+		for (const type of item.types) {
+			const blob = await item.getType(type);
+
+			if (type === 'text/html' || type === 'text/plain') {
+				nativeDataTransfer.setData(type, await blob.text());
+			} else if (type.startsWith('image/')) {
+				nativeDataTransfer.items.add(new File([blob], `image.${type.slice('image/'.length)}`, { type }));
+			}
+		}
+	}
+
+	return nativeDataTransfer.types.length ? new ViewDataTransfer(nativeDataTransfer, { cacheFiles: true }) : null;
+}
+
+function plainTextToHtmlOrEmpty(text: string): string {
+	return text ? plainTextToHtml(text) : '';
+}

package/src/icons.ts

@@ -0,0 +1,73 @@
+import { IconCopy, IconRemove } from 'ckeditor5';
+
+/**
+ * The icons of the element actions and of the clipboard commands, in the style of the CKEditor 5 icons (20×20).
+ */
+
+/**
+ * Move up: an arrow up, above a block.
+ */
+export const moveUpIcon =
+	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="' +
+	'M10 1.5l3.75 3.75-1.05 1.05-1.95-1.95V8.5h-1.5V4.35L7.3 6.3 6.25 5.25zM3.5 11h13a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-13a1 ' +
+	'1 0 0 1-1-1v-5a1 1 0 0 1 1-1zm.5 1.5v4h12v-4z"/></svg>';
+
+/**
+ * Move down: a block, above an arrow down.
+ */
+export const moveDownIcon =
+	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="' +
+	'M3.5 2h13a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-13a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm.5 1.5v4h12v-4zM10 18.5l-3.75-3.75 ' +
+	'1.05-1.05 1.95 1.95V11.5h1.5v4.15l1.95-1.95 1.05 1.05z"/></svg>';
+
+/**
+ * Duplicate: a block, above a new block.
+ */
+export const duplicateIcon =
+	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="' +
+	'M3.5 2h13a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-13a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm.5 1.5v4h12v-4zM3.5 11h13a1 1 0 0 1 1 ' +
+	'1v5a1 1 0 0 1-1 1h-13a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1zm.5 1.5v4h12v-4zM9.25 13h1.5v.75h.75v1.5h-.75V16h-1.5v-.75H8.5' +
+	'v-1.5h.75z"/></svg>';
+
+/**
+ * Delete: CKEditor's own remove icon.
+ */
+export const deleteIcon = IconRemove;
+
+/**
+ * Copy: CKEditor's own copy icon.
+ */
+export const copyIcon = IconCopy;
+
+/**
+ * Cut: scissors.
+ */
+export const cutIcon =
+	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="' +
+	'M5.3 2.9 6.6 2.1l6.2 10.3a3 3 0 1 1-1.3.8L10 10.7 8.5 13.2a3 3 0 1 1-1.3-.8l2-3.3zm7.4 11.1a1.5 1.5 0 1 0 2.1 2.1 ' +
+	'1.5 1.5 0 0 0-2.1-2.1zm-7.4 0a1.5 1.5 0 1 0 2.1 2.1 1.5 1.5 0 0 0-2.1-2.1zm5.4-5.3 3.9-6.6 1.3.8-4.4 7.3z"/></svg>';
+
+/**
+ * Paste: a clipboard.
+ */
+export const pasteIcon =
+	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="' +
+	'M7.5 2h5a1 1 0 0 1 1 1v.5h1.7a1.3 1.3 0 0 1 1.3 1.3v11.9a1.3 1.3 0 0 1-1.3 1.3H4.8a1.3 1.3 0 0 1-1.3-1.3V4.8a1.3 ' +
+	'1.3 0 0 1 1.3-1.3h1.7V3a1 1 0 0 1 1-1zM8 3.5V5h4V3.5zM5 5v11.5h10V5h-1.5v.5a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V5zm2 ' +
+	'4h6v1.5H7zm0 3h4v1.5H7z"/></svg>';
+
+/**
+ * Paste before: a small clipboard above a block.
+ */
+export const pasteBeforeIcon =
+	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="' +
+	'M8.5 1.5h3v1h1.4a.6.6 0 0 1 .6.6v5.3a.6.6 0 0 1-.6.6H7.1a.6.6 0 0 1-.6-.6V3.1a.6.6 0 0 1 .6-.6h1.4zM8 4v3.5h4V4zM3.5 ' +
+	'11h13a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-13a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1zm.5 1.5v4h12v-4z"/></svg>';
+
+/**
+ * Paste after: a block above a small clipboard.
+ */
+export const pasteAfterIcon =
+	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="' +
+	'M3.5 2h13a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-13a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm.5 1.5v4h12v-4zM8.5 10.5h3v1h1.4a.6.6 0 0 ' +
+	'1 .6.6v5.3a.6.6 0 0 1-.6.6H7.1a.6.6 0 0 1-.6-.6v-5.3a.6.6 0 0 1 .6-.6h1.4zM8 13v3.5h4V13z"/></svg>';

package/src/index.ts

@@ -0,0 +1,32 @@
+/**
+ * Element actions: move an element up or down, duplicate it, or delete it; and the clipboard commands that act on an
+ * element: copy, cut, paste, paste before and paste after.
+ *
+ * @module ckeditor5-elements-actions
+ */
+
+// Plugins.
+export { default as ElementActions } from './elementActions.js';
+export { default as ElementClipboard } from './elementClipboard.js';
+
+// Commands.
+export { default as ElementMoveCommand, type ElementMoveDirection } from './elementMoveCommand.js';
+export { default as ElementDuplicateCommand } from './elementDuplicateCommand.js';
+export { default as ElementDeleteCommand } from './elementDeleteCommand.js';
+export { default as ElementCopyCommand } from './elementCopyCommand.js';
+export { default as ElementPasteCommand, type ElementPastePlacement } from './elementPasteCommand.js';
+
+// Icons.
+export {
+	copyIcon,
+	cutIcon,
+	deleteIcon,
+	duplicateIcon,
+	moveDownIcon,
+	moveUpIcon,
+	pasteAfterIcon,
+	pasteBeforeIcon,
+	pasteIcon
+} from './icons.js';
+
+import './augmentation.js';