@ckeditor/ckeditor5-clipboard 36.0.1 → 37.0.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-clipboard",
-  "version": "36.0.1",
+  "version": "37.0.0-alpha.0",
   "description": "Clipboard integration feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -12,30 +12,30 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^36.0.1",
-    "@ckeditor/ckeditor5-engine": "^36.0.1",
-    "@ckeditor/ckeditor5-utils": "^36.0.1",
-    "@ckeditor/ckeditor5-widget": "^36.0.1",
-    "lodash-es": "^4.17.11"
+    "@ckeditor/ckeditor5-core": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-engine": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-utils": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-widget": "^37.0.0-alpha.0",
+    "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-alignment": "^36.0.1",
-    "@ckeditor/ckeditor5-basic-styles": "^36.0.1",
-    "@ckeditor/ckeditor5-block-quote": "^36.0.1",
-    "@ckeditor/ckeditor5-cloud-services": "^36.0.1",
-    "@ckeditor/ckeditor5-code-block": "^36.0.1",
-    "@ckeditor/ckeditor5-easy-image": "^36.0.1",
-    "@ckeditor/ckeditor5-editor-classic": "^36.0.1",
-    "@ckeditor/ckeditor5-enter": "^36.0.1",
-    "@ckeditor/ckeditor5-horizontal-line": "^36.0.1",
-    "@ckeditor/ckeditor5-image": "^36.0.1",
-    "@ckeditor/ckeditor5-link": "^36.0.1",
-    "@ckeditor/ckeditor5-page-break": "^36.0.1",
-    "@ckeditor/ckeditor5-paragraph": "^36.0.1",
-    "@ckeditor/ckeditor5-paste-from-office": "^36.0.1",
-    "@ckeditor/ckeditor5-remove-format": "^36.0.1",
-    "@ckeditor/ckeditor5-table": "^36.0.1",
-    "@ckeditor/ckeditor5-typing": "^36.0.1",
+    "@ckeditor/ckeditor5-alignment": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-basic-styles": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-block-quote": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-cloud-services": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-code-block": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-easy-image": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-editor-classic": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-enter": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-horizontal-line": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-image": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-link": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-page-break": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-paragraph": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-paste-from-office": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-remove-format": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-table": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-typing": "^37.0.0-alpha.0",
     "typescript": "^4.8.4",
     "webpack": "^5.58.1",
     "webpack-cli": "^4.9.0"
@@ -64,5 +64,6 @@
   "scripts": {
     "build": "tsc -p ./tsconfig.release.json",
     "postversion": "npm run build"
-  }
+  },
+  "types": "src/index.d.ts"
 }

package/src/clipboard.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module clipboard/clipboard
+ */
+import { Plugin, type PluginDependencies } from '@ckeditor/ckeditor5-core';
+/**
+ * The clipboard feature.
+ *
+ * Read more about the clipboard integration in the {@glink framework/deep-dive/clipboard clipboard deep-dive} guide.
+ *
+ * This is a "glue" plugin which loads the following plugins:
+ * * {@link module:clipboard/clipboardpipeline~ClipboardPipeline}
+ * * {@link module:clipboard/dragdrop~DragDrop}
+ * * {@link module:clipboard/pasteplaintext~PastePlainText}
+ */
+export default class Clipboard extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): 'Clipboard';
+    /**
+     * @inheritDoc
+     */
+    static get requires(): PluginDependencies;
+}
+declare module '@ckeditor/ckeditor5-core' {
+    interface PluginsMap {
+        [Clipboard.pluginName]: Clipboard;
+    }
+}

package/src/clipboard.js

