@ckeditor/ckeditor5-clipboard 46.0.3 → 46.1.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-clipboard",
-  "version": "46.0.3",
+  "version": "46.1.0-alpha.0",
   "description": "Clipboard integration feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,11 +13,11 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "46.0.3",
-    "@ckeditor/ckeditor5-engine": "46.0.3",
-    "@ckeditor/ckeditor5-ui": "46.0.3",
-    "@ckeditor/ckeditor5-utils": "46.0.3",
-    "@ckeditor/ckeditor5-widget": "46.0.3",
+    "@ckeditor/ckeditor5-core": "46.1.0-alpha.0",
+    "@ckeditor/ckeditor5-engine": "46.1.0-alpha.0",
+    "@ckeditor/ckeditor5-ui": "46.1.0-alpha.0",
+    "@ckeditor/ckeditor5-utils": "46.1.0-alpha.0",
+    "@ckeditor/ckeditor5-widget": "46.1.0-alpha.0",
     "es-toolkit": "1.39.5"
   },
   "author": "CKSource (http://cksource.com/)",

package/src/dragdrop.js

@@ -6,7 +6,7 @@
  * @module clipboard/dragdrop
  */
 import { Plugin } from '@ckeditor/ckeditor5-core';
-import { ModelLiveRange, MouseObserver } from '@ckeditor/ckeditor5-engine';
+import { ModelLiveRange, PointerObserver } from '@ckeditor/ckeditor5-engine';
 import { Widget, isWidget } from '@ckeditor/ckeditor5-widget';
 import { env, uid, global, createElement, DomEmitterMixin, delay, Rect } from '@ckeditor/ckeditor5-utils';
 import { ClipboardPipeline } from './clipboardpipeline.js';
@@ -159,7 +159,7 @@ export class DragDrop extends Plugin {
         this._draggingUid = '';
         this._draggableElement = null;
         view.addObserver(ClipboardObserver);
-        view.addObserver(MouseObserver);
+        view.addObserver(PointerObserver);
         this._setupDragging();
         this._setupContentInsertionIntegration();
         this._setupClipboardInputIntegration();
@@ -355,7 +355,7 @@ export class DragDrop extends Plugin {
         const viewDocument = view.document;
         // Add the 'draggable' attribute to the widget while pressing the selection handle.
         // This is required for widgets to be draggable. In Chrome it will enable dragging text nodes.
-        this.listenTo(viewDocument, 'mousedown', (evt, data) => {
+        this.listenTo(viewDocument, 'pointerdown', (evt, data) => {
             // The lack of data can be caused by editor tests firing fake mouse events. This should not occur
             // in real-life scenarios but this greatly simplifies editor tests that would otherwise fail a lot.
             if (env.isAndroid || !data) {
@@ -386,7 +386,7 @@ export class DragDrop extends Plugin {
             }
         });
         // Remove the draggable attribute in case no dragging started (only mousedown + mouseup).
-        this.listenTo(viewDocument, 'mouseup', () => {
+        this.listenTo(viewDocument, 'pointerup', () => {
             if (!env.isAndroid) {
                 this._clearDraggableAttributesDelayed();
             }
@@ -506,22 +506,33 @@ export class DragDrop extends Plugin {
         else if (this._previewContainer.firstElementChild) {
             this._previewContainer.removeChild(this._previewContainer.firstElementChild);
         }
+        const preview = createElement(global.document, 'div');
+        preview.className = 'ck ck-content ck-clipboard-preview';
         const domRect = new Rect(domEditable);
-        // If domTarget is inside the editable root, browsers will display the preview correctly by themselves.
-        if (domEditable.contains(domTarget)) {
-            return;
-        }
         const domEditablePaddingLeft = parseFloat(computedStyle.paddingLeft);
-        const preview = createElement(global.document, 'div');
-        preview.className = 'ck ck-content';
-        preview.style.width = computedStyle.width;
-        preview.style.paddingLeft = `${domRect.left - clientX + domEditablePaddingLeft}px`;
-        /**
-         * Set white background in drag and drop preview if iOS.
-         * Check: https://github.com/ckeditor/ckeditor5/issues/15085
-         */
-        if (env.isiOS) {
-            preview.style.backgroundColor = 'white';
+        const domEditablePaddingRight = parseFloat(computedStyle.paddingRight);
+        const editableWidth = parseFloat(computedStyle.width) - domEditablePaddingLeft - domEditablePaddingRight;
+        // Dragging by the drag handle outside editable element.
+        if (!domEditable.contains(domTarget)) {
+            if (!env.isiOS) {
+                const offsetLeft = domRect.left - clientX + domEditablePaddingLeft;
+                preview.style.width = `${editableWidth + offsetLeft}px`;
+                preview.style.paddingLeft = `${offsetLeft}px`;
+            }
+            else {
+                // Without a padding as on iOS preview have a background and padding would be visible.
+                preview.style.width = `${editableWidth}px`;
+                preview.style.backgroundColor = 'var(--ck-color-base-background)';
+            }
+        }
+        else if (env.isiOS) {
+            // Custom preview for iOS.
+            preview.style.maxWidth = `${editableWidth}px`;
+            preview.style.backgroundColor = 'var(--ck-color-base-background)';
+        }
+        else {
+            // If domTarget is inside the editable root, browsers will display the preview correctly by themselves.
+            return;
         }
         view.domConverter.setContentOf(preview, dataTransfer.getData('text/html'));
         dataTransfer.setDragImage(preview, 0, 0);