@atlaskit/editor-plugin-block-controls 2.21.4 → 2.21.6

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

@@ -7,16 +7,25 @@ exports.removeFromSource = void 0;
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _checkFragment = require("./check-fragment");
 var _consts = require("./consts");
 var _updateColumnWidths = require("./update-column-widths");
-var removeFromSource = exports.removeFromSource = function removeFromSource(tr, $from) {
-  var sourceNode = $from.nodeAfter;
-  var sourceParent = $from.parent;
-  if (!sourceNode) {
+var removeFromSource = exports.removeFromSource = function removeFromSource(tr, $from, to) {
+  var _sourceContent, _sourceContent2;
+  var sourceContent = $from.nodeAfter;
+  var isLayoutColumn = ((_sourceContent = sourceContent) === null || _sourceContent === void 0 ? void 0 : _sourceContent.type.name) === 'layoutColumn';
+  var sourceNodeEndPos = $from.pos + (((_sourceContent2 = sourceContent) === null || _sourceContent2 === void 0 ? void 0 : _sourceContent2.nodeSize) || 1);
+  if ((0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true)) {
+    sourceContent = tr.doc.slice($from.pos, to).content;
+    isLayoutColumn = (0, _checkFragment.isFragmentOfType)(sourceContent, 'layoutColumn');
+    sourceNodeEndPos = to === undefined ? $from.pos + sourceContent.size : to;
+  }
+  if (!sourceContent) {
     return tr;
   }
-  var sourceNodeEndPos = $from.pos + sourceNode.nodeSize;
-  if (sourceNode.type.name === 'layoutColumn') {
+  if (isLayoutColumn) {
+    var sourceParent = $from.parent;
     if (sourceParent.childCount === _consts.MIN_LAYOUT_COLUMN) {
       tr.delete($from.pos + 1, sourceNodeEndPos - 1);
 

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

@@ -5,10 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.updateColumnWidths = void 0;
 var _consts = require("../../ui/consts");
-var updateColumnWidths = exports.updateColumnWidths = function updateColumnWidths(tr, layoutNode, layoutNodePos, childCount
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-) {
+var updateColumnWidths = exports.updateColumnWidths = function updateColumnWidths(tr, layoutNode, layoutNodePos, childCount) {
   var newColumnWidth = _consts.DEFAULT_COLUMN_DISTRIBUTIONS[childCount];
   if (newColumnWidth) {
     layoutNode.content.forEach(function (node, offset) {

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

@@ -78,9 +78,6 @@ var memoizedTransformExpandToNestedExpand = exports.memoizedTransformExpandToNes
     return null;
   }
 });
-
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
 function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNodePos, destNode) {
   var srcNodeType = srcNode.type;
   var parentNodeType = destParent === null || destParent === void 0 ? void 0 : destParent.type.name;

package/dist/cjs/ui/drop-target-layout.js

@@ -17,7 +17,6 @@ var _colors = require("@atlaskit/theme/colors");
 var _decorationsCommon = require("../pm-plugins/decorations-common");
 var _activeAnchorTracker = require("../pm-plugins/utils/active-anchor-tracker");
 var _anchorUtils = require("../pm-plugins/utils/anchor-utils");
-var _dragTargetDebug = require("../pm-plugins/utils/drag-target-debug");
 var _updateSelection = require("../pm-plugins/utils/update-selection");
 /**
  * @jsxRuntime classic
@@ -131,7 +130,7 @@ var DropTargetLayout = exports.DropTargetLayout = function DropTargetLayout(prop
     ,
     css: [dropTargetLayoutStyle, dropTargetStackLayoutHintStyle],
     "data-testid": "block-ctrl-drop-indicator"
-  }, isDraggedOver || (0, _dragTargetDebug.isBlocksDragTargetDebug)() ? (0, _react2.jsx)(_box.DropIndicator, {
+  }, isDraggedOver ? (0, _react2.jsx)(_box.DropIndicator, {
     edge: "right",
     gap: "-".concat(DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH, "px")
   }) : isActiveAnchor && (0, _react2.jsx)("div", {

package/dist/cjs/ui/drop-target.js

@@ -18,7 +18,6 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _decorationsCommon = require("../pm-plugins/decorations-common");
 var _activeAnchorTracker = require("../pm-plugins/utils/active-anchor-tracker");
 var _anchorUtils = require("../pm-plugins/utils/anchor-utils");
-var _dragTargetDebug = require("../pm-plugins/utils/drag-target-debug");
 var _inlineDropTarget = require("../pm-plugins/utils/inline-drop-target");
 var _consts = require("./consts");
 var _inlineDropTarget2 = require("./inline-drop-target");
@@ -48,7 +47,11 @@ var styleDropIndicator = (0, _react2.css)({
   height: '100%',
   margin: '0 auto',
   position: 'relative',
-  width: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, ", 100%)")
+  width: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, ", 100%)"),
+  display: 'none'
+});
+var styleDropIndicatorVisible = (0, _react2.css)({
+  display: 'block'
 });
 var nestedDropIndicatorStyle = (0, _react2.css)({
   position: 'relative'
@@ -232,10 +235,8 @@ var DropTarget = exports.DropTarget = function DropTarget(props) {
     ,
     style: dynamicStyle,
     "data-testid": "block-ctrl-drop-target"
-  },
-  // 4px gap to clear expand node border
-  (isDraggedOver || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) && (0, _react2.jsx)("div", {
-    css: styleDropIndicator,
+  }, (0, _react2.jsx)("div", {
+    css: [styleDropIndicator, isDraggedOver && styleDropIndicatorVisible],
     "data-testid": "block-ctrl-drop-indicator"
   }, (0, _react2.jsx)(_box.DropIndicator, {
     edge: "bottom"

package/dist/cjs/ui/inline-drop-target.js

@@ -17,7 +17,6 @@ var _colors = require("@atlaskit/theme/colors");
 var _decorationsCommon = require("../pm-plugins/decorations-common");
 var _activeAnchorTracker = require("../pm-plugins/utils/active-anchor-tracker");
 var _anchorUtils = require("../pm-plugins/utils/anchor-utils");
-var _dragTargetDebug = require("../pm-plugins/utils/drag-target-debug");
 var _updateSelection = require("../pm-plugins/utils/update-selection");
 /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
 /* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
@@ -255,7 +254,7 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: hoverZoneRectStyle
-  }, isDraggedOver || (0, _dragTargetDebug.isBlocksDragTargetDebug)() ? (0, _react2.jsx)(_box.DropIndicator, {
+  }, isDraggedOver ? (0, _react2.jsx)(_box.DropIndicator, {
     edge: dropIndicatorPos
   }) : isActiveAnchor && (0, _react2.jsx)("div", {
     "data-testid": "block-ctrl-drop-hint",

package/dist/es2019/blockControlsPlugin.js

@@ -20,8 +20,6 @@ export const blockControlsPlugin = ({
   commands: {
     moveNode: moveNode(api),
     moveToLayout: moveToLayout(api),
-    // Ignored via go/ees005
-    // eslint-disable-next-line @typescript-eslint/max-params
     showDragHandleAt: (pos, anchorName, nodeType, handleOptions) => ({
       tr
     }) => {

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

@@ -154,10 +154,7 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
     return false;
   };
 };
-export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_DROP, formatMessage
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-) => ({
+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, {
@@ -203,7 +200,7 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
     if (sourceNode && isDragLayoutColumnToTopLevel($handlePos, $to)) {
       // need update after we support single column layout.
       const fragment = Fragment.from(sourceNode.content);
-      removeFromSource(tr, $handlePos);
+      removeFromSource(tr, $handlePos, $handlePos.pos + sourceNode.nodeSize);
       const mappedTo = tr.mapping.map(to);
       tr.insert(mappedTo, fragment).setSelection(Selection.near(tr.doc.resolve(mappedTo))).scrollIntoView();
       return tr;

package/dist/es2019/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';
@@ -33,17 +35,27 @@ const createNewLayout = (schema, layoutContents) => {
   }
   return null;
 };
-const moveToExistingLayout = (toLayout, toLayoutPos, sourceNode, from, to, tr, $originalFrom, $originalTo, api
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-) => {
+const moveToExistingLayout = (toLayout, toLayoutPos, sourceContent, from, to, tr, $originalFrom, $originalTo, api) => {
   const isSameLayout = isInSameLayout($originalFrom, $originalTo);
+  let 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);
     const 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();
     }
@@ -51,12 +63,12 @@ const moveToExistingLayout = (toLayout, toLayoutPos, sourceNode, from, to, tr, $
   } 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);
       const 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);
   }
@@ -71,30 +83,57 @@ const moveToExistingLayout = (toLayout, toLayoutPos, sourceNode, from, to, tr, $
  * @param sourceNode
  * @returns
  */
-const insertToDestinationNoWidthUpdate = (tr, to, sourceNode) => {
+const insertToDestinationNoWidthUpdate = (tr, to, sourceContent) => {
   const {
     layoutColumn
   } = tr.doc.type.schema.nodes || {};
-  const content = layoutColumn.createChecked({
-    width: 0
-  }, sourceNode.type.name === 'layoutColumn' ? sourceNode.content : sourceNode);
-  tr.insert(to, content);
+  let content = null;
+  if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
+    if (sourceContent instanceof Fragment) {
+      var _sourceFragment$first;
+      const 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) {
+      const sourceNode = sourceContent;
+      content = layoutColumn.createChecked({
+        width: 0
+      }, sourceNode.type.name === 'layoutColumn' ? sourceNode.content : sourceNode);
+    }
+  }
+  if (content) {
+    tr.insert(to, content);
+  }
   return tr;
 };
-const insertToDestination = (tr, to, sourceNode, toLayout, toLayoutPos
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-) => {
+const insertToDestination = (tr, to, sourceContent, toLayout, toLayoutPos) => {
   const {
     newColumnWidth
   } = updateColumnWidths(tr, toLayout, toLayoutPos, toLayout.childCount + 1) || {};
   const {
     layoutColumn
   } = tr.doc.type.schema.nodes || {};
-  const content = layoutColumn.createChecked({
-    width: newColumnWidth
-  }, sourceNode.type.name === 'layoutColumn' ? sourceNode.content : sourceNode);
-  tr.insert(to, content);
+  let 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();
   }
@@ -126,20 +165,103 @@ const canMoveToLayout = (from, to, tr) => {
     return;
   }
   const $from = tr.doc.resolve(from);
+  const 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;
   }
+  let sourceContent = $from.nodeAfter;
+  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;
+      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);
+    }
+  }
   const toNode = $to.nodeAfter;
-  const fromNode = $from.nodeAfter;
   return {
     toNode,
-    fromNode,
-    $from,
-    $to
+    $to,
+    sourceContent,
+    $sourceFrom: tr.doc.resolve(sourceFrom),
+    sourceTo
   };
 };
+const removeBreakoutMarks = (tr, $from, to) => {
+  let fromContentWithoutBreakout = $from.nodeAfter;
+  const {
+    breakout
+  } = tr.doc.type.schema.marks || {};
+  if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
+    tr.doc.nodesBetween($from.pos, to, (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(m => 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(m => 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;
+};
+const 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(m => 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
+      let firstBreakoutMode;
+      for (let i = 0; i < content.childCount; i++) {
+        const child = content.child(i);
+        const breakoutMark = child.marks.find(m => 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(m => 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 const moveToLayout = api => (from, to, options) => ({
   tr
 }) => {
@@ -149,9 +271,10 @@ export const moveToLayout = api => (from, to, options) => ({
   }
   const {
     toNode,
-    fromNode,
-    $from,
-    $to
+    $to,
+    sourceContent,
+    $sourceFrom,
+    sourceTo
   } = canMove;
   const {
     layoutSection,
@@ -160,32 +283,24 @@ export const moveToLayout = api => (from, to, options) => ({
   const {
     breakout
   } = tr.doc.type.schema.marks || {};
-  let fromNodeWithoutBreakout = fromNode;
-  const getBreakoutMode = node => {
-    var _node$marks$find;
-    return (_node$marks$find = node.marks.find(m => m.type === breakout)) === null || _node$marks$find === void 0 ? void 0 : _node$marks$find.attrs.mode;
-  };
+
   // get breakout mode from destination node,
   // if not found, get from source node,
-  const breakoutMode = getBreakoutMode(toNode) || getBreakoutMode(fromNode);
+  const breakoutMode = getBreakoutMode(toNode, breakout) || getBreakoutMode(sourceContent, breakout);
 
-  // remove breakout from node;
-  if (breakout && $from.nodeAfter && $from.nodeAfter.marks.some(m => 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
+  let fromContentWithoutBreakout = removeBreakoutMarks(tr, $sourceFrom, sourceTo);
+  if (!fromContentWithoutBreakout) {
     return tr;
   }
   if (toNode.type === layoutSection) {
     const 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) {
     const toLayout = $to.parent;
     const toLayoutPos = to - $to.parentOffset - 1;
     const 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 {
     let toNodeWithoutBreakout = toNode;
 
@@ -195,13 +310,19 @@ export const moveToLayout = api => (from, to, options) => ({
       // 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;
+      }
     }
-    const layoutContents = options !== null && options !== void 0 && options.moveToEnd ? [toNodeWithoutBreakout, fromNodeWithoutBreakout] : [fromNodeWithoutBreakout, toNodeWithoutBreakout];
+    const layoutContents = options !== null && options !== void 0 && options.moveToEnd ? [toNodeWithoutBreakout, fromContentWithoutBreakout] : [fromContentWithoutBreakout, toNodeWithoutBreakout];
     const newLayout = createNewLayout(tr.doc.type.schema, layoutContents);
     if (newLayout) {
-      tr = removeFromSource(tr, $from);
+      tr = removeFromSource(tr, $sourceFrom, sourceTo);
       const 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/es2019/pm-plugins/decorations-anchor.js

@@ -19,10 +19,7 @@ export const shouldDescendIntoNode = node => {
   }
   return !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
 };
-const shouldIgnoreNode = (node, ignore_nodes, depth, parent
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-) => {
+const shouldIgnoreNode = (node, ignore_nodes, depth, parent) => {
   const isEmbedCard = node.type.name === 'embedCard';
   const isMediaSingle = node.type.name === 'mediaSingle';
   const 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);
@@ -64,8 +61,6 @@ export const nodeDecorations = (newState, from, to) => {
   const docFrom = from === undefined || from < 0 ? 0 : from;
   const docTo = to === undefined || to > newState.doc.nodeSize - 2 ? newState.doc.nodeSize - 2 : to;
   const 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, (node, pos, parent, index) => {
     let depth = 0;
     let anchorName;

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

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

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

@@ -10,7 +10,6 @@ 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 { isBlocksDragTargetDebug } from './utils/drag-target-debug';
 import { canMoveNodeToIndex, isInSameLayout } from './utils/validation';
 const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
 const PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
@@ -72,10 +71,7 @@ const getGapAndOffset = (prevNode, nextNode, parentNode) => {
 export const findDropTargetDecs = (decorations, from, to) => {
   return decorations.find(from, to, spec => spec.type === TYPE_DROP_TARGET_DEC);
 };
-export const createDropTargetDecoration = (pos, props, nodeViewPortalProviderAPI, side, anchorRectCache, isSameLayout
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-) => {
+export const createDropTargetDecoration = (pos, props, nodeViewPortalProviderAPI, side, anchorRectCache, isSameLayout) => {
   const key = uuid();
   return Decoration.widget(pos, (_, getPosUnsafe) => {
     const getPos = () => {
@@ -117,10 +113,7 @@ export const createDropTargetDecoration = (pos, props, nodeViewPortalProviderAPI
     side
   });
 };
-export const createLayoutDropTargetDecoration = (pos, props, nodeViewPortalProviderAPI, anchorRectCache
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-) => {
+export const createLayoutDropTargetDecoration = (pos, props, nodeViewPortalProviderAPI, anchorRectCache) => {
   const key = uuid();
   return Decoration.widget(pos, (_, getPosUnsafe) => {
     const getPos = () => {
@@ -152,10 +145,7 @@ export const createLayoutDropTargetDecoration = (pos, props, nodeViewPortalProvi
     type: TYPE_DROP_TARGET_DEC
   });
 };
-export const dropTargetDecorations = (newState, api, formatMessage, nodeViewPortalProviderAPI, activeNode, anchorRectCache, from, to
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-) => {
+export const dropTargetDecorations = (newState, api, formatMessage, nodeViewPortalProviderAPI, activeNode, anchorRectCache, from, to) => {
   unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drop-target-container', 'data-blocks-drop-target-key');
   const decs = [];
   const POS_END_OF_DOC = newState.doc.nodeSize - 2;
@@ -179,9 +169,6 @@ export const dropTargetDecorations = (newState, api, formatMessage, nodeViewPort
     prevNodeStack.push(node);
   };
   const isAdvancedLayoutsPreRelease2 = editorExperiment('advanced_layouts', true);
-
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/max-params
   newState.doc.nodesBetween(docFrom, docTo, (node, pos, parent, index) => {
     let depth = 0;
     // drop target deco at the end position
@@ -216,7 +203,7 @@ export const dropTargetDecorations = (newState, api, formatMessage, nodeViewPort
       const 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 && !isBlocksDragTargetDebug()) {
+      if (!canDrop) {
         pushNodeStack(node, depth);
         return false; //not valid pos, so nested not valid either
       }

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

@@ -19,7 +19,6 @@ import { handleMouseOver } from './handle-mouse-over';
 import { boundKeydownHandler } from './keymap';
 import { defaultActiveAnchorTracker } from './utils/active-anchor-tracker';
 import { AnchorRectCache, isAnchorSupported } from './utils/anchor-utils';
-import { isBlocksDragTargetDebug } from './utils/drag-target-debug';
 import { getTrMetadata } from './utils/transactions';
 export const key = new PluginKey('blockControls');
 const EDITOR_BLOCKS_DRAG_INIT = 'Editor Blocks Drag Initialization Time';
@@ -114,10 +113,7 @@ const initialState = {
   isDocSizeLimitEnabled: null,
   isPMDragging: false
 };
-export const newApply = (api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-) => {
+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;
   let {
     activeNode,
@@ -219,14 +215,14 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
   const isDropTargetsMissing = ((_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging) && maybeNodeCountChanged && !(meta !== null && meta !== void 0 && meta.nodeMoved);
 
   // Remove drop target decorations when dragging stops or they need to be redrawn
-  if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing || isBlocksDragTargetDebug()) {
+  if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
     const dropTargetDecs = findDropTargetDecs(decorations);
     decorations = decorations.remove(dropTargetDecs);
   }
 
   // Add drop targets when dragging starts or some are missing
   if (api) {
-    if (meta !== null && meta !== void 0 && meta.isDragging || isDropTargetsMissing || isBlocksDragTargetDebug()) {
+    if (meta !== null && meta !== void 0 && meta.isDragging || isDropTargetsMissing) {
       const decs = dropTargetDecorations(newState, api, formatMessage, nodeViewPortalProviderAPI, latestActiveNode, anchorRectCache);
       decorations = decorations.add(newState.doc, decs);
     }
@@ -252,10 +248,7 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
     isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging
   };
 };
-export const oldApply = (api, formatMessage, tr, currentState, oldState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-) => {
+export const 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;
   const {
     isNestedEnabled
@@ -355,7 +348,7 @@ export const oldApply = (api, formatMessage, tr, currentState, oldState, newStat
     const decs = dragHandleDecoration(api, formatMessage, meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, nodeViewPortalProviderAPI, meta.activeNode.handleOptions);
     decorations = decorations.add(newState.doc, [decs]);
   }
-  if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing || isBlocksDragTargetDebug()) {
+  if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
     // Remove drop target decoration when dragging stops
     const dropTargetDecs = decorations.find(undefined, undefined, spec => spec.type === 'drop-target-decoration');
     decorations = decorations.remove(dropTargetDecs);
@@ -371,7 +364,7 @@ export const oldApply = (api, formatMessage, tr, currentState, oldState, newStat
   if (api) {
     // Add drop targets when node is being dragged
     // if the transaction is only for analytics and user is dragging, continue to draw drop targets
-    if (shouldCreateDropTargets || isBlocksDragTargetDebug()) {
+    if (shouldCreateDropTargets) {
       var _meta$activeNode7;
       const decs = dropTargetDecorations(newState, api, formatMessage, nodeViewPortalProviderAPI, isNestedEnabled ? (_meta$activeNode7 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode7 !== void 0 ? _meta$activeNode7 : mappedActiveNodePos : meta === null || meta === void 0 ? void 0 : meta.activeNode, anchorRectCache);
       decorations = decorations.add(newState.doc, decs);
@@ -421,8 +414,6 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
       init() {
         return initialState;
       },
-      // Ignored via go/ees005
-      // eslint-disable-next-line @typescript-eslint/max-params
       apply(tr, currentState, oldState, newState) {
         if (isNestedEnabled) {
           return newApply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache);