@atlaskit/editor-plugin-block-controls 2.21.5 → 2.21.7

package/dist/es2019/pm-plugins/utils/fire-analytics.js

@@ -1,8 +1,5 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-export const attachMoveNodeAnalytics = (tr, inputMethod, fromDepth, fromNodeType, toDepth, toNodeType, isSameParent, api
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-) => {
+export const attachMoveNodeAnalytics = (tr, inputMethod, fromDepth, fromNodeType, toDepth, toNodeType, isSameParent, api) => {
   var _api$analytics, _api$analytics$action;
   return api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.attachAnalyticsEvent({
     eventType: EVENT_TYPE.TRACK,

package/dist/es2019/pm-plugins/utils/inline-drop-target.js

@@ -6,10 +6,7 @@ export const shouldAllowInlineDropTarget = (isNested, node,
 /**
  * Is the active node in the same layout as the target node
  */
-isSameLayout = false, activeNode
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-) => {
+isSameLayout = false, activeNode) => {
   if (editorExperiment('advanced_layouts', false) || isNested) {
     return false;
   }

package/dist/es2019/pm-plugins/utils/remove-from-source.js

@@ -1,16 +1,25 @@
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { isFragmentOfType } from './check-fragment';
 import { MIN_LAYOUT_COLUMN } from './consts';
 import { updateColumnWidths } from './update-column-widths';
-export const removeFromSource = (tr, $from) => {
-  const sourceNode = $from.nodeAfter;
-  const sourceParent = $from.parent;
-  if (!sourceNode) {
+export const removeFromSource = (tr, $from, to) => {
+  var _sourceContent, _sourceContent2;
+  let sourceContent = $from.nodeAfter;
+  let isLayoutColumn = ((_sourceContent = sourceContent) === null || _sourceContent === void 0 ? void 0 : _sourceContent.type.name) === 'layoutColumn';
+  let sourceNodeEndPos = $from.pos + (((_sourceContent2 = sourceContent) === null || _sourceContent2 === void 0 ? void 0 : _sourceContent2.nodeSize) || 1);
+  if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
+    sourceContent = tr.doc.slice($from.pos, to).content;
+    isLayoutColumn = isFragmentOfType(sourceContent, 'layoutColumn');
+    sourceNodeEndPos = to === undefined ? $from.pos + sourceContent.size : to;
+  }
+  if (!sourceContent) {
     return tr;
   }
-  const sourceNodeEndPos = $from.pos + sourceNode.nodeSize;
-  if (sourceNode.type.name === 'layoutColumn') {
+  if (isLayoutColumn) {
+    const sourceParent = $from.parent;
     if (sourceParent.childCount === MIN_LAYOUT_COLUMN) {
       tr.delete($from.pos + 1, sourceNodeEndPos - 1);
 

package/dist/es2019/pm-plugins/utils/update-column-widths.js

@@ -1,8 +1,5 @@
 import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../../ui/consts';
-export const updateColumnWidths = (tr, layoutNode, layoutNodePos, childCount
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-) => {
+export const updateColumnWidths = (tr, layoutNode, layoutNodePos, childCount) => {
   const newColumnWidth = DEFAULT_COLUMN_DISTRIBUTIONS[childCount];
   if (newColumnWidth) {
     layoutNode.content.forEach((node, offset) => {

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

@@ -72,9 +72,6 @@ export const memoizedTransformExpandToNestedExpand = memoizeOne(node => {
     return null;
   }
 });
-
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
 export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNodePos, destNode) {
   let srcNodeType = srcNode.type;
   const parentNodeType = destParent === null || destParent === void 0 ? void 0 : destParent.type.name;
@@ -123,4 +120,31 @@ export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNo
     srcNodeType = srcNodeType.schema.nodes.expand;
   }
   return destParent.canReplaceWith(indexIntoParent, indexIntoParent, srcNodeType);
+}
+export function canMoveSliceToIndex(slice, sliceFromPos, doc, destParent, indexIntoParent, $destNodePos, destNode) {
+  let canMoveNodes = true;
+  const nodesPos = [];
+  for (let i = 0; i < slice.content.childCount; i++) {
+    const node = slice.content.maybeChild(i);
+    if (i === 0) {
+      nodesPos[i] = sliceFromPos;
+    } else {
+      var _slice$content$maybeC;
+      nodesPos[i] = nodesPos[i - 1] + (((_slice$content$maybeC = slice.content.maybeChild(i - 1)) === null || _slice$content$maybeC === void 0 ? void 0 : _slice$content$maybeC.nodeSize) || 0);
+    }
+    if (node && node.isInline) {
+      // If the node is an inline node, we need to find the parent node
+      // as passing in them into canMoveNodeToIndex will return false
+      const $nodePos = doc.resolve(nodesPos[i]);
+      const parentNode = $nodePos.parent;
+      if (!parentNode || parentNode && !canMoveNodeToIndex(destParent, indexIntoParent, parentNode, $destNodePos, destNode)) {
+        canMoveNodes = false;
+        break;
+      }
+    } else if (node && !canMoveNodeToIndex(destParent, indexIntoParent, node, $destNodePos, destNode)) {
+      canMoveNodes = false;
+      break;
+    }
+  }
+  return canMoveNodes;
 }

package/dist/esm/blockControlsPlugin.js

@@ -21,8 +21,6 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
     commands: {
       moveNode: moveNode(api),
       moveToLayout: moveToLayout(api),
-      // Ignored via go/ees005
-      // eslint-disable-next-line @typescript-eslint/max-params
       showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType, handleOptions) {
         return function (_ref3) {
           var tr = _ref3.tr;

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

@@ -154,10 +154,7 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
 export var moveNode = function moveNode(api) {
   return function (start, to) {
     var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INPUT_METHOD.DRAG_AND_DROP;
-    var formatMessage
-    // Ignored via go/ees005
-    // eslint-disable-next-line @typescript-eslint/max-params
-    = arguments.length > 3 ? arguments[3] : undefined;
+    var formatMessage = arguments.length > 3 ? arguments[3] : undefined;
     return function (_ref4) {
       var tr = _ref4.tr;
       var isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true, {
@@ -202,7 +199,7 @@ export var moveNode = function moveNode(api) {
         if (sourceNode && isDragLayoutColumnToTopLevel($handlePos, $to)) {
           // need update after we support single column layout.
           var fragment = Fragment.from(sourceNode.content);
-          removeFromSource(tr, $handlePos);
+          removeFromSource(tr, $handlePos, $handlePos.pos + sourceNode.nodeSize);
           var _mappedTo = tr.mapping.map(to);
           tr.insert(_mappedTo, fragment).setSelection(Selection.near(tr.doc.resolve(_mappedTo))).scrollIntoView();
           return tr;

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

@@ -1,7 +1,9 @@
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { Fragment, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { isFragmentOfType, containsNodeOfType } from '../pm-plugins/utils/check-fragment';
 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';
@@ -32,17 +34,27 @@ var createNewLayout = function createNewLayout(schema, layoutContents) {
   }
   return null;
 };
-var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos, sourceNode, from, to, tr, $originalFrom, $originalTo, api
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-) {
+var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos, sourceContent, from, to, tr, $originalFrom, $originalTo, api) {
   var isSameLayout = isInSameLayout($originalFrom, $originalTo);
+  var sourceContentEndPos = -1;
+  if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
+    if (sourceContent instanceof Fragment) {
+      sourceContentEndPos = from + sourceContent.size;
+    }
+  } else {
+    if (sourceContent instanceof PMNode) {
+      sourceContentEndPos = from + sourceContent.nodeSize;
+    }
+  }
+  if (sourceContentEndPos === -1) {
+    return tr;
+  }
   if (isSameLayout) {
     var _$originalFrom$nodeAf;
     // reorder columns
-    tr.delete(from, from + sourceNode.nodeSize);
+    tr.delete(from, sourceContentEndPos);
     var mappedTo = tr.mapping.map(to);
-    tr.insert(mappedTo, sourceNode);
+    tr.insert(mappedTo, sourceContent);
     if (!fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
       tr.setSelection(new NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
     }
@@ -50,12 +62,12 @@ var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos,
   } else if (toLayout.childCount < maxLayoutColumnSupported()) {
     var _$originalFrom$nodeAf2;
     if (fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
-      removeFromSource(tr, tr.doc.resolve(from));
-      insertToDestinationNoWidthUpdate(tr, tr.mapping.map(to), sourceNode);
+      removeFromSource(tr, tr.doc.resolve(from), sourceContentEndPos);
+      insertToDestinationNoWidthUpdate(tr, tr.mapping.map(to), sourceContent);
     } else {
-      insertToDestination(tr, to, sourceNode, toLayout, toLayoutPos);
+      insertToDestination(tr, to, sourceContent, toLayout, toLayoutPos);
       var mappedFrom = tr.mapping.map(from);
-      removeFromSource(tr, tr.doc.resolve(mappedFrom));
+      removeFromSource(tr, tr.doc.resolve(mappedFrom), tr.mapping.map(sourceContentEndPos));
     }
     attachMoveNodeAnalytics(tr, INPUT_METHOD.DRAG_AND_DROP, $originalFrom.depth, ((_$originalFrom$nodeAf2 = $originalFrom.nodeAfter) === null || _$originalFrom$nodeAf2 === void 0 ? void 0 : _$originalFrom$nodeAf2.type.name) || '', 1, 'layoutSection', false, api);
   }
@@ -70,27 +82,54 @@ var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos,
  * @param sourceNode
  * @returns
  */
-var insertToDestinationNoWidthUpdate = function insertToDestinationNoWidthUpdate(tr, to, sourceNode) {
+var insertToDestinationNoWidthUpdate = function insertToDestinationNoWidthUpdate(tr, to, sourceContent) {
   var _ref2 = tr.doc.type.schema.nodes || {},
     layoutColumn = _ref2.layoutColumn;
-  var content = layoutColumn.createChecked({
-    width: 0
-  }, sourceNode.type.name === 'layoutColumn' ? sourceNode.content : sourceNode);
-  tr.insert(to, content);
+  var content = null;
+  if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
+    if (sourceContent instanceof Fragment) {
+      var _sourceFragment$first;
+      var sourceFragment = sourceContent;
+      content = layoutColumn.createChecked({
+        width: 0
+      }, isFragmentOfType(sourceFragment, 'layoutColumn') ? (_sourceFragment$first = sourceFragment.firstChild) === null || _sourceFragment$first === void 0 ? void 0 : _sourceFragment$first.content : sourceFragment);
+    }
+  } else {
+    if (sourceContent instanceof PMNode) {
+      var sourceNode = sourceContent;
+      content = layoutColumn.createChecked({
+        width: 0
+      }, sourceNode.type.name === 'layoutColumn' ? sourceNode.content : sourceNode);
+    }
+  }
+  if (content) {
+    tr.insert(to, content);
+  }
   return tr;
 };
-var insertToDestination = function insertToDestination(tr, to, sourceNode, toLayout, toLayoutPos
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-) {
+var insertToDestination = function insertToDestination(tr, to, sourceContent, toLayout, toLayoutPos) {
   var _ref3 = updateColumnWidths(tr, toLayout, toLayoutPos, toLayout.childCount + 1) || {},
     newColumnWidth = _ref3.newColumnWidth;
   var _ref4 = tr.doc.type.schema.nodes || {},
     layoutColumn = _ref4.layoutColumn;
-  var content = layoutColumn.createChecked({
-    width: newColumnWidth
-  }, sourceNode.type.name === 'layoutColumn' ? sourceNode.content : sourceNode);
-  tr.insert(to, content);
+  var content = null;
+  if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
+    if (sourceContent instanceof Fragment) {
+      var _sourceContent$firstC;
+      content = layoutColumn.createChecked({
+        width: newColumnWidth
+      }, isFragmentOfType(sourceContent, 'layoutColumn') ? (_sourceContent$firstC = sourceContent.firstChild) === null || _sourceContent$firstC === void 0 ? void 0 : _sourceContent$firstC.content : sourceContent);
+    }
+  } else {
+    if (sourceContent instanceof PMNode) {
+      content = layoutColumn.createChecked({
+        width: newColumnWidth
+      }, sourceContent.type.name === 'layoutColumn' ? sourceContent.content : sourceContent);
+    }
+  }
+  if (content) {
+    tr.insert(to, content);
+  }
   if (!fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
     tr.setSelection(new NodeSelection(tr.doc.resolve(to))).scrollIntoView();
   }
@@ -121,67 +160,148 @@ var canMoveToLayout = function canMoveToLayout(from, to, tr) {
     return;
   }
   var $from = tr.doc.resolve(from);
+  var isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true, {
+    exposure: true
+  });
 
   // invalid from position or dragging a layout
   if (!$from.nodeAfter || $from.nodeAfter.type === layoutSection) {
     return;
   }
+  var sourceContent = $from.nodeAfter;
+  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;
+      sourceContent = tr.doc.slice(sourceFrom, sourceTo).content;
+
+      // TODO: this might become expensive for large content, consider removing it if check has been done beforehand
+      if (containsNodeOfType(sourceContent, 'layoutSection')) {
+        return;
+      }
+    } else {
+      sourceContent = Fragment.from($from.nodeAfter);
+    }
+  }
   var toNode = $to.nodeAfter;
-  var fromNode = $from.nodeAfter;
   return {
     toNode: toNode,
-    fromNode: fromNode,
-    $from: $from,
-    $to: $to
+    $to: $to,
+    sourceContent: sourceContent,
+    $sourceFrom: tr.doc.resolve(sourceFrom),
+    sourceTo: sourceTo
   };
 };
+var removeBreakoutMarks = function removeBreakoutMarks(tr, $from, to) {
+  var fromContentWithoutBreakout = $from.nodeAfter;
+  var _ref6 = tr.doc.type.schema.marks || {},
+    breakout = _ref6.breakout;
+  if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
+    tr.doc.nodesBetween($from.pos, to, function (node, pos, parent) {
+      // breakout doesn't exist on nested nodes
+      if ((parent === null || parent === void 0 ? void 0 : parent.type.name) === 'doc' && node.marks.some(function (m) {
+        return m.type === breakout;
+      })) {
+        tr.removeNodeMark(pos, breakout);
+      }
+
+      // descending is not needed as  breakout doesn't exist on nested nodes
+      return false;
+    });
+    // resolve again the source content after node updated (remove breakout marks)
+    fromContentWithoutBreakout = tr.doc.slice($from.pos, to).content;
+  } else {
+    if (breakout && $from.nodeAfter && $from.nodeAfter.marks.some(function (m) {
+      return m.type === breakout;
+    })) {
+      tr.removeNodeMark($from.pos, breakout);
+      // resolve again the source node after node updated (remove breakout marks)
+      fromContentWithoutBreakout = tr.doc.resolve($from.pos).nodeAfter;
+    }
+  }
+  return fromContentWithoutBreakout;
+};
+var getBreakoutMode = function getBreakoutMode(content, breakout) {
+  if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
+    if (content instanceof PMNode) {
+      var _content$marks$find;
+      return (_content$marks$find = content.marks.find(function (m) {
+        return m.type === breakout;
+      })) === null || _content$marks$find === void 0 ? void 0 : _content$marks$find.attrs;
+    } else if (content instanceof Fragment) {
+      // Find the first breakout mode in the fragment
+      var firstBreakoutMode;
+      for (var i = 0; i < content.childCount; i++) {
+        var child = content.child(i);
+        var breakoutMark = child.marks.find(function (m) {
+          return m.type === breakout;
+        });
+        if (breakoutMark) {
+          firstBreakoutMode = breakoutMark.attrs.mode;
+          break;
+        }
+      }
+      return firstBreakoutMode;
+    }
+  } else {
+    // Without multi-select support, we can assume source content is of type PMNode
+    if (content instanceof PMNode) {
+      var _content$marks$find2;
+      return (_content$marks$find2 = content.marks.find(function (m) {
+        return m.type === breakout;
+      })) === null || _content$marks$find2 === void 0 ? void 0 : _content$marks$find2.attrs.mode;
+    }
+  }
+};
+
+// TODO: As part of platform_editor_element_drag_and_drop_multiselect clean up,
+// source content variable that has type of `PMNode | Fragment` should be updated to `Fragment` only
 export var moveToLayout = function moveToLayout(api) {
   return function (from, to, options) {
-    return function (_ref6) {
-      var tr = _ref6.tr;
+    return function (_ref7) {
+      var tr = _ref7.tr;
       var canMove = canMoveToLayout(from, to, tr);
       if (!canMove) {
         return tr;
       }
       var toNode = canMove.toNode,
-        fromNode = canMove.fromNode,
-        $from = canMove.$from,
-        $to = canMove.$to;
-      var _ref7 = tr.doc.type.schema.nodes || {},
-        layoutSection = _ref7.layoutSection,
-        layoutColumn = _ref7.layoutColumn;
-      var _ref8 = tr.doc.type.schema.marks || {},
-        breakout = _ref8.breakout;
-      var fromNodeWithoutBreakout = fromNode;
-      var getBreakoutMode = function getBreakoutMode(node) {
-        var _node$marks$find;
-        return (_node$marks$find = node.marks.find(function (m) {
-          return m.type === breakout;
-        })) === null || _node$marks$find === void 0 ? void 0 : _node$marks$find.attrs.mode;
-      };
+        $to = canMove.$to,
+        sourceContent = canMove.sourceContent,
+        $sourceFrom = canMove.$sourceFrom,
+        sourceTo = canMove.sourceTo;
+      var _ref8 = tr.doc.type.schema.nodes || {},
+        layoutSection = _ref8.layoutSection,
+        layoutColumn = _ref8.layoutColumn;
+      var _ref9 = tr.doc.type.schema.marks || {},
+        breakout = _ref9.breakout;
+
       // get breakout mode from destination node,
       // if not found, get from source node,
-      var breakoutMode = getBreakoutMode(toNode) || getBreakoutMode(fromNode);
+      var breakoutMode = getBreakoutMode(toNode, breakout) || getBreakoutMode(sourceContent, breakout);
 
-      // remove breakout from node;
-      if (breakout && $from.nodeAfter && $from.nodeAfter.marks.some(function (m) {
-        return m.type === breakout;
-      })) {
-        tr.removeNodeMark(from, breakout);
-        // resolve again the source node after node updated (remove breakout marks)
-        fromNodeWithoutBreakout = tr.doc.resolve(from).nodeAfter;
-      }
-      if (!fromNodeWithoutBreakout) {
+      // remove breakout from source content
+      var fromContentWithoutBreakout = removeBreakoutMarks(tr, $sourceFrom, sourceTo);
+      if (!fromContentWithoutBreakout) {
         return tr;
       }
       if (toNode.type === layoutSection) {
         var toPos = options !== null && options !== void 0 && options.moveToEnd ? to + toNode.nodeSize - 1 : to + 1;
-        return moveToExistingLayout(toNode, to, fromNodeWithoutBreakout, from, toPos, tr, $from, $to, api);
+        return moveToExistingLayout(toNode, to, fromContentWithoutBreakout, $sourceFrom.pos, toPos, tr, $sourceFrom, $to, api);
       } else if (toNode.type === layoutColumn) {
         var toLayout = $to.parent;
         var toLayoutPos = to - $to.parentOffset - 1;
         var _toPos = options !== null && options !== void 0 && options.moveToEnd ? to + toNode.nodeSize : to;
-        return moveToExistingLayout(toLayout, toLayoutPos, fromNodeWithoutBreakout, from, _toPos, tr, $from, $to, api);
+        return moveToExistingLayout(toLayout, toLayoutPos, fromContentWithoutBreakout, $sourceFrom.pos, _toPos, tr, $sourceFrom, $to, api);
       } else {
         var toNodeWithoutBreakout = toNode;
 
@@ -193,13 +313,19 @@ export var moveToLayout = function moveToLayout(api) {
           // resolve again the source node after node updated (remove breakout marks)
           toNodeWithoutBreakout = tr.doc.resolve(to).nodeAfter || toNode;
         }
-        if (fromNodeWithoutBreakout.type.name === 'layoutColumn') {
-          fromNodeWithoutBreakout = fromNodeWithoutBreakout.content;
+        if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
+          if (isFragmentOfType(fromContentWithoutBreakout, 'layoutColumn') && fromContentWithoutBreakout.firstChild) {
+            fromContentWithoutBreakout = fromContentWithoutBreakout.firstChild.content;
+          }
+        } else {
+          if (fromContentWithoutBreakout instanceof PMNode && fromContentWithoutBreakout.type.name === 'layoutColumn') {
+            fromContentWithoutBreakout = fromContentWithoutBreakout.content;
+          }
         }
-        var layoutContents = options !== null && options !== void 0 && options.moveToEnd ? [toNodeWithoutBreakout, fromNodeWithoutBreakout] : [fromNodeWithoutBreakout, toNodeWithoutBreakout];
+        var layoutContents = options !== null && options !== void 0 && options.moveToEnd ? [toNodeWithoutBreakout, fromContentWithoutBreakout] : [fromContentWithoutBreakout, toNodeWithoutBreakout];
         var newLayout = createNewLayout(tr.doc.type.schema, layoutContents);
         if (newLayout) {
-          tr = removeFromSource(tr, $from);
+          tr = removeFromSource(tr, $sourceFrom, sourceTo);
           var mappedTo = tr.mapping.map(to);
           tr.delete(mappedTo, mappedTo + toNodeWithoutBreakout.nodeSize).insert(mappedTo, newLayout);
           if (!fg('platform_editor_advanced_layouts_post_fix_patch_1')) {

package/dist/esm/pm-plugins/decorations-anchor.js

@@ -20,10 +20,7 @@ export var shouldDescendIntoNode = function shouldDescendIntoNode(node) {
   }
   return !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
 };
-var shouldIgnoreNode = function shouldIgnoreNode(node, ignore_nodes, depth, parent
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-) {
+var shouldIgnoreNode = function shouldIgnoreNode(node, ignore_nodes, depth, parent) {
   var isEmbedCard = node.type.name === 'embedCard';
   var isMediaSingle = node.type.name === 'mediaSingle';
   var isFirstTableRow = (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'table' && depth === 1 && node === parent.firstChild && 'tableRow' === node.type.name && editorExperiment('advanced_layouts', true);
@@ -67,8 +64,6 @@ export var nodeDecorations = function nodeDecorations(newState, from, to) {
   var docFrom = from === undefined || from < 0 ? 0 : from;
   var docTo = to === undefined || to > newState.doc.nodeSize - 2 ? newState.doc.nodeSize - 2 : to;
   var ignore_nodes = editorExperiment('advanced_layouts', true) ? IGNORE_NODES_NEXT : IGNORE_NODES;
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/max-params
   newState.doc.nodesBetween(docFrom, docTo, function (node, pos, parent, index) {
     var depth = 0;
     var anchorName;

package/dist/esm/pm-plugins/decorations-drag-handle.js

@@ -22,10 +22,7 @@ export var findHandleDec = function findHandleDec(decorations, from, to) {
     return spec.type === TYPE_HANDLE_DEC;
   });
 };
-export var dragHandleDecoration = function dragHandleDecoration(api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-) {
+export var dragHandleDecoration = function dragHandleDecoration(api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions) {
   unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
   var unbind;
   var key = uuid();

package/dist/esm/pm-plugins/decorations-drop-target.js

@@ -13,7 +13,7 @@ import { DropTarget, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, EDITOR_BLOCK_CONT
 import { DropTargetLayout } from '../ui/drop-target-layout';
 import { getNestedDepth, TYPE_DROP_TARGET_DEC, unmountDecorations } from './decorations-common';
 import { maxLayoutColumnSupported } from './utils/consts';
-import { canMoveNodeToIndex, isInSameLayout } from './utils/validation';
+import { canMoveNodeToIndex, canMoveSliceToIndex, isInSameLayout } from './utils/validation';
 var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
 var PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
 var DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
@@ -76,10 +76,7 @@ export var findDropTargetDecs = function findDropTargetDecs(decorations, from, t
     return spec.type === TYPE_DROP_TARGET_DEC;
   });
 };
-export var createDropTargetDecoration = function createDropTargetDecoration(pos, props, nodeViewPortalProviderAPI, side, anchorRectCache, isSameLayout
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-) {
+export var createDropTargetDecoration = function createDropTargetDecoration(pos, props, nodeViewPortalProviderAPI, side, anchorRectCache, isSameLayout) {
   var key = uuid();
   return Decoration.widget(pos, function (_, getPosUnsafe) {
     var getPos = function getPos() {
@@ -120,10 +117,7 @@ export var createDropTargetDecoration = function createDropTargetDecoration(pos,
     side: side
   });
 };
-export var createLayoutDropTargetDecoration = function createLayoutDropTargetDecoration(pos, props, nodeViewPortalProviderAPI, anchorRectCache
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-) {
+export var createLayoutDropTargetDecoration = function createLayoutDropTargetDecoration(pos, props, nodeViewPortalProviderAPI, anchorRectCache) {
   var key = uuid();
   return Decoration.widget(pos, function (_, getPosUnsafe) {
     var getPos = function getPos() {
@@ -155,10 +149,7 @@ export var createLayoutDropTargetDecoration = function createLayoutDropTargetDec
     type: TYPE_DROP_TARGET_DEC
   });
 };
-export var dropTargetDecorations = function dropTargetDecorations(newState, api, formatMessage, nodeViewPortalProviderAPI, activeNode, anchorRectCache, from, to
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-) {
+export var dropTargetDecorations = function dropTargetDecorations(newState, api, formatMessage, nodeViewPortalProviderAPI, activeNode, anchorRectCache, from, to) {
   unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drop-target-container', 'data-blocks-drop-target-key');
   var decs = [];
   var POS_END_OF_DOC = newState.doc.nodeSize - 2;
@@ -167,6 +158,9 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
   var activeNodePos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
   var $activeNodePos = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos);
   var activePMNode = $activeNodePos && $activeNodePos.nodeAfter;
+  var isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true, {
+    exposure: true
+  });
   anchorRectCache === null || anchorRectCache === void 0 || anchorRectCache.clear();
   var prevNodeStack = [];
   var popNodeStack = function popNodeStack(depth) {
@@ -182,9 +176,6 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
     prevNodeStack.push(node);
   };
   var isAdvancedLayoutsPreRelease2 = editorExperiment('advanced_layouts', true);
-
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/max-params
   newState.doc.nodesBetween(docFrom, docTo, function (node, pos, parent, index) {
     var depth = 0;
     // drop target deco at the end position
@@ -216,12 +207,36 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
         pushNodeStack(node, depth);
         return shouldDescend(node); //skip over, don't consider it a valid depth
       }
-      var canDrop = activePMNode && canMoveNodeToIndex(parent, index, activePMNode, $pos, node);
 
-      //NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
-      if (!canDrop) {
-        pushNodeStack(node, depth);
-        return false; //not valid pos, so nested not valid either
+      // When multi select is on, validate all the nodes in the selection instead of just the handle node
+      if (isMultiSelect) {
+        var selection = newState.selection;
+        var selectionFrom = selection.$from.pos;
+        var selectionTo = selection.$to.pos;
+        var handleInsideSelection = activeNodePos !== undefined && activeNodePos >= selectionFrom - 1 && activeNodePos <= selectionTo;
+        var selectionSlice = newState.doc.slice(selectionFrom, selectionTo, false);
+        var selectionSliceChildCount = selectionSlice.content.childCount;
+        var canDropSingleNode = true;
+        var canDropMultipleNodes = true;
+
+        // when there is only one node in the slice, use the same logic as when multi select is not on
+        if (selectionSliceChildCount > 1 && handleInsideSelection) {
+          canDropMultipleNodes = canMoveSliceToIndex(selectionSlice, selectionFrom, newState.doc, parent, index, $pos);
+        } else {
+          canDropSingleNode = !!(activePMNode && canMoveNodeToIndex(parent, index, activePMNode, $pos, node));
+        }
+        if (!canDropMultipleNodes || !canDropSingleNode) {
+          pushNodeStack(node, depth);
+          return false; //not valid pos, so nested not valid either
+        }
+      } else {
+        var canDrop = activePMNode && canMoveNodeToIndex(parent, index, activePMNode, $pos, node);
+
+        //NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
+        if (!canDrop) {
+          pushNodeStack(node, depth);
+          return false; //not valid pos, so nested not valid either
+        }
       }
       if (parent.lastChild === node && !isEmptyParagraph(node) && PARENT_WITH_END_DROP_TARGET.includes(parent.type.name)) {
         endPos = pos + node.nodeSize;

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

@@ -110,10 +110,7 @@ var initialState = {
   isDocSizeLimitEnabled: null,
   isPMDragging: false
 };
-export var newApply = function newApply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-) {
+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 activeNode = currentState.activeNode,
     decorations = currentState.decorations,
@@ -244,10 +241,7 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
     isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging
   };
 };
-export var oldApply = function oldApply(api, formatMessage, tr, currentState, oldState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-) {
+export var oldApply = function oldApply(api, formatMessage, tr, currentState, oldState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) {
   var _meta$activeNode2, _meta$activeNode$hand2, _meta$activeNode8, _meta$isDragging4, _meta$editorHeight2, _meta$editorWidthLeft2, _meta$editorWidthRigh2, _meta$isPMDragging2;
   var isNestedEnabled = flags.isNestedEnabled;
   var activeNode = currentState.activeNode,
@@ -431,8 +425,6 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
       init: function init() {
         return initialState;
       },
-      // Ignored via go/ees005
-      // eslint-disable-next-line @typescript-eslint/max-params
       apply: function apply(tr, currentState, oldState, newState) {
         if (isNestedEnabled) {
           return newApply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache);