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

package/dist/index.js

@@ -4,7 +4,7 @@
  */
 import { Plugin } from '@ckeditor/ckeditor5-core/dist/index.js';
 import { EventInfo, getRangeFromMouseEvent, uid, toUnit, delay, DomEmitterMixin, global, Rect, ResizeObserver, env, createElement } from '@ckeditor/ckeditor5-utils/dist/index.js';
-import { DomEventObserver, ViewDataTransfer, ModelRange, MouseObserver, ModelLiveRange } from '@ckeditor/ckeditor5-engine/dist/index.js';
+import { DomEventObserver, ViewDataTransfer, ModelRange, PointerObserver, ModelLiveRange } from '@ckeditor/ckeditor5-engine/dist/index.js';
 import { mapValues, throttle } from 'es-toolkit/compat';
 import { Widget, isWidget } from '@ckeditor/ckeditor5-widget/dist/index.js';
 import { View } from '@ckeditor/ckeditor5-ui/dist/index.js';
@@ -188,7 +188,8 @@ const listElements = [
     }
     // If item is a raw element, the only way to get its content is to render it and read the text directly from DOM.
     if (viewItem.is('rawElement')) {
-        const tempElement = document.createElement('div');
+        const doc = document.implementation.createHTMLDocument('');
+        const tempElement = doc.createElement('div');
         viewItem.render(tempElement, converter);
         text += domElementToPlainText(tempElement);
     }
@@ -1618,7 +1619,7 @@ const toPx = /* #__PURE__ */ toUnit('px');
         this._draggingUid = '';
         this._draggableElement = null;
         view.addObserver(ClipboardObserver);
-        view.addObserver(MouseObserver);
+        view.addObserver(PointerObserver);
         this._setupDragging();
         this._setupContentInsertionIntegration();
         this._setupClipboardInputIntegration();
@@ -1830,7 +1831,7 @@ const toPx = /* #__PURE__ */ toUnit('px');
         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) {
@@ -1861,7 +1862,7 @@ const toPx = /* #__PURE__ */ toUnit('px');
             }
         });
         // 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();
             }
@@ -1974,21 +1975,30 @@ const toPx = /* #__PURE__ */ toUnit('px');
         } 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);