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

package/README.md

@@ -1,8 +1,13 @@
 # ckeditor5-elements-actions
 
-Element actions for CKEditor 5 Elements: `ElementActions` registers `moveElementUp`, `moveElementDown`,
-`duplicateElement` and `deleteElement`, which move an element within its parent, insert an empty copy of it after it, or
-delete it.
+Element actions for CKEditor 5 Elements, the commands that act on a whole element:
+
+- `ElementActions` registers `moveElementUp`, `moveElementDown`, `duplicateElement` and `deleteElement`, which move an
+  element within its parent, insert an empty copy of it after it, or delete it.
+- `ElementClipboard` registers `copyElement`, `cutElement`, `pasteElement`, `pasteElementBefore` and `pasteElementAfter`,
+  which copy, cut and paste an element, through the CKEditor clipboard pipeline.
+
+The commands have titles and icons, so they are menu items and buttons as they are.
 
 ## Installation
 
@@ -15,21 +20,31 @@ npm install ckeditor5 ckeditor5-elements
 ## Usage
 
 ```ts
-import { ElementActions, ElementContextMenu } from 'ckeditor5-elements';
+import { ElementActions, ElementClipboard, ElementContextMenu } from 'ckeditor5-elements';
 import 'ckeditor5-elements/index.css';
 
 // In the editor config:
-plugins: [..., ElementActions, ElementContextMenu],
+plugins: [..., ElementActions, ElementClipboard, ElementContextMenu],
 elementContextMenu: (element, editor) => [
 	editor.commands.get('moveElementUp'),
 	editor.commands.get('moveElementDown'),
 	'|',
 	editor.commands.get('duplicateElement'),
-	editor.commands.get('deleteElement')
+	editor.commands.get('deleteElement'),
+	'|',
+	editor.commands.get('copyElement'),
+	editor.commands.get('cutElement'),
+	editor.commands.get('pasteElementAfter')
 ]
 ```
 
