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

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.24.0
+
+### Minor Changes
+
+- [#111465](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111465)
+  [`c0cbae02ded12`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c0cbae02ded12) -
+  [ux] Expand existing multi-node selection when dragging handle
+
+### Patch Changes
+
+- [#109402](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109402)
+  [`a8c334f52bb60`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a8c334f52bb60) -
+  Fix multi-select bug when dragging onto the handle replaces text
+- Updated dependencies
+
 ## 2.23.1
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -5,12 +5,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.blockControlsPlugin = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _selection = require("@atlaskit/editor-common/selection");
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _moveNode = require("./editor-commands/move-node");
 var _moveToLayout = require("./editor-commands/move-to-layout");
 var _main = require("./pm-plugins/main");
 var _dragHandleMenu = require("./ui/drag-handle-menu");
 var _globalStyles = require("./ui/global-styles");
+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) { (0, _defineProperty2.default)(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; }
 var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPlugin(_ref) {
   var api = _ref.api;
   return {
@@ -31,14 +36,15 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
       showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType, handleOptions) {
         return function (_ref3) {
           var tr = _ref3.tr;
-          tr.setMeta(_main.key, {
+          var currMeta = tr.getMeta(_main.key);
+          tr.setMeta(_main.key, _objectSpread(_objectSpread({}, currMeta), {}, {
             activeNode: {
               pos: pos,
               anchorName: anchorName,
               nodeType: nodeType,
               handleOptions: handleOptions
             }
-          });
+          }));
           return tr;
         };
       },
@@ -49,20 +55,52 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
           if (pos === undefined) {
             return tr;
           }
-          tr.setMeta(_main.key, {
+          var currMeta = tr.getMeta(_main.key);
+          tr.setMeta(_main.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 = (0, _selection.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 = _state.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(_main.key);
+          tr.setMeta(_main.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;
       }
@@ -70,7 +108,8 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         isMenuOpen: (_key$getState$isMenuO = (_key$getState = _main.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 = _main.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 = _main.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 = _main.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 = _main.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 = _main.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/cjs/editor-commands/move-node.js

@@ -24,6 +24,7 @@ var _fireAnalytics = require("../pm-plugins/utils/fire-analytics");
 var _getNestedNodePosition = require("../pm-plugins/utils/getNestedNodePosition");
 var _getSelection = require("../pm-plugins/utils/getSelection");
 var _removeFromSource = require("../pm-plugins/utils/remove-from-source");
+var _selection2 = require("../pm-plugins/utils/selection");
 var _validation = require("../pm-plugins/utils/validation");
 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) { (0, _defineProperty2.default)(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; }
@@ -220,26 +221,28 @@ var moveNode = exports.moveNode = function moveNode(api) {
     var formatMessage = arguments.length > 3 ? arguments[3] : undefined;
     return function (_ref6) {
       var tr = _ref6.tr;
-      var isMultiSelect = (0, _experiments.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 = (0, _experiments.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 = (0, _selection2.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/cjs/editor-commands/move-to-layout.js

@@ -14,6 +14,7 @@ var _checkFragment = require("../pm-plugins/utils/check-fragment");
 var _consts = require("../pm-plugins/utils/consts");
 var _fireAnalytics = require("../pm-plugins/utils/fire-analytics");
 var _removeFromSource = require("../pm-plugins/utils/remove-from-source");
+var _selection = require("../pm-plugins/utils/selection");
 var _updateColumnWidths = require("../pm-plugins/utils/update-column-widths");
 var _validation = require("../pm-plugins/utils/validation");
 var _consts2 = require("../ui/consts");
@@ -161,7 +162,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;
   }
@@ -193,17 +194,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 = (0, _selection.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
@@ -291,7 +287,10 @@ var moveToLayout = exports.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/cjs/pm-plugins/main.js

@@ -78,8 +78,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 ((0, _experiments.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(_state.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;
@@ -115,13 +131,15 @@ var initialState = {
   editorWidthRight: 0,
   isResizerResizing: false,
   isDocSizeLimitEnabled: null,
-  isPMDragging: false
+  isPMDragging: false,
+  multiSelectDnD: undefined
 };
 var newApply = exports.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,
@@ -130,7 +148,7 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
     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) {
@@ -142,10 +160,17 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
         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 = (0, _transactions.getTrMetadata)(tr),
     from = _getTrMetadata.from,
     to = _getTrMetadata.to,
@@ -245,7 +270,8 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
     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
   };
 };
 var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, currentState, oldState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) {
@@ -289,8 +315,8 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
   }
   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;
@@ -328,7 +354,7 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
     var newNodeDecs = (0, _decorationsAnchor.nodeDecorations)(newState);
     decorations = decorations.add(newState.doc, (0, _toConsumableArray2.default)(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);
 
@@ -347,7 +373,7 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
       var decAtPos = newNodeDecs.find(function (dec) {
         return dec.from === mappedPosisiton;
       });
-      var draghandleDec = (0, _decorationsDragHandle.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 = (0, _decorationsDragHandle.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]);
     }
   }
@@ -419,8 +445,10 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
   var isAdvancedLayoutEnabled = (0, _experiments.editorExperiment)('advanced_layouts', true, {
     exposure: true
   });
+  var isMultiSelectEnabled = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true);
   var flags = {
-    isNestedEnabled: isNestedEnabled
+    isNestedEnabled: isNestedEnabled,
+    isMultiSelectEnabled: isMultiSelectEnabled
   };
   var anchorRectCache;
   if (!(0, _anchorUtils.isAnchorSupported)()) {
@@ -483,8 +511,10 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
           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/cjs/pm-plugins/utils/selection.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMultiSelectionIfPosInside = void 0;
+var getMultiSelectionIfPosInside = exports.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 {};
+};

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

@@ -256,39 +256,27 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
           return;
         }
         api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref6) {
-          var _api$blockControls, _api$analytics3;
+          var _api$blockControls2, _api$analytics3;
           var tr = _ref6.tr;
           var isMultiSelect = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true, {
             exposure: true
           });
-          var selectionStart = start;
           if (isMultiSelect) {
-            var selection = tr.selection;
-            var selectionFrom = selection.$from.pos;
-            var selectionTo = selection.$to.pos;
-            var $selectionFrom = tr.doc.resolve(selectionFrom);
-            var $selectionTo = tr.doc.resolve(selectionTo);
-            selectionStart = $selectionFrom.start();
-            var selectionEnd = $selectionTo.end();
             var handlePos = getPos();
             if (typeof handlePos !== 'number') {
               return tr;
             }
-            var posBeforeNode = $selectionFrom.pos ? $selectionFrom.start() - 1 : $selectionFrom.pos;
-            var shouldExpandSelection = handlePos >= posBeforeNode && handlePos <= selectionEnd;
-            if (shouldExpandSelection) {
-              //TODO: What happens if not a text selection?
-              var newSelection = _state.TextSelection.create(tr.doc, selectionStart, selectionEnd);
-              tr.setSelection(newSelection);
-            } else {
-              var _$selectionFrom = tr.doc.resolve(handlePos + 1);
-              (0, _getSelection.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 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.setMultiSelectPositions()({
+                tr: tr
+              });
             }
           }
-          api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.setNodeDragged(getPos, anchorName, nodeType)({
+          api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || _api$blockControls2.commands.setNodeDragged(getPos, anchorName, nodeType)({
             tr: tr
           });
-          var resolvedMovingNode = tr.doc.resolve(selectionStart);
+          var resolvedMovingNode = tr.doc.resolve(start);
           var maybeNode = resolvedMovingNode.nodeAfter;
           tr.setMeta('scrollIntoView', false);
           api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 || _api$analytics3.actions.attachAnalyticsEvent({
@@ -436,6 +424,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   var message = helpDescriptors.map(function (descriptor) {
     return descriptor.keymap ? [descriptor.description, (0, _keymaps.getAriaKeyshortcuts)(descriptor.keymap)] : [descriptor.description];
   }).join('. ');
+  var handleOnDrop = function handleOnDrop(event) {
+    (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true) && event.stopPropagation();
+  };
   var renderButton = function renderButton() {
     return (
       // eslint-disable-next-line @atlaskit/design-system/no-html-button
@@ -451,7 +442,10 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         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"
       }, (0, _react2.jsx)(_primitives.Box, {
         as: "span",

package/dist/es2019/blockControlsPlugin.js

@@ -1,4 +1,6 @@
 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';
@@ -23,7 +25,9 @@ export const blockControlsPlugin = ({
     showDragHandleAt: (pos, anchorName, nodeType, handleOptions) => ({
       tr
     }) => {
+      const currMeta = tr.getMeta(key);
       tr.setMeta(key, {
+        ...currMeta,
         activeNode: {
           pos,
           anchorName,
@@ -40,7 +44,9 @@ export const blockControlsPlugin = ({
       if (pos === undefined) {
         return tr;
       }
+      const currMeta = tr.getMeta(key);
       tr.setMeta(key, {
+        ...currMeta,
         isDragging: true,
         activeNode: {
           pos,
@@ -49,10 +55,43 @@ export const blockControlsPlugin = ({
         }
       });
       return tr;
+    },
+    setMultiSelectPositions: () => ({
+      tr
+    }) => {
+      var _api$selection;
+      const {
+        anchor: userAnchor,
+        head: userHead
+      } = tr.selection;
+      const {
+        $anchor: expandedAnchor,
+        $head: expandedHead
+      } = expandSelectionBounds(tr.selection.$anchor, tr.selection.$head);
+      api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.commands.setManualSelection(expandedAnchor.pos, expandedHead.pos)({
+        tr
+      });
+      // this is to normalise the selection's boundaries to inline positions, preventing it from collapsing
+      const expandedNormalisedSel = TextSelection.between(expandedAnchor, expandedHead);
+      tr.setSelection(expandedNormalisedSel);
+      const multiSelectDnD = {
+        anchor: expandedAnchor.pos,
+        head: expandedHead.pos,
+        textAnchor: expandedNormalisedSel.anchor,
+        textHead: expandedNormalisedSel.head,
+        userAnchor: userAnchor,
+        userHead: userHead
+      };
+      const currMeta = tr.getMeta(key);
+      tr.setMeta(key, {
+        ...currMeta,
+        multiSelectDnD
+      });
+      return tr;
     }
   },
   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;
     }
@@ -60,7 +99,8 @@ export const blockControlsPlugin = ({
       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() {

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

@@ -16,6 +16,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';
 
 /**
@@ -218,26 +219,29 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
 export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_DROP, formatMessage) => ({
   tr
 }) => {
-  const isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true, {
-    exposure: true
-  });
-  const selection = tr.selection;
-  const selectionFrom = selection.$from.pos;
-  const selectionTo = selection.$to.pos;
+  if (!api) {
+    return tr;
+  }
   const handleNode = tr.doc.nodeAt(start);
   if (!handleNode) {
     return tr;
   }
   let sliceFrom = start;
   let sliceTo;
+  const 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
-    const useSelection = sliceFrom >= selectionFrom - 1 && sliceFrom <= selectionTo;
-    sliceFrom = useSelection ? selectionFrom : start;
+    const {
+      anchor,
+      head
+    } = getMultiSelectionIfPosInside(api, start);
+    const inSelection = anchor !== undefined && head !== undefined;
+    sliceFrom = inSelection ? Math.min(anchor, head) : start;
     const handleSize = (_handleNode$nodeSize = handleNode === null || handleNode === void 0 ? void 0 : handleNode.nodeSize) !== null && _handleNode$nodeSize !== void 0 ? _handleNode$nodeSize : 1;
     const handleEnd = sliceFrom + handleSize;
-    sliceTo = useSelection ? selectionTo : handleEnd;
+    sliceTo = inSelection ? Math.max(anchor, head) : handleEnd;
   } else {
     var _handleNode$nodeSize2;
     const size = (_handleNode$nodeSize2 = handleNode === null || handleNode === void 0 ? void 0 : handleNode.nodeSize) !== null && _handleNode$nodeSize2 !== void 0 ? _handleNode$nodeSize2 : 1;

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