@ckeditor/ckeditor5-clipboard 39.0.2 → 40.1.0

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

@@ -5,7 +5,6 @@
 /**
  * @module clipboard/dragdroptarget
  */
-/* istanbul ignore file -- @preserve */
 import { Plugin } from '@ckeditor/ckeditor5-core';
 import { global, Rect, DomEmitterMixin, delay, ResizeObserver } from '@ckeditor/ckeditor5-utils';
 import LineView from './lineview';
@@ -79,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();
@@ -247,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);
@@ -255,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);
+                        }
                     }
                 }
             }
@@ -279,6 +288,9 @@ function findDropTargetRange(editor, targetViewElement, targetViewRanges, client
                 .filter((node) => node.is('element') && !isFloatingElement(editor, node));
             let startIndex = 0;
             let endIndex = childNodes.length;
+            if (endIndex == 0) {
+                return model.createRange(model.createPositionAt(modelElement, 'end'));
+            }
             while (startIndex < endIndex - 1) {
                 const middleIndex = Math.floor((startIndex + endIndex) / 2);
                 const side = findElementSide(editor, childNodes[middleIndex], clientX, clientY);
@@ -293,7 +305,6 @@ function findDropTargetRange(editor, targetViewElement, targetViewRanges, client
         }
         modelElement = modelElement.parent;
     }
-    console.warn('none:', targetModelElement.name);
     return null;
 }
 /**

package/src/index.d.ts

@@ -6,11 +6,10 @@
  * @module clipboard
  */
 export { default as Clipboard } from './clipboard';
-export { default as ClipboardPipeline, type ClipboardContentInsertionEvent, type ClipboardInputTransformationEvent, type ClipboardInputTransformationData, type ViewDocumentClipboardOutputEvent } from './clipboardpipeline';
+export { default as ClipboardPipeline, type ClipboardContentInsertionEvent, type ClipboardInputTransformationEvent, type ClipboardInputTransformationData, type ClipboardOutputTransformationEvent, type ClipboardOutputTransformationData, type ViewDocumentClipboardOutputEvent } from './clipboardpipeline';
 export type { ClipboardEventData } from './clipboardobserver';
 export { default as DragDrop } from './dragdrop';
 export { default as PastePlainText } from './pasteplaintext';
-export { default as DragDropExperimental } from './dragdropexperimental';
 export { default as DragDropTarget } from './dragdroptarget';
 export { default as DragDropBlockToolbar } from './dragdropblocktoolbar';
 export type { ViewDocumentClipboardInputEvent, ViewDocumentCopyEvent, ViewDocumentCutEvent } from './clipboardobserver';

package/src/index.js

@@ -9,7 +9,6 @@ export { default as Clipboard } from './clipboard';
 export { default as ClipboardPipeline } from './clipboardpipeline';
 export { default as DragDrop } from './dragdrop';
 export { default as PastePlainText } from './pasteplaintext';
-export { default as DragDropExperimental } from './dragdropexperimental';
 export { default as DragDropTarget } from './dragdroptarget';
 export { default as DragDropBlockToolbar } from './dragdropblocktoolbar';
 import './augmentation';

package/src/utils/plaintexttohtml.js

@@ -13,6 +13,8 @@
  */
 export default function plainTextToHtml(text) {
     text = text
+        // Encode &.
+        .replace(/&/g, '&')
         // Encode <>.
         .replace(/</g, '&lt;')
         .replace(/>/g, '&gt;')

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';
+}

package/src/dragdropexperimental.d.ts

@@ -1,101 +0,0 @@
-/**
- * @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;
-}