@ckeditor/ckeditor5-clipboard 39.0.2 → 40.1.0

package/src/dragdrop.js

@@ -8,10 +8,11 @@
 import { Plugin } from '@ckeditor/ckeditor5-core';
 import { LiveRange, MouseObserver } from '@ckeditor/ckeditor5-engine';
 import { Widget, isWidget } from '@ckeditor/ckeditor5-widget';
-import { env, uid, delay } from '@ckeditor/ckeditor5-utils';
+import { env, uid, global, createElement, DomEmitterMixin, delay, Rect } from '@ckeditor/ckeditor5-utils';
 import ClipboardPipeline from './clipboardpipeline';
 import ClipboardObserver from './clipboardobserver';
-import { throttle } from 'lodash-es';
+import DragDropTarget from './dragdroptarget';
+import DragDropBlockToolbar from './dragdropblocktoolbar';
 import '../theme/clipboard.css';
 // Drag and drop events overview:
 //
@@ -94,8 +95,27 @@ 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 DragDrop extends Plugin {
+    constructor() {
+        super(...arguments);
+        /**
+         * A delayed callback removing draggable attributes.
+         */
+        this._clearDraggableAttributesDelayed = delay(() => this._clearDraggableAttributes(), 40);
+        /**
+         * Whether the dragged content can be dropped only in block context.
+         */
+        // TODO handle drag from other editor instance
+        // TODO configure to use block, inline or both
+        this._blockMode = false;
+        /**
+         * DOM Emitter.
+         */
+        this._domEmitter = new (DomEmitterMixin())();
+    }
     /**
      * @inheritDoc
      */
@@ -106,7 +126,7 @@ export default class DragDrop extends Plugin {
      * @inheritDoc
      */
     static get requires() {
-        return [ClipboardPipeline, Widget];
+        return [ClipboardPipeline, Widget, DragDropTarget, DragDropBlockToolbar];
     }
     /**
      * @inheritDoc
@@ -117,19 +137,11 @@ export default class DragDrop extends Plugin {
         this._draggedRange = null;
         this._draggingUid = '';
         this._draggableElement = null;
-        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();
         this._setupContentInsertionIntegration();
         this._setupClipboardInputIntegration();
-        this._setupDropMarker();
         this._setupDraggableAttributeHandling();
         this.listenTo(editor, 'change:isReadOnly', (evt, name, isReadOnly) => {
             if (isReadOnly) {
@@ -156,8 +168,10 @@ export default class DragDrop extends Plugin {
             this._draggedRange.detach();
             this._draggedRange = null;
         }
-        this._updateDropMarkerThrottled.cancel();
-        this._removeDropMarkerDelayed.cancel();
+        if (this._previewContainer) {
+            this._previewContainer.remove();
+        }
+        this._domEmitter.stopListening();
         this._clearDraggableAttributesDelayed.cancel();
         return super.destroy();
     }
@@ -167,54 +181,32 @@ export default class DragDrop extends Plugin {
     _setupDragging() {
         const editor = this.editor;
         const model = editor.model;
-        const modelDocument = model.document;
         const view = editor.editing.view;
         const viewDocument = view.document;
+        const dragDropTarget = editor.plugins.get(DragDropTarget);
         // The handler for the drag start; it is responsible for setting data transfer object.
         this.listenTo(viewDocument, 'dragstart', (evt, data) => {
-            const selection = modelDocument.selection;
             // Don't drag the editable element itself.
             if (data.target && data.target.is('editableElement')) {
                 data.preventDefault();
                 return;
             }
-            // TODO we could clone this node somewhere and style it to match editing view but without handles,
-            //  selection outline, WTA buttons, etc.
-            // data.dataTransfer._native.setDragImage( data.domTarget, 0, 0 );
-            // Check if this is dragstart over the widget (but not a nested editable).
-            const draggableWidget = data.target ? findDraggableWidget(data.target) : null;
-            if (draggableWidget) {
-                const modelElement = editor.editing.mapper.toModelElement(draggableWidget);
-                this._draggedRange = LiveRange.fromRange(model.createRangeOn(modelElement));
-                // Disable toolbars so they won't obscure the drop area.
-                if (editor.plugins.has('WidgetToolbarRepository')) {
-                    const widgetToolbarRepository = editor.plugins.get('WidgetToolbarRepository');
-                    widgetToolbarRepository.forceDisabled('dragDrop');
-                }
-            }
-            // If this was not a widget we should check if we need to drag some text content.
-            else if (!viewDocument.selection.isCollapsed) {
-                const selectedElement = viewDocument.selection.getSelectedElement();
-                if (!selectedElement || !isWidget(selectedElement)) {
-                    this._draggedRange = LiveRange.fromRange(selection.getFirstRange());
-                }
-            }
+            this._prepareDraggedRange(data.target);
             if (!this._draggedRange) {
                 data.preventDefault();
                 return;
             }
             this._draggingUid = uid();
-            const canEditAtDraggedRange = this.isEnabled && editor.model.canEditAt(this._draggedRange);
-            data.dataTransfer.effectAllowed = canEditAtDraggedRange ? 'copyMove' : 'copy';
+            data.dataTransfer.effectAllowed = this.isEnabled ? '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));
-            viewDocument.fire('clipboardOutput', {
-                dataTransfer: data.dataTransfer,
-                content,
-                method: 'dragstart'
-            });
-            if (!canEditAtDraggedRange) {
+            const clipboardPipeline = this.editor.plugins.get('ClipboardPipeline');
+            clipboardPipeline._fireOutputTransformationEvent(data.dataTransfer, draggedSelection, 'dragstart');
+            const { dataTransfer, domTarget, domEvent } = data;
+            const { clientX } = domEvent;
+            this._updatePreview({ dataTransfer, domTarget, clientX });
+            data.stopPropagation();
+            if (!this.isEnabled) {
                 this._draggedRange.detach();
                 this._draggedRange = null;
                 this._draggingUid = '';
@@ -226,6 +218,10 @@ export default class DragDrop extends Plugin {
         this.listenTo(viewDocument, 'dragend', (evt, data) => {
             this._finalizeDragging(!data.dataTransfer.isCanceled && data.dataTransfer.dropEffect == 'move');
         }, { priority: 'low' });
+        // Reset block dragging mode even if dropped outside the editable.
+        this._domEmitter.listenTo(global.document, 'dragend', () => {
+            this._blockMode = false;
+        }, { useCapture: true });
         // Dragging over the editable.
         this.listenTo(viewDocument, 'dragenter', () => {
             if (!this.isEnabled) {
@@ -237,7 +233,7 @@ export default class DragDrop extends Plugin {
         this.listenTo(viewDocument, 'dragleave', () => {
             // We do not know if the mouse left the editor or just some element in it, so let us wait a few milliseconds
             // to check if 'dragover' is not fired.
-            this._removeDropMarkerDelayed();
+            dragDropTarget.removeDropMarkerDelayed();
         });
         // Handler for moving dragged content over the target area.
         this.listenTo(viewDocument, 'dragging', (evt, data) => {
@@ -245,13 +241,8 @@ export default class DragDrop extends Plugin {
                 data.dataTransfer.dropEffect = 'none';
                 return;
             }
-            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;
-            }
+            const { clientX, clientY } = data.domEvent;
+            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) {
@@ -266,10 +257,7 @@ export default class DragDrop extends Plugin {
                     data.dataTransfer.dropEffect = 'move';
                 }
             }
-            /* istanbul ignore else -- @preserve */
-            if (targetRange) {
-                this._updateDropMarkerThrottled(targetRange);
-            }
+            evt.stop();
         }, { priority: 'low' });
     }
     /**
@@ -279,17 +267,15 @@ export default class DragDrop extends Plugin {
         const editor = this.editor;
         const view = editor.editing.view;
         const viewDocument = view.document;
+        const dragDropTarget = editor.plugins.get(DragDropTarget);
         // Update the event target ranges and abort dropping if dropping over itself.
         this.listenTo(viewDocument, 'clipboardInput', (evt, data) => {
             if (data.method != 'drop') {
                 return;
             }
-            const targetRange = findDropTargetRange(editor, data.targetRanges, data.target);
-            // The dragging markers must be removed after searching for the target range because sometimes
-            // the target lands on the marker itself.
-            this._removeDropMarker();
-            /* istanbul ignore if -- @preserve */
-            if (!targetRange || !editor.model.canEditAt(targetRange)) {
+            const { clientX, clientY } = data.domEvent;
+            const targetRange = dragDropTarget.getFinalDropRange(data.target, data.targetRanges, clientX, clientY, this._blockMode, this._draggedRange);
+            if (!targetRange) {
                 this._finalizeDragging(false);
                 evt.stop();
                 return;
@@ -364,13 +350,10 @@ 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 && !draggableElement && !viewDocument.selection.isCollapsed) {
+            if (env.isBlink && !editor.isReadOnly && !draggableElement && !viewDocument.selection.isCollapsed) {
                 const selectedElement = viewDocument.selection.getSelectedElement();
                 if (!selectedElement || !isWidget(selectedElement)) {
-                    const editableElement = viewDocument.selection.editableElement;
-                    if (editableElement && !editableElement.isReadOnly) {
-                        draggableElement = editableElement;
-                    }
+                    draggableElement = viewDocument.selection.editableElement;
                 }
             }
             if (draggableElement) {
@@ -401,71 +384,6 @@ export default class DragDrop extends Plugin {
             this._draggableElement = null;
         });
     }
-    /**
-     * Creates downcast conversion for the drop target marker.
-     */
-    _setupDropMarker() {
-        const editor = this.editor;
-        // Drop marker conversion for hovering over widgets.
-        editor.conversion.for('editingDowncast').markerToHighlight({
-            model: 'drop-target',
-            view: {
-                classes: ['ck-clipboard-drop-target-range']
-            }
-        });
-        // Drop marker conversion for in text drop target.
-        editor.conversion.for('editingDowncast').markerToElement({
-            model: 'drop-target',
-            view: (data, { writer }) => {
-                const inText = editor.model.schema.checkChild(data.markerRange.start, '$text');
-                if (!inText) {
-                    return;
-                }
-                return writer.createUIElement('span', { class: 'ck ck-clipboard-drop-target-position' }, function (domDocument) {
-                    const domElement = this.toDomElement(domDocument);
-                    // Using word joiner to make this marker as high as text and also making text not break on marker.
-                    domElement.append('\u2060', domDocument.createElement('span'), '\u2060');
-                    return domElement;
-                });
-            }
-        });
-    }
-    /**
-     * Updates the drop target marker to the provided range.
-     *
-     * @param targetRange The range to set the marker to.
-     */
-    _updateDropMarker(targetRange) {
-        const editor = this.editor;
-        const markers = editor.model.markers;
-        editor.model.change(writer => {
-            if (markers.has('drop-target')) {
-                if (!markers.get('drop-target').getRange().isEqual(targetRange)) {
-                    writer.updateMarker('drop-target', { range: targetRange });
-                }
-            }
-            else {
-                writer.addMarker('drop-target', {
-                    range: targetRange,
-                    usingOperation: false,
-                    affectsData: false
-                });
-            }
-        });
-    }
-    /**
-     * Removes the drop target marker.
-     */
-    _removeDropMarker() {
-        const model = this.editor.model;
-        this._removeDropMarkerDelayed.cancel();
-        this._updateDropMarkerThrottled.cancel();
-        if (model.markers.has('drop-target')) {
-            model.change(writer => {
-                writer.removeMarker('drop-target');
-            });
-        }
-    }
     /**
      * Deletes the dragged content from its original range and clears the dragging state.
      *
@@ -474,150 +392,120 @@ export default class DragDrop extends Plugin {
     _finalizeDragging(moved) {
         const editor = this.editor;
         const model = editor.model;
-        this._removeDropMarker();
+        const dragDropTarget = editor.plugins.get(DragDropTarget);
+        dragDropTarget.removeDropMarker();
         this._clearDraggableAttributes();
         if (editor.plugins.has('WidgetToolbarRepository')) {
             const widgetToolbarRepository = editor.plugins.get('WidgetToolbarRepository');
             widgetToolbarRepository.clearForceDisabled('dragDrop');
         }
         this._draggingUid = '';
+        if (this._previewContainer) {
+            this._previewContainer.remove();
+            this._previewContainer = undefined;
+        }
         if (!this._draggedRange) {
             return;
         }
         // Delete moved content.
         if (moved && this.isEnabled) {
-            model.deleteContent(model.createSelection(this._draggedRange), { doNotAutoparagraph: true });
+            model.change(writer => {
+                const selection = model.createSelection(this._draggedRange);
+                model.deleteContent(selection, { doNotAutoparagraph: true });
+                // Check result selection if it does not require auto-paragraphing of empty container.
+                const selectionParent = selection.getFirstPosition().parent;
+                if (selectionParent.isEmpty &&
+                    !model.schema.checkChild(selectionParent, '$text') &&
+                    model.schema.checkChild(selectionParent, 'paragraph')) {
+                    writer.insertElement('paragraph', selectionParent, 0);
+                }
+            });
         }
         this._draggedRange.detach();
         this._draggedRange = null;
     }
-}
-/**
- * Returns fixed selection range for given position and target element.
- */
-function findDropTargetRange(editor, targetViewRanges, targetViewElement) {
-    const model = editor.model;
-    const mapper = editor.editing.mapper;
-    let range = null;
-    const targetViewPosition = targetViewRanges ? targetViewRanges[0].start : null;
-    // A UIElement is not a valid drop element, use parent (this could be a drop marker or any other UIElement).
-    if (targetViewElement.is('uiElement')) {
-        targetViewElement = targetViewElement.parent;
-    }
-    // Quick win if the target is a widget (but not a nested editable).
-    range = findDropTargetRangeOnWidget(editor, targetViewElement);
-    if (range) {
-        return range;
-    }
-    // The easiest part is over, now we need to move to the model space.
-    // Find target model element and position.
-    const targetModelElement = getClosestMappedModelElement(editor, targetViewElement);
-    const targetModelPosition = targetViewPosition ? mapper.toModelPosition(targetViewPosition) : null;
-    // There is no target position while hovering over an empty table cell.
-    // In Safari, target position can be empty while hovering over a widget (e.g., a page-break).
-    // Find the drop position inside the element.
-    if (!targetModelPosition) {
-        return findDropTargetRangeInElement(editor, targetModelElement);
-    }
-    // Check if target position is between blocks and adjust drop position to the next object.
-    // This is because while hovering over a root element next to a widget the target position can jump in crazy places.
-    range = findDropTargetRangeBetweenBlocks(editor, targetModelPosition, targetModelElement);
-    if (range) {
-        return range;
-    }
-    // Try fixing selection position.
-    // In Firefox, the target position lands before widgets but in other browsers it tends to land after a widget.
-    range = model.schema.getNearestSelectionRange(targetModelPosition, env.isGecko ? 'forward' : 'backward');
-    if (range) {
-        return range;
-    }
-    // There is no valid selection position inside the current limit element so find a closest object ancestor.
-    // This happens if the model position lands directly in the <table> element itself (view target element was a `<td>`
-    // so a nested editable, but view target position was directly in the `<figure>` element).
-    return findDropTargetRangeOnAncestorObject(editor, targetModelPosition.parent);
-}
-/**
- * Returns fixed selection range for a given position and a target element if it is over the widget but not over its nested editable.
- */
-function findDropTargetRangeOnWidget(editor, targetViewElement) {
-    const model = editor.model;
-    const mapper = editor.editing.mapper;
-    // Quick win if the target is a widget.
-    if (isWidget(targetViewElement)) {
-        return model.createRangeOn(mapper.toModelElement(targetViewElement));
-    }
-    // Check if we are deeper over a widget (but not over a nested editable).
-    if (!targetViewElement.is('editableElement')) {
-        // Find a closest ancestor that is either a widget or an editable element...
-        const ancestor = targetViewElement.findAncestor(node => isWidget(node) || node.is('editableElement'));
-        // ...and if the widget was closer then it is a drop target.
-        if (isWidget(ancestor)) {
-            return model.createRangeOn(mapper.toModelElement(ancestor));
+    /**
+     * Sets the dragged source range based on event target and document selection.
+     */
+    _prepareDraggedRange(target) {
+        const editor = this.editor;
+        const model = editor.model;
+        const selection = model.document.selection;
+        // Check if this is dragstart over the widget (but not a nested editable).
+        const draggableWidget = target ? findDraggableWidget(target) : null;
+        if (draggableWidget) {
+            const modelElement = editor.editing.mapper.toModelElement(draggableWidget);
+            this._draggedRange = LiveRange.fromRange(model.createRangeOn(modelElement));
+            this._blockMode = model.schema.isBlock(modelElement);
+            // Disable toolbars so they won't obscure the drop area.
+            if (editor.plugins.has('WidgetToolbarRepository')) {
+                const widgetToolbarRepository = editor.plugins.get('WidgetToolbarRepository');
+                widgetToolbarRepository.forceDisabled('dragDrop');
+            }
+            return;
         }
-    }
-    return null;
-}
-/**
- * Returns fixed selection range inside a model element.
- */
-function findDropTargetRangeInElement(editor, targetModelElement) {
-    const model = editor.model;
-    const schema = model.schema;
-    const positionAtElementStart = model.createPositionAt(targetModelElement, 0);
-    return schema.getNearestSelectionRange(positionAtElementStart, 'forward');
-}
-/**
- * Returns fixed selection range for a given position and a target element if the drop is between blocks.
- */
-function findDropTargetRangeBetweenBlocks(editor, targetModelPosition, targetModelElement) {
-    const model = editor.model;
-    // Check if target is between blocks.
-    if (!model.schema.checkChild(targetModelElement, '$block')) {
-        return null;
-    }
-    // Find position between blocks.
-    const positionAtElementStart = model.createPositionAt(targetModelElement, 0);
-    // Get the common part of the path (inside the target element and the target position).
-    const commonPath = targetModelPosition.path.slice(0, positionAtElementStart.path.length);
-    // Position between the blocks.
-    const betweenBlocksPosition = model.createPositionFromPath(targetModelPosition.root, commonPath);
-    const nodeAfter = betweenBlocksPosition.nodeAfter;
-    // Adjust drop position to the next object.
-    // This is because while hovering over a root element next to a widget the target position can jump in crazy places.
-    if (nodeAfter && model.schema.isObject(nodeAfter)) {
-        return model.createRangeOn(nodeAfter);
-    }
-    return null;
-}
-/**
- * Returns a selection range on the ancestor object.
- */
-function findDropTargetRangeOnAncestorObject(editor, element) {
-    const model = editor.model;
-    let currentElement = element;
-    while (currentElement) {
-        if (model.schema.isObject(currentElement)) {
-            return model.createRangeOn(currentElement);
+        // If this was not a widget we should check if we need to drag some text content.
+        if (selection.isCollapsed && !selection.getFirstPosition().parent.isEmpty) {
+            return;
+        }
+        const blocks = Array.from(selection.getSelectedBlocks());
+        const draggedRange = selection.getFirstRange();
+        if (blocks.length == 0) {
+            this._draggedRange = LiveRange.fromRange(draggedRange);
+            return;
+        }
+        const blockRange = getRangeIncludingFullySelectedParents(model, blocks);
+        if (blocks.length > 1) {
+            this._draggedRange = LiveRange.fromRange(blockRange);
+            this._blockMode = true;
+            // TODO block mode for dragging from outside editor? or inline? or both?
+        }
+        else if (blocks.length == 1) {
+            const touchesBlockEdges = draggedRange.start.isTouching(blockRange.start) &&
+                draggedRange.end.isTouching(blockRange.end);
+            this._draggedRange = LiveRange.fromRange(touchesBlockEdges ? blockRange : draggedRange);
+            this._blockMode = touchesBlockEdges;
         }
-        currentElement = currentElement.parent;
+        model.change(writer => writer.setSelection(this._draggedRange.toRange()));
     }
-    /* istanbul ignore next -- @preserve */
-    return null;
-}
-/**
- * Returns the closest model element for the specified view element.
- */
-function getClosestMappedModelElement(editor, element) {
-    const mapper = editor.editing.mapper;
-    const view = editor.editing.view;
-    const targetModelElement = mapper.toModelElement(element);
-    if (targetModelElement) {
-        return targetModelElement;
+    /**
+     * Updates the dragged preview image.
+     */
+    _updatePreview({ dataTransfer, domTarget, clientX }) {
+        const view = this.editor.editing.view;
+        const editable = view.document.selection.editableElement;
+        const domEditable = view.domConverter.mapViewToDom(editable);
+        const computedStyle = global.window.getComputedStyle(domEditable);
+        if (!this._previewContainer) {
+            this._previewContainer = createElement(global.document, 'div', {
+                style: 'position: fixed; left: -999999px;'
+            });
+            global.document.body.appendChild(this._previewContainer);
+        }
+        else if (this._previewContainer.firstElementChild) {
+            this._previewContainer.removeChild(this._previewContainer.firstElementChild);
+        }
+        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';
+        }
+        preview.innerHTML = dataTransfer.getData('text/html');
+        dataTransfer.setDragImage(preview, 0, 0);
+        this._previewContainer.appendChild(preview);
     }
-    // Find mapped ancestor if the target is inside not mapped element (for example inline code element).
-    const viewPosition = view.createPositionBefore(element);
-    const viewElement = mapper.findMappedViewAncestor(viewPosition);
-    return mapper.toModelElement(viewElement);
 }
 /**
  * Returns the drop effect that should be a result of dragging the content.
@@ -653,3 +541,37 @@ function findDraggableWidget(target) {
     }
     return null;
 }
+/**
+ * Recursively checks if common parent of provided elements doesn't have any other children. If that's the case,
+ * it returns range including this parent. Otherwise, it returns only the range from first to last element.
+ *
+ * Example:
+ *
+ * <blockQuote>
+ *   <paragraph>[Test 1</paragraph>
+ *   <paragraph>Test 2</paragraph>
+ *   <paragraph>Test 3]</paragraph>
+ * <blockQuote>
+ *
+ * Because all elements inside the `blockQuote` are selected, the range is extended to include the `blockQuote` too.
+ * If only first and second paragraphs would be selected, the range would not include it.
+ */
+function getRangeIncludingFullySelectedParents(model, elements) {
+    const firstElement = elements[0];
+    const lastElement = elements[elements.length - 1];
+    const parent = firstElement.getCommonAncestor(lastElement);
+    const startPosition = model.createPositionBefore(firstElement);
+    const endPosition = model.createPositionAfter(lastElement);
+    if (parent &&
+        parent.is('element') &&
+        !model.schema.isLimit(parent)) {
+        const parentRange = model.createRangeOn(parent);
+        const touchesStart = startPosition.isTouching(parentRange.start);
+        const touchesEnd = endPosition.isTouching(parentRange.end);
+        if (touchesStart && touchesEnd) {
+            // Selection includes all elements in the parent.
+            return getRangeIncludingFullySelectedParents(model, [parent]);
+        }
+    }
+    return model.createRange(startPosition, endPosition);
+}

package/src/dragdropblocktoolbar.d.ts

@@ -7,7 +7,7 @@
  */
 import { Plugin } from '@ckeditor/ckeditor5-core';
 /**
- * Integration of an experimental block Drag and drop support with the block toolbar.
+ * Integration of a block Drag and Drop support with the block toolbar.
  *
  * @internal
  */

package/src/dragdropblocktoolbar.js

@@ -5,12 +5,11 @@
 /**
  * @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.
+ * Integration of a block Drag and Drop support with the block toolbar.
  *
  * @internal
  */
@@ -52,11 +51,16 @@ export default class DragDropBlockToolbar extends Plugin {
         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 });
+            if (this.isEnabled) {
+                element.setAttribute('draggable', 'true');
+            }
+            this.on('change:isEnabled', (evt, name, isEnabled) => {
+                element.setAttribute('draggable', isEnabled ? 'true' : 'false');
+            });
         }
     }
     /**
@@ -75,11 +79,13 @@ export default class DragDropBlockToolbar extends Plugin {
         }
         const model = this.editor.model;
         const selection = model.document.selection;
+        const view = this.editor.editing.view;
         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);
+        view.focus();
+        view.getObserver(ClipboardObserver).onDomEvent(domEvent);
     }
     /**
      * The `dragover` and `drop` event handler.
@@ -88,13 +94,14 @@ export default class DragDropBlockToolbar extends Plugin {
         if (!this.isEnabled || !this._isBlockDragging) {
             return;
         }
-        const clientX = domEvent.clientX + 100;
+        const clientX = domEvent.clientX + (this.editor.locale.contentLanguageDirection == 'ltr' ? 100 : -100);
         const clientY = domEvent.clientY;
         const target = document.elementFromPoint(clientX, clientY);
+        const view = this.editor.editing.view;
         if (!target || !target.closest('.ck-editor__editable')) {
             return;
         }
-        this.editor.editing.view.getObserver(ClipboardObserver).onDomEvent({
+        view.getObserver(ClipboardObserver).onDomEvent({
             ...domEvent,
             type: domEvent.type,
             dataTransfer: domEvent.dataTransfer,