@ckeditor/ckeditor5-clipboard 39.0.2 → 40.1.0

package/LICENSE.md

@@ -2,7 +2,7 @@ Software License Agreement
 ==========================
 
 **CKEditor&nbsp;5 clipboard feature** – https://github.com/ckeditor/ckeditor5-clipboard <br>
-Copyright (c) 2003-2023, [CKSource Holding sp. z o.o.](https://cksource.com) All rights reserved.
+Copyright (c) 2003–2023, [CKSource Holding sp. z o.o.](https://cksource.com) All rights reserved.
 
 Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html).
 
@@ -13,9 +13,9 @@ Where not otherwise indicated, all CKEditor content is authored by CKSource engi
 
 The following libraries are included in CKEditor under the [MIT license](https://opensource.org/licenses/MIT):
 
-* lodash - Copyright (c) JS Foundation and other contributors https://js.foundation/. Based on Underscore.js, copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors http://underscorejs.org/.
+* Lodash - Copyright (c) JS Foundation and other contributors https://js.foundation/. Based on Underscore.js, copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors http://underscorejs.org/.
 
 Trademarks
 ----------
 
-**CKEditor** is a trademark of [CKSource Holding sp. z o.o.](https://cksource.com) All other brand and product names are trademarks, registered trademarks or service marks of their respective holders.
+**CKEditor** is a trademark of [CKSource Holding sp. z o.o.](https://cksource.com) All other brand and product names are trademarks, registered trademarks, or service marks of their respective holders.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-clipboard",
-  "version": "39.0.2",
+  "version": "40.1.0",
   "description": "Clipboard integration feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -12,11 +12,11 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "39.0.2",
-    "@ckeditor/ckeditor5-engine": "39.0.2",
-    "@ckeditor/ckeditor5-ui": "39.0.2",
-    "@ckeditor/ckeditor5-utils": "39.0.2",
-    "@ckeditor/ckeditor5-widget": "39.0.2",
+    "@ckeditor/ckeditor5-core": "40.1.0",
+    "@ckeditor/ckeditor5-engine": "40.1.0",
+    "@ckeditor/ckeditor5-ui": "40.1.0",
+    "@ckeditor/ckeditor5-utils": "40.1.0",
+    "@ckeditor/ckeditor5-widget": "40.1.0",
     "lodash-es": "4.17.21"
   },
   "author": "CKSource (http://cksource.com/)",

package/src/augmentation.d.ts

@@ -2,14 +2,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
  */
-import type { Clipboard, ClipboardPipeline, PastePlainText, DragDrop, DragDropExperimental, DragDropTarget, DragDropBlockToolbar } from './index';
+import type { Clipboard, ClipboardPipeline, PastePlainText, DragDrop, DragDropTarget, DragDropBlockToolbar } from './index';
 declare module '@ckeditor/ckeditor5-core' {
     interface PluginsMap {
         [Clipboard.pluginName]: Clipboard;
         [ClipboardPipeline.pluginName]: ClipboardPipeline;
         [PastePlainText.pluginName]: PastePlainText;
         [DragDrop.pluginName]: DragDrop;
-        [DragDropExperimental.pluginName]: DragDropExperimental;
         [DragDropTarget.pluginName]: DragDropTarget;
         [DragDropBlockToolbar.pluginName]: DragDropBlockToolbar;
     }

package/src/clipboardpipeline.d.ts

@@ -6,7 +6,7 @@
  * @module clipboard/clipboardpipeline
  */
 import { Plugin } from '@ckeditor/ckeditor5-core';
-import type { DataTransfer, DocumentFragment, Range, ViewDocumentFragment, ViewRange } from '@ckeditor/ckeditor5-engine';
+import type { DataTransfer, DocumentFragment, Range, ViewDocumentFragment, ViewRange, Selection, DocumentSelection } 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.
@@ -77,6 +77,12 @@ export default class ClipboardPipeline extends Plugin {
      * @inheritDoc
      */
     init(): void;
+    /**
+     * Fires Clipboard `'outputTransformation'` event for given parameters.
+     *
+     * @internal
+     */
+    _fireOutputTransformationEvent(dataTransfer: DataTransfer, selection: Selection | DocumentSelection, method: 'copy' | 'cut' | 'dragstart'): void;
     /**
      * The clipboard paste pipeline.
      */
@@ -219,3 +225,36 @@ export interface ViewDocumentClipboardOutputEventData {
      */
     method: 'copy' | 'cut' | 'dragstart';
 }
+/**
+ * Fired on {@link module:engine/view/document~Document#event:copy}, {@link module:engine/view/document~Document#event:cut}
+ * and {@link module:engine/view/document~Document#event:dragstart}. 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}.
+ *
+ * @eventName ~ClipboardPipeline#outputTransformation
+ * @param data The event data.
+ */
+export type ClipboardOutputTransformationEvent = {
+    name: 'outputTransformation';
+    args: [data: ClipboardOutputTransformationData];
+};
+/**
+ * The value of the 'outputTransformation' event.
+ */
+export interface ClipboardOutputTransformationData {
+    /**
+     * 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: DocumentFragment;
+    /**
+     * Whether the event was triggered by a copy or cut operation.
+     */
+    method: 'copy' | 'cut' | 'dragstart';
+}

package/src/clipboardpipeline.js

@@ -40,11 +40,16 @@ import viewToPlainText from './utils/viewtoplaintext';
 //
 //              ┌──────────────────────┐          ┌──────────────────────┐
 //              │     view.Document    │          │     view.Document    │   Retrieves the selected model.DocumentFragment
-//              │         copy         │          │          cut         │   and converts it to view.DocumentFragment.
+//              │         copy         │          │          cut         │   and fires the `outputTransformation` event.
 //              └───────────┬──────────┘          └───────────┬──────────┘
 //                          │                                 │
 //                          └────────────────┌────────────────┘
 //                                           │
+//                               ┌───────────V───────────┐
+//                               │   ClipboardPipeline   │   Processes model.DocumentFragment and converts it to
+//                               │  outputTransformation │   view.DocumentFragment.
+//                               └───────────┬───────────┘
+//                                           │
 //                                 ┌─────────V────────┐
 //                                 │   view.Document  │   Processes view.DocumentFragment to text/html and text/plain
 //                                 │  clipboardOutput │   and stores the results in data.dataTransfer.
@@ -128,6 +133,19 @@ export default class ClipboardPipeline extends Plugin {
         this._setupPasteDrop();
         this._setupCopyCut();
     }
+    /**
+     * Fires Clipboard `'outputTransformation'` event for given parameters.
+     *
+     * @internal
+     */
+    _fireOutputTransformationEvent(dataTransfer, selection, method) {
+        const content = this.editor.model.getSelectedContent(selection);
+        this.fire('outputTransformation', {
+            dataTransfer,
+            content,
+            method
+        });
+    }
     /**
      * The clipboard paste pipeline.
      */
@@ -214,12 +232,7 @@ export default class ClipboardPipeline extends Plugin {
         const onCopyCut = (evt, data) => {
             const dataTransfer = data.dataTransfer;
             data.preventDefault();
-            const content = editor.data.toView(editor.model.getSelectedContent(modelDocument.selection));
-            viewDocument.fire('clipboardOutput', {
-                dataTransfer,
-                content,
-                method: evt.name
-            });
+            this._fireOutputTransformationEvent(dataTransfer, modelDocument.selection, evt.name);
         };
         this.listenTo(viewDocument, 'copy', onCopyCut, { priority: 'low' });
         this.listenTo(viewDocument, 'cut', (evt, data) => {
@@ -232,6 +245,14 @@ export default class ClipboardPipeline extends Plugin {
                 onCopyCut(evt, data);
             }
         }, { priority: 'low' });
+        this.listenTo(this, 'outputTransformation', (evt, data) => {
+            const content = editor.data.toView(data.content);
+            viewDocument.fire('clipboardOutput', {
+                dataTransfer: data.dataTransfer,
+                content,
+                method: data.method
+            });
+        }, { priority: 'low' });
         this.listenTo(viewDocument, 'clipboardOutput', (evt, data) => {
             if (!data.content.isEmpty) {
                 data.dataTransfer.setData('text/html', this.editor.data.htmlProcessor.toData(data.content));

package/src/dragdrop.d.ts

@@ -8,11 +8,15 @@
 import { Plugin } from '@ckeditor/ckeditor5-core';
 import { Widget } from '@ckeditor/ckeditor5-widget';
 import ClipboardPipeline from './clipboardpipeline';
+import DragDropTarget from './dragdroptarget';
+import DragDropBlockToolbar from './dragdropblocktoolbar';
 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.
+ *
+ * @internal
  */
 export default class DragDrop extends Plugin {
     /**
@@ -30,17 +34,21 @@ export default class DragDrop extends Plugin {
      */
     private _draggableElement;
     /**
-     * A throttled callback updating the drop marker.
+     * A delayed callback removing draggable attributes.
      */
-    private _updateDropMarkerThrottled;
+    private _clearDraggableAttributesDelayed;
     /**
-     * A delayed callback removing the drop marker.
+     * Whether the dragged content can be dropped only in block context.
      */
-    private _removeDropMarkerDelayed;
+    private _blockMode;
     /**
-     * A delayed callback removing draggable attributes.
+     * DOM Emitter.
      */
-    private _clearDraggableAttributesDelayed;
+    private _domEmitter;
+    /**
+     * The DOM element used to generate dragged preview image.
+     */
+    private _previewContainer?;
     /**
      * @inheritDoc
      */
@@ -48,7 +56,7 @@ export default class DragDrop extends Plugin {
     /**
      * @inheritDoc
      */
-    static get requires(): readonly [typeof ClipboardPipeline, typeof Widget];
+    static get requires(): readonly [typeof ClipboardPipeline, typeof Widget, typeof DragDropTarget, typeof DragDropBlockToolbar];
     /**
      * @inheritDoc
      */
@@ -78,23 +86,17 @@ export default class DragDrop extends Plugin {
      */
     private _clearDraggableAttributes;
     /**
-     * Creates downcast conversion for the drop target marker.
-     */
-    private _setupDropMarker;
-    /**
-     * Updates the drop target marker to the provided range.
+     * Deletes the dragged content from its original range and clears the dragging state.
      *
-     * @param targetRange The range to set the marker to.
+     * @param moved Whether the move succeeded.
      */
-    private _updateDropMarker;
+    private _finalizeDragging;
     /**
-     * Removes the drop target marker.
+     * Sets the dragged source range based on event target and document selection.
      */
-    private _removeDropMarker;
+    private _prepareDraggedRange;
     /**
-     * Deletes the dragged content from its original range and clears the dragging state.
-     *
-     * @param moved Whether the move succeeded.
+     * Updates the dragged preview image.
      */
-    private _finalizeDragging;
+    private _updatePreview;
 }