@atlaskit/editor-plugin-block-controls 2.13.10 → 2.13.12

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.13.12
+
+### Patch Changes
+
+- [#163103](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163103)
+  [`ec14916563763`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ec14916563763) -
+  [ux] [ED-25060] Implement drag and drop a layout column to another layout section
+
+## 2.13.11
+
+### Patch Changes
+
+- [`dda502e353b44`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dda502e353b44) -
+  [ux] [ED-25317] Implement drag and drop a layout column within the same layout section
+
 ## 2.13.10
 
 ### Patch Changes

package/dist/cjs/commands/move-to-layout.js

@@ -8,6 +8,7 @@ var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _consts = require("../consts");
 var _consts2 = require("../ui/consts");
+var _validation = require("../utils/validation");
 var createNewLayout = function createNewLayout(schema, layoutContents) {
   if (layoutContents.length === 0 || layoutContents.length > (0, _consts.maxLayoutColumnSupported)()) {
     return null;
@@ -32,37 +33,60 @@ var createNewLayout = function createNewLayout(schema, layoutContents) {
   }
   return null;
 };
-var updateColumnWidths = function updateColumnWidths(tr, layoutNode, layoutNodePos, newColumnWidth) {
+var updateColumnWidths = function updateColumnWidths(tr, layoutNode, layoutNodePos, childCount) {
+  var newColumnWidth = _consts2.DEFAULT_COLUMN_DISTRIBUTIONS[childCount];
   if (newColumnWidth) {
     layoutNode.content.forEach(function (node, offset) {
       if (node.type.name === 'layoutColumn') {
-        tr = tr.setNodeAttribute(layoutNodePos + offset + 1, 'width', newColumnWidth);
+        tr.setNodeAttribute(layoutNodePos + offset + 1, 'width', newColumnWidth);
       }
     });
   }
-  return tr;
+  return {
+    newColumnWidth: newColumnWidth,
+    tr: tr
+  };
 };
-
-/**
- * Insert a node into an existing layout at position `to` and delete the node
- */
-var moveNode = function moveNode(from, to, newNode, sourceNodeSize, tr) {
-  tr.insert(to, newNode).setSelection(new _state.NodeSelection(tr.doc.resolve(to))).scrollIntoView();
-  var mappedFrom = tr.mapping.map(from);
-  var mappedFromEnd = mappedFrom + sourceNodeSize;
-  tr.delete(mappedFrom, mappedFromEnd);
+var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos, sourceNode, from, to, tr, isSameLayout) {
+  if (isSameLayout) {
+    // reorder columns
+    tr.delete(from, from + sourceNode.nodeSize);
+    var mappedTo = tr.mapping.map(to);
+    tr.insert(mappedTo, sourceNode).setSelection(new _state.NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
+  } else if (toLayout.childCount < (0, _consts.maxLayoutColumnSupported)()) {
+    insertToDestination(tr, to, sourceNode, toLayout, toLayoutPos);
+    var mappedFrom = tr.mapping.map(from);
+    removeFromSource(tr, tr.doc.resolve(mappedFrom));
+  }
   return tr;
 };
-var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos, sourceNode, from, to, tr) {
-  if (toLayout.childCount < (0, _consts.maxLayoutColumnSupported)()) {
-    var newColumnWidth = _consts2.DEFAULT_COLUMN_DISTRIBUTIONS[toLayout.childCount + 1];
-    updateColumnWidths(tr, toLayout, toLayoutPos, newColumnWidth);
-    var _ref2 = tr.doc.type.schema.nodes || {},
-      layoutColumn = _ref2.layoutColumn;
-    moveNode(from, to, layoutColumn.create({
-      width: newColumnWidth
-    }, sourceNode), sourceNode.nodeSize, tr);
+var removeFromSource = function removeFromSource(tr, $from) {
+  var sourceNode = $from.nodeAfter;
+  var sourceParent = $from.parent;
+  if (!sourceNode) {
+    return tr;
+  }
+  var sourceNodeEndPos = $from.pos + sourceNode.nodeSize;
+  if (sourceNode.type.name === 'layoutColumn') {
+    if (sourceParent.childCount === _consts.MIN_LAYOUT_COLUMN) {
+      tr.delete($from.pos + 1, sourceNodeEndPos - 1);
+      return tr;
+    } else {
+      updateColumnWidths(tr, $from.parent, $from.before($from.depth), sourceParent.childCount - 1);
+    }
   }
+  tr.delete($from.pos, sourceNodeEndPos);
+  return tr;
+};
+var insertToDestination = function insertToDestination(tr, to, sourceNode, toLayout, toLayoutPos) {
+  var _ref2 = updateColumnWidths(tr, toLayout, toLayoutPos, toLayout.childCount + 1) || {},
+    newColumnWidth = _ref2.newColumnWidth;
+  var _ref3 = tr.doc.type.schema.nodes || {},
+    layoutColumn = _ref3.layoutColumn;
+  var content = layoutColumn.createChecked({
+    width: newColumnWidth
+  }, sourceNode.type.name === 'layoutColumn' ? sourceNode.content : sourceNode);
+  tr.insert(to, content).setSelection(new _state.NodeSelection(tr.doc.resolve(to))).scrollIntoView();
   return tr;
 };
 
@@ -74,10 +98,10 @@ var canMoveToLayout = function canMoveToLayout(from, to, tr) {
   if (from === to) {
     return;
   }
-  var _ref3 = tr.doc.type.schema.nodes || {},
-    layoutSection = _ref3.layoutSection,
-    layoutColumn = _ref3.layoutColumn,
-    doc = _ref3.doc;
+  var _ref4 = tr.doc.type.schema.nodes || {},
+    layoutSection = _ref4.layoutSection,
+    layoutColumn = _ref4.layoutColumn,
+    doc = _ref4.doc;
 
   // layout plugin does not exist
   if (!layoutSection || !layoutColumn) {
@@ -106,8 +130,8 @@ var canMoveToLayout = function canMoveToLayout(from, to, tr) {
 };
 var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
   return function (from, to, options) {
-    return function (_ref4) {
-      var tr = _ref4.tr;
+    return function (_ref5) {
+      var tr = _ref5.tr;
       var canMove = canMoveToLayout(from, to, tr);
       if (!canMove) {
         return tr;
@@ -116,11 +140,11 @@ var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
         fromNode = canMove.fromNode,
         $from = canMove.$from,
         $to = canMove.$to;
-      var _ref5 = tr.doc.type.schema.nodes || {},
-        layoutSection = _ref5.layoutSection,
-        layoutColumn = _ref5.layoutColumn;
-      var _ref6 = tr.doc.type.schema.marks || {},
-        breakout = _ref6.breakout;
+      var _ref6 = tr.doc.type.schema.nodes || {},
+        layoutSection = _ref6.layoutSection,
+        layoutColumn = _ref6.layoutColumn;
+      var _ref7 = tr.doc.type.schema.marks || {},
+        breakout = _ref7.breakout;
       var fromNodeWithoutBreakout = fromNode;
 
       // remove breakout from node;
@@ -136,12 +160,12 @@ var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
       }
       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);
+        return moveToExistingLayout(toNode, to, fromNodeWithoutBreakout, from, toPos, tr, (0, _validation.isInSameLayout)($from, $to));
       } 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);
+        return moveToExistingLayout(toLayout, toLayoutPos, fromNodeWithoutBreakout, from, _toPos, tr, (0, _validation.isInSameLayout)($from, $to));
       } else {
         var toNodeWithoutBreakout = toNode;
 

package/dist/cjs/consts.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.maxLayoutColumnSupported = exports.DIRECTION = void 0;
+exports.maxLayoutColumnSupported = exports.MIN_LAYOUT_COLUMN = exports.DIRECTION = void 0;
 var _advancedLayoutsFlags = require("./utils/advanced-layouts-flags");
 var DIRECTION = exports.DIRECTION = /*#__PURE__*/function (DIRECTION) {
   DIRECTION["UP"] = "up";
@@ -14,4 +14,5 @@ var DIRECTION = exports.DIRECTION = /*#__PURE__*/function (DIRECTION) {
 }({});
 var maxLayoutColumnSupported = exports.maxLayoutColumnSupported = function maxLayoutColumnSupported() {
   return (0, _advancedLayoutsFlags.isPreRelease2)() ? 5 : 3;
-};
+};
+var MIN_LAYOUT_COLUMN = exports.MIN_LAYOUT_COLUMN = 2;

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

@@ -88,7 +88,7 @@ var findDropTargetDecs = exports.findDropTargetDecs = function findDropTargetDec
     return spec.type === _decorationsCommon.TYPE_DROP_TARGET_DEC;
   });
 };
-var createDropTargetDecoration = exports.createDropTargetDecoration = function createDropTargetDecoration(pos, props, side, anchorRectCache) {
+var createDropTargetDecoration = exports.createDropTargetDecoration = function createDropTargetDecoration(pos, props, side, anchorRectCache, isSameLayout) {
   return _view.Decoration.widget(pos, function (_, getPos) {
     var element = document.createElement('div');
     element.setAttribute('data-blocks-drop-target-container', 'true');
@@ -102,7 +102,8 @@ var createDropTargetDecoration = exports.createDropTargetDecoration = function c
       element.style.setProperty('display', 'block');
       _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTargetV.DropTargetV2, _objectSpread(_objectSpread({}, props), {}, {
         getPos: getPos,
-        anchorRectCache: anchorRectCache
+        anchorRectCache: anchorRectCache,
+        isSameLayout: isSameLayout
       })), element);
     } else {
       _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, _objectSpread(_objectSpread({}, props), {}, {
@@ -136,7 +137,8 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
   var docTo = to === undefined || to > POS_END_OF_DOC ? POS_END_OF_DOC : to;
   var prevNode;
   var activeNodePos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
-  var activePMNode = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos).nodeAfter;
+  var $activeNodePos = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos);
+  var activePMNode = $activeNodePos && $activeNodePos.nodeAfter;
   anchorRectCache === null || anchorRectCache === void 0 || anchorRectCache.clear();
   var prevNodeStack = [];
   var popNodeStack = function popNodeStack(depth) {
@@ -156,12 +158,15 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
     var depth = 0;
     // drop target deco at the end position
     var endPos;
+    var $pos = newState.doc.resolve(pos);
+    var isSameLayout = $activeNodePos && (0, _validation.isInSameLayout)($activeNodePos, $pos);
     if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
-      depth = newState.doc.resolve(pos).depth;
+      depth = $pos.depth;
       if (isAdvancedLayoutsPreRelease2) {
-        if (node.type.name === 'layoutColumn' && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' && (parent === null || parent === void 0 ? void 0 : parent.firstChild) !== node &&
+        if (node.type.name === 'layoutColumn' && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' && (parent === null || parent === void 0 ? void 0 : parent.firstChild) !== node && (
         // Not the first node
-        (parent === null || parent === void 0 ? void 0 : parent.childCount) < (0, _consts.maxLayoutColumnSupported)()) {
+        (parent === null || parent === void 0 ? void 0 : parent.childCount) < (0, _consts.maxLayoutColumnSupported)() || isSameLayout)) {
+          // Add drop target for layout columns
           decs.push(createLayoutDropTargetDecoration(pos, {
             api: api,
             parent: parent,
@@ -185,7 +190,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
         }
         return shouldDescend(node); //skip over, don't consider it a valid depth
       }
-      var canDrop = activePMNode && (0, _validation.canMoveNodeToIndex)(parent, index, activePMNode);
+      var canDrop = activePMNode && (0, _validation.canMoveNodeToIndex)(parent, index, activePMNode, node);
 
       //NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
       if (!canDrop && !(0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
@@ -212,7 +217,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
       parentNode: parent || undefined,
       formatMessage: formatMessage,
       dropTargetStyle: shouldShowFullHeight ? 'remainingHeight' : 'default'
-    }, -1, anchorRectCache));
+    }, -1, anchorRectCache, isSameLayout));
     if (endPos !== undefined) {
       decs.push(createDropTargetDecoration(endPos, {
         api: api,

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

@@ -187,7 +187,8 @@ var DropTargetV2 = exports.DropTargetV2 = function DropTargetV2(props) {
     formatMessage = props.formatMessage,
     anchorRectCache = props.anchorRectCache,
     _props$dropTargetStyl = props.dropTargetStyle,
-    dropTargetStyle = _props$dropTargetStyl === void 0 ? 'default' : _props$dropTargetStyl;
+    dropTargetStyle = _props$dropTargetStyl === void 0 ? 'default' : _props$dropTargetStyl,
+    isSameLayout = props.isSameLayout;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isDraggedOver = _useState2[0],
@@ -254,7 +255,7 @@ var DropTargetV2 = exports.DropTargetV2 = function DropTargetV2(props) {
     anchorRectCache: anchorRectCache,
     position: "lower",
     isNestedDropTarget: isNestedDropTarget
-  }), (0, _inlineDropTarget.shouldAllowInlineDropTarget)(isNestedDropTarget, nextNode) && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_inlineDropTarget2.InlineDropTarget, (0, _extends2.default)({}, props, {
+  }), (0, _inlineDropTarget.shouldAllowInlineDropTarget)(isNestedDropTarget, nextNode, isSameLayout) && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_inlineDropTarget2.InlineDropTarget, (0, _extends2.default)({}, props, {
     position: "left"
   })), (0, _react2.jsx)(_inlineDropTarget2.InlineDropTarget, (0, _extends2.default)({}, props, {
     position: "right"

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

@@ -172,7 +172,7 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
   }, [onDrop, setIsDraggedOver]);
   return (0, _react2.jsx)("div", {
     ref: ref,
-    "data-test-id": "drop-target-hover-zone-".concat(position),
+    "data-testid": "drop-target-hover-zone-".concat(position),
     css: [hoverZoneCommonStyle, inlineHoverZoneRectStyle]
   }, isDraggedOver || (0, _dragTargetDebug.isBlocksDragTargetDebug)() ? (0, _react2.jsx)(_box.DropIndicator, {
     edge: dropIndicatorPos

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

@@ -9,6 +9,7 @@ var _consts = require("../consts");
 var _advancedLayoutsFlags = require("./advanced-layouts-flags");
 var _checkMediaLayout = require("./check-media-layout");
 var shouldAllowInlineDropTarget = exports.shouldAllowInlineDropTarget = function shouldAllowInlineDropTarget(isNested, node) {
+  var isSameLayout = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   if (!(0, _advancedLayoutsFlags.isPreRelease1)() || isNested) {
     return false;
   }
@@ -16,7 +17,7 @@ var shouldAllowInlineDropTarget = exports.shouldAllowInlineDropTarget = function
     return false;
   }
   if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
-    return node.childCount < (0, _consts.maxLayoutColumnSupported)();
+    return node.childCount < (0, _consts.maxLayoutColumnSupported)() || (0, _advancedLayoutsFlags.isPreRelease2)() && isSameLayout;
   }
   return !(0, _utils.isEmptyParagraph)(node);
 };

package/dist/cjs/utils/validation.js

@@ -5,10 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.canMoveNodeToIndex = canMoveNodeToIndex;
-exports.transformSliceExpandToNestedExpand = exports.transformExpandToNestedExpand = exports.memoizedTransformExpandToNestedExpand = exports.isNestedExpand = exports.isLayoutColumn = exports.isInsideTable = exports.isExpand = exports.isDoc = void 0;
+exports.transformSliceExpandToNestedExpand = exports.transformExpandToNestedExpand = exports.memoizedTransformExpandToNestedExpand = exports.isNestedExpand = exports.isLayoutColumn = exports.isInsideTable = exports.isInSameLayout = exports.isExpand = exports.isDoc = void 0;
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _advancedLayoutsFlags = require("../utils/advanced-layouts-flags");
 var isInsideTable = exports.isInsideTable = function isInsideTable(nodeType) {
   var _nodeType$schema$node = nodeType.schema.nodes,
     tableCell = _nodeType$schema$node.tableCell,
@@ -27,6 +28,13 @@ var isExpand = exports.isExpand = function isExpand(nodeType) {
 var isNestedExpand = exports.isNestedExpand = function isNestedExpand(nodeType) {
   return nodeType === nodeType.schema.nodes.nestedExpand;
 };
+var isInSameLayout = exports.isInSameLayout = function isInSameLayout($from, $to) {
+  var fromNode = $from.nodeAfter;
+  var toNode = $to.nodeAfter;
+  return !!(fromNode && toNode && fromNode.type.name === 'layoutColumn' && ['layoutSection', 'layoutColumn'].includes(toNode.type.name) && (
+  // fromNode can either be in the same layoutSection as toNode or is a layoutColumn inside the toNode (type layoutSection)
+  $from.sameParent($to) || $from.parent === toNode));
+};
 
 /**
  * This function converts an expand into a nested expand,
@@ -69,7 +77,12 @@ var memoizedTransformExpandToNestedExpand = exports.memoizedTransformExpandToNes
     return null;
   }
 });
-function canMoveNodeToIndex(destParent, indexIntoParent, srcNode) {
+function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, destNode) {
+  if ((0, _advancedLayoutsFlags.isPreRelease2)() &&
+  // Allow drag layout column and drop into layout section
+  srcNode.type.name === 'layoutColumn' && (destNode === null || destNode === void 0 ? void 0 : destNode.type.name) === 'layoutSection') {
+    return true;
+  }
   var srcNodeType = srcNode.type;
   var parentNodeType = destParent === null || destParent === void 0 ? void 0 : destParent.type.name;
   var activeNodeType = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type.name;

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

@@ -1,7 +1,8 @@
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { maxLayoutColumnSupported } from '../consts';
+import { maxLayoutColumnSupported, MIN_LAYOUT_COLUMN } from '../consts';
 import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
+import { isInSameLayout } from '../utils/validation';
 const createNewLayout = (schema, layoutContents) => {
   if (layoutContents.length === 0 || layoutContents.length > maxLayoutColumnSupported()) {
     return null;
@@ -27,38 +28,62 @@ const createNewLayout = (schema, layoutContents) => {
   }
   return null;
 };
-const updateColumnWidths = (tr, layoutNode, layoutNodePos, newColumnWidth) => {
+const updateColumnWidths = (tr, layoutNode, layoutNodePos, childCount) => {
+  const newColumnWidth = DEFAULT_COLUMN_DISTRIBUTIONS[childCount];
   if (newColumnWidth) {
     layoutNode.content.forEach((node, offset) => {
       if (node.type.name === 'layoutColumn') {
-        tr = tr.setNodeAttribute(layoutNodePos + offset + 1, 'width', newColumnWidth);
+        tr.setNodeAttribute(layoutNodePos + offset + 1, 'width', newColumnWidth);
       }
     });
   }
-  return tr;
+  return {
+    newColumnWidth,
+    tr
+  };
 };
-
-/**
- * Insert a node into an existing layout at position `to` and delete the node
- */
-const moveNode = (from, to, newNode, sourceNodeSize, tr) => {
-  tr.insert(to, newNode).setSelection(new NodeSelection(tr.doc.resolve(to))).scrollIntoView();
-  const mappedFrom = tr.mapping.map(from);
-  const mappedFromEnd = mappedFrom + sourceNodeSize;
-  tr.delete(mappedFrom, mappedFromEnd);
+const moveToExistingLayout = (toLayout, toLayoutPos, sourceNode, from, to, tr, isSameLayout) => {
+  if (isSameLayout) {
+    // reorder columns
+    tr.delete(from, from + sourceNode.nodeSize);
+    const mappedTo = tr.mapping.map(to);
+    tr.insert(mappedTo, sourceNode).setSelection(new NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
+  } else if (toLayout.childCount < maxLayoutColumnSupported()) {
+    insertToDestination(tr, to, sourceNode, toLayout, toLayoutPos);
+    const mappedFrom = tr.mapping.map(from);
+    removeFromSource(tr, tr.doc.resolve(mappedFrom));
+  }
   return tr;
 };
-const moveToExistingLayout = (toLayout, toLayoutPos, sourceNode, from, to, tr) => {
-  if (toLayout.childCount < maxLayoutColumnSupported()) {
-    const newColumnWidth = DEFAULT_COLUMN_DISTRIBUTIONS[toLayout.childCount + 1];
-    updateColumnWidths(tr, toLayout, toLayoutPos, newColumnWidth);
-    const {
-      layoutColumn
-    } = tr.doc.type.schema.nodes || {};
-    moveNode(from, to, layoutColumn.create({
-      width: newColumnWidth
-    }, sourceNode), sourceNode.nodeSize, tr);
+const removeFromSource = (tr, $from) => {
+  const sourceNode = $from.nodeAfter;
+  const sourceParent = $from.parent;
+  if (!sourceNode) {
+    return tr;
   }
+  const sourceNodeEndPos = $from.pos + sourceNode.nodeSize;
+  if (sourceNode.type.name === 'layoutColumn') {
+    if (sourceParent.childCount === MIN_LAYOUT_COLUMN) {
+      tr.delete($from.pos + 1, sourceNodeEndPos - 1);
+      return tr;
+    } else {
+      updateColumnWidths(tr, $from.parent, $from.before($from.depth), sourceParent.childCount - 1);
+    }
+  }
+  tr.delete($from.pos, sourceNodeEndPos);
+  return tr;
+};
+const insertToDestination = (tr, to, sourceNode, 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).setSelection(new NodeSelection(tr.doc.resolve(to))).scrollIntoView();
   return tr;
 };
 
@@ -134,12 +159,12 @@ export const moveToLayout = api => (from, to, options) => ({
   }
   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);
+    return moveToExistingLayout(toNode, to, fromNodeWithoutBreakout, from, toPos, tr, isInSameLayout($from, $to));
   } 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);
+    return moveToExistingLayout(toLayout, toLayoutPos, fromNodeWithoutBreakout, from, toPos, tr, isInSameLayout($from, $to));
   } else {
     let toNodeWithoutBreakout = toNode;
 

package/dist/es2019/consts.js

@@ -8,4 +8,5 @@ export let DIRECTION = /*#__PURE__*/function (DIRECTION) {
 }({});
 export const maxLayoutColumnSupported = () => {
   return isPreRelease2() ? 5 : 3;
-};
+};
+export const MIN_LAYOUT_COLUMN = 2;

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

@@ -11,7 +11,7 @@ import { DropTargetLayout } from '../ui/drop-target-layout';
 import { DropTargetV2, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET } from '../ui/drop-target-v2';
 import { isPreRelease2 } from '../utils/advanced-layouts-flags';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
-import { canMoveNodeToIndex } from '../utils/validation';
+import { canMoveNodeToIndex, isInSameLayout } from '../utils/validation';
 import { getNestedDepth, TYPE_DROP_TARGET_DEC, unmountDecorations } from './decorations-common';
 const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
 const PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
@@ -76,7 +76,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, side, anchorRectCache) => {
+export const createDropTargetDecoration = (pos, props, side, anchorRectCache, isSameLayout) => {
   return Decoration.widget(pos, (_, getPos) => {
     const element = document.createElement('div');
     element.setAttribute('data-blocks-drop-target-container', 'true');
@@ -92,7 +92,8 @@ export const createDropTargetDecoration = (pos, props, side, anchorRectCache) =>
       ReactDOM.render( /*#__PURE__*/createElement(DropTargetV2, {
         ...props,
         getPos,
-        anchorRectCache
+        anchorRectCache,
+        isSameLayout
       }), element);
     } else {
       ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
@@ -128,7 +129,8 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode,
   const docTo = to === undefined || to > POS_END_OF_DOC ? POS_END_OF_DOC : to;
   let prevNode;
   const activeNodePos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
-  const activePMNode = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos).nodeAfter;
+  const $activeNodePos = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos);
+  const activePMNode = $activeNodePos && $activeNodePos.nodeAfter;
   anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.clear();
   const prevNodeStack = [];
   const popNodeStack = depth => {
@@ -148,12 +150,15 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode,
     let depth = 0;
     // drop target deco at the end position
     let endPos;
+    const $pos = newState.doc.resolve(pos);
+    const isSameLayout = $activeNodePos && isInSameLayout($activeNodePos, $pos);
     if (editorExperiment('nested-dnd', true)) {
-      depth = newState.doc.resolve(pos).depth;
+      depth = $pos.depth;
       if (isAdvancedLayoutsPreRelease2) {
-        if (node.type.name === 'layoutColumn' && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' && (parent === null || parent === void 0 ? void 0 : parent.firstChild) !== node &&
+        if (node.type.name === 'layoutColumn' && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' && (parent === null || parent === void 0 ? void 0 : parent.firstChild) !== node && (
         // Not the first node
-        (parent === null || parent === void 0 ? void 0 : parent.childCount) < maxLayoutColumnSupported()) {
+        (parent === null || parent === void 0 ? void 0 : parent.childCount) < maxLayoutColumnSupported() || isSameLayout)) {
+          // Add drop target for layout columns
           decs.push(createLayoutDropTargetDecoration(pos, {
             api,
             parent,
@@ -177,7 +182,7 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode,
         }
         return shouldDescend(node); //skip over, don't consider it a valid depth
       }
-      const canDrop = activePMNode && canMoveNodeToIndex(parent, index, activePMNode);
+      const canDrop = activePMNode && canMoveNodeToIndex(parent, index, activePMNode, node);
 
       //NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
       if (!canDrop && !isBlocksDragTargetDebug()) {
@@ -204,7 +209,7 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode,
       parentNode: parent || undefined,
       formatMessage,
       dropTargetStyle: shouldShowFullHeight ? 'remainingHeight' : 'default'
-    }, -1, anchorRectCache));
+    }, -1, anchorRectCache, isSameLayout));
     if (endPos !== undefined) {
       decs.push(createDropTargetDecoration(endPos, {
         api,

package/dist/es2019/ui/drop-target-v2.js

@@ -174,7 +174,8 @@ export const DropTargetV2 = props => {
     parentNode,
     formatMessage,
     anchorRectCache,
-    dropTargetStyle = 'default'
+    dropTargetStyle = 'default',
+    isSameLayout
   } = props;
   const [isDraggedOver, setIsDraggedOver] = useState(false);
   const {
@@ -238,7 +239,7 @@ export const DropTargetV2 = props => {
     anchorRectCache: anchorRectCache,
     position: "lower",
     isNestedDropTarget: isNestedDropTarget
-  }), shouldAllowInlineDropTarget(isNestedDropTarget, nextNode) && jsx(Fragment, null, jsx(InlineDropTarget, _extends({}, props, {
+  }), shouldAllowInlineDropTarget(isNestedDropTarget, nextNode, isSameLayout) && jsx(Fragment, null, jsx(InlineDropTarget, _extends({}, props, {
     position: "left"
   })), jsx(InlineDropTarget, _extends({}, props, {
     position: "right"

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

@@ -162,7 +162,7 @@ export const InlineDropTarget = ({
   }, [onDrop, setIsDraggedOver]);
   return jsx("div", {
     ref: ref,
-    "data-test-id": `drop-target-hover-zone-${position}`,
+    "data-testid": `drop-target-hover-zone-${position}`,
     css: [hoverZoneCommonStyle, inlineHoverZoneRectStyle]
   }, isDraggedOver || isBlocksDragTargetDebug() ? jsx(DropIndicator, {
     edge: dropIndicatorPos

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

@@ -1,8 +1,12 @@
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { maxLayoutColumnSupported } from '../consts';
-import { isPreRelease1 } from './advanced-layouts-flags';
+import { isPreRelease1, isPreRelease2 } from './advanced-layouts-flags';
 import { isWrappedMedia } from './check-media-layout';
-export const shouldAllowInlineDropTarget = (isNested, node) => {
+export const shouldAllowInlineDropTarget = (isNested, node,
+/**
+ * Is the active node in the same layout as the target node
+ */
+isSameLayout = false) => {
   if (!isPreRelease1() || isNested) {
     return false;
   }
@@ -10,7 +14,7 @@ export const shouldAllowInlineDropTarget = (isNested, node) => {
     return false;
   }
   if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
-    return node.childCount < maxLayoutColumnSupported();
+    return node.childCount < maxLayoutColumnSupported() || isPreRelease2() && isSameLayout;
   }
   return !isEmptyParagraph(node);
 };

package/dist/es2019/utils/validation.js

@@ -1,6 +1,7 @@
 import memoizeOne from 'memoize-one';
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { isPreRelease2 } from '../utils/advanced-layouts-flags';
 export const isInsideTable = nodeType => {
   const {
     tableCell,
@@ -20,6 +21,13 @@ export const isExpand = nodeType => {
 export const isNestedExpand = nodeType => {
   return nodeType === nodeType.schema.nodes.nestedExpand;
 };
+export const isInSameLayout = ($from, $to) => {
+  const fromNode = $from.nodeAfter;
+  const toNode = $to.nodeAfter;
+  return !!(fromNode && toNode && fromNode.type.name === 'layoutColumn' && ['layoutSection', 'layoutColumn'].includes(toNode.type.name) && (
+  // fromNode can either be in the same layoutSection as toNode or is a layoutColumn inside the toNode (type layoutSection)
+  $from.sameParent($to) || $from.parent === toNode));
+};
 
 /**
  * This function converts an expand into a nested expand,
@@ -63,7 +71,12 @@ export const memoizedTransformExpandToNestedExpand = memoizeOne(node => {
     return null;
   }
 });
-export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode) {
+export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, destNode) {
+  if (isPreRelease2() &&
+  // Allow drag layout column and drop into layout section
+  srcNode.type.name === 'layoutColumn' && (destNode === null || destNode === void 0 ? void 0 : destNode.type.name) === 'layoutSection') {
+    return true;
+  }
   let srcNodeType = srcNode.type;
   const parentNodeType = destParent === null || destParent === void 0 ? void 0 : destParent.type.name;
   const activeNodeType = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type.name;

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

@@ -1,7 +1,8 @@
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { maxLayoutColumnSupported } from '../consts';
+import { maxLayoutColumnSupported, MIN_LAYOUT_COLUMN } from '../consts';
 import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
+import { isInSameLayout } from '../utils/validation';
 var createNewLayout = function createNewLayout(schema, layoutContents) {
   if (layoutContents.length === 0 || layoutContents.length > maxLayoutColumnSupported()) {
     return null;
@@ -26,37 +27,60 @@ var createNewLayout = function createNewLayout(schema, layoutContents) {
   }
   return null;
 };
-var updateColumnWidths = function updateColumnWidths(tr, layoutNode, layoutNodePos, newColumnWidth) {
+var updateColumnWidths = function updateColumnWidths(tr, layoutNode, layoutNodePos, childCount) {
+  var newColumnWidth = DEFAULT_COLUMN_DISTRIBUTIONS[childCount];
   if (newColumnWidth) {
     layoutNode.content.forEach(function (node, offset) {
       if (node.type.name === 'layoutColumn') {
-        tr = tr.setNodeAttribute(layoutNodePos + offset + 1, 'width', newColumnWidth);
+        tr.setNodeAttribute(layoutNodePos + offset + 1, 'width', newColumnWidth);
       }
     });
   }
-  return tr;
+  return {
+    newColumnWidth: newColumnWidth,
+    tr: tr
+  };
 };
-
-/**
- * Insert a node into an existing layout at position `to` and delete the node
- */
-var moveNode = function moveNode(from, to, newNode, sourceNodeSize, tr) {
-  tr.insert(to, newNode).setSelection(new NodeSelection(tr.doc.resolve(to))).scrollIntoView();
-  var mappedFrom = tr.mapping.map(from);
-  var mappedFromEnd = mappedFrom + sourceNodeSize;
-  tr.delete(mappedFrom, mappedFromEnd);
+var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos, sourceNode, from, to, tr, isSameLayout) {
+  if (isSameLayout) {
+    // reorder columns
+    tr.delete(from, from + sourceNode.nodeSize);
+    var mappedTo = tr.mapping.map(to);
+    tr.insert(mappedTo, sourceNode).setSelection(new NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
+  } else if (toLayout.childCount < maxLayoutColumnSupported()) {
+    insertToDestination(tr, to, sourceNode, toLayout, toLayoutPos);
+    var mappedFrom = tr.mapping.map(from);
+    removeFromSource(tr, tr.doc.resolve(mappedFrom));
+  }
   return tr;
 };
-var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos, sourceNode, from, to, tr) {
-  if (toLayout.childCount < maxLayoutColumnSupported()) {
-    var newColumnWidth = DEFAULT_COLUMN_DISTRIBUTIONS[toLayout.childCount + 1];
-    updateColumnWidths(tr, toLayout, toLayoutPos, newColumnWidth);
-    var _ref2 = tr.doc.type.schema.nodes || {},
-      layoutColumn = _ref2.layoutColumn;
-    moveNode(from, to, layoutColumn.create({
-      width: newColumnWidth
-    }, sourceNode), sourceNode.nodeSize, tr);
+var removeFromSource = function removeFromSource(tr, $from) {
+  var sourceNode = $from.nodeAfter;
+  var sourceParent = $from.parent;
+  if (!sourceNode) {
+    return tr;
+  }
+  var sourceNodeEndPos = $from.pos + sourceNode.nodeSize;
+  if (sourceNode.type.name === 'layoutColumn') {
+    if (sourceParent.childCount === MIN_LAYOUT_COLUMN) {
+      tr.delete($from.pos + 1, sourceNodeEndPos - 1);
+      return tr;
+    } else {
+      updateColumnWidths(tr, $from.parent, $from.before($from.depth), sourceParent.childCount - 1);
+    }
   }
+  tr.delete($from.pos, sourceNodeEndPos);
+  return tr;
+};
+var insertToDestination = function insertToDestination(tr, to, sourceNode, toLayout, toLayoutPos) {
+  var _ref2 = updateColumnWidths(tr, toLayout, toLayoutPos, toLayout.childCount + 1) || {},
+    newColumnWidth = _ref2.newColumnWidth;
+  var _ref3 = tr.doc.type.schema.nodes || {},
+    layoutColumn = _ref3.layoutColumn;
+  var content = layoutColumn.createChecked({
+    width: newColumnWidth
+  }, sourceNode.type.name === 'layoutColumn' ? sourceNode.content : sourceNode);
+  tr.insert(to, content).setSelection(new NodeSelection(tr.doc.resolve(to))).scrollIntoView();
   return tr;
 };
 
@@ -68,10 +92,10 @@ var canMoveToLayout = function canMoveToLayout(from, to, tr) {
   if (from === to) {
     return;
   }
-  var _ref3 = tr.doc.type.schema.nodes || {},
-    layoutSection = _ref3.layoutSection,
-    layoutColumn = _ref3.layoutColumn,
-    doc = _ref3.doc;
+  var _ref4 = tr.doc.type.schema.nodes || {},
+    layoutSection = _ref4.layoutSection,
+    layoutColumn = _ref4.layoutColumn,
+    doc = _ref4.doc;
 
   // layout plugin does not exist
   if (!layoutSection || !layoutColumn) {
@@ -100,8 +124,8 @@ var canMoveToLayout = function canMoveToLayout(from, to, tr) {
 };
 export var moveToLayout = function moveToLayout(api) {
   return function (from, to, options) {
-    return function (_ref4) {
-      var tr = _ref4.tr;
+    return function (_ref5) {
+      var tr = _ref5.tr;
       var canMove = canMoveToLayout(from, to, tr);
       if (!canMove) {
         return tr;
@@ -110,11 +134,11 @@ export var moveToLayout = function moveToLayout(api) {
         fromNode = canMove.fromNode,
         $from = canMove.$from,
         $to = canMove.$to;
-      var _ref5 = tr.doc.type.schema.nodes || {},
-        layoutSection = _ref5.layoutSection,
-        layoutColumn = _ref5.layoutColumn;
-      var _ref6 = tr.doc.type.schema.marks || {},
-        breakout = _ref6.breakout;
+      var _ref6 = tr.doc.type.schema.nodes || {},
+        layoutSection = _ref6.layoutSection,
+        layoutColumn = _ref6.layoutColumn;
+      var _ref7 = tr.doc.type.schema.marks || {},
+        breakout = _ref7.breakout;
       var fromNodeWithoutBreakout = fromNode;
 
       // remove breakout from node;
@@ -130,12 +154,12 @@ export var moveToLayout = function moveToLayout(api) {
       }
       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);
+        return moveToExistingLayout(toNode, to, fromNodeWithoutBreakout, from, toPos, tr, isInSameLayout($from, $to));
       } 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);
+        return moveToExistingLayout(toLayout, toLayoutPos, fromNodeWithoutBreakout, from, _toPos, tr, isInSameLayout($from, $to));
       } else {
         var toNodeWithoutBreakout = toNode;
 

package/dist/esm/consts.js

@@ -8,4 +8,5 @@ export var DIRECTION = /*#__PURE__*/function (DIRECTION) {
 }({});
 export var maxLayoutColumnSupported = function maxLayoutColumnSupported() {
   return isPreRelease2() ? 5 : 3;
-};
+};
+export var MIN_LAYOUT_COLUMN = 2;

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

@@ -14,7 +14,7 @@ import { DropTargetLayout } from '../ui/drop-target-layout';
 import { DropTargetV2, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET } from '../ui/drop-target-v2';
 import { isPreRelease2 } from '../utils/advanced-layouts-flags';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
-import { canMoveNodeToIndex } from '../utils/validation';
+import { canMoveNodeToIndex, isInSameLayout } from '../utils/validation';
 import { getNestedDepth, TYPE_DROP_TARGET_DEC, unmountDecorations } from './decorations-common';
 var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
 var PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
@@ -81,7 +81,7 @@ export var findDropTargetDecs = function findDropTargetDecs(decorations, from, t
     return spec.type === TYPE_DROP_TARGET_DEC;
   });
 };
-export var createDropTargetDecoration = function createDropTargetDecoration(pos, props, side, anchorRectCache) {
+export var createDropTargetDecoration = function createDropTargetDecoration(pos, props, side, anchorRectCache, isSameLayout) {
   return Decoration.widget(pos, function (_, getPos) {
     var element = document.createElement('div');
     element.setAttribute('data-blocks-drop-target-container', 'true');
@@ -95,7 +95,8 @@ export var createDropTargetDecoration = function createDropTargetDecoration(pos,
       element.style.setProperty('display', 'block');
       ReactDOM.render( /*#__PURE__*/createElement(DropTargetV2, _objectSpread(_objectSpread({}, props), {}, {
         getPos: getPos,
-        anchorRectCache: anchorRectCache
+        anchorRectCache: anchorRectCache,
+        isSameLayout: isSameLayout
       })), element);
     } else {
       ReactDOM.render( /*#__PURE__*/createElement(DropTarget, _objectSpread(_objectSpread({}, props), {}, {
@@ -129,7 +130,8 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
   var docTo = to === undefined || to > POS_END_OF_DOC ? POS_END_OF_DOC : to;
   var prevNode;
   var activeNodePos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
-  var activePMNode = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos).nodeAfter;
+  var $activeNodePos = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos);
+  var activePMNode = $activeNodePos && $activeNodePos.nodeAfter;
   anchorRectCache === null || anchorRectCache === void 0 || anchorRectCache.clear();
   var prevNodeStack = [];
   var popNodeStack = function popNodeStack(depth) {
@@ -149,12 +151,15 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
     var depth = 0;
     // drop target deco at the end position
     var endPos;
+    var $pos = newState.doc.resolve(pos);
+    var isSameLayout = $activeNodePos && isInSameLayout($activeNodePos, $pos);
     if (editorExperiment('nested-dnd', true)) {
-      depth = newState.doc.resolve(pos).depth;
+      depth = $pos.depth;
       if (isAdvancedLayoutsPreRelease2) {
-        if (node.type.name === 'layoutColumn' && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' && (parent === null || parent === void 0 ? void 0 : parent.firstChild) !== node &&
+        if (node.type.name === 'layoutColumn' && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' && (parent === null || parent === void 0 ? void 0 : parent.firstChild) !== node && (
         // Not the first node
-        (parent === null || parent === void 0 ? void 0 : parent.childCount) < maxLayoutColumnSupported()) {
+        (parent === null || parent === void 0 ? void 0 : parent.childCount) < maxLayoutColumnSupported() || isSameLayout)) {
+          // Add drop target for layout columns
           decs.push(createLayoutDropTargetDecoration(pos, {
             api: api,
             parent: parent,
@@ -178,7 +183,7 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
         }
         return shouldDescend(node); //skip over, don't consider it a valid depth
       }
-      var canDrop = activePMNode && canMoveNodeToIndex(parent, index, activePMNode);
+      var canDrop = activePMNode && canMoveNodeToIndex(parent, index, activePMNode, node);
 
       //NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
       if (!canDrop && !isBlocksDragTargetDebug()) {
@@ -205,7 +210,7 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
       parentNode: parent || undefined,
       formatMessage: formatMessage,
       dropTargetStyle: shouldShowFullHeight ? 'remainingHeight' : 'default'
-    }, -1, anchorRectCache));
+    }, -1, anchorRectCache, isSameLayout));
     if (endPos !== undefined) {
       decs.push(createDropTargetDecoration(endPos, {
         api: api,

package/dist/esm/ui/drop-target-v2.js

@@ -179,7 +179,8 @@ export var DropTargetV2 = function DropTargetV2(props) {
     formatMessage = props.formatMessage,
     anchorRectCache = props.anchorRectCache,
     _props$dropTargetStyl = props.dropTargetStyle,
-    dropTargetStyle = _props$dropTargetStyl === void 0 ? 'default' : _props$dropTargetStyl;
+    dropTargetStyle = _props$dropTargetStyl === void 0 ? 'default' : _props$dropTargetStyl,
+    isSameLayout = props.isSameLayout;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isDraggedOver = _useState2[0],
@@ -246,7 +247,7 @@ export var DropTargetV2 = function DropTargetV2(props) {
     anchorRectCache: anchorRectCache,
     position: "lower",
     isNestedDropTarget: isNestedDropTarget
-  }), shouldAllowInlineDropTarget(isNestedDropTarget, nextNode) && jsx(Fragment, null, jsx(InlineDropTarget, _extends({}, props, {
+  }), shouldAllowInlineDropTarget(isNestedDropTarget, nextNode, isSameLayout) && jsx(Fragment, null, jsx(InlineDropTarget, _extends({}, props, {
     position: "left"
   })), jsx(InlineDropTarget, _extends({}, props, {
     position: "right"

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

@@ -164,7 +164,7 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
   }, [onDrop, setIsDraggedOver]);
   return jsx("div", {
     ref: ref,
-    "data-test-id": "drop-target-hover-zone-".concat(position),
+    "data-testid": "drop-target-hover-zone-".concat(position),
     css: [hoverZoneCommonStyle, inlineHoverZoneRectStyle]
   }, isDraggedOver || isBlocksDragTargetDebug() ? jsx(DropIndicator, {
     edge: dropIndicatorPos

package/dist/esm/utils/inline-drop-target.js

@@ -1,8 +1,9 @@
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { maxLayoutColumnSupported } from '../consts';
-import { isPreRelease1 } from './advanced-layouts-flags';
+import { isPreRelease1, isPreRelease2 } from './advanced-layouts-flags';
 import { isWrappedMedia } from './check-media-layout';
 export var shouldAllowInlineDropTarget = function shouldAllowInlineDropTarget(isNested, node) {
+  var isSameLayout = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   if (!isPreRelease1() || isNested) {
     return false;
   }
@@ -10,7 +11,7 @@ export var shouldAllowInlineDropTarget = function shouldAllowInlineDropTarget(is
     return false;
   }
   if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
-    return node.childCount < maxLayoutColumnSupported();
+    return node.childCount < maxLayoutColumnSupported() || isPreRelease2() && isSameLayout;
   }
   return !isEmptyParagraph(node);
 };

package/dist/esm/utils/validation.js

@@ -1,6 +1,7 @@
 import memoizeOne from 'memoize-one';
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { isPreRelease2 } from '../utils/advanced-layouts-flags';
 export var isInsideTable = function isInsideTable(nodeType) {
   var _nodeType$schema$node = nodeType.schema.nodes,
     tableCell = _nodeType$schema$node.tableCell,
@@ -19,6 +20,13 @@ export var isExpand = function isExpand(nodeType) {
 export var isNestedExpand = function isNestedExpand(nodeType) {
   return nodeType === nodeType.schema.nodes.nestedExpand;
 };
+export var isInSameLayout = function isInSameLayout($from, $to) {
+  var fromNode = $from.nodeAfter;
+  var toNode = $to.nodeAfter;
+  return !!(fromNode && toNode && fromNode.type.name === 'layoutColumn' && ['layoutSection', 'layoutColumn'].includes(toNode.type.name) && (
+  // fromNode can either be in the same layoutSection as toNode or is a layoutColumn inside the toNode (type layoutSection)
+  $from.sameParent($to) || $from.parent === toNode));
+};
 
 /**
  * This function converts an expand into a nested expand,
@@ -61,7 +69,12 @@ export var memoizedTransformExpandToNestedExpand = memoizeOne(function (node) {
     return null;
   }
 });
-export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode) {
+export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, destNode) {
+  if (isPreRelease2() &&
+  // Allow drag layout column and drop into layout section
+  srcNode.type.name === 'layoutColumn' && (destNode === null || destNode === void 0 ? void 0 : destNode.type.name) === 'layoutSection') {
+    return true;
+  }
   var srcNodeType = srcNode.type;
   var parentNodeType = destParent === null || destParent === void 0 ? void 0 : destParent.type.name;
   var activeNodeType = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type.name;

package/dist/types/consts.d.ts

@@ -5,3 +5,4 @@ export declare enum DIRECTION {
     RIGHT = "right"
 }
 export declare const maxLayoutColumnSupported: () => 5 | 3;
+export declare const MIN_LAYOUT_COLUMN = 2;

package/dist/types/pm-plugins/decorations-drop-target.d.ts

@@ -14,6 +14,6 @@ import { type AnchorRectCache } from '../utils/anchor-utils';
  * @returns
  */
 export declare const findDropTargetDecs: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
-export declare const createDropTargetDecoration: (pos: number, props: Omit<DropTargetProps, 'getPos'>, side?: number, anchorRectCache?: AnchorRectCache) => Decoration;
+export declare const createDropTargetDecoration: (pos: number, props: Omit<DropTargetProps, 'getPos'>, side?: number, anchorRectCache?: AnchorRectCache, isSameLayout?: boolean) => Decoration;
 export declare const createLayoutDropTargetDecoration: (pos: number, props: Omit<DropTargetLayoutProps, 'getPos'>) => Decoration;
 export declare const dropTargetDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNode?: ActiveNode, anchorRectCache?: AnchorRectCache, from?: number, to?: number) => Decoration[];

package/dist/types/ui/drop-target-v2.d.ts

@@ -5,4 +5,5 @@ export declare const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET = "--editor-blo
 export declare const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP = "--editor-block-controls-drop-indicator-gap";
 export declare const DropTargetV2: (props: DropTargetProps & {
     anchorRectCache?: AnchorRectCache | undefined;
+    isSameLayout?: boolean | undefined;
 }) => jsx.JSX.Element;

package/dist/types/utils/inline-drop-target.d.ts

@@ -1,2 +1,2 @@
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-export declare const shouldAllowInlineDropTarget: (isNested: boolean, node?: PMNode) => boolean;
+export declare const shouldAllowInlineDropTarget: (isNested: boolean, node?: PMNode, isSameLayout?: boolean) => boolean;

package/dist/types/utils/validation.d.ts

@@ -1,10 +1,11 @@
 import { Slice } from '@atlaskit/editor-prosemirror/model';
-import type { NodeType, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { NodeType, Node as PMNode, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
 export declare const isInsideTable: (nodeType: NodeType) => Boolean;
 export declare const isLayoutColumn: (nodeType: NodeType) => Boolean;
 export declare const isDoc: (nodeType: NodeType) => Boolean;
 export declare const isExpand: (nodeType: NodeType) => Boolean;
 export declare const isNestedExpand: (nodeType: NodeType) => Boolean;
+export declare const isInSameLayout: ($from: ResolvedPos, $to: ResolvedPos) => boolean;
 /**
  * This function converts an expand into a nested expand,
  * although it may fail based on the expand's content.
@@ -15,4 +16,4 @@ export declare const isNestedExpand: (nodeType: NodeType) => Boolean;
 export declare const transformExpandToNestedExpand: (expandNode: PMNode) => PMNode | null;
 export declare const transformSliceExpandToNestedExpand: (slice: Slice) => Slice | null;
 export declare const memoizedTransformExpandToNestedExpand: import("memoize-one").MemoizedFn<(node: PMNode) => PMNode | null>;
-export declare function canMoveNodeToIndex(destParent: PMNode, indexIntoParent: number, srcNode: PMNode): boolean;
+export declare function canMoveNodeToIndex(destParent: PMNode, indexIntoParent: number, srcNode: PMNode, destNode?: PMNode): boolean;

package/dist/types-ts4.5/consts.d.ts

@@ -5,3 +5,4 @@ export declare enum DIRECTION {
     RIGHT = "right"
 }
 export declare const maxLayoutColumnSupported: () => 5 | 3;
+export declare const MIN_LAYOUT_COLUMN = 2;

package/dist/types-ts4.5/pm-plugins/decorations-drop-target.d.ts

@@ -14,6 +14,6 @@ import { type AnchorRectCache } from '../utils/anchor-utils';
  * @returns
  */
 export declare const findDropTargetDecs: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
-export declare const createDropTargetDecoration: (pos: number, props: Omit<DropTargetProps, 'getPos'>, side?: number, anchorRectCache?: AnchorRectCache) => Decoration;
+export declare const createDropTargetDecoration: (pos: number, props: Omit<DropTargetProps, 'getPos'>, side?: number, anchorRectCache?: AnchorRectCache, isSameLayout?: boolean) => Decoration;
 export declare const createLayoutDropTargetDecoration: (pos: number, props: Omit<DropTargetLayoutProps, 'getPos'>) => Decoration;
 export declare const dropTargetDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNode?: ActiveNode, anchorRectCache?: AnchorRectCache, from?: number, to?: number) => Decoration[];

package/dist/types-ts4.5/ui/drop-target-v2.d.ts

@@ -5,4 +5,5 @@ export declare const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET = "--editor-blo
 export declare const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP = "--editor-block-controls-drop-indicator-gap";
 export declare const DropTargetV2: (props: DropTargetProps & {
     anchorRectCache?: AnchorRectCache | undefined;
+    isSameLayout?: boolean | undefined;
 }) => jsx.JSX.Element;

package/dist/types-ts4.5/utils/inline-drop-target.d.ts

@@ -1,2 +1,2 @@
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-export declare const shouldAllowInlineDropTarget: (isNested: boolean, node?: PMNode) => boolean;
+export declare const shouldAllowInlineDropTarget: (isNested: boolean, node?: PMNode, isSameLayout?: boolean) => boolean;

package/dist/types-ts4.5/utils/validation.d.ts

@@ -1,10 +1,11 @@
 import { Slice } from '@atlaskit/editor-prosemirror/model';
-import type { NodeType, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { NodeType, Node as PMNode, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
 export declare const isInsideTable: (nodeType: NodeType) => Boolean;
 export declare const isLayoutColumn: (nodeType: NodeType) => Boolean;
 export declare const isDoc: (nodeType: NodeType) => Boolean;
 export declare const isExpand: (nodeType: NodeType) => Boolean;
 export declare const isNestedExpand: (nodeType: NodeType) => Boolean;
+export declare const isInSameLayout: ($from: ResolvedPos, $to: ResolvedPos) => boolean;
 /**
  * This function converts an expand into a nested expand,
  * although it may fail based on the expand's content.
@@ -15,4 +16,4 @@ export declare const isNestedExpand: (nodeType: NodeType) => Boolean;
 export declare const transformExpandToNestedExpand: (expandNode: PMNode) => PMNode | null;
 export declare const transformSliceExpandToNestedExpand: (slice: Slice) => Slice | null;
 export declare const memoizedTransformExpandToNestedExpand: import("memoize-one").MemoizedFn<(node: PMNode) => PMNode | null>;
-export declare function canMoveNodeToIndex(destParent: PMNode, indexIntoParent: number, srcNode: PMNode): boolean;
+export declare function canMoveNodeToIndex(destParent: PMNode, indexIntoParent: number, srcNode: PMNode, destNode?: PMNode): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.13.10",
+	"version": "2.13.12",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,7 +31,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^44.2.0",
-		"@atlaskit/editor-common": "^94.16.0",
+		"@atlaskit/editor-common": "^94.20.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
@@ -48,7 +48,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
 		"@atlaskit/primitives": "^13.1.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.12.0",
+		"@atlaskit/tmp-editor-statsig": "^2.14.0",
 		"@atlaskit/tokens": "^2.2.0",
 		"@atlaskit/tooltip": "^18.9.0",
 		"@babel/runtime": "^7.0.0",