@ckeditor/ckeditor5-clipboard 37.1.0 → 38.0.0-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-clipboard",
-  "version": "37.1.0",
+  "version": "38.0.0-rc.0",
   "description": "Clipboard integration feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -12,30 +12,48 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^37.1.0",
-    "@ckeditor/ckeditor5-engine": "^37.1.0",
-    "@ckeditor/ckeditor5-utils": "^37.1.0",
-    "@ckeditor/ckeditor5-widget": "^37.1.0",
+    "@ckeditor/ckeditor5-core": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-engine": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-ui": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-utils": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-widget": "^38.0.0-rc.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-alignment": "^37.1.0",
-    "@ckeditor/ckeditor5-basic-styles": "^37.1.0",
-    "@ckeditor/ckeditor5-block-quote": "^37.1.0",
-    "@ckeditor/ckeditor5-cloud-services": "^37.1.0",
-    "@ckeditor/ckeditor5-code-block": "^37.1.0",
-    "@ckeditor/ckeditor5-easy-image": "^37.1.0",
-    "@ckeditor/ckeditor5-editor-classic": "^37.1.0",
-    "@ckeditor/ckeditor5-enter": "^37.1.0",
-    "@ckeditor/ckeditor5-horizontal-line": "^37.1.0",
-    "@ckeditor/ckeditor5-image": "^37.1.0",
-    "@ckeditor/ckeditor5-link": "^37.1.0",
-    "@ckeditor/ckeditor5-page-break": "^37.1.0",
-    "@ckeditor/ckeditor5-paragraph": "^37.1.0",
-    "@ckeditor/ckeditor5-paste-from-office": "^37.1.0",
-    "@ckeditor/ckeditor5-remove-format": "^37.1.0",
-    "@ckeditor/ckeditor5-table": "^37.1.0",
-    "@ckeditor/ckeditor5-typing": "^37.1.0",
+    "@ckeditor/ckeditor5-alignment": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-autoformat": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-basic-styles": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-block-quote": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-cloud-services": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-code-block": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-easy-image": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-editor-balloon": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-editor-classic": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-editor-decoupled": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-enter": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-essentials": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-find-and-replace": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-font": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-heading": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-highlight": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-horizontal-line": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-html-embed": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-html-support": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-image": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-indent": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-language": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-link": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-list": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-mention": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-page-break": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-paragraph": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-paste-from-office": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-remove-format": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-source-editing": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-style": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-table": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-typing": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-undo": "^38.0.0-rc.0",
     "typescript": "^4.8.4",
     "webpack": "^5.58.1",
     "webpack-cli": "^4.9.0"

package/src/augmentation.d.ts

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

package/src/clipboardobserver.js

@@ -48,7 +48,8 @@ export default class ClipboardObserver extends DomEventObserver {
                     dataTransfer: data.dataTransfer,
                     method: evt.name,
                     targetRanges,
-                    target: data.target
+                    target: data.target,
+                    domEvent: data.domEvent
                 });
                 // If CKEditor handled the input, do not bubble the original event any further.
                 // This helps external integrations recognize that fact and act accordingly.

package/src/clipboardpipeline.js

