@atlaskit/editor-plugin-block-controls 2.10.1 → 2.12.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.12.0
+
+### Minor Changes
+
+- [#157523](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/157523)
+  [`0ae18423289a5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0ae18423289a5) -
+  ED-25289 implement drop zone in between columns
+
+## 2.11.0
+
+### Minor Changes
+
+- [#156360](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156360)
+  [`482dbb03dbf68`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/482dbb03dbf68) -
+  [ux] Ignore embedCard nodes that have wrapped layout when creating node decs
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.10.1
 
 ### Patch Changes

package/dist/cjs/pm-plugins/decorations-anchor.js

@@ -23,13 +23,11 @@ var shouldDescendIntoNode = exports.shouldDescendIntoNode = function shouldDesce
   return !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
 };
 var shouldIgnoreNode = function shouldIgnoreNode(node) {
-  // TODO use isWrappedMedia when clean up the featue flag
-  if ('mediaSingle' === node.type.name && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1')) {
-    if (['wrap-right', 'wrap-left'].includes(node.attrs.layout)) {
-      return true;
-    }
-  }
-  return IGNORE_NODES.includes(node.type.name);
+  var isEmbedCard = 'embedCard' === node.type.name && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3');
+
+  // TODO use isWrappedMedia when clean up the feature flag
+  var isMediaSingle = 'mediaSingle' === node.type.name && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1');
+  return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : IGNORE_NODES.includes(node.type.name);
 };
 
 /**
@@ -87,7 +85,7 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
       anchorName = (_anchorName2 = anchorName) !== null && _anchorName2 !== void 0 ? _anchorName2 : "--node-anchor-".concat(node.type.name, "-").concat(index);
     }
     decs.push(_view.Decoration.node(pos, pos + node.nodeSize, (_Decoration$node = {
-      style: "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '', "; position: relative; z-index: 1;")
+      style: "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '', " ").concat((0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? '' : 'position: relative; z-index: 1;')
     }, (0, _defineProperty2.default)(_Decoration$node, 'data-drag-handler-anchor-name', anchorName), (0, _defineProperty2.default)(_Decoration$node, 'data-drag-handler-node-type', node.type.name), (0, _defineProperty2.default)(_Decoration$node, 'data-drag-handler-anchor-depth', "".concat(depth)), _Decoration$node), {
       type: _decorationsCommon.TYPE_NODE_DEC,
       anchorName: anchorName,

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.findDropTargetDecs = exports.dropTargetDecorations = exports.createDropTargetDecoration = void 0;
+exports.findDropTargetDecs = exports.dropTargetDecorations = exports.createLayoutDropTargetDecoration = exports.createDropTargetDecoration = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
@@ -12,9 +12,12 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
-var _consts = require("../ui/consts");
+var _consts = require("../consts");
+var _consts2 = require("../ui/consts");
 var _dropTarget = require("../ui/drop-target");
+var _dropTargetLayout = require("../ui/drop-target-layout");
 var _dropTargetV = require("../ui/drop-target-v2");
+var _advancedLayoutsFlags = require("../utils/advanced-layouts-flags");
 var _dragTargetDebug = require("../utils/drag-target-debug");
 var _validation = require("../utils/validation");
 var _decorationsCommon = require("./decorations-common");
@@ -31,13 +34,13 @@ var shouldDescend = function shouldDescend(node) {
 };
 var getNodeMargins = function getNodeMargins(node) {
   if (!node) {
-    return _consts.nodeMargins['default'];
+    return _consts2.nodeMargins['default'];
   }
   var nodeTypeName = node.type.name;
   if (nodeTypeName === 'heading') {
-    return _consts.nodeMargins["heading".concat(node.attrs.level)] || _consts.nodeMargins['default'];
+    return _consts2.nodeMargins["heading".concat(node.attrs.level)] || _consts2.nodeMargins['default'];
   }
-  return _consts.nodeMargins[nodeTypeName] || _consts.nodeMargins['default'];
+  return _consts2.nodeMargins[nodeTypeName] || _consts2.nodeMargins['default'];
 };
 var shouldCollapseMargin = function shouldCollapseMargin(prevNode, nextNode) {
   if (((prevNode === null || prevNode === void 0 ? void 0 : prevNode.type.name) === 'mediaSingle' || (nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name) === 'mediaSingle') && (prevNode === null || prevNode === void 0 ? void 0 : prevNode.type.name) !== (nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name)) {
@@ -112,6 +115,19 @@ var createDropTargetDecoration = exports.createDropTargetDecoration = function c
     side: side
   });
 };
+var createLayoutDropTargetDecoration = exports.createLayoutDropTargetDecoration = function createLayoutDropTargetDecoration(pos, props) {
+  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
+    })), element);
+    return element;
+  }, {
+    type: _decorationsCommon.TYPE_DROP_TARGET_DEC
+  });
+};
 var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetDecorations(newState, api, formatMessage, activeNode, anchorRectCache, from, to) {
   (0, _decorationsCommon.unmountDecorations)('data-blocks-drop-target-container');
   var decs = [];
@@ -135,12 +151,23 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
     popNodeStack(depth);
     prevNodeStack.push(node);
   };
+  var isAdvancedLayoutsPreRelease2 = (0, _advancedLayoutsFlags.isPreRelease2)();
   newState.doc.nodesBetween(docFrom, docTo, function (node, pos, parent, index) {
     var depth = 0;
     // drop target deco at the end position
     var endPos;
     if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
       depth = newState.doc.resolve(pos).depth;
+      if (isAdvancedLayoutsPreRelease2) {
+        if (node.type.name === 'layoutColumn' && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' && (parent === null || parent === void 0 ? void 0 : parent.firstChild) !== node &&
+        // Not the first node
+        (parent === null || parent === void 0 ? void 0 : parent.childCount) < _consts.MAX_LAYOUT_COLUMN_SUPPORTED) {
+          decs.push(createLayoutDropTargetDecoration(pos, {
+            api: api,
+            formatMessage: formatMessage
+          }));
+        }
+      }
       if (node.isInline || !parent || DISABLE_CHILD_DROP_TARGET.includes(parent.type.name)) {
         if ((0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2')) {
           pushNodeStack(node, depth);

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

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropTargetLayout = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+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 _dragTargetDebug = require("../utils/drag-target-debug");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+
+// 8px gap + 16px on left and right
+var DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH = 40;
+var dropTargetLayoutStyle = (0, _react2.css)({
+  height: '100%',
+  width: "".concat(DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH, "px"),
+  transform: 'translateX(-50%)',
+  zIndex: 120,
+  position: 'relative',
+  display: 'flex',
+  justifyContent: 'center'
+});
+var dropTargetLayoutHintStyle = (0, _react2.css)({
+  height: '100%',
+  position: 'relative',
+  borderRight: "1px dashed ".concat("var(--ds-background-selected-hovered, ".concat(_colors.B75, ")")),
+  width: 0
+});
+var DropTargetLayout = exports.DropTargetLayout = function DropTargetLayout(props) {
+  var _api$blockControls2;
+  var api = props.api;
+  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 onDrop = (0, _react.useCallback)(function () {
+    var _api$blockControls;
+    var _ref = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
+      activeNode = _ref.activeNode;
+    if (!activeNode) {
+      return;
+    }
+  }, [api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.sharedState]);
+  (0, _react.useEffect)(function () {
+    if (ref.current) {
+      return (0, _adapter.dropTargetForElements)({
+        element: ref.current,
+        onDragEnter: function onDragEnter() {
+          setIsDraggedOver(true);
+        },
+        onDragLeave: function onDragLeave() {
+          setIsDraggedOver(false);
+        },
+        onDrop: onDrop
+      });
+    }
+  }, [onDrop]);
+  return (0, _react2.jsx)("div", {
+    ref: ref,
+    css: dropTargetLayoutStyle,
+    "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")
+  }) : (0, _react2.jsx)("div", {
+    css: dropTargetLayoutHintStyle
+  }));
+};

package/dist/cjs/ui/global-styles.js

@@ -17,94 +17,100 @@ var _globalStyles = require("./empty-block-experiment/global-styles");
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-var extendedHoverZone = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-    display: 'none !important'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '&& [data-drag-handler-anchor-name]::after': {
-      content: '""',
-      position: 'absolute',
-      top: 0,
-      left: '-100%',
-      width: '100%',
-      height: '100%',
-      background: 'transparent',
-      cursor: 'default',
-      zIndex: -1
+var extendedHoverZone = function extendedHoverZone() {
+  return (0, _react.css)({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      display: 'none !important'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ProseMirror': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '&& [data-drag-handler-anchor-name]::after': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        left: '-100%',
+        width: '100%',
+        height: '100%',
+        background: 'transparent',
+        cursor: 'default',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+        zIndex: (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? 1 : -1
+      }
+    },
+    // TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'hr[data-drag-handler-anchor-name]': {
+      overflow: 'visible'
+    },
+    //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-blocks-drag-handle-container="true"] + *::after': {
+      display: 'none'
     }
-  },
-  // TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  'hr[data-drag-handler-anchor-name]': {
-    overflow: 'visible'
-  },
-  //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-blocks-drag-handle-container="true"] + *::after': {
-    display: 'none'
-  }
-});
-var extendedHoverZoneNested = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-    display: 'none !important'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '&& [data-drag-handler-anchor-name]::after': {
-      content: '""',
-      position: 'absolute',
-      top: 0,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      left: "-".concat(_consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      width: "".concat(_consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
-      height: '100%',
-      cursor: 'default',
-      zIndex: 1
+  });
+};
+var extendedHoverZoneNested = function extendedHoverZoneNested() {
+  return (0, _react.css)({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      display: 'none !important'
     },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '&& [data-drag-handler-anchor-depth="0"][data-drag-handler-anchor-name]::after': {
-      content: '""',
-      position: 'absolute',
-      top: 0,
-      left: '-100%',
-      width: '100%',
-      height: '100%',
-      cursor: 'default',
-      zIndex: -1
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ProseMirror': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '&& [data-drag-handler-anchor-name]::after': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+        left: "-".concat(_consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+        width: "".concat(_consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
+        height: '100%',
+        cursor: 'default',
+        zIndex: 1
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '&& [data-drag-handler-anchor-depth="0"][data-drag-handler-anchor-name]::after': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        left: '-100%',
+        width: '100%',
+        height: '100%',
+        cursor: 'default',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+        zIndex: (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? 1 : -1
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '&& :is(.pm-table-cell-content-wrap, .pm-table-header-content-wrap) > [data-drag-handler-anchor-name]::after': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+        left: "-".concat((0, _experiments.editorExperiment)('table-nested-dnd', true) ? _consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+        width: "".concat((0, _experiments.editorExperiment)('table-nested-dnd', true) ? _consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
+        height: '100%',
+        cursor: 'default',
+        zIndex: 1
+      }
     },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '&& :is(.pm-table-cell-content-wrap, .pm-table-header-content-wrap) > [data-drag-handler-anchor-name]::after': {
-      content: '""',
-      position: 'absolute',
-      top: 0,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      left: "-".concat((0, _experiments.editorExperiment)('table-nested-dnd', true) ? _consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      width: "".concat((0, _experiments.editorExperiment)('table-nested-dnd', true) ? _consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
-      height: '100%',
-      cursor: 'default',
-      zIndex: 1
+    // TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'hr[data-drag-handler-anchor-name]': {
+      overflow: 'visible'
+    },
+    //Hide pseudo element at top depth level. Leave for nested depths to prevent mouseover loop.
+    //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-blocks-drag-handle-container="true"] + [data-drag-handler-anchor-depth="0"]::after': {
+      display: 'none'
     }
-  },
-  // TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  'hr[data-drag-handler-anchor-name]': {
-    overflow: 'visible'
-  },
-  //Hide pseudo element at top depth level. Leave for nested depths to prevent mouseover loop.
-  //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-blocks-drag-handle-container="true"] + [data-drag-handler-anchor-depth="0"]::after': {
-    display: 'none'
-  }
-});
+  });
+};
 var paragraphWithTrailingBreakAsOnlyChild = '+ :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
 var indentatedParagraphWithTrailingBreakAsOnlyChild = '+ div.fabric-editor-indentation-mark > :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
 var paragraphWithPlaceholder = '+ p > .placeholder-decoration';
@@ -157,10 +163,19 @@ var withFormatInLayoutStyleFix = (0, _react.css)((0, _defineProperty2.default)({
 var getTextNodeStyle = function getTextNodeStyle() {
   return (0, _platformFeatureFlags.fg)('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
 };
+var withRelativePosStyle = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&& [data-drag-handler-anchor-name]': {
+      position: 'relative'
+    }
+  }
+});
 var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
   return (0, _react.jsx)(_react.Global, {
-    styles: [globalStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested : extendedHoverZone, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, (0, _experiments.editorExperiment)('platform_editor_empty_line_prompt', true, {
+    styles: [globalStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, (0, _experiments.editorExperiment)('platform_editor_empty_line_prompt', true, {
       exposure: false
-    }) ? _globalStyles.emptyBlockExperimentGlobalStyles : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined]
+    }) ? _globalStyles.emptyBlockExperimentGlobalStyles : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? withRelativePosStyle : undefined]
   });
 };

package/dist/es2019/pm-plugins/decorations-anchor.js

@@ -15,13 +15,11 @@ export const shouldDescendIntoNode = node => {
   return !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
 };
 const shouldIgnoreNode = node => {
-  // TODO use isWrappedMedia when clean up the featue flag
-  if ('mediaSingle' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_1')) {
-    if (['wrap-right', 'wrap-left'].includes(node.attrs.layout)) {
-      return true;
-    }
-  }
-  return IGNORE_NODES.includes(node.type.name);
+  const isEmbedCard = 'embedCard' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_3');
+
+  // TODO use isWrappedMedia when clean up the feature flag
+  const isMediaSingle = 'mediaSingle' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_1');
+  return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : IGNORE_NODES.includes(node.type.name);
 };
 
 /**
@@ -76,7 +74,7 @@ export const nodeDecorations = (newState, from, to) => {
       anchorName = (_anchorName2 = anchorName) !== null && _anchorName2 !== void 0 ? _anchorName2 : `--node-anchor-${node.type.name}-${index}`;
     }
     decs.push(Decoration.node(pos, pos + node.nodeSize, {
-      style: `anchor-name: ${anchorName}; ${pos === 0 ? 'margin-top: 0px;' : ''}; position: relative; z-index: 1;`,
+      style: `anchor-name: ${anchorName}; ${pos === 0 ? 'margin-top: 0px;' : ''} ${fg('platform_editor_element_dnd_nested_fix_patch_3') ? '' : 'position: relative; z-index: 1;'}`,
       ['data-drag-handler-anchor-name']: anchorName,
       ['data-drag-handler-node-type']: node.type.name,
       ['data-drag-handler-anchor-depth']: `${depth}`

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

@@ -4,9 +4,12 @@ import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { MAX_LAYOUT_COLUMN_SUPPORTED } from '../consts';
 import { nodeMargins } from '../ui/consts';
 import { DropTarget } from '../ui/drop-target';
+import { DropTargetLayout } from '../ui/drop-target-layout';
 import { DropTargetV2, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET } from '../ui/drop-target-v2';
+import { isPreRelease2 } from '../utils/advanced-layouts-flags';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 import { canMoveNodeToIndex } from '../utils/validation';
 import { getNestedDepth, TYPE_DROP_TARGET_DEC, unmountDecorations } from './decorations-common';
@@ -103,6 +106,20 @@ export const createDropTargetDecoration = (pos, props, side, anchorRectCache) =>
     side
   });
 };
+export const createLayoutDropTargetDecoration = (pos, props) => {
+  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
+    }), element);
+    return element;
+  }, {
+    type: TYPE_DROP_TARGET_DEC
+  });
+};
 export const dropTargetDecorations = (newState, api, formatMessage, activeNode, anchorRectCache, from, to) => {
   unmountDecorations('data-blocks-drop-target-container');
   const decs = [];
@@ -126,12 +143,23 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode,
     popNodeStack(depth);
     prevNodeStack.push(node);
   };
+  const isAdvancedLayoutsPreRelease2 = isPreRelease2();
   newState.doc.nodesBetween(docFrom, docTo, (node, pos, parent, index) => {
     let depth = 0;
     // drop target deco at the end position
     let endPos;
     if (editorExperiment('nested-dnd', true)) {
       depth = newState.doc.resolve(pos).depth;
+      if (isAdvancedLayoutsPreRelease2) {
+        if (node.type.name === 'layoutColumn' && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' && (parent === null || parent === void 0 ? void 0 : parent.firstChild) !== node &&
+        // Not the first node
+        (parent === null || parent === void 0 ? void 0 : parent.childCount) < MAX_LAYOUT_COLUMN_SUPPORTED) {
+          decs.push(createLayoutDropTargetDecoration(pos, {
+            api,
+            formatMessage
+          }));
+        }
+      }
       if (node.isInline || !parent || DISABLE_CHILD_DROP_TARGET.includes(parent.type.name)) {
         if (fg('platform_editor_drag_and_drop_target_v2')) {
           pushNodeStack(node, depth);

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

@@ -0,0 +1,71 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css, jsx } from '@emotion/react';
+import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { B75 } from '@atlaskit/theme/colors';
+import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
+
+// 8px gap + 16px on left and right
+const DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH = 40;
+const dropTargetLayoutStyle = css({
+  height: '100%',
+  width: `${DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH}px`,
+  transform: 'translateX(-50%)',
+  zIndex: 120,
+  position: 'relative',
+  display: 'flex',
+  justifyContent: 'center'
+});
+const dropTargetLayoutHintStyle = css({
+  height: '100%',
+  position: 'relative',
+  borderRight: `1px dashed ${`var(--ds-background-selected-hovered, ${B75})`}`,
+  width: 0
+});
+export const DropTargetLayout = props => {
+  var _api$blockControls2;
+  const {
+    api
+  } = props;
+  const ref = useRef(null);
+  const [isDraggedOver, setIsDraggedOver] = useState(false);
+  const onDrop = useCallback(() => {
+    var _api$blockControls;
+    const {
+      activeNode
+    } = (api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {};
+    if (!activeNode) {
+      return;
+    }
+  }, [api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.sharedState]);
+  useEffect(() => {
+    if (ref.current) {
+      return dropTargetForElements({
+        element: ref.current,
+        onDragEnter: () => {
+          setIsDraggedOver(true);
+        },
+        onDragLeave: () => {
+          setIsDraggedOver(false);
+        },
+        onDrop
+      });
+    }
+  }, [onDrop]);
+  return jsx("div", {
+    ref: ref,
+    css: dropTargetLayoutStyle,
+    "data-testid": "block-ctrl-drop-indicator"
+  }, isDraggedOver || isBlocksDragTargetDebug() ? jsx(DropIndicator, {
+    edge: "right",
+    gap: `-${DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH}px`
+  }) : jsx("div", {
+    css: dropTargetLayoutHintStyle
+  }));
+};

package/dist/es2019/ui/global-styles.js

@@ -8,7 +8,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
 import { emptyBlockExperimentGlobalStyles } from './empty-block-experiment/global-styles';
-const extendedHoverZone = css({
+const extendedHoverZone = () => css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
@@ -26,7 +26,8 @@ const extendedHoverZone = css({
       height: '100%',
       background: 'transparent',
       cursor: 'default',
-      zIndex: -1
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+      zIndex: fg('platform_editor_element_dnd_nested_fix_patch_3') ? 1 : -1
     }
   },
   // TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
@@ -39,7 +40,7 @@ const extendedHoverZone = css({
     display: 'none'
   }
 });
-const extendedHoverZoneNested = css({
+const extendedHoverZoneNested = () => css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
@@ -69,7 +70,8 @@ const extendedHoverZoneNested = css({
       width: '100%',
       height: '100%',
       cursor: 'default',
-      zIndex: -1
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+      zIndex: fg('platform_editor_element_dnd_nested_fix_patch_3') ? 1 : -1
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
     '&& :is(.pm-table-cell-content-wrap, .pm-table-header-content-wrap) > [data-drag-handler-anchor-name]::after': {
@@ -166,10 +168,19 @@ const withFormatInLayoutStyleFix = css({
 const getTextNodeStyle = () => {
   return fg('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
 };
+const withRelativePosStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&& [data-drag-handler-anchor-name]': {
+      position: 'relative'
+    }
+  }
+});
 export const GlobalStylesWrapper = () => {
   return jsx(Global, {
-    styles: [globalStyles, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested : extendedHoverZone, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, editorExperiment('platform_editor_empty_line_prompt', true, {
+    styles: [globalStyles, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, editorExperiment('platform_editor_empty_line_prompt', true, {
       exposure: false
-    }) ? emptyBlockExperimentGlobalStyles : undefined, fg('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined]
+    }) ? emptyBlockExperimentGlobalStyles : undefined, fg('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_3') ? withRelativePosStyle : undefined]
   });
 };

package/dist/esm/pm-plugins/decorations-anchor.js

@@ -16,13 +16,11 @@ export var shouldDescendIntoNode = function shouldDescendIntoNode(node) {
   return !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
 };
 var shouldIgnoreNode = function shouldIgnoreNode(node) {
-  // TODO use isWrappedMedia when clean up the featue flag
-  if ('mediaSingle' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_1')) {
-    if (['wrap-right', 'wrap-left'].includes(node.attrs.layout)) {
-      return true;
-    }
-  }
-  return IGNORE_NODES.includes(node.type.name);
+  var isEmbedCard = 'embedCard' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_3');
+
+  // TODO use isWrappedMedia when clean up the feature flag
+  var isMediaSingle = 'mediaSingle' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_1');
+  return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : IGNORE_NODES.includes(node.type.name);
 };
 
 /**
@@ -80,7 +78,7 @@ export var nodeDecorations = function nodeDecorations(newState, from, to) {
       anchorName = (_anchorName2 = anchorName) !== null && _anchorName2 !== void 0 ? _anchorName2 : "--node-anchor-".concat(node.type.name, "-").concat(index);
     }
     decs.push(Decoration.node(pos, pos + node.nodeSize, (_Decoration$node = {
-      style: "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '', "; position: relative; z-index: 1;")
+      style: "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '', " ").concat(fg('platform_editor_element_dnd_nested_fix_patch_3') ? '' : 'position: relative; z-index: 1;')
     }, _defineProperty(_Decoration$node, 'data-drag-handler-anchor-name', anchorName), _defineProperty(_Decoration$node, 'data-drag-handler-node-type', node.type.name), _defineProperty(_Decoration$node, 'data-drag-handler-anchor-depth', "".concat(depth)), _Decoration$node), {
       type: TYPE_NODE_DEC,
       anchorName: anchorName,

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

@@ -7,9 +7,12 @@ import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { MAX_LAYOUT_COLUMN_SUPPORTED } from '../consts';
 import { nodeMargins } from '../ui/consts';
 import { DropTarget } from '../ui/drop-target';
+import { DropTargetLayout } from '../ui/drop-target-layout';
 import { DropTargetV2, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET } from '../ui/drop-target-v2';
+import { isPreRelease2 } from '../utils/advanced-layouts-flags';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 import { canMoveNodeToIndex } from '../utils/validation';
 import { getNestedDepth, TYPE_DROP_TARGET_DEC, unmountDecorations } from './decorations-common';
@@ -105,6 +108,19 @@ export var createDropTargetDecoration = function createDropTargetDecoration(pos,
     side: side
   });
 };
+export var createLayoutDropTargetDecoration = function createLayoutDropTargetDecoration(pos, props) {
+  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
+    })), element);
+    return element;
+  }, {
+    type: TYPE_DROP_TARGET_DEC
+  });
+};
 export var dropTargetDecorations = function dropTargetDecorations(newState, api, formatMessage, activeNode, anchorRectCache, from, to) {
   unmountDecorations('data-blocks-drop-target-container');
   var decs = [];
@@ -128,12 +144,23 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
     popNodeStack(depth);
     prevNodeStack.push(node);
   };
+  var isAdvancedLayoutsPreRelease2 = isPreRelease2();
   newState.doc.nodesBetween(docFrom, docTo, function (node, pos, parent, index) {
     var depth = 0;
     // drop target deco at the end position
     var endPos;
     if (editorExperiment('nested-dnd', true)) {
       depth = newState.doc.resolve(pos).depth;
+      if (isAdvancedLayoutsPreRelease2) {
+        if (node.type.name === 'layoutColumn' && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' && (parent === null || parent === void 0 ? void 0 : parent.firstChild) !== node &&
+        // Not the first node
+        (parent === null || parent === void 0 ? void 0 : parent.childCount) < MAX_LAYOUT_COLUMN_SUPPORTED) {
+          decs.push(createLayoutDropTargetDecoration(pos, {
+            api: api,
+            formatMessage: formatMessage
+          }));
+        }
+      }
       if (node.isInline || !parent || DISABLE_CHILD_DROP_TARGET.includes(parent.type.name)) {
         if (fg('platform_editor_drag_and_drop_target_v2')) {
           pushNodeStack(node, depth);

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

@@ -0,0 +1,72 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css, jsx } from '@emotion/react';
+import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { B75 } from '@atlaskit/theme/colors';
+import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
+
+// 8px gap + 16px on left and right
+var DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH = 40;
+var dropTargetLayoutStyle = css({
+  height: '100%',
+  width: "".concat(DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH, "px"),
+  transform: 'translateX(-50%)',
+  zIndex: 120,
+  position: 'relative',
+  display: 'flex',
+  justifyContent: 'center'
+});
+var dropTargetLayoutHintStyle = css({
+  height: '100%',
+  position: 'relative',
+  borderRight: "1px dashed ".concat("var(--ds-background-selected-hovered, ".concat(B75, ")")),
+  width: 0
+});
+export var DropTargetLayout = function DropTargetLayout(props) {
+  var _api$blockControls2;
+  var api = props.api;
+  var ref = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDraggedOver = _useState2[0],
+    setIsDraggedOver = _useState2[1];
+  var onDrop = useCallback(function () {
+    var _api$blockControls;
+    var _ref = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
+      activeNode = _ref.activeNode;
+    if (!activeNode) {
+      return;
+    }
+  }, [api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.sharedState]);
+  useEffect(function () {
+    if (ref.current) {
+      return dropTargetForElements({
+        element: ref.current,
+        onDragEnter: function onDragEnter() {
+          setIsDraggedOver(true);
+        },
+        onDragLeave: function onDragLeave() {
+          setIsDraggedOver(false);
+        },
+        onDrop: onDrop
+      });
+    }
+  }, [onDrop]);
+  return jsx("div", {
+    ref: ref,
+    css: dropTargetLayoutStyle,
+    "data-testid": "block-ctrl-drop-indicator"
+  }, isDraggedOver || isBlocksDragTargetDebug() ? jsx(DropIndicator, {
+    edge: "right",
+    gap: "-".concat(DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH, "px")
+  }) : jsx("div", {
+    css: dropTargetLayoutHintStyle
+  }));
+};

package/dist/esm/ui/global-styles.js

@@ -9,94 +9,100 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
 import { emptyBlockExperimentGlobalStyles } from './empty-block-experiment/global-styles';
-var extendedHoverZone = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-    display: 'none !important'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '&& [data-drag-handler-anchor-name]::after': {
-      content: '""',
-      position: 'absolute',
-      top: 0,
-      left: '-100%',
-      width: '100%',
-      height: '100%',
-      background: 'transparent',
-      cursor: 'default',
-      zIndex: -1
+var extendedHoverZone = function extendedHoverZone() {
+  return css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      display: 'none !important'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ProseMirror': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '&& [data-drag-handler-anchor-name]::after': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        left: '-100%',
+        width: '100%',
+        height: '100%',
+        background: 'transparent',
+        cursor: 'default',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+        zIndex: fg('platform_editor_element_dnd_nested_fix_patch_3') ? 1 : -1
+      }
+    },
+    // TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'hr[data-drag-handler-anchor-name]': {
+      overflow: 'visible'
+    },
+    //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-blocks-drag-handle-container="true"] + *::after': {
+      display: 'none'
     }
-  },
-  // TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  'hr[data-drag-handler-anchor-name]': {
-    overflow: 'visible'
-  },
-  //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-blocks-drag-handle-container="true"] + *::after': {
-    display: 'none'
-  }
-});
-var extendedHoverZoneNested = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-    display: 'none !important'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '&& [data-drag-handler-anchor-name]::after': {
-      content: '""',
-      position: 'absolute',
-      top: 0,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      left: "-".concat(DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      width: "".concat(DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
-      height: '100%',
-      cursor: 'default',
-      zIndex: 1
+  });
+};
+var extendedHoverZoneNested = function extendedHoverZoneNested() {
+  return css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      display: 'none !important'
     },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '&& [data-drag-handler-anchor-depth="0"][data-drag-handler-anchor-name]::after': {
-      content: '""',
-      position: 'absolute',
-      top: 0,
-      left: '-100%',
-      width: '100%',
-      height: '100%',
-      cursor: 'default',
-      zIndex: -1
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ProseMirror': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '&& [data-drag-handler-anchor-name]::after': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+        left: "-".concat(DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+        width: "".concat(DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
+        height: '100%',
+        cursor: 'default',
+        zIndex: 1
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '&& [data-drag-handler-anchor-depth="0"][data-drag-handler-anchor-name]::after': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        left: '-100%',
+        width: '100%',
+        height: '100%',
+        cursor: 'default',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+        zIndex: fg('platform_editor_element_dnd_nested_fix_patch_3') ? 1 : -1
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '&& :is(.pm-table-cell-content-wrap, .pm-table-header-content-wrap) > [data-drag-handler-anchor-name]::after': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+        left: "-".concat(editorExperiment('table-nested-dnd', true) ? DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+        width: "".concat(editorExperiment('table-nested-dnd', true) ? DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
+        height: '100%',
+        cursor: 'default',
+        zIndex: 1
+      }
     },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '&& :is(.pm-table-cell-content-wrap, .pm-table-header-content-wrap) > [data-drag-handler-anchor-name]::after': {
-      content: '""',
-      position: 'absolute',
-      top: 0,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      left: "-".concat(editorExperiment('table-nested-dnd', true) ? DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      width: "".concat(editorExperiment('table-nested-dnd', true) ? DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
-      height: '100%',
-      cursor: 'default',
-      zIndex: 1
+    // TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'hr[data-drag-handler-anchor-name]': {
+      overflow: 'visible'
+    },
+    //Hide pseudo element at top depth level. Leave for nested depths to prevent mouseover loop.
+    //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-blocks-drag-handle-container="true"] + [data-drag-handler-anchor-depth="0"]::after': {
+      display: 'none'
     }
-  },
-  // TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  'hr[data-drag-handler-anchor-name]': {
-    overflow: 'visible'
-  },
-  //Hide pseudo element at top depth level. Leave for nested depths to prevent mouseover loop.
-  //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-blocks-drag-handle-container="true"] + [data-drag-handler-anchor-depth="0"]::after': {
-    display: 'none'
-  }
-});
+  });
+};
 var paragraphWithTrailingBreakAsOnlyChild = '+ :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
 var indentatedParagraphWithTrailingBreakAsOnlyChild = '+ div.fabric-editor-indentation-mark > :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
 var paragraphWithPlaceholder = '+ p > .placeholder-decoration';
@@ -149,10 +155,19 @@ var withFormatInLayoutStyleFix = css(_defineProperty({}, "".concat(withFormatInL
 var getTextNodeStyle = function getTextNodeStyle() {
   return fg('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
 };
+var withRelativePosStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&& [data-drag-handler-anchor-name]': {
+      position: 'relative'
+    }
+  }
+});
 export var GlobalStylesWrapper = function GlobalStylesWrapper() {
   return jsx(Global, {
-    styles: [globalStyles, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested : extendedHoverZone, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, editorExperiment('platform_editor_empty_line_prompt', true, {
+    styles: [globalStyles, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, editorExperiment('platform_editor_empty_line_prompt', true, {
       exposure: false
-    }) ? emptyBlockExperimentGlobalStyles : undefined, fg('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined]
+    }) ? emptyBlockExperimentGlobalStyles : undefined, fg('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_3') ? withRelativePosStyle : undefined]
   });
 };

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

@@ -4,6 +4,7 @@ import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { ActiveNode, BlockControlsPlugin } from '../types';
 import { type DropTargetProps } from '../ui/drop-target';
+import { type DropTargetLayoutProps } from '../ui/drop-target-layout';
 import { type AnchorRectCache } from '../utils/anchor-utils';
 /**
  * Find drop target decorations in the pos range between from and to
@@ -14,4 +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) => Decoration;
+export declare const createLayoutDropTargetDecoration: (pos: number, props: Omit<DropTargetLayoutProps, 'getPos'>) => Decoration;
 export declare const dropTargetDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNode?: ActiveNode, anchorRectCache?: AnchorRectCache, from?: number, to?: number) => Decoration[];

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

@@ -0,0 +1,10 @@
+import { jsx } from '@emotion/react';
+import { type IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockControlsPlugin } from '../types';
+export type DropTargetLayoutProps = {
+    api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
+    getPos: () => number | undefined;
+    formatMessage?: IntlShape['formatMessage'];
+};
+export declare const DropTargetLayout: (props: DropTargetLayoutProps) => jsx.JSX.Element;

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

@@ -4,6 +4,7 @@ import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { ActiveNode, BlockControlsPlugin } from '../types';
 import { type DropTargetProps } from '../ui/drop-target';
+import { type DropTargetLayoutProps } from '../ui/drop-target-layout';
 import { type AnchorRectCache } from '../utils/anchor-utils';
 /**
  * Find drop target decorations in the pos range between from and to
@@ -14,4 +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) => Decoration;
+export declare const createLayoutDropTargetDecoration: (pos: number, props: Omit<DropTargetLayoutProps, 'getPos'>) => Decoration;
 export declare const dropTargetDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNode?: ActiveNode, anchorRectCache?: AnchorRectCache, from?: number, to?: number) => Decoration[];

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

@@ -0,0 +1,10 @@
+import { jsx } from '@emotion/react';
+import { type IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockControlsPlugin } from '../types';
+export type DropTargetLayoutProps = {
+    api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
+    getPos: () => number | undefined;
+    formatMessage?: IntlShape['formatMessage'];
+};
+export declare const DropTargetLayout: (props: DropTargetLayoutProps) => jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.10.1",
+	"version": "2.12.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,7 +31,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^42.3.1",
-		"@atlaskit/editor-common": "^94.3.0",
+		"@atlaskit/editor-common": "^94.6.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": "^12.2.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.9.0",
+		"@atlaskit/tmp-editor-statsig": "^2.10.0",
 		"@atlaskit/tokens": "^2.0.0",
 		"@atlaskit/tooltip": "^18.8.0",
 		"@babel/runtime": "^7.0.0",