@atlaskit/editor-plugin-block-controls 2.12.1 → 2.13.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.13.0
+
+### Minor Changes
+
+- [#157826](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/157826)
+  [`130b9c5dcd038`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/130b9c5dcd038) -
+  [ED-25054] Support drag and drop a non layout column node in between layout columns
+
+## 2.12.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.12.1
 
 ### Patch Changes

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

@@ -32,86 +32,123 @@ var createNewLayout = function createNewLayout(schema, layoutContents) {
   }
   return null;
 };
-var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
-  return function (from, to, position) {
-    return function (_ref2) {
-      var tr = _ref2.tr;
-      // unable to drag a node to itself.
-      if (from === to) {
-        return tr;
+var updateColumnWidths = function updateColumnWidths(tr, layoutNode, layoutNodePos, newColumnWidth) {
+  if (newColumnWidth) {
+    layoutNode.content.forEach(function (node, offset) {
+      if (node.type.name === 'layoutColumn') {
+        tr = tr.setNodeAttribute(layoutNodePos + offset + 1, 'width', newColumnWidth);
       }
-      var _ref3 = tr.doc.type.schema.nodes || {},
-        layoutSection = _ref3.layoutSection,
-        layoutColumn = _ref3.layoutColumn,
-        doc = _ref3.doc;
-      var _ref4 = tr.doc.type.schema.marks || {},
-        breakout = _ref4.breakout;
+    });
+  }
+  return tr;
+};
 
-      // layout plugin does not exist
-      if (!layoutSection || !layoutColumn) {
-        return tr;
-      }
-      var $to = tr.doc.resolve(to);
+/**
+ * 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);
+  return tr;
+};
+var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos, sourceNode, from, to, tr) {
+  if (toLayout.childCount < _consts.MAX_LAYOUT_COLUMN_SUPPORTED) {
+    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);
+  }
+  return tr;
+};
 
-      // invalid to position or not top level.
-      if (!$to.nodeAfter || $to.parent.type !== doc) {
-        return tr;
-      }
-      var $from = tr.doc.resolve(from);
+/**
+ * Check if the node at `from` can be moved to node at `to` to create/expand a layout.
+ * Returns the source and destination nodes and positions if it's a valid move, otherwise, undefined
+ */
+var canMoveToLayout = function canMoveToLayout(from, to, tr) {
+  if (from === to) {
+    return;
+  }
+  var _ref3 = tr.doc.type.schema.nodes || {},
+    layoutSection = _ref3.layoutSection,
+    layoutColumn = _ref3.layoutColumn,
+    doc = _ref3.doc;
 
-      // invalid from position or dragging a layout
-      if (!$from.nodeAfter || $from.nodeAfter.type === layoutSection) {
+  // layout plugin does not exist
+  if (!layoutSection || !layoutColumn) {
+    return;
+  }
+  var $to = tr.doc.resolve(to);
+
+  // drop at invalid position, not top level, or not a layout column
+  if (!$to.nodeAfter || ![doc, layoutSection].includes($to.parent.type)) {
+    return;
+  }
+  var $from = tr.doc.resolve(from);
+
+  // invalid from position or dragging a layout
+  if (!$from.nodeAfter || $from.nodeAfter.type === layoutSection) {
+    return;
+  }
+  var toNode = $to.nodeAfter;
+  var fromNode = $from.nodeAfter;
+  return {
+    toNode: toNode,
+    fromNode: fromNode,
+    $from: $from,
+    $to: $to
+  };
+};
+var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
+  return function (from, to, options) {
+    return function (_ref4) {
+      var tr = _ref4.tr;
+      var canMove = canMoveToLayout(from, to, tr);
+      if (!canMove) {
         return tr;
       }
-      var toNode = $to.nodeAfter;
-      var fromNode = $from.nodeAfter;
+      var toNode = canMove.toNode,
+        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 fromNodeWithoutBreakout = fromNode;
 
       // remove breakout from node;
       if (breakout && $from.nodeAfter && $from.nodeAfter.marks.some(function (m) {
         return m.type === breakout;
       })) {
-        tr = tr.removeNodeMark(from, breakout);
+        tr.removeNodeMark(from, breakout);
+        // resolve again the source node after node updated (remove breakout marks)
+        fromNodeWithoutBreakout = tr.doc.resolve(from).nodeAfter;
       }
-      if ($to.nodeAfter.type === layoutSection) {
-        var existingLayoutNode = $to.nodeAfter;
-        if (existingLayoutNode.childCount < _consts.MAX_LAYOUT_COLUMN_SUPPORTED) {
-          var newColumnWidth = _consts2.DEFAULT_COLUMN_DISTRIBUTIONS[existingLayoutNode.childCount + 1];
-          if (newColumnWidth) {
-            existingLayoutNode.content.forEach(function (node, offset) {
-              if (node.type === layoutColumn) {
-                tr = tr.setNodeAttribute(to + offset + 1, 'width', newColumnWidth);
-              }
-            });
-          }
-          var toPos = position === 'left' ? to + 1 : to + existingLayoutNode.nodeSize - 1;
-          tr = tr.insert(toPos,
-          // resolve again the source node after node updated (remove breakout marks)
-          layoutColumn.create({
-            width: newColumnWidth
-          }, tr.doc.resolve(from).nodeAfter));
-          tr = tr.setSelection(new _state.NodeSelection(tr.doc.resolve(toPos)));
-          var mappedFrom = tr.mapping.map(from);
-          var mappedFromEnd = mappedFrom + fromNode.nodeSize;
-          tr = tr.delete(mappedFrom, mappedFromEnd);
-          tr = tr.scrollIntoView();
-          return tr;
-        }
+      if (!fromNodeWithoutBreakout) {
         return tr;
+      }
+      if (toNode.type === layoutSection) {
+        var toPos = options !== null && options !== void 0 && options.moveToEnd ? to + toNode.nodeSize - 1 : to + 1;
+        return moveToExistingLayout(toNode, to, fromNodeWithoutBreakout, from, toPos, tr);
+      } 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);
       } else {
-        // resolve again the source node after node updated (remove breakout marks)
-        var newFromNode = tr.doc.resolve(from).nodeAfter;
-        if (!newFromNode) {
-          return tr;
-        }
-        var layoutContents = position === 'left' ? [newFromNode, toNode] : [toNode, newFromNode];
+        var layoutContents = options !== null && options !== void 0 && options.moveToEnd ? [toNode, fromNodeWithoutBreakout] : [fromNodeWithoutBreakout, toNode];
         var newLayout = createNewLayout(tr.doc.type.schema, layoutContents);
         if (newLayout) {
-          tr = tr.delete(from, from + fromNode.nodeSize);
+          tr.delete(from, from + fromNode.nodeSize);
           var mappedTo = tr.mapping.map(to);
-          tr = tr.delete(mappedTo, mappedTo + toNode.nodeSize);
-          tr = tr.insert(mappedTo, newLayout); // insert the content at the new position
-          tr = tr.setSelection(new _state.NodeSelection(tr.doc.resolve(mappedTo)));
-          tr = tr.scrollIntoView();
+          tr.delete(mappedTo, mappedTo + toNode.nodeSize).insert(mappedTo, newLayout).setSelection(new _state.NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
         }
         return tr;
       }

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

@@ -37,8 +37,8 @@ var dropTargetLayoutHintStyle = (0, _react2.css)({
   width: 0
 });
 var DropTargetLayout = exports.DropTargetLayout = function DropTargetLayout(props) {
-  var _api$blockControls2;
-  var api = props.api;
+  var api = props.api,
+    getPos = props.getPos;
   var ref = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -51,7 +51,13 @@ var DropTargetLayout = exports.DropTargetLayout = function DropTargetLayout(prop
     if (!activeNode) {
       return;
     }
-  }, [api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.sharedState]);
+    var to = getPos();
+    if (to !== undefined) {
+      var _api$core, _api$blockControls2;
+      var from = activeNode.pos;
+      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveToLayout(from, to));
+    }
+  }, [api, getPos]);
   (0, _react.useEffect)(function () {
     if (ref.current) {
       return (0, _adapter.dropTargetForElements)({

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

@@ -141,7 +141,9 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
     if (activeNode && toPos !== undefined) {
       var _api$core, _api$blockControls2;
       var start = activeNode.pos;
-      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveToLayout(start, toPos, position));
+      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveToLayout(start, toPos, {
+        moveToEnd: position === 'right'
+      }));
     }
   }, [api, getPos, position]);
   return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {

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

@@ -27,85 +27,126 @@ const createNewLayout = (schema, layoutContents) => {
   }
   return null;
 };
-export const moveToLayout = api => (from, to, position) => ({
-  tr
-}) => {
-  // unable to drag a node to itself.
+const updateColumnWidths = (tr, layoutNode, layoutNodePos, newColumnWidth) => {
+  if (newColumnWidth) {
+    layoutNode.content.forEach((node, offset) => {
+      if (node.type.name === 'layoutColumn') {
+        tr = tr.setNodeAttribute(layoutNodePos + offset + 1, 'width', newColumnWidth);
+      }
+    });
+  }
+  return 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);
+  return tr;
+};
+const moveToExistingLayout = (toLayout, toLayoutPos, sourceNode, from, to, tr) => {
+  if (toLayout.childCount < MAX_LAYOUT_COLUMN_SUPPORTED) {
+    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);
+  }
+  return tr;
+};
+
+/**
+ * Check if the node at `from` can be moved to node at `to` to create/expand a layout.
+ * Returns the source and destination nodes and positions if it's a valid move, otherwise, undefined
+ */
+const canMoveToLayout = (from, to, tr) => {
   if (from === to) {
-    return tr;
+    return;
   }
   const {
     layoutSection,
     layoutColumn,
     doc
   } = tr.doc.type.schema.nodes || {};
-  const {
-    breakout
-  } = tr.doc.type.schema.marks || {};
 
   // layout plugin does not exist
   if (!layoutSection || !layoutColumn) {
-    return tr;
+    return;
   }
   const $to = tr.doc.resolve(to);
 
-  // invalid to position or not top level.
-  if (!$to.nodeAfter || $to.parent.type !== doc) {
-    return tr;
+  // drop at invalid position, not top level, or not a layout column
+  if (!$to.nodeAfter || ![doc, layoutSection].includes($to.parent.type)) {
+    return;
   }
   const $from = tr.doc.resolve(from);
 
   // invalid from position or dragging a layout
   if (!$from.nodeAfter || $from.nodeAfter.type === layoutSection) {
-    return tr;
+    return;
   }
   const toNode = $to.nodeAfter;
   const fromNode = $from.nodeAfter;
+  return {
+    toNode,
+    fromNode,
+    $from,
+    $to
+  };
+};
+export const moveToLayout = api => (from, to, options) => ({
+  tr
+}) => {
+  const canMove = canMoveToLayout(from, to, tr);
+  if (!canMove) {
+    return tr;
+  }
+  const {
+    toNode,
+    fromNode,
+    $from,
+    $to
+  } = canMove;
+  const {
+    layoutSection,
+    layoutColumn
+  } = tr.doc.type.schema.nodes || {};
+  const {
+    breakout
+  } = tr.doc.type.schema.marks || {};
+  let fromNodeWithoutBreakout = fromNode;
 
   // remove breakout from node;
   if (breakout && $from.nodeAfter && $from.nodeAfter.marks.some(m => m.type === breakout)) {
-    tr = tr.removeNodeMark(from, breakout);
+    tr.removeNodeMark(from, breakout);
+    // resolve again the source node after node updated (remove breakout marks)
+    fromNodeWithoutBreakout = tr.doc.resolve(from).nodeAfter;
   }
-  if ($to.nodeAfter.type === layoutSection) {
-    const existingLayoutNode = $to.nodeAfter;
-    if (existingLayoutNode.childCount < MAX_LAYOUT_COLUMN_SUPPORTED) {
-      const newColumnWidth = DEFAULT_COLUMN_DISTRIBUTIONS[existingLayoutNode.childCount + 1];
-      if (newColumnWidth) {
-        existingLayoutNode.content.forEach((node, offset) => {
-          if (node.type === layoutColumn) {
-            tr = tr.setNodeAttribute(to + offset + 1, 'width', newColumnWidth);
-          }
-        });
-      }
-      const toPos = position === 'left' ? to + 1 : to + existingLayoutNode.nodeSize - 1;
-      tr = tr.insert(toPos,
-      // resolve again the source node after node updated (remove breakout marks)
-      layoutColumn.create({
-        width: newColumnWidth
-      }, tr.doc.resolve(from).nodeAfter));
-      tr = tr.setSelection(new NodeSelection(tr.doc.resolve(toPos)));
-      const mappedFrom = tr.mapping.map(from);
-      const mappedFromEnd = mappedFrom + fromNode.nodeSize;
-      tr = tr.delete(mappedFrom, mappedFromEnd);
-      tr = tr.scrollIntoView();
-      return tr;
-    }
+  if (!fromNodeWithoutBreakout) {
     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);
+  } 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);
   } else {
-    // resolve again the source node after node updated (remove breakout marks)
-    const newFromNode = tr.doc.resolve(from).nodeAfter;
-    if (!newFromNode) {
-      return tr;
-    }
-    const layoutContents = position === 'left' ? [newFromNode, toNode] : [toNode, newFromNode];
+    const layoutContents = options !== null && options !== void 0 && options.moveToEnd ? [toNode, fromNodeWithoutBreakout] : [fromNodeWithoutBreakout, toNode];
     const newLayout = createNewLayout(tr.doc.type.schema, layoutContents);
     if (newLayout) {
-      tr = tr.delete(from, from + fromNode.nodeSize);
+      tr.delete(from, from + fromNode.nodeSize);
       const mappedTo = tr.mapping.map(to);
-      tr = tr.delete(mappedTo, mappedTo + toNode.nodeSize);
-      tr = tr.insert(mappedTo, newLayout); // insert the content at the new position
-      tr = tr.setSelection(new NodeSelection(tr.doc.resolve(mappedTo)));
-      tr = tr.scrollIntoView();
+      tr.delete(mappedTo, mappedTo + toNode.nodeSize).insert(mappedTo, newLayout).setSelection(new NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
     }
     return tr;
   }

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

@@ -29,9 +29,9 @@ const dropTargetLayoutHintStyle = css({
   width: 0
 });
 export const DropTargetLayout = props => {
-  var _api$blockControls2;
   const {
-    api
+    api,
+    getPos
   } = props;
   const ref = useRef(null);
   const [isDraggedOver, setIsDraggedOver] = useState(false);
@@ -43,7 +43,15 @@ export const DropTargetLayout = props => {
     if (!activeNode) {
       return;
     }
-  }, [api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.sharedState]);
+    const to = getPos();
+    if (to !== undefined) {
+      var _api$core, _api$blockControls2, _api$blockControls2$c;
+      const {
+        pos: from
+      } = activeNode;
+      api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.moveToLayout(from, to));
+    }
+  }, [api, getPos]);
   useEffect(() => {
     if (ref.current) {
       return dropTargetForElements({

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

@@ -134,7 +134,9 @@ export const InlineDropTarget = ({
       const {
         pos: start
       } = activeNode;
-      api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.moveToLayout(start, toPos, position));
+      api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.moveToLayout(start, toPos, {
+        moveToEnd: position === 'right'
+      }));
     }
   }, [api, getPos, position]);
   return jsx(Fragment, null, jsx("div", {

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

@@ -26,86 +26,123 @@ var createNewLayout = function createNewLayout(schema, layoutContents) {
   }
   return null;
 };
-export var moveToLayout = function moveToLayout(api) {
-  return function (from, to, position) {
-    return function (_ref2) {
-      var tr = _ref2.tr;
-      // unable to drag a node to itself.
-      if (from === to) {
-        return tr;
+var updateColumnWidths = function updateColumnWidths(tr, layoutNode, layoutNodePos, newColumnWidth) {
+  if (newColumnWidth) {
+    layoutNode.content.forEach(function (node, offset) {
+      if (node.type.name === 'layoutColumn') {
+        tr = tr.setNodeAttribute(layoutNodePos + offset + 1, 'width', newColumnWidth);
       }
-      var _ref3 = tr.doc.type.schema.nodes || {},
-        layoutSection = _ref3.layoutSection,
-        layoutColumn = _ref3.layoutColumn,
-        doc = _ref3.doc;
-      var _ref4 = tr.doc.type.schema.marks || {},
-        breakout = _ref4.breakout;
+    });
+  }
+  return tr;
+};
 
-      // layout plugin does not exist
-      if (!layoutSection || !layoutColumn) {
-        return tr;
-      }
-      var $to = tr.doc.resolve(to);
+/**
+ * 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);
+  return tr;
+};
+var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos, sourceNode, from, to, tr) {
+  if (toLayout.childCount < MAX_LAYOUT_COLUMN_SUPPORTED) {
+    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);
+  }
+  return tr;
+};
 
-      // invalid to position or not top level.
-      if (!$to.nodeAfter || $to.parent.type !== doc) {
-        return tr;
-      }
-      var $from = tr.doc.resolve(from);
+/**
+ * Check if the node at `from` can be moved to node at `to` to create/expand a layout.
+ * Returns the source and destination nodes and positions if it's a valid move, otherwise, undefined
+ */
+var canMoveToLayout = function canMoveToLayout(from, to, tr) {
+  if (from === to) {
+    return;
+  }
+  var _ref3 = tr.doc.type.schema.nodes || {},
+    layoutSection = _ref3.layoutSection,
+    layoutColumn = _ref3.layoutColumn,
+    doc = _ref3.doc;
 
-      // invalid from position or dragging a layout
-      if (!$from.nodeAfter || $from.nodeAfter.type === layoutSection) {
+  // layout plugin does not exist
+  if (!layoutSection || !layoutColumn) {
+    return;
+  }
+  var $to = tr.doc.resolve(to);
+
+  // drop at invalid position, not top level, or not a layout column
+  if (!$to.nodeAfter || ![doc, layoutSection].includes($to.parent.type)) {
+    return;
+  }
+  var $from = tr.doc.resolve(from);
+
+  // invalid from position or dragging a layout
+  if (!$from.nodeAfter || $from.nodeAfter.type === layoutSection) {
+    return;
+  }
+  var toNode = $to.nodeAfter;
+  var fromNode = $from.nodeAfter;
+  return {
+    toNode: toNode,
+    fromNode: fromNode,
+    $from: $from,
+    $to: $to
+  };
+};
+export var moveToLayout = function moveToLayout(api) {
+  return function (from, to, options) {
+    return function (_ref4) {
+      var tr = _ref4.tr;
+      var canMove = canMoveToLayout(from, to, tr);
+      if (!canMove) {
         return tr;
       }
-      var toNode = $to.nodeAfter;
-      var fromNode = $from.nodeAfter;
+      var toNode = canMove.toNode,
+        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 fromNodeWithoutBreakout = fromNode;
 
       // remove breakout from node;
       if (breakout && $from.nodeAfter && $from.nodeAfter.marks.some(function (m) {
         return m.type === breakout;
       })) {
-        tr = tr.removeNodeMark(from, breakout);
+        tr.removeNodeMark(from, breakout);
+        // resolve again the source node after node updated (remove breakout marks)
+        fromNodeWithoutBreakout = tr.doc.resolve(from).nodeAfter;
       }
-      if ($to.nodeAfter.type === layoutSection) {
-        var existingLayoutNode = $to.nodeAfter;
-        if (existingLayoutNode.childCount < MAX_LAYOUT_COLUMN_SUPPORTED) {
-          var newColumnWidth = DEFAULT_COLUMN_DISTRIBUTIONS[existingLayoutNode.childCount + 1];
-          if (newColumnWidth) {
-            existingLayoutNode.content.forEach(function (node, offset) {
-              if (node.type === layoutColumn) {
-                tr = tr.setNodeAttribute(to + offset + 1, 'width', newColumnWidth);
-              }
-            });
-          }
-          var toPos = position === 'left' ? to + 1 : to + existingLayoutNode.nodeSize - 1;
-          tr = tr.insert(toPos,
-          // resolve again the source node after node updated (remove breakout marks)
-          layoutColumn.create({
-            width: newColumnWidth
-          }, tr.doc.resolve(from).nodeAfter));
-          tr = tr.setSelection(new NodeSelection(tr.doc.resolve(toPos)));
-          var mappedFrom = tr.mapping.map(from);
-          var mappedFromEnd = mappedFrom + fromNode.nodeSize;
-          tr = tr.delete(mappedFrom, mappedFromEnd);
-          tr = tr.scrollIntoView();
-          return tr;
-        }
+      if (!fromNodeWithoutBreakout) {
         return tr;
+      }
+      if (toNode.type === layoutSection) {
+        var toPos = options !== null && options !== void 0 && options.moveToEnd ? to + toNode.nodeSize - 1 : to + 1;
+        return moveToExistingLayout(toNode, to, fromNodeWithoutBreakout, from, toPos, tr);
+      } 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);
       } else {
-        // resolve again the source node after node updated (remove breakout marks)
-        var newFromNode = tr.doc.resolve(from).nodeAfter;
-        if (!newFromNode) {
-          return tr;
-        }
-        var layoutContents = position === 'left' ? [newFromNode, toNode] : [toNode, newFromNode];
+        var layoutContents = options !== null && options !== void 0 && options.moveToEnd ? [toNode, fromNodeWithoutBreakout] : [fromNodeWithoutBreakout, toNode];
         var newLayout = createNewLayout(tr.doc.type.schema, layoutContents);
         if (newLayout) {
-          tr = tr.delete(from, from + fromNode.nodeSize);
+          tr.delete(from, from + fromNode.nodeSize);
           var mappedTo = tr.mapping.map(to);
-          tr = tr.delete(mappedTo, mappedTo + toNode.nodeSize);
-          tr = tr.insert(mappedTo, newLayout); // insert the content at the new position
-          tr = tr.setSelection(new NodeSelection(tr.doc.resolve(mappedTo)));
-          tr = tr.scrollIntoView();
+          tr.delete(mappedTo, mappedTo + toNode.nodeSize).insert(mappedTo, newLayout).setSelection(new NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
         }
         return tr;
       }

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

@@ -30,8 +30,8 @@ var dropTargetLayoutHintStyle = css({
   width: 0
 });
 export var DropTargetLayout = function DropTargetLayout(props) {
-  var _api$blockControls2;
-  var api = props.api;
+  var api = props.api,
+    getPos = props.getPos;
   var ref = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -44,7 +44,13 @@ export var DropTargetLayout = function DropTargetLayout(props) {
     if (!activeNode) {
       return;
     }
-  }, [api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.sharedState]);
+    var to = getPos();
+    if (to !== undefined) {
+      var _api$core, _api$blockControls2;
+      var from = activeNode.pos;
+      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveToLayout(from, to));
+    }
+  }, [api, getPos]);
   useEffect(function () {
     if (ref.current) {
       return dropTargetForElements({

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

@@ -133,7 +133,9 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
     if (activeNode && toPos !== undefined) {
       var _api$core, _api$blockControls2;
       var start = activeNode.pos;
-      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveToLayout(start, toPos, position));
+      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveToLayout(start, toPos, {
+        moveToEnd: position === 'right'
+      }));
     }
   }, [api, getPos, position]);
   return jsx(Fragment, null, jsx("div", {

package/dist/types/commands/move-to-layout.d.ts

@@ -1,3 +1,5 @@
 import type { EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { BlockControlsPlugin } from '../types';
-export declare const moveToLayout: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => (from: number, to: number, position: 'left' | 'right') => EditorCommand;
+export declare const moveToLayout: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => (from: number, to: number, options?: {
+    moveToEnd?: boolean;
+}) => EditorCommand;

package/dist/types/types.d.ts

@@ -58,7 +58,15 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
     ];
     sharedState: BlockControlsSharedState;
     commands: {
-        moveToLayout: (start: number, to: number, position: 'left' | 'right') => EditorCommand;
+        /**
+         * Move a node before (unless `moveToEnd` is set) another node to expand a layout or create a new layout
+         * @param from position of the node to be moved
+         * @param to position of the layout/layout column/node to move the node to
+         * @param options moveToEnd: move the node to after the layout/layout column/another node
+         */
+        moveToLayout: (start: number, to: number, options?: {
+            moveToEnd?: boolean;
+        }) => EditorCommand;
         moveNode: (start: number, to: number, inputMethod?: MoveNodeMethod, formatMessage?: IntlShape['formatMessage']) => EditorCommand;
         showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;
         setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => EditorCommand;

package/dist/types-ts4.5/commands/move-to-layout.d.ts

@@ -1,3 +1,5 @@
 import type { EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { BlockControlsPlugin } from '../types';
-export declare const moveToLayout: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => (from: number, to: number, position: 'left' | 'right') => EditorCommand;
+export declare const moveToLayout: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => (from: number, to: number, options?: {
+    moveToEnd?: boolean;
+}) => EditorCommand;

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

@@ -58,7 +58,15 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
     ];
     sharedState: BlockControlsSharedState;
     commands: {
-        moveToLayout: (start: number, to: number, position: 'left' | 'right') => EditorCommand;
+        /**
+         * Move a node before (unless `moveToEnd` is set) another node to expand a layout or create a new layout
+         * @param from position of the node to be moved
+         * @param to position of the layout/layout column/node to move the node to
+         * @param options moveToEnd: move the node to after the layout/layout column/another node
+         */
+        moveToLayout: (start: number, to: number, options?: {
+            moveToEnd?: boolean;
+        }) => EditorCommand;
         moveNode: (start: number, to: number, inputMethod?: MoveNodeMethod, formatMessage?: IntlShape['formatMessage']) => EditorCommand;
         showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;
         setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => EditorCommand;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.12.1",
+	"version": "2.13.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -46,7 +46,7 @@
 		"@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
-		"@atlaskit/primitives": "^12.2.0",
+		"@atlaskit/primitives": "^13.0.0",
 		"@atlaskit/theme": "^14.0.0",
 		"@atlaskit/tmp-editor-statsig": "^2.10.0",
 		"@atlaskit/tokens": "^2.0.0",