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

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.13.18
+
+### Patch Changes
+
+- [#165840](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165840)
+  [`02a637ba38316`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/02a637ba38316) -
+  [ux] Update layout drop target using anchor position to work in stack layout
+- [#166685](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/166685)
+  [`52915bfd0d222`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/52915bfd0d222) -
+  Add overrides for layout, to account for new DOM structure with resizer
+
+## 2.13.17
+
+### Patch Changes
+
+- [#166056](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/166056)
+  [`00e53bfc73e8f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/00e53bfc73e8f) -
+  ED-25760 drop hints are not triggered for unchanged layout
+- Updated dependencies
+
 ## 2.13.16
 
 ### Patch Changes

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

@@ -116,13 +116,14 @@ var createDropTargetDecoration = exports.createDropTargetDecoration = function c
     side: side
   });
 };
-var createLayoutDropTargetDecoration = exports.createLayoutDropTargetDecoration = function createLayoutDropTargetDecoration(pos, props) {
+var createLayoutDropTargetDecoration = exports.createLayoutDropTargetDecoration = function createLayoutDropTargetDecoration(pos, props, anchorRectCache) {
   return _view.Decoration.widget(pos, function (_, getPos) {
     var element = document.createElement('div');
     element.setAttribute('data-blocks-drop-target-container', 'true');
     element.style.clear = 'unset';
     _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTargetLayout.DropTargetLayout, _objectSpread(_objectSpread({}, props), {}, {
-      getPos: getPos
+      getPos: getPos,
+      anchorRectCache: anchorRectCache
     })), element);
     return element;
   }, {
@@ -166,7 +167,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
         if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) === pos && activeNode.nodeType !== 'layoutColumn') {
           return false;
         }
-        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' && index !== 0 && (
         // Not the first node
         (parent === null || parent === void 0 ? void 0 : parent.childCount) < (0, _consts.maxLayoutColumnSupported)() || isSameLayout)) {
           // Add drop target for layout columns
@@ -174,7 +175,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
             api: api,
             parent: parent,
             formatMessage: formatMessage
-          }));
+          }, anchorRectCache));
         }
       }
       if (node.isInline || !parent || DISABLE_CHILD_DROP_TARGET.includes(parent.type.name)) {

package/dist/cjs/ui/consts.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.topPositionAdjustment = exports.spaceLookupMap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _dropTargetMarginMap;
 var DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_HEIGHT = 24;
 var DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_WIDTH = 12;
@@ -23,6 +24,9 @@ var dragHandleGap = exports.dragHandleGap = function dragHandleGap(nodeType, par
   if (parentNodeType && parentNodeType !== 'doc') {
     return DRAG_HANDLE_NARROW_GAP;
   }
+  if (nodeType === 'layoutSection' && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing')) {
+    return DRAG_HANDLE_MAX_GAP + 12;
+  }
   if (nodeTypeExcludeList.includes(nodeType)) {
     return DRAG_HANDLE_MAX_GAP;
   }
@@ -48,6 +52,18 @@ var getNestedNodeLeftPaddingMargin = exports.getNestedNodeLeftPaddingMargin = fu
   }
 };
 var topPositionAdjustment = exports.topPositionAdjustment = function topPositionAdjustment(nodeType) {
+  if ((0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing')) {
+    switch (nodeType) {
+      case 'rule':
+        return -DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT;
+      case 'table':
+        return DRAG_HANDLE_HEIGHT;
+      case 'layoutSection':
+        return 8;
+      default:
+        return 0;
+    }
+  }
   switch (nodeType) {
     case 'rule':
       return -DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT;

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

@@ -5,14 +5,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DropTargetLayout = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _colors = require("@atlaskit/theme/colors");
 var _decorationsCommon = require("../pm-plugins/decorations-common");
 var _activeAnchorTracker = require("../utils/active-anchor-tracker");
+var _anchorUtils = require("../utils/anchor-utils");
 var _dragTargetDebug = require("../utils/drag-target-debug");
 /**
  * @jsxRuntime classic
@@ -39,16 +42,32 @@ var dropTargetLayoutHintStyle = (0, _react2.css)({
   width: 0
 });
 var DropTargetLayout = exports.DropTargetLayout = function DropTargetLayout(props) {
-  var _api$blockControls;
+  var _ref$current, _api$blockControls;
   var api = props.api,
     getPos = props.getPos,
-    parent = props.parent;
+    parent = props.parent,
+    anchorRectCache = props.anchorRectCache;
   var ref = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isDraggedOver = _useState2[0],
     setIsDraggedOver = _useState2[1];
   var anchorName = (0, _decorationsCommon.getNodeAnchor)(parent);
+  var nextNodeAnchorName = (_ref$current = ref.current) === null || _ref$current === void 0 || (_ref$current = _ref$current.parentElement) === null || _ref$current === void 0 || (_ref$current = _ref$current.nextElementSibling) === null || _ref$current === void 0 ? void 0 : _ref$current.getAttribute('data-drag-handler-anchor-name');
+  var height = '100%';
+  if (nextNodeAnchorName) {
+    if ((0, _anchorUtils.isAnchorSupported)()) {
+      height = "anchor-size(".concat(nextNodeAnchorName, " height)");
+    } else if (anchorRectCache) {
+      var layoutColumnRect = anchorRectCache.getRect(nextNodeAnchorName);
+      height = "".concat((layoutColumnRect === null || layoutColumnRect === void 0 ? void 0 : layoutColumnRect.height) || 0, "px");
+    }
+  }
+  var dropTargetStackLayoutHintStyle = (0, _react2.css)((0, _defineProperty2.default)({}, "@container layout-area (max-width:".concat(_editorSharedStyles.layoutBreakpointWidth.MEDIUM - 1, "px)"), {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    height: height,
+    marginTop: "var(--ds-space-050, 4px)"
+  }));
   var _useActiveAnchorTrack = (0, _activeAnchorTracker.useActiveAnchorTracker)(anchorName),
     _useActiveAnchorTrack2 = (0, _slicedToArray2.default)(_useActiveAnchorTrack, 1),
     isActiveAnchor = _useActiveAnchorTrack2[0];
@@ -83,14 +102,18 @@ var DropTargetLayout = exports.DropTargetLayout = function DropTargetLayout(prop
     return null;
   }
   return (0, _react2.jsx)("div", {
-    ref: ref,
-    css: dropTargetLayoutStyle,
+    ref: ref
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
+    css: [dropTargetLayoutStyle, dropTargetStackLayoutHintStyle],
     "data-testid": "block-ctrl-drop-indicator"
   }, isDraggedOver || (0, _dragTargetDebug.isBlocksDragTargetDebug)() ? (0, _react2.jsx)(_box.DropIndicator, {
     edge: "right",
     gap: "-".concat(DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH, "px")
   }) : isActiveAnchor && (0, _react2.jsx)("div", {
-    "data-testid": "block-ctrl-drop-hint",
+    "data-testid": "block-ctrl-drop-hint"
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
     css: dropTargetLayoutHintStyle
   }));
 };

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

@@ -13,6 +13,7 @@ var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _colors = require("@atlaskit/theme/colors");
 var _decorationsCommon = require("../pm-plugins/decorations-common");
 var _activeAnchorTracker = require("../utils/active-anchor-tracker");
+var _advancedLayoutsFlags = require("../utils/advanced-layouts-flags");
 var _anchorUtils = require("../utils/anchor-utils");
 var _dragTargetDebug = require("../utils/drag-target-debug");
 /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
@@ -46,7 +47,8 @@ var dropTargetLayoutHintLeftStyle = (0, _react2.css)({
 var defaultNodeDimension = {
   width: '0',
   height: '0',
-  top: 'unset'
+  top: 'unset',
+  bottom: 'unset'
 };
 var getWidthOffset = function getWidthOffset(node, width, position) {
   if (node.type.name === 'mediaSingle' || node.type.name === 'table') {
@@ -80,6 +82,7 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
     _useActiveAnchorTrack2 = (0, _slicedToArray2.default)(_useActiveAnchorTrack, 1),
     isActiveAnchor = _useActiveAnchorTrack2[0];
   var isLeftPosition = position === 'left';
+  var shouldShowResponsiveLayout = (0, _advancedLayoutsFlags.showResponsiveLayout)();
   var nodeDimension = (0, _react.useMemo)(function () {
     if (!nextNode) {
       return defaultNodeDimension;
@@ -108,13 +111,20 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
     } else if (nextNode.type.name === 'mediaSingle' && nextNode.firstChild) {
       targetAnchorName = (0, _decorationsCommon.getNodeAnchor)(nextNode.firstChild);
     }
+
+    // Set the height target anchor name to the first or last column of the layout section so that it also works for stacked layout
+    var heightTargetAnchorName = targetAnchorName;
+    if (shouldShowResponsiveLayout && nextNode.type.name === 'layoutSection' && nextNode.firstChild && nextNode.lastChild) {
+      heightTargetAnchorName = isLeftPosition ? (0, _decorationsCommon.getNodeAnchor)(nextNode.firstChild) : (0, _decorationsCommon.getNodeAnchor)(nextNode.lastChild);
+    }
     if ((0, _anchorUtils.isAnchorSupported)()) {
       var width = innerContainerWidth || "anchor-size(".concat(targetAnchorName, " width)");
-      var height = "anchor-size(".concat(targetAnchorName, " height)");
+      var height = "anchor-size(".concat(heightTargetAnchorName, " height)");
       return {
         width: width,
         height: height,
         top: 'anchor(top)',
+        bottom: 'anchor(bottom)',
         widthOffset: getWidthOffset(nextNode, width, position)
       };
     }
@@ -122,16 +132,22 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
       var nodeRect = anchorRectCache.getRect(targetAnchorName);
       var _width = innerContainerWidth || "".concat((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.width) || 0, "px");
       var top = nodeRect !== null && nodeRect !== void 0 && nodeRect.top ? "".concat(nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.top, "px") : 'unset';
+      var bottom = "100% - ".concat((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.bottom) || 0, "px + ").concat(GAP, "px");
       var _height = "".concat((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.height) || 0, "px");
+      if (heightTargetAnchorName !== targetAnchorName) {
+        var nodeHeightRect = anchorRectCache.getRect(heightTargetAnchorName);
+        _height = "".concat((nodeHeightRect === null || nodeHeightRect === void 0 ? void 0 : nodeHeightRect.height) || 0, "px + ").concat(GAP, "px");
+      }
       return {
         width: _width,
         height: _height,
         top: top,
+        bottom: bottom,
         widthOffset: getWidthOffset(nextNode, _width, position)
       };
     }
     return defaultNodeDimension;
-  }, [anchorName, anchorRectCache, nextNode, position]);
+  }, [anchorName, anchorRectCache, nextNode, position, isLeftPosition, shouldShowResponsiveLayout]);
   var onDrop = (0, _react.useCallback)(function () {
     var _api$blockControls;
     var _ref2 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
@@ -149,16 +165,26 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
     }
   }, [api, getPos, position]);
   var inlineHoverZoneRectStyle = (0, _react.useMemo)(function () {
+    var isLayoutNode = (nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name) === 'layoutSection';
+    var layoutAdjustment = isLayoutNode && shouldShowResponsiveLayout ? {
+      width: 11,
+      height: 4,
+      top: 6,
+      bottom: 2
+    } : undefined;
     return (0, _react2.css)({
       positionAnchor: anchorName,
       minWidth: "var(--ds-space-100, 8px)",
       left: isLeftPosition ? 0 : 'unset',
       right: isLeftPosition ? 'unset' : 0,
       top: "calc(anchor(top))",
-      width: nodeDimension.widthOffset ? "calc((100% - ".concat(nodeDimension.width, ")/2 - ").concat(GAP, "px + ").concat(nodeDimension.widthOffset, ")") : "calc((100% - ".concat(nodeDimension.width, ")/2 - ").concat(GAP, "px)"),
-      height: "calc(".concat(nodeDimension.height, ")")
+      width: nodeDimension.widthOffset ? "calc((100% - ".concat(nodeDimension.width, ")/2 - ").concat(GAP, "px + ").concat(nodeDimension.widthOffset, " - ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.width) || 0, "px)") : "calc((100% - ".concat(nodeDimension.width, ")/2 - ").concat(GAP, "px - ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.width) || 0, "px)"),
+      height: "calc(".concat(nodeDimension.height, " + ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.height) || 0, "px)")
+    }, isLayoutNode && shouldShowResponsiveLayout && {
+      top: isLeftPosition ? "calc(".concat(nodeDimension.top, " + ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.top) || 0, "px)") : 'unset',
+      bottom: isLeftPosition ? 'unset' : "calc(".concat(nodeDimension.bottom, " - ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.bottom) || 0, "px)")
     });
-  }, [anchorName, isLeftPosition, nodeDimension]);
+  }, [anchorName, isLeftPosition, nodeDimension, nextNode, shouldShowResponsiveLayout]);
   var dropIndicatorPos = (0, _react.useMemo)(function () {
     return isLeftPosition ? 'right' : 'left';
   }, [isLeftPosition]);

package/dist/cjs/utils/advanced-layouts-flags.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isPreRelease2 = exports.isPreRelease1 = void 0;
+exports.showResponsiveLayout = exports.isPreRelease2 = exports.isPreRelease1 = void 0;
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 // When we turn on re-release 2, will also turn on pre-release 1
@@ -13,4 +13,7 @@ var isPreRelease1 = exports.isPreRelease1 = function isPreRelease1() {
 };
 var isPreRelease2 = exports.isPreRelease2 = function isPreRelease2() {
   return (0, _experiments.editorExperiment)('advanced_layouts', true) || (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_pre_release_2');
+};
+var showResponsiveLayout = exports.showResponsiveLayout = function showResponsiveLayout() {
+  return (0, _experiments.editorExperiment)('advanced_layouts', true) && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing');
 };

package/dist/cjs/utils/anchor-utils.js

@@ -46,7 +46,8 @@ var AnchorRectCache = exports.AnchorRectCache = /*#__PURE__*/function () {
               top: curr.offsetTop,
               left: curr.offsetLeft,
               right: curr.offsetLeft + curr.clientWidth,
-              width: curr.clientWidth
+              width: curr.clientWidth,
+              bottom: curr.offsetTop + curr.clientHeight
             }));
           }
           return prev;

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

@@ -107,14 +107,15 @@ export const createDropTargetDecoration = (pos, props, side, anchorRectCache, is
     side
   });
 };
-export const createLayoutDropTargetDecoration = (pos, props) => {
+export const createLayoutDropTargetDecoration = (pos, props, anchorRectCache) => {
   return Decoration.widget(pos, (_, getPos) => {
     const element = document.createElement('div');
     element.setAttribute('data-blocks-drop-target-container', 'true');
     element.style.clear = 'unset';
     ReactDOM.render( /*#__PURE__*/createElement(DropTargetLayout, {
       ...props,
-      getPos
+      getPos,
+      anchorRectCache
     }), element);
     return element;
   }, {
@@ -158,7 +159,7 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode,
         if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) === pos && activeNode.nodeType !== 'layoutColumn') {
           return false;
         }
-        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' && index !== 0 && (
         // Not the first node
         (parent === null || parent === void 0 ? void 0 : parent.childCount) < maxLayoutColumnSupported() || isSameLayout)) {
           // Add drop target for layout columns
@@ -166,7 +167,7 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode,
             api,
             parent,
             formatMessage
-          }));
+          }, anchorRectCache));
         }
       }
       if (node.isInline || !parent || DISABLE_CHILD_DROP_TARGET.includes(parent.type.name)) {

package/dist/es2019/ui/consts.js

@@ -1,4 +1,5 @@
 import { akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 export const DRAG_HANDLE_HEIGHT = 24;
 export const DRAG_HANDLE_WIDTH = 12;
 export const DRAG_HANDLE_BORDER_RADIUS = 4;
@@ -14,6 +15,9 @@ export const dragHandleGap = (nodeType, parentNodeType) => {
   if (parentNodeType && parentNodeType !== 'doc') {
     return DRAG_HANDLE_NARROW_GAP;
   }
+  if (nodeType === 'layoutSection' && fg('platform_editor_advanced_layouts_breakout_resizing')) {
+    return DRAG_HANDLE_MAX_GAP + 12;
+  }
   if (nodeTypeExcludeList.includes(nodeType)) {
     return DRAG_HANDLE_MAX_GAP;
   }
@@ -39,6 +43,18 @@ export const getNestedNodeLeftPaddingMargin = nodeType => {
   }
 };
 export const topPositionAdjustment = nodeType => {
+  if (fg('platform_editor_advanced_layouts_breakout_resizing')) {
+    switch (nodeType) {
+      case 'rule':
+        return -DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT;
+      case 'table':
+        return DRAG_HANDLE_HEIGHT;
+      case 'layoutSection':
+        return 8;
+      default:
+        return 0;
+    }
+  }
   switch (nodeType) {
     case 'rule':
       return -DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT;

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

@@ -6,11 +6,13 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 import { css, jsx } from '@emotion/react';
+import { layoutBreakpointWidth } from '@atlaskit/editor-shared-styles';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { B200 } from '@atlaskit/theme/colors';
 import { getNodeAnchor } from '../pm-plugins/decorations-common';
 import { useActiveAnchorTracker } from '../utils/active-anchor-tracker';
+import { isAnchorSupported } from '../utils/anchor-utils';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 
 // 8px gap + 16px on left and right
@@ -31,15 +33,34 @@ const dropTargetLayoutHintStyle = css({
   width: 0
 });
 export const DropTargetLayout = props => {
-  var _api$blockControls;
+  var _ref$current, _ref$current$parentEl, _ref$current$parentEl2, _api$blockControls;
   const {
     api,
     getPos,
-    parent
+    parent,
+    anchorRectCache
   } = props;
   const ref = useRef(null);
   const [isDraggedOver, setIsDraggedOver] = useState(false);
   const anchorName = getNodeAnchor(parent);
+  const nextNodeAnchorName = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : (_ref$current$parentEl = _ref$current.parentElement) === null || _ref$current$parentEl === void 0 ? void 0 : (_ref$current$parentEl2 = _ref$current$parentEl.nextElementSibling) === null || _ref$current$parentEl2 === void 0 ? void 0 : _ref$current$parentEl2.getAttribute('data-drag-handler-anchor-name');
+  let height = '100%';
+  if (nextNodeAnchorName) {
+    if (isAnchorSupported()) {
+      height = `anchor-size(${nextNodeAnchorName} height)`;
+    } else if (anchorRectCache) {
+      const layoutColumnRect = anchorRectCache.getRect(nextNodeAnchorName);
+      height = `${(layoutColumnRect === null || layoutColumnRect === void 0 ? void 0 : layoutColumnRect.height) || 0}px`;
+    }
+  }
+  const dropTargetStackLayoutHintStyle = css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    [`@container layout-area (max-width:${layoutBreakpointWidth.MEDIUM - 1}px)`]: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      height,
+      marginTop: `${"var(--ds-space-050, 4px)"}`
+    }
+  });
   const [isActiveAnchor] = useActiveAnchorTracker(anchorName);
   const {
     activeNode
@@ -75,14 +96,18 @@ export const DropTargetLayout = props => {
     return null;
   }
   return jsx("div", {
-    ref: ref,
-    css: dropTargetLayoutStyle,
+    ref: ref
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
+    css: [dropTargetLayoutStyle, dropTargetStackLayoutHintStyle],
     "data-testid": "block-ctrl-drop-indicator"
   }, isDraggedOver || isBlocksDragTargetDebug() ? jsx(DropIndicator, {
     edge: "right",
     gap: `-${DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH}px`
   }) : isActiveAnchor && jsx("div", {
-    "data-testid": "block-ctrl-drop-hint",
+    "data-testid": "block-ctrl-drop-hint"
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
     css: dropTargetLayoutHintStyle
   }));
 };

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

@@ -13,6 +13,7 @@ import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element
 import { B200 } from '@atlaskit/theme/colors';
 import { getNodeAnchor } from '../pm-plugins/decorations-common';
 import { useActiveAnchorTracker } from '../utils/active-anchor-tracker';
+import { showResponsiveLayout } from '../utils/advanced-layouts-flags';
 import { isAnchorSupported } from '../utils/anchor-utils';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 const hoverZoneCommonStyle = css({
@@ -37,7 +38,8 @@ const dropTargetLayoutHintLeftStyle = css({
 const defaultNodeDimension = {
   width: '0',
   height: '0',
-  top: 'unset'
+  top: 'unset',
+  bottom: 'unset'
 };
 const getWidthOffset = (node, width, position) => {
   if (node.type.name === 'mediaSingle' || node.type.name === 'table') {
@@ -67,6 +69,7 @@ export const InlineDropTarget = ({
   }, [nextNode]);
   const [isActiveAnchor] = useActiveAnchorTracker(anchorName);
   const isLeftPosition = position === 'left';
+  const shouldShowResponsiveLayout = showResponsiveLayout();
   const nodeDimension = useMemo(() => {
     if (!nextNode) {
       return defaultNodeDimension;
@@ -95,13 +98,20 @@ export const InlineDropTarget = ({
     } else if (nextNode.type.name === 'mediaSingle' && nextNode.firstChild) {
       targetAnchorName = getNodeAnchor(nextNode.firstChild);
     }
+
+    // Set the height target anchor name to the first or last column of the layout section so that it also works for stacked layout
+    let heightTargetAnchorName = targetAnchorName;
+    if (shouldShowResponsiveLayout && nextNode.type.name === 'layoutSection' && nextNode.firstChild && nextNode.lastChild) {
+      heightTargetAnchorName = isLeftPosition ? getNodeAnchor(nextNode.firstChild) : getNodeAnchor(nextNode.lastChild);
+    }
     if (isAnchorSupported()) {
       const width = innerContainerWidth || `anchor-size(${targetAnchorName} width)`;
-      const height = `anchor-size(${targetAnchorName} height)`;
+      const height = `anchor-size(${heightTargetAnchorName} height)`;
       return {
         width,
         height,
         top: 'anchor(top)',
+        bottom: 'anchor(bottom)',
         widthOffset: getWidthOffset(nextNode, width, position)
       };
     }
@@ -109,16 +119,22 @@ export const InlineDropTarget = ({
       const nodeRect = anchorRectCache.getRect(targetAnchorName);
       const width = innerContainerWidth || `${(nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.width) || 0}px`;
       const top = nodeRect !== null && nodeRect !== void 0 && nodeRect.top ? `${nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.top}px` : 'unset';
-      const height = `${(nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.height) || 0}px`;
+      const bottom = `100% - ${(nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.bottom) || 0}px + ${GAP}px`;
+      let height = `${(nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.height) || 0}px`;
+      if (heightTargetAnchorName !== targetAnchorName) {
+        const nodeHeightRect = anchorRectCache.getRect(heightTargetAnchorName);
+        height = `${(nodeHeightRect === null || nodeHeightRect === void 0 ? void 0 : nodeHeightRect.height) || 0}px + ${GAP}px`;
+      }
       return {
         width,
         height,
         top,
+        bottom,
         widthOffset: getWidthOffset(nextNode, width, position)
       };
     }
     return defaultNodeDimension;
-  }, [anchorName, anchorRectCache, nextNode, position]);
+  }, [anchorName, anchorRectCache, nextNode, position, isLeftPosition, shouldShowResponsiveLayout]);
   const onDrop = useCallback(() => {
     var _api$blockControls;
     const {
@@ -139,16 +155,26 @@ export const InlineDropTarget = ({
     }
   }, [api, getPos, position]);
   const inlineHoverZoneRectStyle = useMemo(() => {
+    const isLayoutNode = (nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name) === 'layoutSection';
+    const layoutAdjustment = isLayoutNode && shouldShowResponsiveLayout ? {
+      width: 11,
+      height: 4,
+      top: 6,
+      bottom: 2
+    } : undefined;
     return css({
       positionAnchor: anchorName,
       minWidth: "var(--ds-space-100, 8px)",
       left: isLeftPosition ? 0 : 'unset',
       right: isLeftPosition ? 'unset' : 0,
       top: `calc(anchor(top))`,
-      width: nodeDimension.widthOffset ? `calc((100% - ${nodeDimension.width})/2 - ${GAP}px + ${nodeDimension.widthOffset})` : `calc((100% - ${nodeDimension.width})/2 - ${GAP}px)`,
-      height: `calc(${nodeDimension.height})`
+      width: nodeDimension.widthOffset ? `calc((100% - ${nodeDimension.width})/2 - ${GAP}px + ${nodeDimension.widthOffset} - ${(layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.width) || 0}px)` : `calc((100% - ${nodeDimension.width})/2 - ${GAP}px - ${(layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.width) || 0}px)`,
+      height: `calc(${nodeDimension.height} + ${(layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.height) || 0}px)`
+    }, isLayoutNode && shouldShowResponsiveLayout && {
+      top: isLeftPosition ? `calc(${nodeDimension.top} + ${(layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.top) || 0}px)` : 'unset',
+      bottom: isLeftPosition ? 'unset' : `calc(${nodeDimension.bottom} - ${(layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.bottom) || 0}px)`
     });
-  }, [anchorName, isLeftPosition, nodeDimension]);
+  }, [anchorName, isLeftPosition, nodeDimension, nextNode, shouldShowResponsiveLayout]);
   const dropIndicatorPos = useMemo(() => {
     return isLeftPosition ? 'right' : 'left';
   }, [isLeftPosition]);

package/dist/es2019/utils/advanced-layouts-flags.js

@@ -8,4 +8,7 @@ export const isPreRelease1 = () => {
 };
 export const isPreRelease2 = () => {
   return editorExperiment('advanced_layouts', true) || fg('platform_editor_advanced_layouts_pre_release_2');
+};
+export const showResponsiveLayout = () => {
+  return editorExperiment('advanced_layouts', true) && fg('platform_editor_advanced_layouts_breakout_resizing');
 };

package/dist/es2019/utils/anchor-utils.js

@@ -32,7 +32,8 @@ export class AnchorRectCache {
               top: curr.offsetTop,
               left: curr.offsetLeft,
               right: curr.offsetLeft + curr.clientWidth,
-              width: curr.clientWidth
+              width: curr.clientWidth,
+              bottom: curr.offsetTop + curr.clientHeight
             }
           };
         }

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

@@ -109,13 +109,14 @@ export var createDropTargetDecoration = function createDropTargetDecoration(pos,
     side: side
   });
 };
-export var createLayoutDropTargetDecoration = function createLayoutDropTargetDecoration(pos, props) {
+export var createLayoutDropTargetDecoration = function createLayoutDropTargetDecoration(pos, props, anchorRectCache) {
   return Decoration.widget(pos, function (_, getPos) {
     var element = document.createElement('div');
     element.setAttribute('data-blocks-drop-target-container', 'true');
     element.style.clear = 'unset';
     ReactDOM.render( /*#__PURE__*/createElement(DropTargetLayout, _objectSpread(_objectSpread({}, props), {}, {
-      getPos: getPos
+      getPos: getPos,
+      anchorRectCache: anchorRectCache
     })), element);
     return element;
   }, {
@@ -159,7 +160,7 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
         if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) === pos && activeNode.nodeType !== 'layoutColumn') {
           return false;
         }
-        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' && index !== 0 && (
         // Not the first node
         (parent === null || parent === void 0 ? void 0 : parent.childCount) < maxLayoutColumnSupported() || isSameLayout)) {
           // Add drop target for layout columns
@@ -167,7 +168,7 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
             api: api,
             parent: parent,
             formatMessage: formatMessage
-          }));
+          }, anchorRectCache));
         }
       }
       if (node.isInline || !parent || DISABLE_CHILD_DROP_TARGET.includes(parent.type.name)) {

package/dist/esm/ui/consts.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _dropTargetMarginMap;
 import { akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 export var DRAG_HANDLE_HEIGHT = 24;
 export var DRAG_HANDLE_WIDTH = 12;
 export var DRAG_HANDLE_BORDER_RADIUS = 4;
@@ -16,6 +17,9 @@ export var dragHandleGap = function dragHandleGap(nodeType, parentNodeType) {
   if (parentNodeType && parentNodeType !== 'doc') {
     return DRAG_HANDLE_NARROW_GAP;
   }
+  if (nodeType === 'layoutSection' && fg('platform_editor_advanced_layouts_breakout_resizing')) {
+    return DRAG_HANDLE_MAX_GAP + 12;
+  }
   if (nodeTypeExcludeList.includes(nodeType)) {
     return DRAG_HANDLE_MAX_GAP;
   }
@@ -41,6 +45,18 @@ export var getNestedNodeLeftPaddingMargin = function getNestedNodeLeftPaddingMar
   }
 };
 export var topPositionAdjustment = function topPositionAdjustment(nodeType) {
+  if (fg('platform_editor_advanced_layouts_breakout_resizing')) {
+    switch (nodeType) {
+      case 'rule':
+        return -DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT;
+      case 'table':
+        return DRAG_HANDLE_HEIGHT;
+      case 'layoutSection':
+        return 8;
+      default:
+        return 0;
+    }
+  }
   switch (nodeType) {
     case 'rule':
       return -DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT;

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

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
  * @jsxRuntime classic
@@ -7,11 +8,13 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 import { css, jsx } from '@emotion/react';
+import { layoutBreakpointWidth } from '@atlaskit/editor-shared-styles';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { B200 } from '@atlaskit/theme/colors';
 import { getNodeAnchor } from '../pm-plugins/decorations-common';
 import { useActiveAnchorTracker } from '../utils/active-anchor-tracker';
+import { isAnchorSupported } from '../utils/anchor-utils';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 
 // 8px gap + 16px on left and right
@@ -32,16 +35,32 @@ var dropTargetLayoutHintStyle = css({
   width: 0
 });
 export var DropTargetLayout = function DropTargetLayout(props) {
-  var _api$blockControls;
+  var _ref$current, _api$blockControls;
   var api = props.api,
     getPos = props.getPos,
-    parent = props.parent;
+    parent = props.parent,
+    anchorRectCache = props.anchorRectCache;
   var ref = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isDraggedOver = _useState2[0],
     setIsDraggedOver = _useState2[1];
   var anchorName = getNodeAnchor(parent);
+  var nextNodeAnchorName = (_ref$current = ref.current) === null || _ref$current === void 0 || (_ref$current = _ref$current.parentElement) === null || _ref$current === void 0 || (_ref$current = _ref$current.nextElementSibling) === null || _ref$current === void 0 ? void 0 : _ref$current.getAttribute('data-drag-handler-anchor-name');
+  var height = '100%';
+  if (nextNodeAnchorName) {
+    if (isAnchorSupported()) {
+      height = "anchor-size(".concat(nextNodeAnchorName, " height)");
+    } else if (anchorRectCache) {
+      var layoutColumnRect = anchorRectCache.getRect(nextNodeAnchorName);
+      height = "".concat((layoutColumnRect === null || layoutColumnRect === void 0 ? void 0 : layoutColumnRect.height) || 0, "px");
+    }
+  }
+  var dropTargetStackLayoutHintStyle = css(_defineProperty({}, "@container layout-area (max-width:".concat(layoutBreakpointWidth.MEDIUM - 1, "px)"), {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    height: height,
+    marginTop: "var(--ds-space-050, 4px)"
+  }));
   var _useActiveAnchorTrack = useActiveAnchorTracker(anchorName),
     _useActiveAnchorTrack2 = _slicedToArray(_useActiveAnchorTrack, 1),
     isActiveAnchor = _useActiveAnchorTrack2[0];
@@ -76,14 +95,18 @@ export var DropTargetLayout = function DropTargetLayout(props) {
     return null;
   }
   return jsx("div", {
-    ref: ref,
-    css: dropTargetLayoutStyle,
+    ref: ref
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
+    css: [dropTargetLayoutStyle, dropTargetStackLayoutHintStyle],
     "data-testid": "block-ctrl-drop-indicator"
   }, isDraggedOver || isBlocksDragTargetDebug() ? jsx(DropIndicator, {
     edge: "right",
     gap: "-".concat(DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH, "px")
   }) : isActiveAnchor && jsx("div", {
-    "data-testid": "block-ctrl-drop-hint",
+    "data-testid": "block-ctrl-drop-hint"
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
     css: dropTargetLayoutHintStyle
   }));
 };

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

@@ -14,6 +14,7 @@ import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element
 import { B200 } from '@atlaskit/theme/colors';
 import { getNodeAnchor } from '../pm-plugins/decorations-common';
 import { useActiveAnchorTracker } from '../utils/active-anchor-tracker';
+import { showResponsiveLayout } from '../utils/advanced-layouts-flags';
 import { isAnchorSupported } from '../utils/anchor-utils';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 var hoverZoneCommonStyle = css({
@@ -38,7 +39,8 @@ var dropTargetLayoutHintLeftStyle = css({
 var defaultNodeDimension = {
   width: '0',
   height: '0',
-  top: 'unset'
+  top: 'unset',
+  bottom: 'unset'
 };
 var getWidthOffset = function getWidthOffset(node, width, position) {
   if (node.type.name === 'mediaSingle' || node.type.name === 'table') {
@@ -72,6 +74,7 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
     _useActiveAnchorTrack2 = _slicedToArray(_useActiveAnchorTrack, 1),
     isActiveAnchor = _useActiveAnchorTrack2[0];
   var isLeftPosition = position === 'left';
+  var shouldShowResponsiveLayout = showResponsiveLayout();
   var nodeDimension = useMemo(function () {
     if (!nextNode) {
       return defaultNodeDimension;
@@ -100,13 +103,20 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
     } else if (nextNode.type.name === 'mediaSingle' && nextNode.firstChild) {
       targetAnchorName = getNodeAnchor(nextNode.firstChild);
     }
+
+    // Set the height target anchor name to the first or last column of the layout section so that it also works for stacked layout
+    var heightTargetAnchorName = targetAnchorName;
+    if (shouldShowResponsiveLayout && nextNode.type.name === 'layoutSection' && nextNode.firstChild && nextNode.lastChild) {
+      heightTargetAnchorName = isLeftPosition ? getNodeAnchor(nextNode.firstChild) : getNodeAnchor(nextNode.lastChild);
+    }
     if (isAnchorSupported()) {
       var width = innerContainerWidth || "anchor-size(".concat(targetAnchorName, " width)");
-      var height = "anchor-size(".concat(targetAnchorName, " height)");
+      var height = "anchor-size(".concat(heightTargetAnchorName, " height)");
       return {
         width: width,
         height: height,
         top: 'anchor(top)',
+        bottom: 'anchor(bottom)',
         widthOffset: getWidthOffset(nextNode, width, position)
       };
     }
@@ -114,16 +124,22 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
       var nodeRect = anchorRectCache.getRect(targetAnchorName);
       var _width = innerContainerWidth || "".concat((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.width) || 0, "px");
       var top = nodeRect !== null && nodeRect !== void 0 && nodeRect.top ? "".concat(nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.top, "px") : 'unset';
+      var bottom = "100% - ".concat((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.bottom) || 0, "px + ").concat(GAP, "px");
       var _height = "".concat((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.height) || 0, "px");
+      if (heightTargetAnchorName !== targetAnchorName) {
+        var nodeHeightRect = anchorRectCache.getRect(heightTargetAnchorName);
+        _height = "".concat((nodeHeightRect === null || nodeHeightRect === void 0 ? void 0 : nodeHeightRect.height) || 0, "px + ").concat(GAP, "px");
+      }
       return {
         width: _width,
         height: _height,
         top: top,
+        bottom: bottom,
         widthOffset: getWidthOffset(nextNode, _width, position)
       };
     }
     return defaultNodeDimension;
-  }, [anchorName, anchorRectCache, nextNode, position]);
+  }, [anchorName, anchorRectCache, nextNode, position, isLeftPosition, shouldShowResponsiveLayout]);
   var onDrop = useCallback(function () {
     var _api$blockControls;
     var _ref2 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
@@ -141,16 +157,26 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
     }
   }, [api, getPos, position]);
   var inlineHoverZoneRectStyle = useMemo(function () {
+    var isLayoutNode = (nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name) === 'layoutSection';
+    var layoutAdjustment = isLayoutNode && shouldShowResponsiveLayout ? {
+      width: 11,
+      height: 4,
+      top: 6,
+      bottom: 2
+    } : undefined;
     return css({
       positionAnchor: anchorName,
       minWidth: "var(--ds-space-100, 8px)",
       left: isLeftPosition ? 0 : 'unset',
       right: isLeftPosition ? 'unset' : 0,
       top: "calc(anchor(top))",
-      width: nodeDimension.widthOffset ? "calc((100% - ".concat(nodeDimension.width, ")/2 - ").concat(GAP, "px + ").concat(nodeDimension.widthOffset, ")") : "calc((100% - ".concat(nodeDimension.width, ")/2 - ").concat(GAP, "px)"),
-      height: "calc(".concat(nodeDimension.height, ")")
+      width: nodeDimension.widthOffset ? "calc((100% - ".concat(nodeDimension.width, ")/2 - ").concat(GAP, "px + ").concat(nodeDimension.widthOffset, " - ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.width) || 0, "px)") : "calc((100% - ".concat(nodeDimension.width, ")/2 - ").concat(GAP, "px - ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.width) || 0, "px)"),
+      height: "calc(".concat(nodeDimension.height, " + ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.height) || 0, "px)")
+    }, isLayoutNode && shouldShowResponsiveLayout && {
+      top: isLeftPosition ? "calc(".concat(nodeDimension.top, " + ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.top) || 0, "px)") : 'unset',
+      bottom: isLeftPosition ? 'unset' : "calc(".concat(nodeDimension.bottom, " - ").concat((layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.bottom) || 0, "px)")
     });
-  }, [anchorName, isLeftPosition, nodeDimension]);
+  }, [anchorName, isLeftPosition, nodeDimension, nextNode, shouldShowResponsiveLayout]);
   var dropIndicatorPos = useMemo(function () {
     return isLeftPosition ? 'right' : 'left';
   }, [isLeftPosition]);

package/dist/esm/utils/advanced-layouts-flags.js

@@ -8,4 +8,7 @@ export var isPreRelease1 = function isPreRelease1() {
 };
 export var isPreRelease2 = function isPreRelease2() {
   return editorExperiment('advanced_layouts', true) || fg('platform_editor_advanced_layouts_pre_release_2');
+};
+export var showResponsiveLayout = function showResponsiveLayout() {
+  return editorExperiment('advanced_layouts', true) && fg('platform_editor_advanced_layouts_breakout_resizing');
 };

package/dist/esm/utils/anchor-utils.js

@@ -39,7 +39,8 @@ export var AnchorRectCache = /*#__PURE__*/function () {
               top: curr.offsetTop,
               left: curr.offsetLeft,
               right: curr.offsetLeft + curr.clientWidth,
-              width: curr.clientWidth
+              width: curr.clientWidth,
+              bottom: curr.offsetTop + curr.clientHeight
             }));
           }
           return prev;

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

@@ -15,5 +15,5 @@ import { type AnchorRectCache } from '../utils/anchor-utils';
  */
 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, isSameLayout?: boolean) => Decoration;
-export declare const createLayoutDropTargetDecoration: (pos: number, props: Omit<DropTargetLayoutProps, 'getPos'>) => Decoration;
+export declare const createLayoutDropTargetDecoration: (pos: number, props: Omit<DropTargetLayoutProps, 'getPos'>, anchorRectCache?: AnchorRectCache) => 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/consts.d.ts

@@ -7,7 +7,7 @@ export declare const DRAG_HANDLE_NARROW_GAP = 4;
 export declare const DRAG_HANDLE_MAX_GAP = 12;
 export declare const DRAG_HANDLE_MAX_WIDTH_PLUS_GAP: number;
 export declare const DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT: number;
-export declare const dragHandleGap: (nodeType: string, parentNodeType?: string) => 4 | 8 | 12;
+export declare const dragHandleGap: (nodeType: string, parentNodeType?: string) => number;
 export declare const getNestedNodeLeftPaddingMargin: (nodeType?: string) => "8px" | "16px" | "20px" | "24px" | "28px" | "40px";
 export declare const topPositionAdjustment: (nodeType: string) => number;
 export declare const dropTargetMarginMap: {

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

@@ -3,10 +3,13 @@ import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { BlockControlsPlugin } from '../types';
+import { type AnchorRectCache } from '../utils/anchor-utils';
 export type DropTargetLayoutProps = {
     api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
     getPos: () => number | undefined;
     parent: PMNode;
     formatMessage?: IntlShape['formatMessage'];
 };
-export declare const DropTargetLayout: (props: DropTargetLayoutProps) => jsx.JSX.Element | null;
+export declare const DropTargetLayout: (props: DropTargetLayoutProps & {
+    anchorRectCache?: AnchorRectCache | undefined;
+}) => jsx.JSX.Element | null;

package/dist/types/utils/advanced-layouts-flags.d.ts

@@ -1,2 +1,3 @@
 export declare const isPreRelease1: () => boolean;
 export declare const isPreRelease2: () => boolean;
+export declare const showResponsiveLayout: () => boolean;

package/dist/types/utils/anchor-utils.d.ts

@@ -6,6 +6,7 @@ type RectInfo = {
     left: number;
     right: number;
     width: number;
+    bottom: number;
 };
 export declare class AnchorRectCache {
     private anchorRectMap;

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

@@ -15,5 +15,5 @@ import { type AnchorRectCache } from '../utils/anchor-utils';
  */
 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, isSameLayout?: boolean) => Decoration;
-export declare const createLayoutDropTargetDecoration: (pos: number, props: Omit<DropTargetLayoutProps, 'getPos'>) => Decoration;
+export declare const createLayoutDropTargetDecoration: (pos: number, props: Omit<DropTargetLayoutProps, 'getPos'>, anchorRectCache?: AnchorRectCache) => 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/consts.d.ts

@@ -7,7 +7,7 @@ export declare const DRAG_HANDLE_NARROW_GAP = 4;
 export declare const DRAG_HANDLE_MAX_GAP = 12;
 export declare const DRAG_HANDLE_MAX_WIDTH_PLUS_GAP: number;
 export declare const DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT: number;
-export declare const dragHandleGap: (nodeType: string, parentNodeType?: string) => 4 | 8 | 12;
+export declare const dragHandleGap: (nodeType: string, parentNodeType?: string) => number;
 export declare const getNestedNodeLeftPaddingMargin: (nodeType?: string) => "8px" | "16px" | "20px" | "24px" | "28px" | "40px";
 export declare const topPositionAdjustment: (nodeType: string) => number;
 export declare const dropTargetMarginMap: {

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

@@ -3,10 +3,13 @@ import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { BlockControlsPlugin } from '../types';
+import { type AnchorRectCache } from '../utils/anchor-utils';
 export type DropTargetLayoutProps = {
     api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
     getPos: () => number | undefined;
     parent: PMNode;
     formatMessage?: IntlShape['formatMessage'];
 };
-export declare const DropTargetLayout: (props: DropTargetLayoutProps) => jsx.JSX.Element | null;
+export declare const DropTargetLayout: (props: DropTargetLayoutProps & {
+    anchorRectCache?: AnchorRectCache | undefined;
+}) => jsx.JSX.Element | null;

package/dist/types-ts4.5/utils/advanced-layouts-flags.d.ts

@@ -1,2 +1,3 @@
 export declare const isPreRelease1: () => boolean;
 export declare const isPreRelease2: () => boolean;
+export declare const showResponsiveLayout: () => boolean;

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

@@ -6,6 +6,7 @@ type RectInfo = {
     left: number;
     right: number;
     width: number;
+    bottom: number;
 };
 export declare class AnchorRectCache {
     private anchorRectMap;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.13.16",
+	"version": "2.13.18",
 	"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.23.0",
+		"@atlaskit/editor-common": "^94.24.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.18.0",
+		"@atlaskit/tmp-editor-statsig": "^2.19.0",
 		"@atlaskit/tokens": "^2.2.0",
 		"@atlaskit/tooltip": "^18.9.0",
 		"@babel/runtime": "^7.0.0",
@@ -159,6 +159,9 @@
 		},
 		"platform_editor_advanced_layouts_redraw_on_drag": {
 			"type": "boolean"
+		},
+		"platform_editor_advanced_layouts_breakout_resizing": {
+			"type": "boolean"
 		}
 	}
 }