-See the [Actions guide](https://ivankild.github.io/ckeditor5-elements/guide/actions) of the documentation.
+```ts
+await editor.execute('copyElement', element);
+await editor.execute('pasteElementAfter'); // The element at the selection.
+```
+
+See the [Actions](https://ivankild.github.io/ckeditor5-elements/guide/actions) and
+[Clipboard](https://ivankild.github.io/ckeditor5-elements/guide/clipboard) guides of the documentation.
 
 ## License
 

package/dist/augmentation.d.ts

@@ -1,13 +1,19 @@
-import type { ElementActions, ElementDeleteCommand, ElementDuplicateCommand, ElementMoveCommand } from './index.js';
+import type { ElementActions, ElementClipboard, ElementCopyCommand, ElementDeleteCommand, ElementDuplicateCommand, ElementMoveCommand, ElementPasteCommand } from './index.js';
 declare module 'ckeditor5' {
     interface PluginsMap {
         [ElementActions.pluginName]: ElementActions;
+        [ElementClipboard.pluginName]: ElementClipboard;
     }
     interface CommandsMap {
         moveElementUp: ElementMoveCommand;
         moveElementDown: ElementMoveCommand;
         duplicateElement: ElementDuplicateCommand;
         deleteElement: ElementDeleteCommand;
+        copyElement: ElementCopyCommand;
+        cutElement: ElementCopyCommand;
+        pasteElement: ElementPasteCommand;
+        pasteElementBefore: ElementPasteCommand;
+        pasteElementAfter: ElementPasteCommand;
     }
 }
 //# 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,cAAc,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEpH,OAAO,QAAQ,WAAW,CAAC;IAC1B,UAAU,UAAU;QACnB,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,cAAc,CAAC;KAC5C;IAED,UAAU,WAAW;QACpB,aAAa,EAAE,kBAAkB,CAAC;QAClC,eAAe,EAAE,kBAAkB,CAAC;QACpC,gBAAgB,EAAE,uBAAuB,CAAC;QAC1C,aAAa,EAAE,oBAAoB,CAAC;KACpC;CACD"}
+{"version":3,"file":"augmentation.d.ts","sourceRoot":"","sources":["../src/augmentation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,cAAc,EACd,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,EACpB,uBAAuB,EACvB,kBAAkB,EAClB,mBAAmB,EACnB,MAAM,YAAY,CAAC;AAEpB,OAAO,QAAQ,WAAW,CAAC;IAC1B,UAAU,UAAU;QACnB,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,cAAc,CAAC;QAC5C,CAAC,gBAAgB,CAAC,UAAU,CAAC,EAAE,gBAAgB,CAAC;KAChD;IAED,UAAU,WAAW;QACpB,aAAa,EAAE,kBAAkB,CAAC;QAClC,eAAe,EAAE,kBAAkB,CAAC;QACpC,gBAAgB,EAAE,uBAAuB,CAAC;QAC1C,aAAa,EAAE,oBAAoB,CAAC;QACpC,WAAW,EAAE,kBAAkB,CAAC;QAChC,UAAU,EAAE,kBAAkB,CAAC;QAC/B,YAAY,EAAE,mBAAmB,CAAC;QAClC,kBAAkB,EAAE,mBAAmB,CAAC;QACxC,iBAAiB,EAAE,mBAAmB,CAAC;KACvC;CACD"}

package/dist/elementClipboard.d.ts

@@ -0,0 +1,18 @@
+import { ClipboardPipeline, Notification, Plugin } from 'ckeditor5';
+/**
+ * Registers clipboard commands that act on an element:
+ * `copyElement`, `cutElement`, `pasteElement`, `pasteElementBefore` and `pasteElementAfter`.
+ *
+ * ```ts
+ * await editor.execute('copyElement', element);
+ * ```
+ *
+ * The commands have titles and icons, so they can be menu items (e.g. in the `elementContextMenu` config of
+ * `ElementContextMenu`) and buttons. Copying and pasting go through the clipboard pipeline, as Ctrl+C and Ctrl+V do.
+ */
+export default class ElementClipboard extends Plugin {
+    static get requires(): readonly [typeof ClipboardPipeline, typeof Notification];
+    static get pluginName(): 'ElementClipboard';
+    init(): void;
+}
+//# sourceMappingURL=elementClipboard.d.ts.map

package/dist/elementClipboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementClipboard.d.ts","sourceRoot":"","sources":["../src/elementClipboard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAIpE;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,MAAM;IACnD,WAAkB,QAAQ,IAAI,SAAS,CAAC,OAAO,iBAAiB,EAAE,OAAO,YAAY,CAAC,CAGrF;IAED,WAAkB,UAAU,IAAI,kBAAkB,CAEjD;IAEM,IAAI,IAAI,IAAI;CASnB"}

package/dist/elementClipboard.js

@@ -0,0 +1,32 @@
+import { ClipboardPipeline, Notification, Plugin } from 'ckeditor5';
+import ElementCopyCommand from './elementCopyCommand.js';
+import ElementPasteCommand from './elementPasteCommand.js';
+/**
+ * Registers clipboard commands that act on an element:
+ * `copyElement`, `cutElement`, `pasteElement`, `pasteElementBefore` and `pasteElementAfter`.
+ *
+ * ```ts
+ * await editor.execute('copyElement', element);
+ * ```
+ *
+ * The commands have titles and icons, so they can be menu items (e.g. in the `elementContextMenu` config of
+ * `ElementContextMenu`) and buttons. Copying and pasting go through the clipboard pipeline, as Ctrl+C and Ctrl+V do.
+ */
+export default class ElementClipboard extends Plugin {
+    static get requires() {
+        // The buttons of the commands report failures (e.g. no clipboard permission) with notifications.
+        return [ClipboardPipeline, Notification];
+    }
+    static get pluginName() {
+        return 'ElementClipboard';
+    }
+    init() {
+        const editor = this.editor;
+        editor.commands.add('copyElement', new ElementCopyCommand(editor));
+        editor.commands.add('cutElement', new ElementCopyCommand(editor, { cut: true }));
+        editor.commands.add('pasteElement', new ElementPasteCommand(editor, 'replace'));
+        editor.commands.add('pasteElementBefore', new ElementPasteCommand(editor, 'before'));
+        editor.commands.add('pasteElementAfter', new ElementPasteCommand(editor, 'after'));
+    }
+}
+//# sourceMappingURL=elementClipboard.js.map

package/dist/elementClipboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementClipboard.js","sourceRoot":"","sources":["../src/elementClipboard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACpE,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AACzD,OAAO,mBAAmB,MAAM,0BAA0B,CAAC;AAE3D;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,MAAM;IAC5C,MAAM,KAAK,QAAQ;QACzB,iGAAiG;QACjG,OAAO,CAAC,iBAAiB,EAAE,YAAY,CAAU,CAAC;IACnD,CAAC;IAEM,MAAM,KAAK,UAAU;QAC3B,OAAO,kBAA2B,CAAC;IACpC,CAAC;IAEM,IAAI;QACV,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAE3B,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,aAAa,EAAE,IAAI,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC;QACnE,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,YAAY,EAAE,IAAI,kBAAkB,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACjF,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,cAAc,EAAE,IAAI,mBAAmB,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC;QAChF,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,oBAAoB,EAAE,IAAI,mBAAmB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;QACrF,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,mBAAmB,EAAE,IAAI,mBAAmB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACpF,CAAC;CACD"}

package/dist/elementCopyCommand.d.ts

@@ -0,0 +1,30 @@
+import { type Editor } from 'ckeditor5';
+import { ElementOrPositionCommand, type ElementOrPosition } from 'ckeditor5-elements-core';
+/**
+ * Copies an element to the system clipboard, as HTML and plain text. With `cut: true`, it also removes 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}). Parts of a structure, such as table cells, rows and captions, cannot
+ * be copied on their own, so the command is disabled for them.
+ *
+ * The content goes through the clipboard pipeline, as with Ctrl+C: other plugins can change it (they listen to the
+ * `outputTransformation` event of `ClipboardPipeline`, and to `clipboardOutput` of the editing view document).
+ *
+ * Requires a secure context (HTTPS or `localhost`), as it uses the asynchronous Clipboard API.
+ */
+export default class ElementCopyCommand extends ElementOrPositionCommand {
+    /**
+     * Whether the element is removed after copying.
+     */
+    readonly cut: boolean;
+    constructor(editor: Editor, { cut }?: {
+        cut?: boolean;
+    });
+    protected _isEnabledFor(elementOrPosition?: ElementOrPosition): boolean;
+    /**
+     * Copies the element (and removes it, with `cut: true`). Resolves when the clipboard has been written; rejects when
+     * the browser does not allow it.
+     */
+    execute(elementOrPosition?: ElementOrPosition): Promise<void>;
+}
+//# sourceMappingURL=elementCopyCommand.d.ts.map

package/dist/elementCopyCommand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementCopyCommand.d.ts","sourceRoot":"","sources":["../src/elementCopyCommand.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgF,KAAK,MAAM,EAAE,MAAM,WAAW,CAAC;AACtH,OAAO,EAAE,wBAAwB,EAA8B,KAAK,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAGvH;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,wBAAwB;IACvE;;OAEG;IACH,SAAgB,GAAG,EAAE,OAAO,CAAC;gBAEjB,MAAM,EAAE,MAAM,EAAE,EAAE,GAAW,EAAE,GAAE;QAAE,GAAG,CAAC,EAAE,OAAO,CAAA;KAAO;cAWhD,aAAa,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,GAAG,OAAO;IAMhF;;;OAGG;IACmB,OAAO,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC;CA+BnF"}

package/dist/elementCopyCommand.js

@@ -0,0 +1,64 @@
+import { ClipboardPipeline, ViewDataTransfer } from 'ckeditor5';
+import { ElementOrPositionCommand, isInDocument, isStandalone } from 'ckeditor5-elements-core';
+import { copyIcon, cutIcon } from './icons.js';
+/**
+ * Copies an element to the system clipboard, as HTML and plain text. With `cut: true`, it also removes 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}). Parts of a structure, such as table cells, rows and captions, cannot
+ * be copied on their own, so the command is disabled for them.
+ *
+ * The content goes through the clipboard pipeline, as with Ctrl+C: other plugins can change it (they listen to the
+ * `outputTransformation` event of `ClipboardPipeline`, and to `clipboardOutput` of the editing view document).
+ *
+ * Requires a secure context (HTTPS or `localhost`), as it uses the asynchronous Clipboard API.
+ */
+export default class ElementCopyCommand extends ElementOrPositionCommand {
+    /**
+     * Whether the element is removed after copying.
+     */
+    cut;
+    constructor(editor, { cut = false } = {}) {
+        super(editor);
+        this.cut = cut;
+        this.title = cut ? editor.t('Cut') : editor.t('Copy');
+        this.icon = cut ? cutIcon : copyIcon;
+        // Copying does not change the data, so it stays enabled in read-only mode.
+        this.affectsData = cut;
+    }
+    _isEnabledFor(elementOrPosition) {
+        const element = this._getElement(elementOrPosition);
+        return window.isSecureContext && !!element && isStandalone(this.editor.model.schema, element);
+    }
+    /**
+     * Copies the element (and removes it, with `cut: true`). Resolves when the clipboard has been written; rejects when
+     * the browser does not allow it.
+     */
+    async execute(elementOrPosition) {
+        const editor = this.editor;
+        const model = editor.model;
+        const element = this._getElement(elementOrPosition);
+        if (!element || !isStandalone(model.schema, element)) {
+            return;
+        }
+        const dataTransfer = new ViewDataTransfer(new DataTransfer());
+        // Always "copy": the pipeline would remove the content of the document selection when cutting.
+        editor.plugins.get(ClipboardPipeline).fire('outputTransformation', {
+            dataTransfer,
+            content: model.getSelectedContent(model.createSelection(element, 'on')),
+            method: 'copy'
+        });
+        await navigator.clipboard.write([
+            new ClipboardItem({
+                'text/html': new Blob([dataTransfer.getData('text/html')], { type: 'text/html' }),
+                'text/plain': new Blob([dataTransfer.getData('text/plain')], { type: 'text/plain' })
+            })
+        ]);
+        if (this.cut && isInDocument(element) && model.canEditAt(element)) {
+            model.change(writer => {
+                writer.remove(element);
+            });
+        }
+    }
+}
+//# sourceMappingURL=elementCopyCommand.js.map

package/dist/elementCopyCommand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementCopyCommand.js","sourceRoot":"","sources":["../src/elementCopyCommand.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAwD,MAAM,WAAW,CAAC;AACtH,OAAO,EAAE,wBAAwB,EAAE,YAAY,EAAE,YAAY,EAA0B,MAAM,yBAAyB,CAAC;AACvH,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAE/C;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,wBAAwB;IACvE;;OAEG;IACa,GAAG,CAAU;IAE7B,YAAY,MAAc,EAAE,EAAE,GAAG,GAAG,KAAK,KAAwB,EAAE;QAClE,KAAK,CAAC,MAAM,CAAC,CAAC;QAEd,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;QACf,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;QACtD,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC;QAErC,2EAA2E;QAC3E,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC;IACxB,CAAC;IAEkB,aAAa,CAAC,iBAAqC;QACrE,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;QAEpD,OAAO,MAAM,CAAC,eAAe,IAAI,CAAC,CAAC,OAAO,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/F,CAAC;IAED;;;OAGG;IACa,KAAK,CAAC,OAAO,CAAC,iBAAqC;QAClE,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC3B,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;QAEpD,IAAI,CAAC,OAAO,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;YACtD,OAAO;QACR,CAAC;QAED,MAAM,YAAY,GAAG,IAAI,gBAAgB,CAAC,IAAI,YAAY,EAAE,CAAC,CAAC;QAE9D,+FAA+F;QAC/F,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC,IAAI,CAAqC,sBAAsB,EAAE;YACtG,YAAY;YACZ,OAAO,EAAE,KAAK,CAAC,kBAAkB,CAAC,KAAK,CAAC,eAAe,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;YACvE,MAAM,EAAE,MAAM;SACd,CAAC,CAAC;QAEH,MAAM,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC;YAC/B,IAAI,aAAa,CAAC;gBACjB,WAAW,EAAE,IAAI,IAAI,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;gBACjF,YAAY,EAAE,IAAI,IAAI,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC;aACpF,CAAC;SACF,CAAC,CAAC;QAEH,IAAI,IAAI,CAAC,GAAG,IAAI,YAAY,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC;YACnE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE;gBACrB,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YACxB,CAAC,CAAC,CAAC;QACJ,CAAC;IACF,CAAC;CACD"}

package/dist/elementPasteCommand.d.ts

@@ -0,0 +1,38 @@
+import { type Editor } from 'ckeditor5';
+import { ElementOrPositionCommand, type ElementOrPosition } from 'ckeditor5-elements-core';
+/**
+ * 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.
+     */
+    readonly placement: ElementPastePlacement;
+    constructor(editor: Editor, placement: ElementPastePlacement);
+    protected _isEnabledFor(elementOrPosition?: ElementOrPosition): boolean;
+    /**
+     * 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.
+     */
+    execute(elementOrPosition?: ElementOrPosition): Promise<void>;
+}
+//# sourceMappingURL=elementPasteCommand.d.ts.map

package/dist/elementPasteCommand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementPasteCommand.d.ts","sourceRoot":"","sources":["../src/elementPasteCommand.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmE,KAAK,MAAM,EAAE,MAAM,WAAW,CAAC;AACzG,OAAO,EAAE,wBAAwB,EAA8B,KAAK,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAGvH;;;;;;GAMG;AACH,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEnE;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,wBAAwB;IACxE;;OAEG;IACH,SAAgB,SAAS,EAAE,qBAAqB,CAAC;gBAErC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,qBAAqB;cAYzC,aAAa,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,GAAG,OAAO;IAMhF;;;OAGG;IACmB,OAAO,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC;CAgDnF"}

package/dist/elementPasteCommand.js

@@ -0,0 +1,100 @@
+import { ViewDataTransfer, plainTextToHtml } from 'ckeditor5';
+import { ElementOrPositionCommand, isInDocument, isStandalone } from 'ckeditor5-elements-core';
+import { pasteAfterIcon, pasteBeforeIcon, pasteIcon } from './icons.js';
+/**
+ * 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.
+     */
+    placement;
+    constructor(editor, placement) {
+        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];
+    }
+    _isEnabledFor(elementOrPosition) {
+        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.
+     */
+    async execute(elementOrPosition) {
+        // 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 = {
+                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() {
+    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) {
+    return text ? plainTextToHtml(text) : '';
+}
+//# sourceMappingURL=elementPasteCommand.js.map

package/dist/elementPasteCommand.js.map

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

package/dist/icons.d.ts

@@ -1,5 +1,5 @@
 /**
- * The icons of the element actions, in the style of the CKEditor 5 icons (20×20).
+ * 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.
@@ -17,4 +17,24 @@ export declare const duplicateIcon: string;
  * Delete: CKEditor's own remove icon.
  */
 export declare const deleteIcon: string;
+/**
+ * Copy: CKEditor's own copy icon.
+ */
+export declare const copyIcon: string;
+/**
+ * Cut: scissors.
+ */
+export declare const cutIcon: string;
+/**
+ * Paste: a clipboard.
+ */
+export declare const pasteIcon: string;
+/**
+ * Paste before: a small clipboard above a block.
+ */
+export declare const pasteBeforeIcon: string;
+/**
+ * Paste after: a block above a small clipboard.
+ */
+export declare const pasteAfterIcon: string;
 //# sourceMappingURL=icons.d.ts.map

package/dist/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../src/icons.ts"],"names":[],"mappings":"AAEA;;GAEG;AAEH;;GAEG;AACH,eAAO,MAAM,UAAU,QAGkC,CAAC;AAE1D;;GAEG;AACH,eAAO,MAAM,YAAY,QAGyC,CAAC;AAEnE;;GAEG;AACH,eAAO,MAAM,aAAa,QAIJ,CAAC;AAEvB;;GAEG;AACH,eAAO,MAAM,UAAU,QAAa,CAAC"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../src/icons.ts"],"names":[],"mappings":"AAEA;;GAEG;AAEH;;GAEG;AACH,eAAO,MAAM,UAAU,QAGkC,CAAC;AAE1D;;GAEG;AACH,eAAO,MAAM,YAAY,QAGyC,CAAC;AAEnE;;GAEG;AACH,eAAO,MAAM,aAAa,QAIJ,CAAC;AAEvB;;GAEG;AACH,eAAO,MAAM,UAAU,QAAa,CAAC;AAErC;;GAEG;AACH,eAAO,MAAM,QAAQ,QAAW,CAAC;AAEjC;;GAEG;AACH,eAAO,MAAM,OAAO,QAGiG,CAAC;AAEtH;;GAEG;AACH,eAAO,MAAM,SAAS,QAIa,CAAC;AAEpC;;GAEG;AACH,eAAO,MAAM,eAAe,QAGuE,CAAC;AAEpG;;GAEG;AACH,eAAO,MAAM,cAAc,QAG0E,CAAC"}

package/dist/icons.js

@@ -1,6 +1,6 @@
-import { IconRemove } from 'ckeditor5';
+import { IconCopy, IconRemove } from 'ckeditor5';
 /**
- * The icons of the element actions, in the style of the CKEditor 5 icons (20×20).
+ * 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.
@@ -25,4 +25,33 @@ export const duplicateIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0
  * 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>';
 //# sourceMappingURL=icons.js.map

package/dist/icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.js","sourceRoot":"","sources":["../src/icons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAEvC;;GAEG;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GACtB,2FAA2F;IAC3F,uHAAuH;IACvH,wDAAwD,CAAC;AAE1D;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GACxB,2FAA2F;IAC3F,gHAAgH;IAChH,iEAAiE,CAAC;AAEnE;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GACzB,2FAA2F;IAC3F,mHAAmH;IACnH,qHAAqH;IACrH,qBAAqB,CAAC;AAEvB;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC"}
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../src/icons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAEjD;;GAEG;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GACtB,2FAA2F;IAC3F,uHAAuH;IACvH,wDAAwD,CAAC;AAE1D;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GACxB,2FAA2F;IAC3F,gHAAgH;IAChH,iEAAiE,CAAC;AAEnE;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GACzB,2FAA2F;IAC3F,mHAAmH;IACnH,qHAAqH;IACrH,qBAAqB,CAAC;AAEvB;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC;AAErC;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC;AAEjC;;GAEG;AACH,MAAM,CAAC,MAAM,OAAO,GACnB,2FAA2F;IAC3F,oHAAoH;IACpH,oHAAoH,CAAC;AAEtH;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GACrB,2FAA2F;IAC3F,mHAAmH;IACnH,kHAAkH;IAClH,kCAAkC,CAAC;AAEpC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAC3B,2FAA2F;IAC3F,uHAAuH;IACvH,kGAAkG,CAAC;AAEpG;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAC1B,2FAA2F;IAC3F,uHAAuH;IACvH,oGAAoG,CAAC"}

package/dist/index.d.ts

@@ -1,12 +1,16 @@
 /**
- * Element actions: move an element up or down, duplicate it, or delete it.
+ * 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
  */
 export { default as ElementActions } from './elementActions.js';
+export { default as ElementClipboard } from './elementClipboard.js';
 export { default as ElementMoveCommand, type ElementMoveDirection } from './elementMoveCommand.js';
 export { default as ElementDuplicateCommand } from './elementDuplicateCommand.js';
 export { default as ElementDeleteCommand } from './elementDeleteCommand.js';
-export { deleteIcon, duplicateIcon, moveDownIcon, moveUpIcon } from './icons.js';
+export { default as ElementCopyCommand } from './elementCopyCommand.js';
+export { default as ElementPasteCommand, type ElementPastePlacement } from './elementPasteCommand.js';
+export { copyIcon, cutIcon, deleteIcon, duplicateIcon, moveDownIcon, moveUpIcon, pasteAfterIcon, pasteBeforeIcon, pasteIcon } from './icons.js';
 import './augmentation.js';
 //# 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;;;;GAIG;AAGH,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAGhE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,KAAK,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AACnG,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAG5E,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAEjF,OAAO,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAGpE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,KAAK,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AACnG,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,KAAK,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAGtG,OAAO,EACN,QAAQ,EACR,OAAO,EACP,UAAU,EACV,aAAa,EACb,YAAY,EACZ,UAAU,EACV,cAAc,EACd,eAAe,EACf,SAAS,EACT,MAAM,YAAY,CAAC;AAEpB,OAAO,mBAAmB,CAAC"}

package/dist/index.js

@@ -1,15 +1,19 @@
 /**
- * Element actions: move an element up or down, duplicate it, or delete it.
+ * 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 } 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 } from './elementPasteCommand.js';
 // Icons.
-export { deleteIcon, duplicateIcon, moveDownIcon, moveUpIcon } from './icons.js';
+export { copyIcon, cutIcon, deleteIcon, duplicateIcon, moveDownIcon, moveUpIcon, pasteAfterIcon, pasteBeforeIcon, pasteIcon } from './icons.js';
 import './augmentation.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,WAAW;AACX,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAEhE,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAA6B,MAAM,yBAAyB,CAAC;AACnG,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAE5E,SAAS;AACT,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAEjF,OAAO,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,WAAW;AACX,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEpE,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAA6B,MAAM,yBAAyB,CAAC;AACnG,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAA8B,MAAM,0BAA0B,CAAC;AAEtG,SAAS;AACT,OAAO,EACN,QAAQ,EACR,OAAO,EACP,UAAU,EACV,aAAa,EACb,YAAY,EACZ,UAAU,EACV,cAAc,EACd,eAAe,EACf,SAAS,EACT,MAAM,YAAY,CAAC;AAEpB,OAAO,mBAAmB,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ckeditor5-elements-actions",
-  "version": "49.0.0-alpha.2",
-  "description": "Element actions for CKEditor 5: move an element up or down, duplicate it, or delete it.",
+  "version": "49.0.0-alpha.4",
+  "description": "Element actions for CKEditor 5: move, duplicate and delete an element, and copy, cut and paste it, as commands with titles and icons for menus and toolbars.",
   "keywords": [
     "ckeditor",
     "ckeditor5",
@@ -37,7 +37,7 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "ckeditor5-elements-core": "49.0.0-alpha.2"
+    "ckeditor5-elements-core": "49.0.0-alpha.4"
   },
   "peerDependencies": {
     "ckeditor5": "^49.0.0"

package/src/augmentation.ts

@@ -1,8 +1,17 @@
-import type { ElementActions, ElementDeleteCommand, ElementDuplicateCommand, ElementMoveCommand } from './index.js';
+import type {
+	ElementActions,
+	ElementClipboard,
+	ElementCopyCommand,
+	ElementDeleteCommand,
+	ElementDuplicateCommand,
+	ElementMoveCommand,
+	ElementPasteCommand
+} from './index.js';
 
 declare module 'ckeditor5' {
 	interface PluginsMap {
 		[ElementActions.pluginName]: ElementActions;
+		[ElementClipboard.pluginName]: ElementClipboard;
 	}
 
 	interface CommandsMap {
@@ -10,5 +19,10 @@ declare module 'ckeditor5' {
 		moveElementDown: ElementMoveCommand;
 		duplicateElement: ElementDuplicateCommand;
 		deleteElement: ElementDeleteCommand;
+		copyElement: ElementCopyCommand;
+		cutElement: ElementCopyCommand;
+		pasteElement: ElementPasteCommand;
+		pasteElementBefore: ElementPasteCommand;
+		pasteElementAfter: ElementPasteCommand;
 	}
 }

package/src/elementClipboard.ts

@@ -0,0 +1,35 @@
+import { ClipboardPipeline, Notification, Plugin } from 'ckeditor5';
+import ElementCopyCommand from './elementCopyCommand.js';
+import ElementPasteCommand from './elementPasteCommand.js';
+
+/**
+ * Registers clipboard commands that act on an element:
+ * `copyElement`, `cutElement`, `pasteElement`, `pasteElementBefore` and `pasteElementAfter`.
+ *
+ * ```ts
+ * await editor.execute('copyElement', element);
+ * ```
+ *
+ * The commands have titles and icons, so they can be menu items (e.g. in the `elementContextMenu` config of
+ * `ElementContextMenu`) and buttons. Copying and pasting go through the clipboard pipeline, as Ctrl+C and Ctrl+V do.
+ */
+export default class ElementClipboard extends Plugin {
+	public static get requires(): readonly [typeof ClipboardPipeline, typeof Notification] {
+		// The buttons of the commands report failures (e.g. no clipboard permission) with notifications.
+		return [ClipboardPipeline, Notification] as const;
+	}
+
+	public static get pluginName(): 'ElementClipboard' {
+		return 'ElementClipboard' as const;
+	}
+
+	public init(): void {
+		const editor = this.editor;
+
+		editor.commands.add('copyElement', new ElementCopyCommand(editor));
+		editor.commands.add('cutElement', new ElementCopyCommand(editor, { cut: true }));
+		editor.commands.add('pasteElement', new ElementPasteCommand(editor, 'replace'));
+		editor.commands.add('pasteElementBefore', new ElementPasteCommand(editor, 'before'));
+		editor.commands.add('pasteElementAfter', new ElementPasteCommand(editor, 'after'));
+	}
+}

package/src/elementCopyCommand.ts

@@ -0,0 +1,75 @@
+import { ClipboardPipeline, ViewDataTransfer, type ClipboardOutputTransformationEvent, type Editor } from 'ckeditor5';
+import { ElementOrPositionCommand, isInDocument, isStandalone, type ElementOrPosition } from 'ckeditor5-elements-core';
+import { copyIcon, cutIcon } from './icons.js';
+
+/**
+ * Copies an element to the system clipboard, as HTML and plain text. With `cut: true`, it also removes 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}). Parts of a structure, such as table cells, rows and captions, cannot
+ * be copied on their own, so the command is disabled for them.
+ *
+ * The content goes through the clipboard pipeline, as with Ctrl+C: other plugins can change it (they listen to the
+ * `outputTransformation` event of `ClipboardPipeline`, and to `clipboardOutput` of the editing view document).
+ *
+ * Requires a secure context (HTTPS or `localhost`), as it uses the asynchronous Clipboard API.
+ */
+export default class ElementCopyCommand extends ElementOrPositionCommand {
+	/**
+	 * Whether the element is removed after copying.
+	 */
+	public readonly cut: boolean;
+
+	constructor(editor: Editor, { cut = false }: { cut?: boolean } = {}) {
+		super(editor);
+
+		this.cut = cut;
+		this.title = cut ? editor.t('Cut') : editor.t('Copy');
+		this.icon = cut ? cutIcon : copyIcon;
+
+		// Copying does not change the data, so it stays enabled in read-only mode.
+		this.affectsData = cut;
+	}
+
+	protected override _isEnabledFor(elementOrPosition?: ElementOrPosition): boolean {
+		const element = this._getElement(elementOrPosition);
+
+		return window.isSecureContext && !!element && isStandalone(this.editor.model.schema, element);
+	}
+
+	/**
+	 * Copies the element (and removes it, with `cut: true`). Resolves when the clipboard has been written; rejects when
+	 * the browser does not allow it.
+	 */
+	public override async execute(elementOrPosition?: ElementOrPosition): Promise<void> {
+		const editor = this.editor;
+		const model = editor.model;
+		const element = this._getElement(elementOrPosition);
+
+		if (!element || !isStandalone(model.schema, element)) {
+			return;
+		}
+
+		const dataTransfer = new ViewDataTransfer(new DataTransfer());
+
+		// Always "copy": the pipeline would remove the content of the document selection when cutting.
+		editor.plugins.get(ClipboardPipeline).fire<ClipboardOutputTransformationEvent>('outputTransformation', {
+			dataTransfer,
+			content: model.getSelectedContent(model.createSelection(element, 'on')),
+			method: 'copy'
+		});
+
+		await navigator.clipboard.write([
+			new ClipboardItem({
+				'text/html': new Blob([dataTransfer.getData('text/html')], { type: 'text/html' }),
+				'text/plain': new Blob([dataTransfer.getData('text/plain')], { type: 'text/plain' })
+			})
+		]);
+
+		if (this.cut && isInDocument(element) && model.canEditAt(element)) {
+			model.change(writer => {
+				writer.remove(element);
+			});
+		}
+	}
+}

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

@@ -1,7 +1,7 @@
-import { IconRemove } from 'ckeditor5';
+import { IconCopy, IconRemove } from 'ckeditor5';
 
 /**
- * The icons of the element actions, in the style of the CKEditor 5 icons (20×20).
+ * The icons of the element actions and of the clipboard commands, in the style of the CKEditor 5 icons (20×20).
  */
 
 /**
@@ -33,3 +33,41 @@ export const duplicateIcon =
  * 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

@@ -1,18 +1,32 @@
 /**
- * Element actions: move an element up or down, duplicate it, or delete it.
+ * 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 { deleteIcon, duplicateIcon, moveDownIcon, moveUpIcon } from './icons.js';
+export {
+	copyIcon,
+	cutIcon,
+	deleteIcon,
+	duplicateIcon,
+	moveDownIcon,
+	moveUpIcon,
+	pasteAfterIcon,
+	pasteBeforeIcon,
+	pasteIcon
+} from './icons.js';
 
 import './augmentation.js';