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

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.12.1
+
+### Patch Changes
+
+- [#157852](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/157852)
+  [`5d80f01f056a1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5d80f01f056a1) -
+  [ux] ED-25473 Remove inline margin top for top node
+
+## 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

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

@@ -85,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;' : '', " ").concat((0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? '' : 'position: relative; z-index: 1;')
+      style: "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 && !(0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? '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

@@ -134,11 +134,29 @@ var withFormatInLayoutStyleFixSelectors = ["".concat(dragHandleContainer, ":firs
 var withInlineNodeStyleWithChromeFix = (0, _react.css)((0, _defineProperty2.default)({}, withInlineNodeStyleWithChromeFixSelectors, {
   transform: 'scale(0)'
 }));
-var globalStyles = (0, _react.css)({
+var globalStyles = function globalStyles() {
+  return (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? (0, _react.css)({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '.ProseMirror-widget:first-child + *:not([data-panel-type], .code-block, [data-node-type="nestedExpand"], [data-layout-section="true"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      marginTop: '0 !important'
+    }
+  }) : (0, _react.css)({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '.ProseMirror-widget:first-child + *:not([data-panel-type], .code-block, [data-node-type="nestedExpand"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      marginTop: '0 !important'
+    }
+  });
+};
+var topLevelNodeMarginStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '.ProseMirror-widget:first-child + *:not([data-panel-type], .code-block, [data-node-type="nestedExpand"])': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-    marginTop: '0 !important'
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> .ProseMirror-widget:first-child + .ProseMirror-gapcursor + *:not([data-layout-section="true"]), > .ProseMirror-widget:first-child + *:not([data-layout-section="true"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      marginTop: '0 !important'
+    }
   }
 });
 var withDividerInPanelStyleFix = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(dividerBodiedInCustomPanelWithNoIconSelector), {
@@ -174,8 +192,8 @@ var withRelativePosStyle = (0, _react.css)({
 });
 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, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? withRelativePosStyle : 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, topLevelNodeMarginStyles] : undefined]
   });
 };

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

@@ -74,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;' : ''} ${fg('platform_editor_element_dnd_nested_fix_patch_3') ? '' : 'position: relative; z-index: 1;'}`,
+      style: `anchor-name: ${anchorName}; ${pos === 0 && !fg('platform_editor_element_dnd_nested_fix_patch_3') ? '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

@@ -127,13 +127,29 @@ const withInlineNodeStyleWithChromeFix = css({
     transform: 'scale(0)'
   }
 });
-const globalStyles = css({
+const globalStyles = () => fg('platform_editor_element_dnd_nested_fix_patch_3') ? css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror-widget:first-child + *:not([data-panel-type], .code-block, [data-node-type="nestedExpand"], [data-layout-section="true"])': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    marginTop: '0 !important'
+  }
+}) : css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '.ProseMirror-widget:first-child + *:not([data-panel-type], .code-block, [data-node-type="nestedExpand"])': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
     marginTop: '0 !important'
   }
 });
+const topLevelNodeMarginStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> .ProseMirror-widget:first-child + .ProseMirror-gapcursor + *:not([data-layout-section="true"]), > .ProseMirror-widget:first-child + *:not([data-layout-section="true"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      marginTop: '0 !important'
+    }
+  }
+});
 const withDividerInPanelStyleFix = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
   [`${dividerBodiedInCustomPanelWithNoIconSelector}`]: {
@@ -179,8 +195,8 @@ const withRelativePosStyle = css({
 });
 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, fg('platform_editor_element_dnd_nested_fix_patch_3') ? withRelativePosStyle : 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, topLevelNodeMarginStyles] : undefined]
   });
 };

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

@@ -78,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;' : '', " ").concat(fg('platform_editor_element_dnd_nested_fix_patch_3') ? '' : 'position: relative; z-index: 1;')
+      style: "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 && !fg('platform_editor_element_dnd_nested_fix_patch_3') ? '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

@@ -126,11 +126,29 @@ var withFormatInLayoutStyleFixSelectors = ["".concat(dragHandleContainer, ":firs
 var withInlineNodeStyleWithChromeFix = css(_defineProperty({}, withInlineNodeStyleWithChromeFixSelectors, {
   transform: 'scale(0)'
 }));
-var globalStyles = css({
+var globalStyles = function globalStyles() {
+  return fg('platform_editor_element_dnd_nested_fix_patch_3') ? css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '.ProseMirror-widget:first-child + *:not([data-panel-type], .code-block, [data-node-type="nestedExpand"], [data-layout-section="true"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      marginTop: '0 !important'
+    }
+  }) : css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '.ProseMirror-widget:first-child + *:not([data-panel-type], .code-block, [data-node-type="nestedExpand"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      marginTop: '0 !important'
+    }
+  });
+};
+var topLevelNodeMarginStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '.ProseMirror-widget:first-child + *:not([data-panel-type], .code-block, [data-node-type="nestedExpand"])': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-    marginTop: '0 !important'
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> .ProseMirror-widget:first-child + .ProseMirror-gapcursor + *:not([data-layout-section="true"]), > .ProseMirror-widget:first-child + *:not([data-layout-section="true"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      marginTop: '0 !important'
+    }
   }
 });
 var withDividerInPanelStyleFix = css(_defineProperty({}, "".concat(dividerBodiedInCustomPanelWithNoIconSelector), {
@@ -166,8 +184,8 @@ var withRelativePosStyle = css({
 });
 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, fg('platform_editor_element_dnd_nested_fix_patch_3') ? withRelativePosStyle : 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, topLevelNodeMarginStyles] : 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.11.0",
+	"version": "2.12.1",
 	"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.4.0",
+		"@atlaskit/editor-common": "^94.8.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",