@atlaskit/editor-plugin-block-controls 2.23.0 → 2.24.0

package/dist/es2019/editor-commands/move-to-layout.js

@@ -8,6 +8,7 @@ import { isFragmentOfType, containsNodeOfType } from '../pm-plugins/utils/check-
 import { maxLayoutColumnSupported } from '../pm-plugins/utils/consts';
 import { fireInsertLayoutAnalytics, attachMoveNodeAnalytics } from '../pm-plugins/utils/fire-analytics';
 import { removeFromSource } from '../pm-plugins/utils/remove-from-source';
+import { getMultiSelectionIfPosInside } from '../pm-plugins/utils/selection';
 import { updateColumnWidths } from '../pm-plugins/utils/update-column-widths';
 import { isInSameLayout } from '../pm-plugins/utils/validation';
 import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
@@ -159,7 +160,7 @@ const insertToDestination = (tr, to, sourceContent, toLayout, toLayoutPos) => {
  * Check if the node at `from` can be moved to node at `to` to create/expand a layout.
  * Returns the source and destination nodes and positions if it's a valid move, otherwise, undefined
  */
-const canMoveToLayout = (from, to, tr) => {
+const canMoveToLayout = (api, from, to, tr) => {
   if (from === to) {
     return;
   }
@@ -192,17 +193,13 @@ const canMoveToLayout = (from, to, tr) => {
   let sourceFrom = from;
   let sourceTo = from + sourceContent.nodeSize;
   if (isMultiSelect) {
-    var _tr$selection$$from$n;
-    // Selection often starts from the content of the node (e.g. to show text selection properly),
-    // so we need to trace back to the start of the node instead
-    const contentStartPos = tr.selection.$from.nodeAfter && ((_tr$selection$$from$n = tr.selection.$from.nodeAfter) === null || _tr$selection$$from$n === void 0 ? void 0 : _tr$selection$$from$n.type.name) !== 'text' ? tr.selection.$from.pos : tr.selection.$from.before();
-
-    // If the handle position sits within the Editor selection, we will move all nodes that sit in that selection
-    // handle position is the same as `from` position
-    const useSelection = from >= contentStartPos && from <= tr.selection.to;
-    if (useSelection) {
-      sourceFrom = contentStartPos;
-      sourceTo = tr.selection.to;
+    const {
+      anchor,
+      head
+    } = getMultiSelectionIfPosInside(api, from);
+    if (anchor && head) {
+      sourceFrom = Math.min(anchor, head);
+      sourceTo = Math.max(anchor, head);
       sourceContent = tr.doc.slice(sourceFrom, sourceTo).content;
 
       // TODO: this might become expensive for large content, consider removing it if check has been done beforehand
@@ -280,7 +277,10 @@ const getBreakoutMode = (content, breakout) => {
 export const moveToLayout = api => (from, to, options) => ({
   tr
 }) => {
-  const canMove = canMoveToLayout(from, to, tr);
+  if (!api) {
+    return tr;
+  }
+  const canMove = canMoveToLayout(api, from, to, tr);
   if (!canMove) {
     return tr;
   }

package/dist/es2019/pm-plugins/main.js

@@ -73,6 +73,23 @@ const destroyFn = (api, editorView) => {
       api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
         tr
       }) => {
+        if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
+          var _api$blockControls, _api$selection;
+          const {
+            multiSelectDnD
+          } = (api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {};
+          // Restore the users initial Editor selection when the drop completes
+          if (multiSelectDnD) {
+            // If the TextSelection between the drag start and end has changed, the document has changed, and we should not reapply the last selection
+            const expandedSelectionUnchanged = multiSelectDnD.textAnchor === tr.selection.anchor && multiSelectDnD.textHead === tr.selection.head;
+            if (expandedSelectionUnchanged) {
+              tr.setSelection(TextSelection.create(tr.doc, multiSelectDnD.userAnchor, multiSelectDnD.userHead));
+            }
+          }
+          api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.commands.clearManualSelection()({
+            tr
+          });
+        }
         const {
           start
         } = source.data;
@@ -111,14 +128,16 @@ const initialState = {
   editorWidthRight: 0,
   isResizerResizing: false,
   isDocSizeLimitEnabled: null,
-  isPMDragging: false
+  isPMDragging: false,
+  multiSelectDnD: undefined
 };
 export const newApply = (api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) => {
-  var _meta$activeNode, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _meta$isDragging2, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
+  var _meta$activeNode, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _meta$isDragging2, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$multiSelectDnD;
   let {
     activeNode,
     decorations,
-    isResizerResizing
+    isResizerResizing,
+    multiSelectDnD
   } = currentState;
   const {
     editorHeight,
@@ -127,11 +146,11 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
     isDragging,
     isMenuOpen,
     // NOT USED
-    isPMDragging // NOT USED
+    isPMDragging
   } = currentState;
   let isActiveNodeDeleted = false;
 
-  // Remap existing decorations and activeNode when steps exist
+  // When steps exist, remap existing decorations, activeNode and multi select positions
   if (tr.docChanged) {
     decorations = decorations.map(tr.mapping, tr.doc);
     if (activeNode) {
@@ -143,10 +162,17 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
         nodeType: activeNode.nodeType
       };
     }
+    if (multiSelectDnD && flags.isMultiSelectEnabled) {
+      multiSelectDnD.anchor = tr.mapping.map(multiSelectDnD.anchor);
+      multiSelectDnD.head = tr.mapping.map(multiSelectDnD.head);
+    }
   }
   const meta = tr.getMeta(key);
   const resizerMeta = tr.getMeta('is-resizer-resizing');
   isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
+  if (multiSelectDnD && flags.isMultiSelectEnabled) {
+    multiSelectDnD = (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false ? undefined : multiSelectDnD;
+  }
   const {
     from,
     to,
@@ -245,7 +271,8 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
     editorWidthRight: (_meta$editorWidthRigh = meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== null && _meta$editorWidthRigh !== void 0 ? _meta$editorWidthRigh : editorWidthRight,
     isResizerResizing: isResizerResizing,
     isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled,
-    isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging
+    isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging,
+    multiSelectDnD: (_meta$multiSelectDnD = meta === null || meta === void 0 ? void 0 : meta.multiSelectDnD) !== null && _meta$multiSelectDnD !== void 0 ? _meta$multiSelectDnD : multiSelectDnD
   };
 };
 export const oldApply = (api, formatMessage, tr, currentState, oldState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) => {
@@ -401,8 +428,10 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
   const isAdvancedLayoutEnabled = editorExperiment('advanced_layouts', true, {
     exposure: true
   });
+  const isMultiSelectEnabled = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true);
   const flags = {
-    isNestedEnabled
+    isNestedEnabled,
+    isMultiSelectEnabled
   };
   let anchorRectCache;
   if (!isAnchorSupported()) {
@@ -467,8 +496,10 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
           const domPos = Math.max(view.posAtDOM(nodeElement, 0) - 1, 0);
           const nodeTarget = state.doc.nodeAt(domPos);
           const isSameNode = !!(nodeTarget && draggable !== null && draggable !== void 0 && draggable.eq(nodeTarget));
-          if (isSameNode) {
-            // Prevent the default drop behavior if the position is within the activeNode
+          const isInSelection = domPos >= state.selection.$from.pos && domPos < state.selection.$to.pos;
+
+          // Prevent the default drop behavior if the position is within the activeNode or Editor selection
+          if (isSameNode || isInSelection && isMultiSelectEnabled) {
             event.preventDefault();
             return true;
           }

package/dist/es2019/pm-plugins/utils/selection.js

@@ -0,0 +1,17 @@
+export const getMultiSelectionIfPosInside = (api, pos) => {
+  var _api$blockControls;
+  const {
+    multiSelectDnD
+  } = (api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {};
+  if (multiSelectDnD && multiSelectDnD.anchor >= 0 && multiSelectDnD.head >= 0) {
+    const multiFrom = Math.min(multiSelectDnD.anchor, multiSelectDnD.head);
+    const multiTo = Math.max(multiSelectDnD.anchor, multiSelectDnD.head);
+
+    // We subtract one as the handle position is before the node
+    return pos >= multiFrom - 1 && pos <= multiTo ? {
+      anchor: multiSelectDnD.anchor,
+      head: multiSelectDnD.head
+    } : {};
+  }
+  return {};
+};

package/dist/es2019/ui/drag-handle.js

@@ -240,38 +240,26 @@ export const DragHandle = ({
         api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions.execute(({
           tr
         }) => {
-          var _api$blockControls, _api$analytics3;
+          var _api$blockControls2, _api$analytics3;
           const isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true, {
             exposure: true
           });
-          let selectionStart = start;
           if (isMultiSelect) {
-            const selection = tr.selection;
-            const selectionFrom = selection.$from.pos;
-            const selectionTo = selection.$to.pos;
-            const $selectionFrom = tr.doc.resolve(selectionFrom);
-            const $selectionTo = tr.doc.resolve(selectionTo);
-            selectionStart = $selectionFrom.start();
-            const selectionEnd = $selectionTo.end();
             const handlePos = getPos();
             if (typeof handlePos !== 'number') {
               return tr;
             }
-            const posBeforeNode = $selectionFrom.pos ? $selectionFrom.start() - 1 : $selectionFrom.pos;
-            const shouldExpandSelection = handlePos >= posBeforeNode && handlePos <= selectionEnd;
-            if (shouldExpandSelection) {
-              //TODO: What happens if not a text selection?
-              const newSelection = TextSelection.create(tr.doc, selectionStart, selectionEnd);
-              tr.setSelection(newSelection);
-            } else {
-              const $selectionFrom = tr.doc.resolve(handlePos + 1);
-              selectNode(tr, handlePos, $selectionFrom.node().type.name);
+            if (!tr.selection.empty && handlePos >= tr.selection.$from.start() - 1 && handlePos <= tr.selection.to) {
+              var _api$blockControls;
+              api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.setMultiSelectPositions()({
+                tr
+              });
             }
           }
-          api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.setNodeDragged(getPos, anchorName, nodeType)({
+          api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.setNodeDragged(getPos, anchorName, nodeType)({
             tr
           });
-          const resolvedMovingNode = tr.doc.resolve(selectionStart);
+          const resolvedMovingNode = tr.doc.resolve(start);
           const maybeNode = resolvedMovingNode.nodeAfter;
           tr.setMeta('scrollIntoView', false);
           api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.attachAnalyticsEvent({
@@ -416,6 +404,9 @@ export const DragHandle = ({
   const message = helpDescriptors.map(descriptor => {
     return descriptor.keymap ? [descriptor.description, getAriaKeyshortcuts(descriptor.keymap)] : [descriptor.description];
   }).join('. ');
+  const handleOnDrop = event => {
+    editorExperiment('platform_editor_element_drag_and_drop_multiselect', true) && event.stopPropagation();
+  };
   const renderButton = () =>
   // eslint-disable-next-line @atlaskit/design-system/no-html-button
   jsx("button", {
@@ -430,7 +421,10 @@ export const DragHandle = ({
     style: positionStyles,
     onClick: handleOnClick,
     onMouseDown: handleMouseDown,
-    onKeyDown: handleKeyDown,
+    onKeyDown: handleKeyDown
+    // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+    ,
+    onDrop: handleOnDrop,
     "data-testid": "block-ctrl-drag-handle"
   }, jsx(Box, {
     as: "span",

package/dist/esm/blockControlsPlugin.js

@@ -1,4 +1,9 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
+import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { moveNode } from './editor-commands/move-node';
 import { moveToLayout } from './editor-commands/move-to-layout';
 import { createPlugin, key } from './pm-plugins/main';
@@ -24,14 +29,15 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
       showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType, handleOptions) {
         return function (_ref3) {
           var tr = _ref3.tr;
-          tr.setMeta(key, {
+          var currMeta = tr.getMeta(key);
+          tr.setMeta(key, _objectSpread(_objectSpread({}, currMeta), {}, {
             activeNode: {
               pos: pos,
               anchorName: anchorName,
               nodeType: nodeType,
               handleOptions: handleOptions
             }
-          });
+          }));
           return tr;
         };
       },
@@ -42,20 +48,52 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
           if (pos === undefined) {
             return tr;
           }
-          tr.setMeta(key, {
+          var currMeta = tr.getMeta(key);
+          tr.setMeta(key, _objectSpread(_objectSpread({}, currMeta), {}, {
             isDragging: true,
             activeNode: {
               pos: pos,
               anchorName: anchorName,
               nodeType: nodeType
             }
+          }));
+          return tr;
+        };
+      },
+      setMultiSelectPositions: function setMultiSelectPositions() {
+        return function (_ref5) {
+          var _api$selection;
+          var tr = _ref5.tr;
+          var _tr$selection = tr.selection,
+            userAnchor = _tr$selection.anchor,
+            userHead = _tr$selection.head;
+          var _expandSelectionBound = expandSelectionBounds(tr.selection.$anchor, tr.selection.$head),
+            expandedAnchor = _expandSelectionBound.$anchor,
+            expandedHead = _expandSelectionBound.$head;
+          api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || _api$selection.commands.setManualSelection(expandedAnchor.pos, expandedHead.pos)({
+            tr: tr
           });
+          // this is to normalise the selection's boundaries to inline positions, preventing it from collapsing
+          var expandedNormalisedSel = TextSelection.between(expandedAnchor, expandedHead);
+          tr.setSelection(expandedNormalisedSel);
+          var multiSelectDnD = {
+            anchor: expandedAnchor.pos,
+            head: expandedHead.pos,
+            textAnchor: expandedNormalisedSel.anchor,
+            textHead: expandedNormalisedSel.head,
+            userAnchor: userAnchor,
+            userHead: userHead
+          };
+          var currMeta = tr.getMeta(key);
+          tr.setMeta(key, _objectSpread(_objectSpread({}, currMeta), {}, {
+            multiSelectDnD: multiSelectDnD
+          }));
           return tr;
         };
       }
     },
     getSharedState: function getSharedState(editorState) {
-      var _key$getState$isMenuO, _key$getState, _key$getState$activeN, _key$getState2, _key$getState$isDragg, _key$getState3, _key$getState$isPMDra, _key$getState4;
+      var _key$getState$isMenuO, _key$getState, _key$getState$activeN, _key$getState2, _key$getState$isDragg, _key$getState3, _key$getState$isPMDra, _key$getState4, _key$getState$multiSe, _key$getState5;
       if (!editorState) {
         return undefined;
       }
@@ -63,7 +101,8 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         isMenuOpen: (_key$getState$isMenuO = (_key$getState = key.getState(editorState)) === null || _key$getState === void 0 ? void 0 : _key$getState.isMenuOpen) !== null && _key$getState$isMenuO !== void 0 ? _key$getState$isMenuO : false,
         activeNode: (_key$getState$activeN = (_key$getState2 = key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : undefined,
         isDragging: (_key$getState$isDragg = (_key$getState3 = key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
-        isPMDragging: (_key$getState$isPMDra = (_key$getState4 = key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false
+        isPMDragging: (_key$getState$isPMDra = (_key$getState4 = key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false,
+        multiSelectDnD: (_key$getState$multiSe = (_key$getState5 = key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined
       };
     },
     contentComponent: function contentComponent() {

package/dist/esm/editor-commands/move-node.js

@@ -19,6 +19,7 @@ import { attachMoveNodeAnalytics } from '../pm-plugins/utils/fire-analytics';
 import { getNestedNodePosition } from '../pm-plugins/utils/getNestedNodePosition';
 import { selectNode, setCursorPositionAtMovedNode } from '../pm-plugins/utils/getSelection';
 import { removeFromSource } from '../pm-plugins/utils/remove-from-source';
+import { getMultiSelectionIfPosInside } from '../pm-plugins/utils/selection';
 import { canMoveNodeToIndex, isInsideTable, transformSliceExpandToNestedExpand } from '../pm-plugins/utils/validation';
 
 /**
@@ -130,7 +131,8 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
 
           // if the current node is the last node, don't do anything
           if (_index >= parent.childCount - 1) {
-            return false;
+            // prevent event propagation to avoid moving the cursor and still select the node
+            return true;
           }
           var moveToEnd = _index === parent.childCount - 2;
           moveToPos = moveToEnd ? $pos.before() : selection.to + ((nextNode === null || nextNode === void 0 ? void 0 : nextNode.nodeSize) || 1);
@@ -213,26 +215,28 @@ export var moveNode = function moveNode(api) {
     var formatMessage = arguments.length > 3 ? arguments[3] : undefined;
     return function (_ref6) {
       var tr = _ref6.tr;
-      var isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true, {
-        exposure: true
-      });
-      var selection = tr.selection;
-      var selectionFrom = selection.$from.pos;
-      var selectionTo = selection.$to.pos;
+      if (!api) {
+        return tr;
+      }
       var handleNode = tr.doc.nodeAt(start);
       if (!handleNode) {
         return tr;
       }
       var sliceFrom = start;
       var sliceTo;
+      var isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true, {
+        exposure: true
+      });
       if (isMultiSelect) {
         var _handleNode$nodeSize;
-        // //If the handle position sits within the Editor selection, we will move all nodes that sit in that selection
-        var useSelection = sliceFrom >= selectionFrom - 1 && sliceFrom <= selectionTo;
-        sliceFrom = useSelection ? selectionFrom : start;
+        var _getMultiSelectionIfP = getMultiSelectionIfPosInside(api, start),
+          anchor = _getMultiSelectionIfP.anchor,
+          head = _getMultiSelectionIfP.head;
+        var inSelection = anchor !== undefined && head !== undefined;
+        sliceFrom = inSelection ? Math.min(anchor, head) : start;
         var handleSize = (_handleNode$nodeSize = handleNode === null || handleNode === void 0 ? void 0 : handleNode.nodeSize) !== null && _handleNode$nodeSize !== void 0 ? _handleNode$nodeSize : 1;
         var handleEnd = sliceFrom + handleSize;
-        sliceTo = useSelection ? selectionTo : handleEnd;
+        sliceTo = inSelection ? Math.max(anchor, head) : handleEnd;
       } else {
         var _handleNode$nodeSize2;
         var size = (_handleNode$nodeSize2 = handleNode === null || handleNode === void 0 ? void 0 : handleNode.nodeSize) !== null && _handleNode$nodeSize2 !== void 0 ? _handleNode$nodeSize2 : 1;

package/dist/esm/editor-commands/move-to-layout.js

@@ -8,6 +8,7 @@ import { isFragmentOfType, containsNodeOfType } from '../pm-plugins/utils/check-
 import { maxLayoutColumnSupported } from '../pm-plugins/utils/consts';
 import { fireInsertLayoutAnalytics, attachMoveNodeAnalytics } from '../pm-plugins/utils/fire-analytics';
 import { removeFromSource } from '../pm-plugins/utils/remove-from-source';
+import { getMultiSelectionIfPosInside } from '../pm-plugins/utils/selection';
 import { updateColumnWidths } from '../pm-plugins/utils/update-column-widths';
 import { isInSameLayout } from '../pm-plugins/utils/validation';
 import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
@@ -155,7 +156,7 @@ var insertToDestination = function insertToDestination(tr, to, sourceContent, to
  * Check if the node at `from` can be moved to node at `to` to create/expand a layout.
  * Returns the source and destination nodes and positions if it's a valid move, otherwise, undefined
  */
-var canMoveToLayout = function canMoveToLayout(from, to, tr) {
+var canMoveToLayout = function canMoveToLayout(api, from, to, tr) {
   if (from === to) {
     return;
   }
@@ -187,17 +188,12 @@ var canMoveToLayout = function canMoveToLayout(from, to, tr) {
   var sourceFrom = from;
   var sourceTo = from + sourceContent.nodeSize;
   if (isMultiSelect) {
-    var _tr$selection$$from$n;
-    // Selection often starts from the content of the node (e.g. to show text selection properly),
-    // so we need to trace back to the start of the node instead
-    var contentStartPos = tr.selection.$from.nodeAfter && ((_tr$selection$$from$n = tr.selection.$from.nodeAfter) === null || _tr$selection$$from$n === void 0 ? void 0 : _tr$selection$$from$n.type.name) !== 'text' ? tr.selection.$from.pos : tr.selection.$from.before();
-
-    // If the handle position sits within the Editor selection, we will move all nodes that sit in that selection
-    // handle position is the same as `from` position
-    var useSelection = from >= contentStartPos && from <= tr.selection.to;
-    if (useSelection) {
-      sourceFrom = contentStartPos;
-      sourceTo = tr.selection.to;
+    var _getMultiSelectionIfP = getMultiSelectionIfPosInside(api, from),
+      anchor = _getMultiSelectionIfP.anchor,
+      head = _getMultiSelectionIfP.head;
+    if (anchor && head) {
+      sourceFrom = Math.min(anchor, head);
+      sourceTo = Math.max(anchor, head);
       sourceContent = tr.doc.slice(sourceFrom, sourceTo).content;
 
       // TODO: this might become expensive for large content, consider removing it if check has been done beforehand
@@ -285,7 +281,10 @@ export var moveToLayout = function moveToLayout(api) {
   return function (from, to, options) {
     return function (_ref7) {
       var tr = _ref7.tr;
-      var canMove = canMoveToLayout(from, to, tr);
+      if (!api) {
+        return tr;
+      }
+      var canMove = canMoveToLayout(api, from, to, tr);
       if (!canMove) {
         return tr;
       }

package/dist/esm/pm-plugins/main.js

@@ -71,8 +71,24 @@ var destroyFn = function destroyFn(api, editorView) {
       }
       api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref3) {
         var tr = _ref3.tr;
-        var _ref4 = source.data,
-          start = _ref4.start;
+        if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
+          var _api$blockControls, _api$selection;
+          var _ref4 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
+            multiSelectDnD = _ref4.multiSelectDnD;
+          // Restore the users initial Editor selection when the drop completes
+          if (multiSelectDnD) {
+            // If the TextSelection between the drag start and end has changed, the document has changed, and we should not reapply the last selection
+            var expandedSelectionUnchanged = multiSelectDnD.textAnchor === tr.selection.anchor && multiSelectDnD.textHead === tr.selection.head;
+            if (expandedSelectionUnchanged) {
+              tr.setSelection(TextSelection.create(tr.doc, multiSelectDnD.userAnchor, multiSelectDnD.userHead));
+            }
+          }
+          api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || _api$selection.commands.clearManualSelection()({
+            tr: tr
+          });
+        }
+        var _ref5 = source.data,
+          start = _ref5.start;
         // if no drop targets are rendered, assume that drop is invalid
         if (location.current.dropTargets.length === 0) {
           var _api$analytics2;
@@ -108,13 +124,15 @@ var initialState = {
   editorWidthRight: 0,
   isResizerResizing: false,
   isDocSizeLimitEnabled: null,
-  isPMDragging: false
+  isPMDragging: false,
+  multiSelectDnD: undefined
 };
 export var newApply = function newApply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) {
-  var _meta$activeNode, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _meta$isDragging2, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
+  var _meta$activeNode, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _meta$isDragging2, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$multiSelectDnD;
   var activeNode = currentState.activeNode,
     decorations = currentState.decorations,
-    isResizerResizing = currentState.isResizerResizing;
+    isResizerResizing = currentState.isResizerResizing,
+    multiSelectDnD = currentState.multiSelectDnD;
   var editorHeight = currentState.editorHeight,
     editorWidthLeft = currentState.editorWidthLeft,
     editorWidthRight = currentState.editorWidthRight,
@@ -123,7 +141,7 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
     isPMDragging = currentState.isPMDragging;
   var isActiveNodeDeleted = false;
 
-  // Remap existing decorations and activeNode when steps exist
+  // When steps exist, remap existing decorations, activeNode and multi select positions
   if (tr.docChanged) {
     decorations = decorations.map(tr.mapping, tr.doc);
     if (activeNode) {
@@ -135,10 +153,17 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
         nodeType: activeNode.nodeType
       };
     }
+    if (multiSelectDnD && flags.isMultiSelectEnabled) {
+      multiSelectDnD.anchor = tr.mapping.map(multiSelectDnD.anchor);
+      multiSelectDnD.head = tr.mapping.map(multiSelectDnD.head);
+    }
   }
   var meta = tr.getMeta(key);
   var resizerMeta = tr.getMeta('is-resizer-resizing');
   isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
+  if (multiSelectDnD && flags.isMultiSelectEnabled) {
+    multiSelectDnD = (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false ? undefined : multiSelectDnD;
+  }
   var _getTrMetadata = getTrMetadata(tr),
     from = _getTrMetadata.from,
     to = _getTrMetadata.to,
@@ -238,7 +263,8 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
     editorWidthRight: (_meta$editorWidthRigh = meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== null && _meta$editorWidthRigh !== void 0 ? _meta$editorWidthRigh : editorWidthRight,
     isResizerResizing: isResizerResizing,
     isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled,
-    isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging
+    isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging,
+    multiSelectDnD: (_meta$multiSelectDnD = meta === null || meta === void 0 ? void 0 : meta.multiSelectDnD) !== null && _meta$multiSelectDnD !== void 0 ? _meta$multiSelectDnD : multiSelectDnD
   };
 };
 export var oldApply = function oldApply(api, formatMessage, tr, currentState, oldState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) {
@@ -282,8 +308,8 @@ export var oldApply = function oldApply(api, formatMessage, tr, currentState, ol
   }
   var decsLength = isNestedEnabled ? decorations.find(undefined, undefined, function (spec) {
     return spec.type === 'node-decoration';
-  }).length : decorations.find().filter(function (_ref5) {
-    var spec = _ref5.spec;
+  }).length : decorations.find().filter(function (_ref6) {
+    var spec = _ref6.spec;
     return spec.type !== 'drag-handle';
   }).length;
   var isDecsMissing = false;
@@ -321,7 +347,7 @@ export var oldApply = function oldApply(api, formatMessage, tr, currentState, ol
     var newNodeDecs = nodeDecorations(newState);
     decorations = decorations.add(newState.doc, _toConsumableArray(newNodeDecs));
     if (activeNode && !(meta !== null && meta !== void 0 && meta.nodeMoved) && !isDecsMissing) {
-      var _meta$activeNode$pos, _meta$activeNode3, _ref6, _meta$activeNode$anch, _meta$activeNode4, _decAtPos$spec, _ref7, _meta$activeNode$node, _meta$activeNode5, _decAtPos$spec2, _meta$activeNode6;
+      var _meta$activeNode$pos, _meta$activeNode3, _ref7, _meta$activeNode$anch, _meta$activeNode4, _decAtPos$spec, _ref8, _meta$activeNode$node, _meta$activeNode5, _decAtPos$spec2, _meta$activeNode6;
       var mappedPosisiton = tr.mapping.map(activeNode.pos);
       var prevMappedPos = oldState.tr.mapping.map(activeNode.pos);
 
@@ -340,7 +366,7 @@ export var oldApply = function oldApply(api, formatMessage, tr, currentState, ol
       var decAtPos = newNodeDecs.find(function (dec) {
         return dec.from === mappedPosisiton;
       });
-      var draghandleDec = dragHandleDecoration(api, formatMessage, (_meta$activeNode$pos = meta === null || meta === void 0 || (_meta$activeNode3 = meta.activeNode) === null || _meta$activeNode3 === void 0 ? void 0 : _meta$activeNode3.pos) !== null && _meta$activeNode$pos !== void 0 ? _meta$activeNode$pos : mappedPosisiton, (_ref6 = (_meta$activeNode$anch = meta === null || meta === void 0 || (_meta$activeNode4 = meta.activeNode) === null || _meta$activeNode4 === void 0 ? void 0 : _meta$activeNode4.anchorName) !== null && _meta$activeNode$anch !== void 0 ? _meta$activeNode$anch : decAtPos === null || decAtPos === void 0 || (_decAtPos$spec = decAtPos.spec) === null || _decAtPos$spec === void 0 ? void 0 : _decAtPos$spec.anchorName) !== null && _ref6 !== void 0 ? _ref6 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName, (_ref7 = (_meta$activeNode$node = meta === null || meta === void 0 || (_meta$activeNode5 = meta.activeNode) === null || _meta$activeNode5 === void 0 ? void 0 : _meta$activeNode5.nodeType) !== null && _meta$activeNode$node !== void 0 ? _meta$activeNode$node : decAtPos === null || decAtPos === void 0 || (_decAtPos$spec2 = decAtPos.spec) === null || _decAtPos$spec2 === void 0 ? void 0 : _decAtPos$spec2.nodeType) !== null && _ref7 !== void 0 ? _ref7 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType, nodeViewPortalProviderAPI, meta === null || meta === void 0 || (_meta$activeNode6 = meta.activeNode) === null || _meta$activeNode6 === void 0 ? void 0 : _meta$activeNode6.handleOptions);
+      var draghandleDec = dragHandleDecoration(api, formatMessage, (_meta$activeNode$pos = meta === null || meta === void 0 || (_meta$activeNode3 = meta.activeNode) === null || _meta$activeNode3 === void 0 ? void 0 : _meta$activeNode3.pos) !== null && _meta$activeNode$pos !== void 0 ? _meta$activeNode$pos : mappedPosisiton, (_ref7 = (_meta$activeNode$anch = meta === null || meta === void 0 || (_meta$activeNode4 = meta.activeNode) === null || _meta$activeNode4 === void 0 ? void 0 : _meta$activeNode4.anchorName) !== null && _meta$activeNode$anch !== void 0 ? _meta$activeNode$anch : decAtPos === null || decAtPos === void 0 || (_decAtPos$spec = decAtPos.spec) === null || _decAtPos$spec === void 0 ? void 0 : _decAtPos$spec.anchorName) !== null && _ref7 !== void 0 ? _ref7 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName, (_ref8 = (_meta$activeNode$node = meta === null || meta === void 0 || (_meta$activeNode5 = meta.activeNode) === null || _meta$activeNode5 === void 0 ? void 0 : _meta$activeNode5.nodeType) !== null && _meta$activeNode$node !== void 0 ? _meta$activeNode$node : decAtPos === null || decAtPos === void 0 || (_decAtPos$spec2 = decAtPos.spec) === null || _decAtPos$spec2 === void 0 ? void 0 : _decAtPos$spec2.nodeType) !== null && _ref8 !== void 0 ? _ref8 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType, nodeViewPortalProviderAPI, meta === null || meta === void 0 || (_meta$activeNode6 = meta.activeNode) === null || _meta$activeNode6 === void 0 ? void 0 : _meta$activeNode6.handleOptions);
       decorations = decorations.add(newState.doc, [draghandleDec]);
     }
   }
@@ -412,8 +438,10 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
   var isAdvancedLayoutEnabled = editorExperiment('advanced_layouts', true, {
     exposure: true
   });
+  var isMultiSelectEnabled = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true);
   var flags = {
-    isNestedEnabled: isNestedEnabled
+    isNestedEnabled: isNestedEnabled,
+    isMultiSelectEnabled: isMultiSelectEnabled
   };
   var anchorRectCache;
   if (!isAnchorSupported()) {
@@ -476,8 +504,10 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
           var domPos = Math.max(view.posAtDOM(nodeElement, 0) - 1, 0);
           var nodeTarget = state.doc.nodeAt(domPos);
           var isSameNode = !!(nodeTarget && draggable !== null && draggable !== void 0 && draggable.eq(nodeTarget));
-          if (isSameNode) {
-            // Prevent the default drop behavior if the position is within the activeNode
+          var isInSelection = domPos >= state.selection.$from.pos && domPos < state.selection.$to.pos;
+
+          // Prevent the default drop behavior if the position is within the activeNode or Editor selection
+          if (isSameNode || isInSelection && isMultiSelectEnabled) {
             event.preventDefault();
             return true;
           }

package/dist/esm/pm-plugins/utils/selection.js

@@ -0,0 +1,16 @@
+export var getMultiSelectionIfPosInside = function getMultiSelectionIfPosInside(api, pos) {
+  var _api$blockControls;
+  var _ref = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
+    multiSelectDnD = _ref.multiSelectDnD;
+  if (multiSelectDnD && multiSelectDnD.anchor >= 0 && multiSelectDnD.head >= 0) {
+    var multiFrom = Math.min(multiSelectDnD.anchor, multiSelectDnD.head);
+    var multiTo = Math.max(multiSelectDnD.anchor, multiSelectDnD.head);
+
+    // We subtract one as the handle position is before the node
+    return pos >= multiFrom - 1 && pos <= multiTo ? {
+      anchor: multiSelectDnD.anchor,
+      head: multiSelectDnD.head
+    } : {};
+  }
+  return {};
+};