@@ -136,10 +136,10 @@ export default class ClipboardPipeline extends Plugin {
         const model = editor.model;
         const view = editor.editing.view;
         const viewDocument = view.document;
-        // Pasting and dropping is disabled when editor is in the read-only mode.
-        // See: https://github.com/ckeditor/ckeditor5-clipboard/issues/26.
-        this.listenTo(viewDocument, 'clipboardInput', evt => {
-            if (editor.isReadOnly) {
+        // Pasting is disabled when selection is in non-editable place.
+        // Dropping is disabled in drag and drop handler.
+        this.listenTo(viewDocument, 'clipboardInput', (evt, data) => {
+            if (data.method == 'paste' && !editor.model.canEditAt(editor.model.document.selection)) {
                 evt.stop();
             }
         }, { priority: 'highest' });
@@ -223,9 +223,9 @@ export default class ClipboardPipeline extends Plugin {
         };
         this.listenTo(viewDocument, 'copy', onCopyCut, { priority: 'low' });
         this.listenTo(viewDocument, 'cut', (evt, data) => {
-            // Cutting is disabled when editor is in the read-only mode.
+            // Cutting is disabled when selection is in non-editable place.
             // See: https://github.com/ckeditor/ckeditor5-clipboard/issues/26.
-            if (editor.isReadOnly) {
+            if (!editor.model.canEditAt(editor.model.document.selection)) {
                 data.preventDefault();
             }
             else {

package/src/dragdrop.js

@@ -5,11 +5,10 @@
 /**
  * @module clipboard/dragdrop
  */
-/* globals setTimeout, clearTimeout */
 import { Plugin } from '@ckeditor/ckeditor5-core';
 import { LiveRange, MouseObserver } from '@ckeditor/ckeditor5-engine';
 import { Widget, isWidget } from '@ckeditor/ckeditor5-widget';
-import { env, uid } from '@ckeditor/ckeditor5-utils';
+import { env, uid, delay } from '@ckeditor/ckeditor5-utils';
 import ClipboardPipeline from './clipboardpipeline';
 import ClipboardObserver from './clipboardobserver';
 import { throttle } from 'lodash-es';
@@ -121,6 +120,10 @@ export default class DragDrop extends Plugin {
         this._updateDropMarkerThrottled = throttle(targetRange => this._updateDropMarker(targetRange), 40);
         this._removeDropMarkerDelayed = delay(() => this._removeDropMarker(), 40);
         this._clearDraggableAttributesDelayed = delay(() => this._clearDraggableAttributes(), 40);
+        if (editor.plugins.has('DragDropExperimental')) {
+            this.forceDisabled('DragDropExperimental');
+            return;
+        }
         view.addObserver(ClipboardObserver);
         view.addObserver(MouseObserver);
         this._setupDragging();
@@ -201,7 +204,8 @@ export default class DragDrop extends Plugin {
                 return;
             }
             this._draggingUid = uid();
-            data.dataTransfer.effectAllowed = this.isEnabled ? 'copyMove' : 'copy';
+            const canEditAtDraggedRange = this.isEnabled && editor.model.canEditAt(this._draggedRange);
+            data.dataTransfer.effectAllowed = canEditAtDraggedRange ? 'copyMove' : 'copy';
             data.dataTransfer.setData('application/ckeditor5-dragging-uid', this._draggingUid);
             const draggedSelection = model.createSelection(this._draggedRange.toRange());
             const content = editor.data.toView(model.getSelectedContent(draggedSelection));
@@ -210,7 +214,7 @@ export default class DragDrop extends Plugin {
                 content,
                 method: 'dragstart'
             });
-            if (!this.isEnabled) {
+            if (!canEditAtDraggedRange) {
                 this._draggedRange.detach();
                 this._draggedRange = null;
                 this._draggingUid = '';
@@ -243,6 +247,11 @@ export default class DragDrop extends Plugin {
             }
             this._removeDropMarkerDelayed.cancel();
             const targetRange = findDropTargetRange(editor, data.targetRanges, data.target);
+            // Do not drop if target place is not editable.
+            if (!editor.model.canEditAt(targetRange)) {
+                data.dataTransfer.dropEffect = 'none';
+                return;
+            }
             // If this is content being dragged from another editor, moving out of current editor instance
             // is not possible until 'dragend' event case will be fixed.
             if (!this._draggedRange) {
@@ -280,7 +289,7 @@ export default class DragDrop extends Plugin {
             // the target lands on the marker itself.
             this._removeDropMarker();
             /* istanbul ignore if -- @preserve */
-            if (!targetRange) {
+            if (!targetRange || !editor.model.canEditAt(targetRange)) {
                 this._finalizeDragging(false);
                 evt.stop();
                 return;
@@ -355,10 +364,13 @@ export default class DragDrop extends Plugin {
             // In Firefox this is not needed. In Safari it makes the whole editable draggable (not just textual content).
             // Disabled in read-only mode because draggable="true" + contenteditable="false" results
             // in not firing selectionchange event ever, which makes the selection stuck in read-only mode.
-            if (env.isBlink && !editor.isReadOnly && !draggableElement && !viewDocument.selection.isCollapsed) {
+            if (env.isBlink && !draggableElement && !viewDocument.selection.isCollapsed) {
                 const selectedElement = viewDocument.selection.getSelectedElement();
                 if (!selectedElement || !isWidget(selectedElement)) {
-                    draggableElement = viewDocument.selection.editableElement;
+                    const editableElement = viewDocument.selection.editableElement;
+                    if (editableElement && !editableElement.isReadOnly) {
+                        draggableElement = editableElement;
+                    }
                 }
             }
             if (draggableElement) {
@@ -617,23 +629,6 @@ function getFinalDropEffect(dataTransfer) {
     }
     return ['all', 'copyMove'].includes(dataTransfer.effectAllowed) ? 'move' : 'copy';
 }
-/**
- * Returns a function wrapper that will trigger a function after a specified wait time.
- * The timeout can be canceled by calling the cancel function on the returned wrapped function.
- * @param func The function to wrap.
- * @param wait The timeout in ms.
- */
-function delay(func, wait) {
-    let timer;
-    function delayed(...args) {
-        delayed.cancel();
-        timer = setTimeout(() => func(...args), wait);
-    }
-    delayed.cancel = () => {
-        clearTimeout(timer);
-    };
-    return delayed;
-}
 /**
  * Returns a widget element that should be dragged.
  */

package/src/dragdropblocktoolbar.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @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/dragdropblocktoolbar
+ */
+import { Plugin } from '@ckeditor/ckeditor5-core';
+/**
+ * Integration of an experimental block Drag and drop support with the block toolbar.
+ *
+ * @internal
+ */
+export default class DragDropBlockToolbar extends Plugin {
+    /**
+     * Whether current dragging is started by block toolbar button dragging.
+     */
+    private _isBlockDragging;
+    /**
+     * DOM Emitter.
+     */
+    private _domEmitter;
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): 'DragDropBlockToolbar';
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * The `dragstart` event handler.
+     */
+    private _handleBlockDragStart;
+    /**
+     * The `dragover` and `drop` event handler.
+     */
+    private _handleBlockDragging;
+    /**
+     * The `dragend` event handler.
+     */
+    private _handleBlockDragEnd;
+}

package/src/dragdropblocktoolbar.js

@@ -0,0 +1,114 @@
+/**
+ * @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/dragdropblocktoolbar
+ */
+/* istanbul ignore file -- @preserve */
+import { Plugin } from '@ckeditor/ckeditor5-core';
+import { env, global, DomEmitterMixin } from '@ckeditor/ckeditor5-utils';
+import ClipboardObserver from './clipboardobserver';
+/**
+ * Integration of an experimental block Drag and drop support with the block toolbar.
+ *
+ * @internal
+ */
+export default class DragDropBlockToolbar extends Plugin {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether current dragging is started by block toolbar button dragging.
+         */
+        this._isBlockDragging = false;
+        /**
+         * DOM Emitter.
+         */
+        this._domEmitter = new (DomEmitterMixin())();
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'DragDropBlockToolbar';
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        this.listenTo(editor, 'change:isReadOnly', (evt, name, isReadOnly) => {
+            if (isReadOnly) {
+                this.forceDisabled('readOnlyMode');
+                this._isBlockDragging = false;
+            }
+            else {
+                this.clearForceDisabled('readOnlyMode');
+            }
+        });
+        if (env.isAndroid) {
+            this.forceDisabled('noAndroidSupport');
+        }
+        if (editor.plugins.has('BlockToolbar')) {
+            const blockToolbar = editor.plugins.get('BlockToolbar');
+            const element = blockToolbar.buttonView.element;
+            element.setAttribute('draggable', 'true');
+            this._domEmitter.listenTo(element, 'dragstart', (evt, data) => this._handleBlockDragStart(data));
+            this._domEmitter.listenTo(global.document, 'dragover', (evt, data) => this._handleBlockDragging(data));
+            this._domEmitter.listenTo(global.document, 'drop', (evt, data) => this._handleBlockDragging(data));
+            this._domEmitter.listenTo(global.document, 'dragend', () => this._handleBlockDragEnd(), { useCapture: true });
+        }
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        this._domEmitter.stopListening();
+        return super.destroy();
+    }
+    /**
+     * The `dragstart` event handler.
+     */
+    _handleBlockDragStart(domEvent) {
+        if (!this.isEnabled) {
+            return;
+        }
+        const model = this.editor.model;
+        const selection = model.document.selection;
+        const blocks = Array.from(selection.getSelectedBlocks());
+        const draggedRange = model.createRange(model.createPositionBefore(blocks[0]), model.createPositionAfter(blocks[blocks.length - 1]));
+        model.change(writer => writer.setSelection(draggedRange));
+        this._isBlockDragging = true;
+        this.editor.editing.view.getObserver(ClipboardObserver).onDomEvent(domEvent);
+    }
+    /**
+     * The `dragover` and `drop` event handler.
+     */
+    _handleBlockDragging(domEvent) {
+        if (!this.isEnabled || !this._isBlockDragging) {
+            return;
+        }
+        const clientX = domEvent.clientX + 100;
+        const clientY = domEvent.clientY;
+        const target = document.elementFromPoint(clientX, clientY);
+        if (!target || !target.closest('.ck-editor__editable')) {
+            return;
+        }
+        this.editor.editing.view.getObserver(ClipboardObserver).onDomEvent({
+            ...domEvent,
+            type: domEvent.type,
+            dataTransfer: domEvent.dataTransfer,
+            target,
+            clientX,
+            clientY,
+            preventDefault: () => domEvent.preventDefault(),
+            stopPropagation: () => domEvent.stopPropagation()
+        });
+    }
+    /**
+     * The `dragend` event handler.
+     */
+    _handleBlockDragEnd() {
+        this._isBlockDragging = false;
+    }
+}

package/src/dragdropexperimental.d.ts

@@ -0,0 +1,101 @@
+/**
+ * @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/dragdropexperimental
+ */
+import { Plugin } from '@ckeditor/ckeditor5-core';
+import { Widget } from '@ckeditor/ckeditor5-widget';
+import ClipboardPipeline from './clipboardpipeline';
+import DragDropTarget from './dragdroptarget';
+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 DragDropExperimental 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 delayed callback removing draggable attributes.
+     */
+    private _clearDraggableAttributesDelayed;
+    /**
+     * Whether the dragged content can be dropped only in block context.
+     */
+    private _blockMode;
+    /**
+     * DOM Emitter.
+     */
+    private _domEmitter;
+    /**
+     * The DOM element used to generate dragged preview image.
+     */
+    private _previewContainer?;
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): 'DragDropExperimental';
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ClipboardPipeline, typeof Widget, typeof DragDropTarget];
+    /**
+     * @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;
+    /**
+     * Deletes the dragged content from its original range and clears the dragging state.
+     *
+     * @param moved Whether the move succeeded.
+     */
+    private _finalizeDragging;
+    /**
+     * Sets the dragged source range based on event target and document selection.
+     */
+    private _prepareDraggedRange;
+    /**
+     * Updates the dragged preview image.
+     */
+    private _updatePreview;
+}