@@ -12,7 +12,7 @@ import PastePlainText from './pasteplaintext';
 /**
  * The clipboard feature.
  *
- * Read more about the clipboard integration in the {@glink framework/guides/deep-dive/clipboard clipboard deep-dive guide}.
+ * Read more about the clipboard integration in the {@glink framework/deep-dive/clipboard clipboard deep-dive} guide.
  *
  * This is a "glue" plugin which loads the following plugins:
  * * {@link module:clipboard/clipboardpipeline~ClipboardPipeline}

package/src/clipboardobserver.d.ts

@@ -0,0 +1,311 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import { DataTransfer, DomEventObserver, type DomEventData, type View, type ViewDocumentFragment, type ViewElement, type ViewRange } from '@ckeditor/ckeditor5-engine';
+/**
+ * Clipboard events observer.
+ *
+ * Fires the following events:
+ *
+ * * {@link module:engine/view/document~Document#event:clipboardInput},
+ * * {@link module:engine/view/document~Document#event:paste},
+ * * {@link module:engine/view/document~Document#event:copy},
+ * * {@link module:engine/view/document~Document#event:cut},
+ * * {@link module:engine/view/document~Document#event:drop},
+ * * {@link module:engine/view/document~Document#event:dragover},
+ * * {@link module:engine/view/document~Document#event:dragging},
+ * * {@link module:engine/view/document~Document#event:dragstart},
+ * * {@link module:engine/view/document~Document#event:dragend},
+ * * {@link module:engine/view/document~Document#event:dragenter},
+ * * {@link module:engine/view/document~Document#event:dragleave}.
+ *
+ * **Note**: This observer is not available by default (ckeditor5-engine does not add it on its own).
+ * To make it available, it needs to be added to {@link module:engine/view/document~Document} by using
+ * the {@link module:engine/view/view~View#addObserver `View#addObserver()`} method. Alternatively, you can load the
+ * {@link module:clipboard/clipboard~Clipboard} plugin which adds this observer automatically (because it uses it).
+ */
+export default class ClipboardObserver extends DomEventObserver<'paste' | 'copy' | 'cut' | 'drop' | 'dragover' | 'dragstart' | 'dragend' | 'dragenter' | 'dragleave', ClipboardEventData> {
+    readonly domEventType: readonly ["paste", "copy", "cut", "drop", "dragover", "dragstart", "dragend", "dragenter", "dragleave"];
+    constructor(view: View);
+    onDomEvent(domEvent: ClipboardEvent | DragEvent): void;
+}
+/**
+ * The data of 'paste', 'copy', 'cut', 'drop', 'dragover', 'dragstart', 'dragend', 'dragenter' and 'dragleave' events.
+ */
+export interface ClipboardEventData {
+    /**
+     * The data transfer instance.
+     */
+    dataTransfer: DataTransfer;
+    /**
+     * The position into which the content is dropped.
+     */
+    dropRange?: ViewRange | null;
+}
+/**
+ * Fired as a continuation of the {@link #event:paste} and {@link #event:drop} events.
+ *
+ * It is a part of the {@glink framework/deep-dive/clipboard#input-pipeline clipboard input pipeline}.
+ *
+ * This event carries a `dataTransfer` object which comes from the clipboard and whose content should be processed
+ * and inserted into the editor.
+ *
+ * **Note**: This event is not available by default. To make it available, {@link module:clipboard/clipboardobserver~ClipboardObserver}
+ * needs to be added to the {@link module:engine/view/document~Document} by using the {@link module:engine/view/view~View#addObserver}
+ * method. This is usually done by the {@link module:clipboard/clipboard~Clipboard} plugin, but if for some reason it is not loaded,
+ * the observer must be added manually.
+ *
+ * @see module:clipboard/clipboardobserver~ClipboardObserver
+ * @see module:clipboard/clipboard~Clipboard
+ *
+ * @eventName clipboardInput
+ * @param data The event data.
+ */
+export type ViewDocumentClipboardInputEvent = {
+    name: 'clipboardInput';
+    args: [data: DomEventData<ClipboardEvent | DragEvent> & ClipboardInputEventData];
+};
+/**
+ * The value of the {@link module:engine/view/document~Document#event:paste},
+ * {@link module:engine/view/document~Document#event:copy} and {@link module:engine/view/document~Document#event:cut} events.
+ *
+ * In order to access the clipboard data, use the `dataTransfer` property.
+ */
+export interface ClipboardInputEventData {
+    /**
+     * Data transfer instance.
+     */
+    dataTransfer: DataTransfer;
+    /**
+     * Whether the event was triggered by a paste or a drop operation.
+     */
+    method: 'paste' | 'drop';
+    /**
+     * The tree view element representing the target.
+     */
+    target: ViewElement;
+    /**
+     * The ranges which are the target of the operation (usually – into which the content should be inserted).
+     * If the clipboard input was triggered by a paste operation, this property is not set. If by a drop operation,
+     * then it is the drop position (which can be different than the selection at the moment of the drop).
+     */
+    targetRanges: Array<ViewRange> | null;
+    /**
+     * The content of clipboard input.
+     */
+    content?: ViewDocumentFragment;
+}
+/**
+ * Fired when the user drags the content over one of the editing roots of the editor.
+ *
+ * Introduced by {@link module:clipboard/clipboardobserver~ClipboardObserver}.
+ *
+ * **Note**: This event is not available by default. To make it available, {@link module:clipboard/clipboardobserver~ClipboardObserver}
+ * needs to be added to the {@link module:engine/view/document~Document} by using the {@link module:engine/view/view~View#addObserver}
+ * method. This is usually done by the {@link module:clipboard/clipboard~Clipboard} plugin, but if for some reason it is not loaded,
+ * the observer must be added manually.
+ *
+ * @see module:engine/view/document~Document#event:clipboardInput
+ *
+ * @eventName dragover
+ * @param data The event data.
+ */
+export type ViewDocumentDragOverEvent = {
+    name: 'dragover';
+    args: [data: DomEventData<DragEvent> & ClipboardEventData];
+};
+/**
+ * Fired when the user dropped the content into one of the editing roots of the editor.
+ *
+ * Introduced by {@link module:clipboard/clipboardobserver~ClipboardObserver}.
+ *
+ * **Note**: This event is not available by default. To make it available, {@link module:clipboard/clipboardobserver~ClipboardObserver}
+ * needs to be added to the {@link module:engine/view/document~Document} by using the {@link module:engine/view/view~View#addObserver}
+ * method. This is usually done by the {@link module:clipboard/clipboard~Clipboard} plugin, but if for some reason it is not loaded,
+ * the observer must be added manually.
+ *
+ * @see module:engine/view/document~Document#event:clipboardInput
+ *
+ * @eventName drop
+ * @param data The event data.
+ */
+export type ViewDocumentDropEvent = {
+    name: 'drop';
+    args: [data: DomEventData<DragEvent> & ClipboardEventData];
+};
+/**
+ * Fired when the user pasted the content into one of the editing roots of the editor.
+ *
+ * Introduced by {@link module:clipboard/clipboardobserver~ClipboardObserver}.
+ *
+ * **Note**: This event is not available by default. To make it available, {@link module:clipboard/clipboardobserver~ClipboardObserver}
+ * needs to be added to the {@link module:engine/view/document~Document} by using the {@link module:engine/view/view~View#addObserver}
+ * method. This is usually done by the {@link module:clipboard/clipboard~Clipboard} plugin, but if for some reason it is not loaded,
+ * the observer must be added manually.
+ *
+ * @see module:engine/view/document~Document#event:clipboardInput
+ *
+ * @eventName paste
+ * @param {module:clipboard/clipboardobserver~ClipboardEventData} data The event data.
+ */
+export type ViewDocumentPasteEvent = {
+    name: 'paste';
+    args: [data: DomEventData<ClipboardEvent> & ClipboardEventData];
+};
+/**
+ * Fired when the user copied the content from one of the editing roots of the editor.
+ *
+ * Introduced by {@link module:clipboard/clipboardobserver~ClipboardObserver}.
+ *
+ * **Note**: This event is not available by default. To make it available, {@link module:clipboard/clipboardobserver~ClipboardObserver}
+ * needs to be added to the {@link module:engine/view/document~Document} by using the {@link module:engine/view/view~View#addObserver}
+ * method. This is usually done by the {@link module:clipboard/clipboard~Clipboard} plugin, but if for some reason it is not loaded,
+ * the observer must be added manually.
+ *
+ * @see module:clipboard/clipboardobserver~ClipboardObserver
+ *
+ * @eventName copy
+ * @param data The event data.
+ */
+export type ViewDocumentCopyEvent = {
+    name: 'copy';
+    args: [data: DomEventData<ClipboardEvent> & ClipboardEventData];
+};
+/**
+ * Fired when the user cut the content from one of the editing roots of the editor.
+ *
+ * Introduced by {@link module:clipboard/clipboardobserver~ClipboardObserver}.
+ *
+ * **Note**: This event is not available by default. To make it available, {@link module:clipboard/clipboardobserver~ClipboardObserver}
+ * needs to be added to the {@link module:engine/view/document~Document} by using the {@link module:engine/view/view~View#addObserver}
+ * method. This is usually done by the {@link module:clipboard/clipboard~Clipboard} plugin, but if for some reason it is not loaded,
+ * the observer must be added manually.
+ *
+ * @see module:clipboard/clipboardobserver~ClipboardObserver
+ *
+ * @eventName cut
+ * @param data The event data.
+ */
+export type ViewDocumentCutEvent = {
+    name: 'cut';
+    args: [data: DomEventData<ClipboardEvent> & ClipboardEventData];
+};
+/**
+ * Fired as a continuation of the {@link #event:dragover} event.
+ *
+ * It is a part of the {@glink framework/deep-dive/clipboard#input-pipeline clipboard input pipeline}.
+ *
+ * This event carries a `dataTransfer` object which comes from the clipboard and whose content should be processed
+ * and inserted into the editor.
+ *
+ * **Note**: This event is not available by default. To make it available, {@link module:clipboard/clipboardobserver~ClipboardObserver}
+ * needs to be added to the {@link module:engine/view/document~Document} by using the {@link module:engine/view/view~View#addObserver}
+ * method. This is usually done by the {@link module:clipboard/clipboard~Clipboard} plugin, but if for some reason it is not loaded,
+ * the observer must be added manually.
+ *
+ * @see module:clipboard/clipboardobserver~ClipboardObserver
+ * @see module:clipboard/clipboard~Clipboard
+ *
+ * @eventName dragging
+ * @param data The event data.
+ */
+export type ViewDocumentDraggingEvent = {
+    name: 'dragging';
+    args: [data: DomEventData<DragEvent> & DraggingEventData];
+};
+export interface DraggingEventData {
+    /**
+     * The data transfer instance.
+     */
+    dataTransfer: DataTransfer;
+    /**
+     * Whether the event was triggered by a paste or a drop operation.
+     */
+    method: 'dragover';
+    /**
+     * The tree view element representing the target.
+     */
+    target: Element;
+    /**
+     * Ranges which are the target of the operation (usually – into which the content should be inserted).
+     * It is the drop position (which can be different than the selection at the moment of drop).
+     */
+    targetRanges: Array<ViewRange> | null;
+}
+/**
+ * Fired when the user starts dragging the content in one of the editing roots of the editor.
+ *
+ * Introduced by {@link module:clipboard/clipboardobserver~ClipboardObserver}.
+ *
+ * **Note**: This event is not available by default. To make it available, {@link module:clipboard/clipboardobserver~ClipboardObserver}
+ * needs to be added to the {@link module:engine/view/document~Document} by using the {@link module:engine/view/view~View#addObserver}
+ * method. This is usually done by the {@link module:clipboard/clipboard~Clipboard} plugin, but if for some reason it is not loaded,
+ * the observer must be added manually.
+ *
+ * @see module:engine/view/document~Document#event:clipboardInput
+ *
+ * @eventName dragstart
+ * @param data The event data.
+ */
+export type ViewDocumentDragStartEvent = {
+    name: 'dragstart';
+    args: [data: DomEventData<DragEvent> & ClipboardEventData];
+};
+/**
+ * Fired when the user ended dragging the content.
+ *
+ * Introduced by {@link module:clipboard/clipboardobserver~ClipboardObserver}.
+ *
+ * **Note**: This event is not available by default. To make it available, {@link module:clipboard/clipboardobserver~ClipboardObserver}
+ * needs to be added to the {@link module:engine/view/document~Document} by using the {@link module:engine/view/view~View#addObserver}
+ * method. This is usually done by the {@link module:clipboard/clipboard~Clipboard} plugin, but if for some reason it is not loaded,
+ * the observer must be added manually.
+ *
+ * @see module:engine/view/document~Document#event:clipboardInput
+ *
+ * @eventName dragend
+ * @param data The event data.
+ */
+export type ViewDocumentDragEndEvent = {
+    name: 'dragend';
+    args: [data: DomEventData<DragEvent> & ClipboardEventData];
+};
+/**
+ * Fired when the user drags the content into one of the editing roots of the editor.
+ *
+ * Introduced by {@link module:clipboard/clipboardobserver~ClipboardObserver}.
+ *
+ * **Note**: This event is not available by default. To make it available, {@link module:clipboard/clipboardobserver~ClipboardObserver}
+ * needs to be added to the {@link module:engine/view/document~Document} by using the {@link module:engine/view/view~View#addObserver}
+ * method. This is usually done by the {@link module:clipboard/clipboard~Clipboard} plugin, but if for some reason it is not loaded,
+ * the observer must be added manually.
+ *
+ * @see module:engine/view/document~Document#event:clipboardInput
+ *
+ * @eventName dragenter
+ * @param data The event data.
+ */
+export type ViewDocumentDragEnterEvent = {
+    name: 'dragenter';
+    args: [data: DomEventData<DragEvent> & ClipboardEventData];
+};
+/**
+ * Fired when the user drags the content out of one of the editing roots of the editor.
+ *
+ * Introduced by {@link module:clipboard/clipboardobserver~ClipboardObserver}.
+ *
+ * **Note**: This event is not available by default. To make it available, {@link module:clipboard/clipboardobserver~ClipboardObserver}
+ * needs to be added to the {@link module:engine/view/document~Document} by using the {@link module:engine/view/view~View#addObserver}
+ * method. This is usually done by the {@link module:clipboard/clipboard~Clipboard} plugin, but if for some reason it is not loaded,
+ * the observer must be added manually.
+ *
+ * @see module:engine/view/document~Document#event:clipboardInput
+ *
+ * @eventName dragleave
+ * @param data The event data.
+ */
+export type ViewDocumentDragLeaveEvent = {
+    name: 'dragleave';
+    args: [data: DomEventData<DragEvent> & ClipboardEventData];
+};

