@ckeditor/ckeditor5-clipboard 0.0.0-nightly-20231011.0 → 0.0.0-nightly-20231013.0

package/package.json

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

package/src/dragdrop.js

@@ -242,7 +242,7 @@ export default class DragDrop extends Plugin {
                 return;
             }
             const { clientX, clientY } = data.domEvent;
-            dragDropTarget.updateDropMarker(data.target, data.targetRanges, clientX, clientY, this._blockMode);
+            dragDropTarget.updateDropMarker(data.target, data.targetRanges, clientX, clientY, this._blockMode, this._draggedRange);
             // 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) {
@@ -274,7 +274,7 @@ export default class DragDrop extends Plugin {
                 return;
             }
             const { clientX, clientY } = data.domEvent;
-            const targetRange = dragDropTarget.getFinalDropRange(data.target, data.targetRanges, clientX, clientY, this._blockMode);
+            const targetRange = dragDropTarget.getFinalDropRange(data.target, data.targetRanges, clientX, clientY, this._blockMode, this._draggedRange);
             if (!targetRange) {
                 this._finalizeDragging(false);
                 evt.stop();

package/src/dragdroptarget.d.ts

@@ -6,7 +6,7 @@
  * @module clipboard/dragdroptarget
  */
 import { Plugin } from '@ckeditor/ckeditor5-core';
-import { type Range, type ViewElement, type ViewRange } from '@ckeditor/ckeditor5-engine';
+import { type Range, type LiveRange, type ViewElement, type ViewRange } from '@ckeditor/ckeditor5-engine';
 /**
  * Part of the Drag and Drop handling. Responsible for finding and displaying the drop target.
  *
@@ -56,13 +56,13 @@ export default class DragDropTarget extends Plugin {
      *
      * @internal
      */
-    updateDropMarker(targetViewElement: ViewElement, targetViewRanges: Array<ViewRange> | null, clientX: number, clientY: number, blockMode: boolean): void;
+    updateDropMarker(targetViewElement: ViewElement, targetViewRanges: Array<ViewRange> | null, clientX: number, clientY: number, blockMode: boolean, draggedRange: LiveRange | null): void;
     /**
      * Finds the final drop target range.
      *
      * @internal
      */
-    getFinalDropRange(targetViewElement: ViewElement, targetViewRanges: Array<ViewRange> | null, clientX: number, clientY: number, blockMode: boolean): Range | null;
+    getFinalDropRange(targetViewElement: ViewElement, targetViewRanges: Array<ViewRange> | null, clientX: number, clientY: number, blockMode: boolean, draggedRange: LiveRange | null): Range | null;
     /**
      * Removes the drop target marker.
      *

package/src/dragdroptarget.js

@@ -78,21 +78,26 @@ export default class DragDropTarget extends Plugin {
      *
      * @internal
      */
-    updateDropMarker(targetViewElement, targetViewRanges, clientX, clientY, blockMode) {
+    updateDropMarker(targetViewElement, targetViewRanges, clientX, clientY, blockMode, draggedRange) {
         this.removeDropMarkerDelayed.cancel();
-        const targetRange = findDropTargetRange(this.editor, targetViewElement, targetViewRanges, clientX, clientY, blockMode);
-        /* istanbul ignore else -- @preserve */
-        if (targetRange) {
-            this._updateDropMarkerThrottled(targetRange);
+        const targetRange = findDropTargetRange(this.editor, targetViewElement, targetViewRanges, clientX, clientY, blockMode, draggedRange);
+        /* istanbul ignore next -- @preserve */
+        if (!targetRange) {
+            return;
         }
+        if (draggedRange && draggedRange.containsRange(targetRange)) {
+            // Target range is inside the dragged range.
+            return this.removeDropMarker();
+        }
+        this._updateDropMarkerThrottled(targetRange);
     }
     /**
      * Finds the final drop target range.
      *
      * @internal
      */
-    getFinalDropRange(targetViewElement, targetViewRanges, clientX, clientY, blockMode) {
-        const targetRange = findDropTargetRange(this.editor, targetViewElement, targetViewRanges, clientX, clientY, blockMode);
+    getFinalDropRange(targetViewElement, targetViewRanges, clientX, clientY, blockMode, draggedRange) {
+        const targetRange = findDropTargetRange(this.editor, targetViewElement, targetViewRanges, clientX, clientY, blockMode, draggedRange);
         // The dragging markers must be removed after searching for the target range because sometimes
         // the target lands on the marker itself.
         this.removeDropMarker();
@@ -246,7 +251,7 @@ export default class DragDropTarget extends Plugin {
 /**
  * Returns fixed selection range for given position and target element.
  */
-function findDropTargetRange(editor, targetViewElement, targetViewRanges, clientX, clientY, blockMode) {
+function findDropTargetRange(editor, targetViewElement, targetViewRanges, clientX, clientY, blockMode, draggedRange) {
     const model = editor.model;
     const mapper = editor.editing.mapper;
     const targetModelElement = getClosestMappedModelElement(editor, targetViewElement);
@@ -254,15 +259,20 @@ function findDropTargetRange(editor, targetViewElement, targetViewRanges, client
     while (modelElement) {
         if (!blockMode) {
             if (model.schema.checkChild(modelElement, '$text')) {
-                const targetViewPosition = targetViewRanges ? targetViewRanges[0].start : null;
-                const targetModelPosition = targetViewPosition ? mapper.toModelPosition(targetViewPosition) : null;
-                if (targetModelPosition) {
-                    if (model.schema.checkChild(targetModelPosition, '$text')) {
-                        return model.createRange(targetModelPosition);
-                    }
-                    else if (targetViewPosition) {
-                        // This is the case of dropping inside a span wrapper of an inline image.
-                        return findDropTargetRangeForElement(editor, getClosestMappedModelElement(editor, targetViewPosition.parent), clientX, clientY);
+                if (targetViewRanges) {
+                    const targetViewPosition = targetViewRanges[0].start;
+                    const targetModelPosition = mapper.toModelPosition(targetViewPosition);
+                    const canDropOnPosition = !draggedRange || Array
+                        .from(draggedRange.getItems())
+                        .every(item => model.schema.checkChild(targetModelPosition, item));
+                    if (canDropOnPosition) {
+                        if (model.schema.checkChild(targetModelPosition, '$text')) {
+                            return model.createRange(targetModelPosition);
+                        }
+                        else if (targetViewPosition) {
+                            // This is the case of dropping inside a span wrapper of an inline image.
+                            return findDropTargetRangeForElement(editor, getClosestMappedModelElement(editor, targetViewPosition.parent), clientX, clientY);
+                        }
                     }
                 }
             }

package/src/utils/viewtoplaintext.js

@@ -6,6 +6,7 @@
 // Most `view.ContainerElement` want to be separate by new-line, but some are creating one structure
 // together (like `<li>`) so it is better to separate them by only one "\n".
 const smallPaddingElements = ['figcaption', 'li'];
+const listElements = ['ol', 'ul'];
 /**
  * Converts {@link module:engine/view/item~Item view item} and all of its children to plain text.
  *
@@ -13,38 +14,54 @@ const smallPaddingElements = ['figcaption', 'li'];
  * @returns Plain text representation of `viewItem`.
  */
 export default function viewToPlainText(viewItem) {
-    let text = '';
     if (viewItem.is('$text') || viewItem.is('$textProxy')) {
-        // If item is `Text` or `TextProxy` simple take its text data.
-        text = viewItem.data;
-    }
-    else if (viewItem.is('element', 'img') && viewItem.hasAttribute('alt')) {
-        // Special case for images - use alt attribute if it is provided.
-        text = viewItem.getAttribute('alt');
-    }
-    else if (viewItem.is('element', 'br')) {
-        // A soft break should be converted into a single line break (#8045).
-        text = '\n';
-    }
-    else {
-        // Other elements are document fragments, attribute elements or container elements.
-        // They don't have their own text value, so convert their children.
-        let prev = null;
-        for (const child of viewItem.getChildren()) {
-            const childText = viewToPlainText(child);
-            // Separate container element children with one or more new-line characters.
-            if (prev && (prev.is('containerElement') || child.is('containerElement'))) {
-                if (smallPaddingElements.includes(prev.name) ||
-                    smallPaddingElements.includes(child.name)) {
-                    text += '\n';
-                }
-                else {
-                    text += '\n\n';
-                }
-            }
-            text += childText;
-            prev = child;
-        }
+        return viewItem.data;
+    }
+    if (viewItem.is('element', 'img') && viewItem.hasAttribute('alt')) {
+        return viewItem.getAttribute('alt');
+    }
+    if (viewItem.is('element', 'br')) {
+        return '\n'; // Convert soft breaks to single line break (#8045).
+    }
+    /**
+     * Item is a document fragment, attribute element or container element. It doesn't
+     * have it's own text value, so we need to convert its children elements.
+     */
+    let text = '';
+    let prev = null;
+    for (const child of viewItem.getChildren()) {
+        text += newLinePadding(child, prev) + viewToPlainText(child);
+        prev = child;
     }
     return text;
 }
+/**
+ * Returns new line padding to prefix the given elements with.
+ */
+function newLinePadding(element, previous) {
+    if (!previous) {
+        // Don't add padding to first elements in a level.
+        return '';
+    }
+    if (element.is('element', 'li') && !element.isEmpty && element.getChild(0).is('containerElement')) {
+        // Separate document list items with empty lines.
+        return '\n\n';
+    }
+    if (listElements.includes(element.name) && listElements.includes(previous.name)) {
+        /**
+         * Because `<ul>` and `<ol>` are AttributeElements, two consecutive lists will not have any padding between
+         * them (see the `if` statement below). To fix this, we need to make an exception for this case.
+         */
+        return '\n\n';
+    }
+    if (!element.is('containerElement') && !previous.is('containerElement')) {
+        // Don't add padding between non-container elements.
+        return '';
+    }
+    if (smallPaddingElements.includes(element.name) || smallPaddingElements.includes(previous.name)) {
+        // Add small padding between selected container elements.
+        return '\n';
+    }
+    // Add empty lines between container elements.
+    return '\n\n';
+}