@atlaskit/editor-plugin-block-controls 2.13.14 → 2.13.16

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.13.16
+
+### Patch Changes
+
+- [#165732](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165732)
+  [`55bfa121bfd1b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/55bfa121bfd1b) -
+  ED-25682 unify remove from source code and cleanup
+- Updated dependencies
+
+## 2.13.15
+
+### Patch Changes
+
+- [#165354](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165354)
+  [`387f345afdec1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/387f345afdec1) -
+  ED-25703 fix inline drop targert position
+- [#162957](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/162957)
+  [`bd48c403d1fdd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bd48c403d1fdd) -
+  ED-25059 drag layout column to top level
+- Updated dependencies
+
 ## 2.13.14
 
 ### Patch Changes

package/dist/cjs/commands/move-node.js

@@ -11,6 +11,8 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _selection = require("@atlaskit/editor-common/selection");
 var _transforms = require("@atlaskit/editor-common/transforms");
 var _utils = require("@atlaskit/editor-common/utils");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _utils3 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -19,6 +21,7 @@ var _consts = require("../consts");
 var _main = require("../pm-plugins/main");
 var _utils4 = require("../utils");
 var _getSelection = require("../utils/getSelection");
+var _removeFromSource = require("../utils/remove-from-source");
 var _validation = require("../utils/validation");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -43,6 +46,10 @@ function transformSourceSlice(nodeCopy, destType) {
   }
   return nodeCopy;
 }
+var isDragLayoutColumnToTopLevel = function isDragLayoutColumnToTopLevel($from, $to) {
+  var _$from$nodeAfter;
+  return ((_$from$nodeAfter = $from.nodeAfter) === null || _$from$nodeAfter === void 0 ? void 0 : _$from$nodeAfter.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && $to.depth === 0;
+};
 
 /**
  *
@@ -169,6 +176,17 @@ var moveNode = exports.moveNode = function moveNode(api) {
         var $from = tr.doc.resolve(start);
         var destType = $to.node().type;
         var destParent = $to.node($to.depth);
+        var sourceNode = $from.nodeAfter;
+
+        // Move a layout column to top level
+        if (sourceNode && isDragLayoutColumnToTopLevel($from, $to)) {
+          // need update after we support single column layout.
+          var fragment = _model.Fragment.from(sourceNode.content);
+          (0, _removeFromSource.removeFromSource)(tr, $from);
+          var _mappedTo = tr.mapping.map(to);
+          tr.insert(_mappedTo, fragment).setSelection(_state.Selection.near(tr.doc.resolve(_mappedTo))).scrollIntoView();
+          return tr;
+        }
         if (!(0, _validation.canMoveNodeToIndex)(destParent, $to.index(), $from.node().child($from.index()))) {
           return tr;
         }

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

@@ -8,6 +8,8 @@ var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _consts = require("../consts");
 var _consts2 = require("../ui/consts");
+var _removeFromSource = require("../utils/remove-from-source");
+var _updateColumnWidths = require("../utils/update-column-widths");
 var _validation = require("../utils/validation");
 var createNewLayout = function createNewLayout(schema, layoutContents) {
   if (layoutContents.length === 0 || layoutContents.length > (0, _consts.maxLayoutColumnSupported)()) {
@@ -33,20 +35,6 @@ var createNewLayout = function createNewLayout(schema, layoutContents) {
   }
   return null;
 };
-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.setNodeAttribute(layoutNodePos + offset + 1, 'width', newColumnWidth);
-      }
-    });
-  }
-  return {
-    newColumnWidth: newColumnWidth,
-    tr: tr
-  };
-};
 var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos, sourceNode, from, to, tr, isSameLayout) {
   if (isSameLayout) {
     // reorder columns
@@ -56,30 +44,12 @@ var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos,
   } 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));
+    (0, _removeFromSource.removeFromSource)(tr, tr.doc.resolve(mappedFrom));
   }
   return 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) || {},
+  var _ref2 = (0, _updateColumnWidths.updateColumnWidths)(tr, toLayout, toLayoutPos, toLayout.childCount + 1) || {},
     newColumnWidth = _ref2.newColumnWidth;
   var _ref3 = tr.doc.type.schema.nodes || {},
     layoutColumn = _ref3.layoutColumn;
@@ -177,10 +147,13 @@ var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
           // resolve again the source node after node updated (remove breakout marks)
           toNodeWithoutBreakout = tr.doc.resolve(to).nodeAfter || toNode;
         }
+        if (fromNodeWithoutBreakout.type.name === 'layoutColumn') {
+          fromNodeWithoutBreakout = fromNodeWithoutBreakout.content;
+        }
         var layoutContents = options !== null && options !== void 0 && options.moveToEnd ? [toNodeWithoutBreakout, fromNodeWithoutBreakout] : [fromNodeWithoutBreakout, toNodeWithoutBreakout];
         var newLayout = createNewLayout(tr.doc.type.schema, layoutContents);
         if (newLayout) {
-          tr.delete(from, from + fromNode.nodeSize);
+          tr = (0, _removeFromSource.removeFromSource)(tr, $from);
           var mappedTo = tr.mapping.map(to);
           tr.delete(mappedTo, mappedTo + toNodeWithoutBreakout.nodeSize).insert(mappedTo, newLayout).setSelection(new _state.NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
         }

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

@@ -61,6 +61,7 @@ var getWidthOffset = function getWidthOffset(node, width, position) {
     return '-12px';
   }
 };
+var TABLE_NUMBERED_COLUMN_WIDTH = 42;
 var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref) {
   var api = _ref.api,
     nextNode = _ref.nextNode,
@@ -92,9 +93,14 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
         innerContainerWidth = 'max(calc(var(--ak-editor-max-container-width) - var(--ak-editor--default-gutter-padding) * 2), var(--ak-editor--line-length))';
       }
     } else if (nextNode.type.name === 'table' && nextNode.firstChild) {
-      var _anchorRectCache$getR;
       var tableWidthAnchor = (0, _decorationsCommon.getNodeAnchor)(nextNode.firstChild);
-      innerContainerWidth = (0, _anchorUtils.isAnchorSupported)() ? "anchor-size(".concat(tableWidthAnchor, " width)") : "".concat((anchorRectCache === null || anchorRectCache === void 0 || (_anchorRectCache$getR = anchorRectCache.getRect(tableWidthAnchor)) === null || _anchorRectCache$getR === void 0 ? void 0 : _anchorRectCache$getR.width) || 0, "px");
+      var isNumberColumnEnabled = Boolean(nextNode.attrs.isNumberColumnEnabled);
+      if ((0, _anchorUtils.isAnchorSupported)()) {
+        innerContainerWidth = isNumberColumnEnabled ? "calc(anchor-size(".concat(tableWidthAnchor, " width) + ").concat(TABLE_NUMBERED_COLUMN_WIDTH, "px)") : "anchor-size(".concat(tableWidthAnchor, " width)");
+      } else {
+        var _anchorRectCache$getR;
+        innerContainerWidth = "".concat(((anchorRectCache === null || anchorRectCache === void 0 || (_anchorRectCache$getR = anchorRectCache.getRect(tableWidthAnchor)) === null || _anchorRectCache$getR === void 0 ? void 0 : _anchorRectCache$getR.width) || 0) + TABLE_NUMBERED_COLUMN_WIDTH, "px");
+      }
       if (nextNode.attrs.width) {
         // when the table has horizontal scroll
         innerContainerWidth = "min(".concat(nextNode.attrs.width, "px, ").concat(innerContainerWidth, ")");

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeFromSource = void 0;
+var _consts = require("../consts");
+var _updateColumnWidths = require("./update-column-widths");
+var removeFromSource = exports.removeFromSource = function removeFromSource(tr, $from) {
+  var sourceNode = $from.nodeAfter;
+  var sourceParent = $from.parent;
+  if (!sourceNode) {
+    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 {
+      (0, _updateColumnWidths.updateColumnWidths)(tr, $from.parent, $from.before($from.depth), sourceParent.childCount - 1);
+    }
+  }
+  tr.delete($from.pos, sourceNodeEndPos);
+  return tr;
+};

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

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateColumnWidths = void 0;
+var _consts = require("../ui/consts");
+var updateColumnWidths = exports.updateColumnWidths = function updateColumnWidths(tr, layoutNode, layoutNodePos, childCount) {
+  var newColumnWidth = _consts.DEFAULT_COLUMN_DISTRIBUTIONS[childCount];
+  if (newColumnWidth) {
+    layoutNode.content.forEach(function (node, offset) {
+      if (node.type.name === 'layoutColumn') {
+        tr.setNodeAttribute(layoutNodePos + offset + 1, 'width', newColumnWidth);
+      }
+    });
+  }
+  return {
+    newColumnWidth: newColumnWidth,
+    tr: tr
+  };
+};

package/dist/cjs/utils/validation.js

@@ -78,14 +78,15 @@ var memoizedTransformExpandToNestedExpand = exports.memoizedTransformExpandToNes
   }
 });
 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;
+  if ((0, _advancedLayoutsFlags.isPreRelease2)() && activeNodeType === 'layoutColumn') {
+    // Allow drag layout column and drop into layout section
+    if ((destNode === null || destNode === void 0 ? void 0 : destNode.type.name) === 'layoutSection' || parentNodeType === 'doc') {
+      return true;
+    }
+  }
 
   // Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
   if ((0, _experiments.editorExperiment)('nest-media-and-codeblock-in-quote', false)) {

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

@@ -3,6 +3,8 @@ import { blockControlsMessages } from '@atlaskit/editor-common/messages';
 import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -11,6 +13,7 @@ import { DIRECTION } from '../consts';
 import { key } from '../pm-plugins/main';
 import { getNestedNodePosition, selectNode } from '../utils';
 import { setCursorPositionAtMovedNode } from '../utils/getSelection';
+import { removeFromSource } from '../utils/remove-from-source';
 import { canMoveNodeToIndex, isInsideTable, transformSliceExpandToNestedExpand } from '../utils/validation';
 
 /**
@@ -35,6 +38,10 @@ function transformSourceSlice(nodeCopy, destType) {
   }
   return nodeCopy;
 }
+const isDragLayoutColumnToTopLevel = ($from, $to) => {
+  var _$from$nodeAfter;
+  return ((_$from$nodeAfter = $from.nodeAfter) === null || _$from$nodeAfter === void 0 ? void 0 : _$from$nodeAfter.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && $to.depth === 0;
+};
 
 /**
  *
@@ -163,6 +170,17 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
     const $from = tr.doc.resolve(start);
     const destType = $to.node().type;
     const destParent = $to.node($to.depth);
+    const sourceNode = $from.nodeAfter;
+
+    // Move a layout column to top level
+    if (sourceNode && isDragLayoutColumnToTopLevel($from, $to)) {
+      // need update after we support single column layout.
+      const fragment = Fragment.from(sourceNode.content);
+      removeFromSource(tr, $from);
+      const mappedTo = tr.mapping.map(to);
+      tr.insert(mappedTo, fragment).setSelection(Selection.near(tr.doc.resolve(mappedTo))).scrollIntoView();
+      return tr;
+    }
     if (!canMoveNodeToIndex(destParent, $to.index(), $from.node().child($from.index()))) {
       return tr;
     }

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

@@ -1,7 +1,9 @@
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { maxLayoutColumnSupported, MIN_LAYOUT_COLUMN } from '../consts';
+import { maxLayoutColumnSupported } from '../consts';
 import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
+import { removeFromSource } from '../utils/remove-from-source';
+import { updateColumnWidths } from '../utils/update-column-widths';
 import { isInSameLayout } from '../utils/validation';
 const createNewLayout = (schema, layoutContents) => {
   if (layoutContents.length === 0 || layoutContents.length > maxLayoutColumnSupported()) {
@@ -28,20 +30,6 @@ const createNewLayout = (schema, layoutContents) => {
   }
   return null;
 };
-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.setNodeAttribute(layoutNodePos + offset + 1, 'width', newColumnWidth);
-      }
-    });
-  }
-  return {
-    newColumnWidth,
-    tr
-  };
-};
 const moveToExistingLayout = (toLayout, toLayoutPos, sourceNode, from, to, tr, isSameLayout) => {
   if (isSameLayout) {
     // reorder columns
@@ -55,24 +43,6 @@ const moveToExistingLayout = (toLayout, toLayoutPos, sourceNode, from, to, tr, i
   }
   return 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
@@ -174,10 +144,13 @@ export const moveToLayout = api => (from, to, options) => ({
       // resolve again the source node after node updated (remove breakout marks)
       toNodeWithoutBreakout = tr.doc.resolve(to).nodeAfter || toNode;
     }
+    if (fromNodeWithoutBreakout.type.name === 'layoutColumn') {
+      fromNodeWithoutBreakout = fromNodeWithoutBreakout.content;
+    }
     const layoutContents = options !== null && options !== void 0 && options.moveToEnd ? [toNodeWithoutBreakout, fromNodeWithoutBreakout] : [fromNodeWithoutBreakout, toNodeWithoutBreakout];
     const newLayout = createNewLayout(tr.doc.type.schema, layoutContents);
     if (newLayout) {
-      tr.delete(from, from + fromNode.nodeSize);
+      tr = removeFromSource(tr, $from);
       const mappedTo = tr.mapping.map(to);
       tr.delete(mappedTo, mappedTo + toNodeWithoutBreakout.nodeSize).insert(mappedTo, newLayout).setSelection(new NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
     }

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

@@ -52,6 +52,7 @@ const getWidthOffset = (node, width, position) => {
     return '-12px';
   }
 };
+const TABLE_NUMBERED_COLUMN_WIDTH = 42;
 export const InlineDropTarget = ({
   api,
   nextNode,
@@ -79,9 +80,14 @@ export const InlineDropTarget = ({
         innerContainerWidth = 'max(calc(var(--ak-editor-max-container-width) - var(--ak-editor--default-gutter-padding) * 2), var(--ak-editor--line-length))';
       }
     } else if (nextNode.type.name === 'table' && nextNode.firstChild) {
-      var _anchorRectCache$getR;
       const tableWidthAnchor = getNodeAnchor(nextNode.firstChild);
-      innerContainerWidth = isAnchorSupported() ? `anchor-size(${tableWidthAnchor} width)` : `${(anchorRectCache === null || anchorRectCache === void 0 ? void 0 : (_anchorRectCache$getR = anchorRectCache.getRect(tableWidthAnchor)) === null || _anchorRectCache$getR === void 0 ? void 0 : _anchorRectCache$getR.width) || 0}px`;
+      const isNumberColumnEnabled = Boolean(nextNode.attrs.isNumberColumnEnabled);
+      if (isAnchorSupported()) {
+        innerContainerWidth = isNumberColumnEnabled ? `calc(anchor-size(${tableWidthAnchor} width) + ${TABLE_NUMBERED_COLUMN_WIDTH}px)` : `anchor-size(${tableWidthAnchor} width)`;
+      } else {
+        var _anchorRectCache$getR;
+        innerContainerWidth = `${((anchorRectCache === null || anchorRectCache === void 0 ? void 0 : (_anchorRectCache$getR = anchorRectCache.getRect(tableWidthAnchor)) === null || _anchorRectCache$getR === void 0 ? void 0 : _anchorRectCache$getR.width) || 0) + TABLE_NUMBERED_COLUMN_WIDTH}px`;
+      }
       if (nextNode.attrs.width) {
         // when the table has horizontal scroll
         innerContainerWidth = `min(${nextNode.attrs.width}px, ${innerContainerWidth})`;

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

@@ -0,0 +1,20 @@
+import { MIN_LAYOUT_COLUMN } from '../consts';
+import { updateColumnWidths } from './update-column-widths';
+export const removeFromSource = (tr, $from) => {
+  const sourceNode = $from.nodeAfter;
+  const sourceParent = $from.parent;
+  if (!sourceNode) {
+    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;
+};

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

@@ -0,0 +1,15 @@
+import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
+export 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.setNodeAttribute(layoutNodePos + offset + 1, 'width', newColumnWidth);
+      }
+    });
+  }
+  return {
+    newColumnWidth,
+    tr
+  };
+};

package/dist/es2019/utils/validation.js

@@ -72,14 +72,15 @@ export const memoizedTransformExpandToNestedExpand = memoizeOne(node => {
   }
 });
 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;
+  if (isPreRelease2() && activeNodeType === 'layoutColumn') {
+    // Allow drag layout column and drop into layout section
+    if ((destNode === null || destNode === void 0 ? void 0 : destNode.type.name) === 'layoutSection' || parentNodeType === 'doc') {
+      return true;
+    }
+  }
 
   // Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
   if (editorExperiment('nest-media-and-codeblock-in-quote', false)) {

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

@@ -6,6 +6,8 @@ import { blockControlsMessages } from '@atlaskit/editor-common/messages';
 import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -14,6 +16,7 @@ import { DIRECTION } from '../consts';
 import { key } from '../pm-plugins/main';
 import { getNestedNodePosition, selectNode } from '../utils';
 import { setCursorPositionAtMovedNode } from '../utils/getSelection';
+import { removeFromSource } from '../utils/remove-from-source';
 import { canMoveNodeToIndex, isInsideTable, transformSliceExpandToNestedExpand } from '../utils/validation';
 
 /**
@@ -37,6 +40,10 @@ function transformSourceSlice(nodeCopy, destType) {
   }
   return nodeCopy;
 }
+var isDragLayoutColumnToTopLevel = function isDragLayoutColumnToTopLevel($from, $to) {
+  var _$from$nodeAfter;
+  return ((_$from$nodeAfter = $from.nodeAfter) === null || _$from$nodeAfter === void 0 ? void 0 : _$from$nodeAfter.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && $to.depth === 0;
+};
 
 /**
  *
@@ -163,6 +170,17 @@ export var moveNode = function moveNode(api) {
         var $from = tr.doc.resolve(start);
         var destType = $to.node().type;
         var destParent = $to.node($to.depth);
+        var sourceNode = $from.nodeAfter;
+
+        // Move a layout column to top level
+        if (sourceNode && isDragLayoutColumnToTopLevel($from, $to)) {
+          // need update after we support single column layout.
+          var fragment = Fragment.from(sourceNode.content);
+          removeFromSource(tr, $from);
+          var _mappedTo = tr.mapping.map(to);
+          tr.insert(_mappedTo, fragment).setSelection(Selection.near(tr.doc.resolve(_mappedTo))).scrollIntoView();
+          return tr;
+        }
         if (!canMoveNodeToIndex(destParent, $to.index(), $from.node().child($from.index()))) {
           return tr;
         }

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

@@ -1,7 +1,9 @@
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { maxLayoutColumnSupported, MIN_LAYOUT_COLUMN } from '../consts';
+import { maxLayoutColumnSupported } from '../consts';
 import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
+import { removeFromSource } from '../utils/remove-from-source';
+import { updateColumnWidths } from '../utils/update-column-widths';
 import { isInSameLayout } from '../utils/validation';
 var createNewLayout = function createNewLayout(schema, layoutContents) {
   if (layoutContents.length === 0 || layoutContents.length > maxLayoutColumnSupported()) {
@@ -27,20 +29,6 @@ var createNewLayout = function createNewLayout(schema, layoutContents) {
   }
   return null;
 };
-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.setNodeAttribute(layoutNodePos + offset + 1, 'width', newColumnWidth);
-      }
-    });
-  }
-  return {
-    newColumnWidth: newColumnWidth,
-    tr: tr
-  };
-};
 var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos, sourceNode, from, to, tr, isSameLayout) {
   if (isSameLayout) {
     // reorder columns
@@ -54,24 +42,6 @@ var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos,
   }
   return 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;
@@ -171,10 +141,13 @@ export var moveToLayout = function moveToLayout(api) {
           // resolve again the source node after node updated (remove breakout marks)
           toNodeWithoutBreakout = tr.doc.resolve(to).nodeAfter || toNode;
         }
+        if (fromNodeWithoutBreakout.type.name === 'layoutColumn') {
+          fromNodeWithoutBreakout = fromNodeWithoutBreakout.content;
+        }
         var layoutContents = options !== null && options !== void 0 && options.moveToEnd ? [toNodeWithoutBreakout, fromNodeWithoutBreakout] : [fromNodeWithoutBreakout, toNodeWithoutBreakout];
         var newLayout = createNewLayout(tr.doc.type.schema, layoutContents);
         if (newLayout) {
-          tr.delete(from, from + fromNode.nodeSize);
+          tr = removeFromSource(tr, $from);
           var mappedTo = tr.mapping.map(to);
           tr.delete(mappedTo, mappedTo + toNodeWithoutBreakout.nodeSize).insert(mappedTo, newLayout).setSelection(new NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
         }

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

@@ -53,6 +53,7 @@ var getWidthOffset = function getWidthOffset(node, width, position) {
     return '-12px';
   }
 };
+var TABLE_NUMBERED_COLUMN_WIDTH = 42;
 export var InlineDropTarget = function InlineDropTarget(_ref) {
   var api = _ref.api,
     nextNode = _ref.nextNode,
@@ -84,9 +85,14 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
         innerContainerWidth = 'max(calc(var(--ak-editor-max-container-width) - var(--ak-editor--default-gutter-padding) * 2), var(--ak-editor--line-length))';
       }
     } else if (nextNode.type.name === 'table' && nextNode.firstChild) {
-      var _anchorRectCache$getR;
       var tableWidthAnchor = getNodeAnchor(nextNode.firstChild);
-      innerContainerWidth = isAnchorSupported() ? "anchor-size(".concat(tableWidthAnchor, " width)") : "".concat((anchorRectCache === null || anchorRectCache === void 0 || (_anchorRectCache$getR = anchorRectCache.getRect(tableWidthAnchor)) === null || _anchorRectCache$getR === void 0 ? void 0 : _anchorRectCache$getR.width) || 0, "px");
+      var isNumberColumnEnabled = Boolean(nextNode.attrs.isNumberColumnEnabled);
+      if (isAnchorSupported()) {
+        innerContainerWidth = isNumberColumnEnabled ? "calc(anchor-size(".concat(tableWidthAnchor, " width) + ").concat(TABLE_NUMBERED_COLUMN_WIDTH, "px)") : "anchor-size(".concat(tableWidthAnchor, " width)");
+      } else {
+        var _anchorRectCache$getR;
+        innerContainerWidth = "".concat(((anchorRectCache === null || anchorRectCache === void 0 || (_anchorRectCache$getR = anchorRectCache.getRect(tableWidthAnchor)) === null || _anchorRectCache$getR === void 0 ? void 0 : _anchorRectCache$getR.width) || 0) + TABLE_NUMBERED_COLUMN_WIDTH, "px");
+      }
       if (nextNode.attrs.width) {
         // when the table has horizontal scroll
         innerContainerWidth = "min(".concat(nextNode.attrs.width, "px, ").concat(innerContainerWidth, ")");

package/dist/esm/utils/remove-from-source.js

@@ -0,0 +1,20 @@
+import { MIN_LAYOUT_COLUMN } from '../consts';
+import { updateColumnWidths } from './update-column-widths';
+export 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;
+};

package/dist/esm/utils/update-column-widths.js

@@ -0,0 +1,15 @@
+import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
+export 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.setNodeAttribute(layoutNodePos + offset + 1, 'width', newColumnWidth);
+      }
+    });
+  }
+  return {
+    newColumnWidth: newColumnWidth,
+    tr: tr
+  };
+};

package/dist/esm/utils/validation.js

@@ -70,14 +70,15 @@ export var memoizedTransformExpandToNestedExpand = memoizeOne(function (node) {
   }
 });
 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;
+  if (isPreRelease2() && activeNodeType === 'layoutColumn') {
+    // Allow drag layout column and drop into layout section
+    if ((destNode === null || destNode === void 0 ? void 0 : destNode.type.name) === 'layoutSection' || parentNodeType === 'doc') {
+      return true;
+    }
+  }
 
   // Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
   if (editorExperiment('nest-media-and-codeblock-in-quote', false)) {

package/dist/types/utils/remove-from-source.d.ts

@@ -0,0 +1,3 @@
+import { type ResolvedPos } from '@atlaskit/editor-prosemirror/model';
+import { type Transaction } from '@atlaskit/editor-prosemirror/state';
+export declare const removeFromSource: (tr: Transaction, $from: ResolvedPos) => Transaction;

package/dist/types/utils/update-column-widths.d.ts

@@ -0,0 +1,6 @@
+import { type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { type Transaction } from '@atlaskit/editor-prosemirror/state';
+export declare const updateColumnWidths: (tr: Transaction, layoutNode: PMNode, layoutNodePos: number, childCount: number) => {
+    newColumnWidth: number;
+    tr: Transaction;
+};

package/dist/types-ts4.5/utils/remove-from-source.d.ts

@@ -0,0 +1,3 @@
+import { type ResolvedPos } from '@atlaskit/editor-prosemirror/model';
+import { type Transaction } from '@atlaskit/editor-prosemirror/state';
+export declare const removeFromSource: (tr: Transaction, $from: ResolvedPos) => Transaction;

package/dist/types-ts4.5/utils/update-column-widths.d.ts

@@ -0,0 +1,6 @@
+import { type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { type Transaction } from '@atlaskit/editor-prosemirror/state';
+export declare const updateColumnWidths: (tr: Transaction, layoutNode: PMNode, layoutNodePos: number, childCount: number) => {
+    newColumnWidth: number;
+    tr: Transaction;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.13.14",
+	"version": "2.13.16",
 	"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.21.0",
+		"@atlaskit/editor-common": "^94.23.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.2.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.16.0",
+		"@atlaskit/tmp-editor-statsig": "^2.18.0",
 		"@atlaskit/tokens": "^2.2.0",
 		"@atlaskit/tooltip": "^18.9.0",
 		"@babel/runtime": "^7.0.0",