package/src/clipboardobserver.js

@@ -32,8 +32,10 @@ import { DataTransfer, DomEventObserver } from '@ckeditor/ckeditor5-engine';
 export default class ClipboardObserver extends DomEventObserver {
     constructor(view) {
         super(view);
+        this.domEventType = [
+            'paste', 'copy', 'cut', 'drop', 'dragover', 'dragstart', 'dragend', 'dragenter', 'dragleave'
+        ];
         const viewDocument = this.document;
-        this.domEventType = ['paste', 'copy', 'cut', 'drop', 'dragover', 'dragstart', 'dragend', 'dragenter', 'dragleave'];
         this.listenTo(viewDocument, 'paste', handleInput('clipboardInput'), { priority: 'low' });
         this.listenTo(viewDocument, 'drop', handleInput('clipboardInput'), { priority: 'low' });
         this.listenTo(viewDocument, 'dragover', handleInput('dragging'), { priority: 'low' });

package/src/clipboardpipeline.d.ts

@@ -0,0 +1,226 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module clipboard/clipboardpipeline
+ */
+import { Plugin } from '@ckeditor/ckeditor5-core';
+import type { DataTransfer, DocumentFragment, Range, ViewDocumentFragment, ViewRange } from '@ckeditor/ckeditor5-engine';
+/**
+ * The clipboard pipeline feature. It is responsible for intercepting the `paste` and `drop` events and
+ * passing the pasted content through a series of events in order to insert it into the editor's content.
+ * It also handles the `cut` and `copy` events to fill the native clipboard with the serialized editor's data.
+ *
+ * # Input pipeline
+ *
+ * The behavior of the default handlers (all at a `low` priority):
+ *
+ * ## Event: `paste` or `drop`
+ *
+ * 1. Translates the event data.
+ * 2. Fires the {@link module:engine/view/document~Document#event:clipboardInput `view.Document#clipboardInput`} event.
+ *
+ * ## Event: `view.Document#clipboardInput`
+ *
+ * 1. If the `data.content` event field is already set (by some listener on a higher priority), it takes this content and fires the event
+ *    from the last point.
+ * 2. Otherwise, it retrieves `text/html` or `text/plain` from `data.dataTransfer`.
+ * 3. Normalizes the raw data by applying simple filters on string data.
+ * 4. Processes the raw data to {@link module:engine/view/documentfragment~DocumentFragment `view.DocumentFragment`} with the
+ *    {@link module:engine/controller/datacontroller~DataController#htmlProcessor `DataController#htmlProcessor`}.
+ * 5. Fires the {@link module:clipboard/clipboardpipeline~ClipboardPipeline#event:inputTransformation
+ *   `ClipboardPipeline#inputTransformation`} event with the view document fragment in the `data.content` event field.
+ *
+ * ## Event: `ClipboardPipeline#inputTransformation`
+ *
+ * 1. Converts {@link module:engine/view/documentfragment~DocumentFragment `view.DocumentFragment`} from the `data.content` field to
+ *    {@link module:engine/model/documentfragment~DocumentFragment `model.DocumentFragment`}.
+ * 2. Fires the {@link module:clipboard/clipboardpipeline~ClipboardPipeline#event:contentInsertion `ClipboardPipeline#contentInsertion`}
+ *    event with the model document fragment in the `data.content` event field.
+ *    **Note**: The `ClipboardPipeline#contentInsertion` event is fired within a model change block to allow other handlers
+ *    to run in the same block without post-fixers called in between (i.e., the selection post-fixer).
+ *
+ * ## Event: `ClipboardPipeline#contentInsertion`
+ *
+ * 1. Calls {@link module:engine/model/model~Model#insertContent `model.insertContent()`} to insert `data.content`
+ *    at the current selection position.
+ *
+ * # Output pipeline
+ *
+ * The behavior of the default handlers (all at a `low` priority):
+ *
+ * ## Event: `copy`, `cut` or `dragstart`
+ *
+ * 1. Retrieves the selected {@link module:engine/model/documentfragment~DocumentFragment `model.DocumentFragment`} by calling
+ *    {@link module:engine/model/model~Model#getSelectedContent `model#getSelectedContent()`}.
+ * 2. Converts the model document fragment to {@link module:engine/view/documentfragment~DocumentFragment `view.DocumentFragment`}.
+ * 3. Fires the {@link module:engine/view/document~Document#event:clipboardOutput `view.Document#clipboardOutput`} event
+ *    with the view document fragment in the `data.content` event field.
+ *
+ * ## Event: `view.Document#clipboardOutput`
+ *
+ * 1. Processes `data.content` to HTML and plain text with the
+ *    {@link module:engine/controller/datacontroller~DataController#htmlProcessor `DataController#htmlProcessor`}.
+ * 2. Updates the `data.dataTransfer` data for `text/html` and `text/plain` with the processed data.
+ * 3. For the `cut` method, calls {@link module:engine/model/model~Model#deleteContent `model.deleteContent()`}
+ *    on the current selection.
+ *
+ * Read more about the clipboard integration in the {@glink framework/deep-dive/clipboard clipboard deep-dive} guide.
+ */
+export default class ClipboardPipeline extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): 'ClipboardPipeline';
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * The clipboard paste pipeline.
+     */
+    private _setupPasteDrop;
+    /**
+     * The clipboard copy/cut pipeline.
+     */
+    private _setupCopyCut;
+}
+/**
+ * Fired with the `content`, `dataTransfer`, `method`, and `targetRanges` properties:
+ *
+ * * The `content` which comes from the clipboard (it was pasted or dropped) should be processed in order to be inserted into the editor.
+ * * The `dataTransfer` object is available in case the transformation functions need access to the raw clipboard data.
+ * * The `method` indicates the original DOM event (for example `'drop'` or `'paste'`).
+ * * The `targetRanges` property is an array of view ranges (it is available only for `'drop'`).
+ *
+ * It is a part of the {@glink framework/deep-dive/clipboard#input-pipeline clipboard input pipeline}.
+ *
+ * **Note**: You should not stop this event if you want to change the input data. You should modify the `content` property instead.
+ *
+ * @see module:clipboard/clipboardobserver~ClipboardObserver
+ * @see module:clipboard/clipboardpipeline~ClipboardPipeline
+ *
+ * @eventName inputTransformation
+ * @param data The event data.
+ */
+export type ClipboardInputTransformationEvent = {
+    name: 'inputTransformation';
+    args: [data: ClipboardInputTransformationData];
+};
+/**
+ * The data of 'inputTransformation' event.
+ */
+export interface ClipboardInputTransformationData {
+    /**
+     * The event data.
+     * The content to be inserted into the editor. It can be modified by event listeners. Read more about the clipboard pipelines in
+     * the {@glink framework/deep-dive/clipboard clipboard deep-dive} guide.
+     */
+    content: ViewDocumentFragment;
+    /**
+     * The data transfer instance.
+     */
+    dataTransfer: DataTransfer;
+    /**
+     * The target drop ranges.
+     */
+    targetRanges: Array<ViewRange> | null;
+    /**
+     * Whether the event was triggered by a paste or a drop operation.
+     */
+    method: 'paste' | 'drop';
+}
+/**
+ * Fired with the `content`, `dataTransfer`, `method`, and `targetRanges` properties:
+ *
+ * * The `content` which comes from the clipboard (was pasted or dropped) should be processed in order to be inserted into the editor.
+ * * The `dataTransfer` object is available in case the transformation functions need access to the raw clipboard data.
+ * * The `method` indicates the original DOM event (for example `'drop'` or `'paste'`).
+ * * The `targetRanges` property is an array of view ranges (it is available only for `'drop'`).
+ *
+ * Event handlers can modify the content according to the final insertion position.
+ *
+ * It is a part of the {@glink framework/deep-dive/clipboard#input-pipeline clipboard input pipeline}.
+ *
+ * **Note**: You should not stop this event if you want to change the input data. You should modify the `content` property instead.
+ *
+ * @see module:clipboard/clipboardobserver~ClipboardObserver
+ * @see module:clipboard/clipboardpipeline~ClipboardPipeline
+ * @see module:clipboard/clipboardpipeline~ClipboardPipeline#event:inputTransformation
+ *
+ * @eventName contentInsertion
+ * @param data The event data.
+ */
+export type ClipboardContentInsertionEvent = {
+    name: 'contentInsertion';
+    args: [data: ClipboardContentInsertionData];
+};
+/**
+ * The data of 'contentInsertion' event.
+ */
+export interface ClipboardContentInsertionData {
+    /**
+     * The content to be inserted into the editor.
+     * Read more about the clipboard pipelines in the {@glink framework/deep-dive/clipboard clipboard deep-dive} guide.
+     */
+    content: DocumentFragment;
+    /**
+     * Whether the event was triggered by a paste or a drop operation.
+     */
+    method: 'paste' | 'drop';
+    /**
+     * The data transfer instance.
+     */
+    dataTransfer: DataTransfer;
+    /**
+     * The target drop ranges.
+     */
+    targetRanges: Array<ViewRange> | null;
+    /**
+     * The result of the `model.insertContent()` call
+     * (inserted by the event handler at a low priority).
+     */
+    resultRange?: Range;
+}
+/**
+ * Fired on {@link module:engine/view/document~Document#event:copy} and {@link module:engine/view/document~Document#event:cut}
+ * with a copy of the selected content. The content can be processed before it ends up in the clipboard.
+ *
+ * It is a part of the {@glink framework/deep-dive/clipboard#output-pipeline clipboard output pipeline}.
+ *
+ * @see module:clipboard/clipboardobserver~ClipboardObserver
+ * @see module:clipboard/clipboardpipeline~ClipboardPipeline
+ *
+ * @eventName clipboardOutput
+ * @param data The event data.
+ */
+export type ClipboardOutputEvent = {
+    name: 'clipboardOutput';
+    args: [data: ClipboardOutputEventData];
+};
+/**
+ * The value of the 'clipboardOutput' event.
+ */
+export interface ClipboardOutputEventData {
+    /**
+     * The data transfer instance.
+     *
+     * @readonly
+     */
+    dataTransfer: DataTransfer;
+    /**
+     * Content to be put into the clipboard. It can be modified by the event listeners.
+     * Read more about the clipboard pipelines in the {@glink framework/deep-dive/clipboard clipboard deep-dive} guide.
+     */
+    content: ViewDocumentFragment;
+    /**
+     * Whether the event was triggered by a copy or cut operation.
+     */
+    method: 'copy' | 'cut' | 'dragstart';
+}
+declare module '@ckeditor/ckeditor5-core' {
+    interface PluginsMap {
+        [ClipboardPipeline.pluginName]: ClipboardPipeline;
+    }
+}

package/src/clipboardpipeline.js

@@ -109,7 +109,7 @@ import viewToPlainText from './utils/viewtoplaintext';
  * 3. For the `cut` method, calls {@link module:engine/model/model~Model#deleteContent `model.deleteContent()`}
  *    on the current selection.
  *
- * Read more about the clipboard integration in the {@glink framework/guides/deep-dive/clipboard clipboard deep-dive guide}.
+ * Read more about the clipboard integration in the {@glink framework/deep-dive/clipboard clipboard deep-dive} guide.
  */
 export default class ClipboardPipeline extends Plugin {
     /**

package/src/dragdrop.d.ts

@@ -0,0 +1,103 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module clipboard/dragdrop
+ */
+import { Plugin, type PluginDependencies } from '@ckeditor/ckeditor5-core';
+import '../theme/clipboard.css';
+/**
+ * The drag and drop feature. It works on top of the {@link module:clipboard/clipboardpipeline~ClipboardPipeline}.
+ *
+ * Read more about the clipboard integration in the {@glink framework/deep-dive/clipboard clipboard deep-dive} guide.
+ */
+export default class DragDrop extends Plugin {
+    /**
+     * The live range over the original content that is being dragged.
+     */
+    private _draggedRange;
+    /**
+     * The UID of current dragging that is used to verify if the drop started in the same editor as the drag start.
+     *
+     * **Note**: This is a workaround for broken 'dragend' events (they are not fired if the source text node got removed).
+     */
+    private _draggingUid;
+    /**
+     * The reference to the model element that currently has a `draggable` attribute set (it is set while dragging).
+     */
+    private _draggableElement;
+    /**
+     * A throttled callback updating the drop marker.
+     */
+    private _updateDropMarkerThrottled;
+    /**
+     * A delayed callback removing the drop marker.
+     */
+    private _removeDropMarkerDelayed;
+    /**
+     * A delayed callback removing draggable attributes.
+     */
+    private _clearDraggableAttributesDelayed;
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): 'DragDrop';
+    /**
+     * @inheritDoc
+     */
+    static get requires(): PluginDependencies;
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Drag and drop events handling.
+     */
+    private _setupDragging;
+    /**
+     * Integration with the `clipboardInput` event.
+     */
+    private _setupClipboardInputIntegration;
+    /**
+     * Integration with the `contentInsertion` event of the clipboard pipeline.
+     */
+    private _setupContentInsertionIntegration;
+    /**
+     * Adds listeners that add the `draggable` attribute to the elements while the mouse button is down so the dragging could start.
+     */
+    private _setupDraggableAttributeHandling;
+    /**
+     * Removes the `draggable` attribute from the element that was used for dragging.
+     */
+    private _clearDraggableAttributes;
+    /**
+     * Creates downcast conversion for the drop target marker.
+     */
+    private _setupDropMarker;
+    /**
+     * Updates the drop target marker to the provided range.
+     *
+     * @param targetRange The range to set the marker to.
+     */
+    private _updateDropMarker;
+    /**
+     * Removes the drop target marker.
+     */
+    private _removeDropMarker;
+    /**
+     * Deletes the dragged content from its original range and clears the dragging state.
+     *
+     * @param moved Whether the move succeeded.
+     */
+    private _finalizeDragging;
+}
+declare module '@ckeditor/ckeditor5-core' {
+    interface PluginsMap {
+        [DragDrop.pluginName]: DragDrop;
+    }
+}

package/src/dragdrop.js

@@ -94,7 +94,7 @@ import '../theme/clipboard.css';
 /**
  * The drag and drop feature. It works on top of the {@link module:clipboard/clipboardpipeline~ClipboardPipeline}.
  *
- * Read more about the clipboard integration in the {@glink framework/guides/deep-dive/clipboard clipboard deep-dive guide}.
+ * Read more about the clipboard integration in the {@glink framework/deep-dive/clipboard clipboard deep-dive} guide.
  */
 export default class DragDrop extends Plugin {
     /**
@@ -185,7 +185,8 @@ export default class DragDrop extends Plugin {
                 this._draggedRange = LiveRange.fromRange(model.createRangeOn(modelElement));
                 // Disable toolbars so they won't obscure the drop area.
                 if (editor.plugins.has('WidgetToolbarRepository')) {
-                    editor.plugins.get('WidgetToolbarRepository').forceDisabled('dragDrop');
+                    const widgetToolbarRepository = editor.plugins.get('WidgetToolbarRepository');
+                    widgetToolbarRepository.forceDisabled('dragDrop');
                 }
             }
             // If this was not a widget we should check if we need to drag some text content.
@@ -464,7 +465,8 @@ export default class DragDrop extends Plugin {
         this._removeDropMarker();
         this._clearDraggableAttributes();
         if (editor.plugins.has('WidgetToolbarRepository')) {
-            editor.plugins.get('WidgetToolbarRepository').clearForceDisabled('dragDrop');
+            const widgetToolbarRepository = editor.plugins.get('WidgetToolbarRepository');
+            widgetToolbarRepository.clearForceDisabled('dragDrop');
         }
         this._draggingUid = '';
         if (!this._draggedRange) {

package/src/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module clipboard
+ */
+export { default as Clipboard } from './clipboard';
+export { default as ClipboardPipeline, type ClipboardContentInsertionEvent, type ClipboardInputTransformationEvent, type ClipboardInputTransformationData, type ClipboardOutputEvent } from './clipboardpipeline';
+export type { ClipboardEventData } from './clipboardobserver';
+export { default as DragDrop } from './dragdrop';
+export { default as PastePlainText } from './pasteplaintext';
+export type { ViewDocumentClipboardInputEvent, ViewDocumentCopyEvent, ViewDocumentCutEvent } from './clipboardobserver';

package/src/pasteplaintext.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module clipboard/pasteplaintext
+ */
+import { Plugin, type PluginDependencies } from '@ckeditor/ckeditor5-core';
+/**
+ * The plugin detects the user's intention to paste plain text.
+ *
+ * For example, it detects the <kbd>Ctrl/Cmd</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd> keystroke.
+ */
+export default class PastePlainText extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): 'PastePlainText';
+    /**
+     * @inheritDoc
+     */
+    static get requires(): PluginDependencies;
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+}
+declare module '@ckeditor/ckeditor5-core' {
+    interface PluginsMap {
+        [PastePlainText.pluginName]: PastePlainText;
+    }
+}

package/src/utils/normalizeclipboarddata.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module clipboard/utils/normalizeclipboarddata
+ */
+/**
+ * Removes some popular browser quirks out of the clipboard data (HTML).
+ * Removes all HTML comments. These are considered an internal thing and it makes little sense if they leak into the editor data.
+ *
+ * @param data The HTML data to normalize.
+ * @returns Normalized HTML.
+ */
+export default function normalizeClipboardData(data: string): string;

package/src/utils/plaintexttohtml.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module clipboard/utils/plaintexttohtml
+ */
+/**
+ * Converts plain text to its HTML-ized version.
+ *
+ * @param text The plain text to convert.
+ * @returns HTML generated from the plain text.
+ */
+export default function plainTextToHtml(text: string): string;

package/src/utils/viewtoplaintext.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module clipboard/utils/viewtoplaintext
+ */
+import type { ViewDocumentFragment, ViewItem } from '@ckeditor/ckeditor5-engine';
+/**
+ * Converts {@link module:engine/view/item~Item view item} and all of its children to plain text.
+ *
+ * @param viewItem View item to convert.
+ * @returns Plain text representation of `viewItem`.
+ */
+export default function viewToPlainText(viewItem: ViewItem | ViewDocumentFragment): string;