@atlaskit/editor-plugin-block-controls 2.4.0 → 2.4.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.4.1
+
+### Patch Changes
+
+- [`9bbad837abcb7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9bbad837abcb7) -
+  [ux] ED-25119 Fix content shifting on drag if divider or media nested in panel
+- [#151581](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/151581)
+  [`5a182ebfe8da5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5a182ebfe8da5) -
+  [ux] Fix jittering issue in layout node when there is alignment or indentation applied
+
 ## 2.4.0
 
 ### Minor Changes

package/dist/cjs/ui/consts.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.topPositionAdjustment = exports.spaceLookupMap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dragHandleGap = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = void 0;
+exports.topPositionAdjustment = exports.spaceLookupMap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _dropTargetMarginMap;
@@ -57,7 +57,7 @@ var topPositionAdjustment = exports.topPositionAdjustment = function topPosition
       return 0;
   }
 };
-var dropTargetMarginMap = (_dropTargetMarginMap = {}, (0, _defineProperty2.default)(_dropTargetMarginMap, -24, "var(--ds-space-negative-300, -24px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, -20, "var(--ds-space-negative-250, -20px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, -16, "var(--ds-space-negative-200, -16px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, -12, "var(--ds-space-negative-150, -12px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, -8, "var(--ds-space-negative-100, -8px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, -6, "var(--ds-space-negative-075, -6px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, -4, "var(--ds-space-negative-050, -4px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, -2, "var(--ds-space-negative-025, -2px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, 0, "var(--ds-space-0, 0)"), (0, _defineProperty2.default)(_dropTargetMarginMap, 2, "var(--ds-space-025, 2px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, 4, "var(--ds-space-050, 4px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, 6, "var(--ds-space-075, 6px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, 8, "var(--ds-space-100, 8px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, 12, "var(--ds-space-150, 12px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, 16, "var(--ds-space-200, 16px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, 20, "var(--ds-space-250, 20px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, 24, "var(--ds-space-300, 24px)"), _dropTargetMarginMap);
+var dropTargetMarginMap = exports.dropTargetMarginMap = (_dropTargetMarginMap = {}, (0, _defineProperty2.default)(_dropTargetMarginMap, -24, "var(--ds-space-negative-300, -24px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, -20, "var(--ds-space-negative-250, -20px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, -16, "var(--ds-space-negative-200, -16px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, -12, "var(--ds-space-negative-150, -12px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, -8, "var(--ds-space-negative-100, -8px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, -6, "var(--ds-space-negative-075, -6px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, -4, "var(--ds-space-negative-050, -4px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, -2, "var(--ds-space-negative-025, -2px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, 0, "var(--ds-space-0, 0)"), (0, _defineProperty2.default)(_dropTargetMarginMap, 2, "var(--ds-space-025, 2px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, 4, "var(--ds-space-050, 4px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, 6, "var(--ds-space-075, 6px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, 8, "var(--ds-space-100, 8px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, 12, "var(--ds-space-150, 12px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, 16, "var(--ds-space-200, 16px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, 20, "var(--ds-space-250, 20px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, 24, "var(--ds-space-300, 24px)"), _dropTargetMarginMap);
 
 /**
  * This document serves as a quick reference map for correlating various space matches
@@ -122,6 +122,10 @@ var nodeMargins = exports.nodeMargins = {
     top: 24,
     bottom: 24
   },
+  media: {
+    top: 24,
+    bottom: 24
+  },
   bodiedExtension: {
     top: 0,
     bottom: 0

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

@@ -10,6 +10,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _constants = require("@atlaskit/theme/constants");
@@ -66,6 +67,24 @@ var getNodeMargins = function getNodeMargins(node) {
   }
   return _consts.nodeMargins[nodeTypeName] || _consts.nodeMargins['default'];
 };
+var getNestedDropTargetMarginTop = function getNestedDropTargetMarginTop(prevNode, nextNode, isNestedDropTarget) {
+  if (!prevNode || !nextNode) {
+    return (0, _react2.css)({
+      marginTop: "var(--ds-space-negative-100, -8px)"
+    });
+  }
+  var top = getNodeMargins(nextNode).top;
+  var bottom = getNodeMargins(prevNode).bottom;
+  if (['rule', 'media', 'mediaSingle'].includes(prevNode.type.name) && isNestedDropTarget && top > 0 && bottom > 0) {
+    var collapsedMarginOffset = top === bottom ? top : Math.abs(top - bottom);
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    var marginTop = _consts.dropTargetMarginMap[-collapsedMarginOffset - 8] || "-".concat(collapsedMarginOffset + 8, "px");
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    return (0, _react2.css)({
+      marginTop: marginTop
+    });
+  }
+};
 var getDropTargetOffsetStyle = function getDropTargetOffsetStyle(prevNode, nextNode) {
   if (!prevNode || !nextNode) {
     return null;
@@ -159,14 +178,23 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
     }
     return getDropTargetOffsetStyle(prevNode, nextNode);
   }, [prevNode, nextNode, parentNode]);
+  var dropTargetMarginTopStyles = (0, _react.useMemo)(function () {
+    if (parentNode === prevNode) {
+      return null;
+    }
+    return getNestedDropTargetMarginTop(prevNode, nextNode, isNestedDropTarget);
+  }, [prevNode, nextNode, parentNode, isNestedDropTarget]);
   var dynamicStyle = (_dynamicStyle = {
     width: isNestedDropTarget ? 'unset' : '100%'
   }, (0, _defineProperty2.default)(_dynamicStyle, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat((widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH, "px")), (0, _defineProperty2.default)(_dynamicStyle, EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, isNestedDropTarget ? (0, _consts.getNestedNodeLeftPaddingMargin)(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0'), (0, _defineProperty2.default)(_dynamicStyle, EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX, (0, _experiments.editorExperiment)('nested-dnd', true) ? _constants.layers.navigation() : _constants.layers.card()), _dynamicStyle);
   return (
     // Note: Firefox has trouble with using a button element as the handle for drag and drop
     (0, _react2.jsx)("div", {
+      css: [styleDropTarget,
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      dropTargetOffsetStyle, isNestedDropTarget && nestedDropIndicatorStyle,
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      css: [styleDropTarget, dropTargetOffsetStyle, isNestedDropTarget && nestedDropIndicatorStyle]
+      (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_2') && dropTargetMarginTopStyles]
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       ,
       style: dynamicStyle,

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

@@ -110,6 +110,7 @@ var indentatedParagraphWithTrailingBreakAsOnlyChild = '+ div.fabric-editor-inden
 var paragraphWithPlaceholder = '+ p > .placeholder-decoration';
 var dragHandleContainer = '.ProseMirror-widget[data-blocks-drag-handle-container="true"]';
 var dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
+var dropTargetContainer = '.ProseMirror-widget[data-blocks-drop-target-container="true"]';
 var withInlineNodeStyleSelectors = [".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithTrailingBreakAsOnlyChild, ")"), ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(indentatedParagraphWithTrailingBreakAsOnlyChild, ")"), ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithPlaceholder, ")")].join(', ');
 var dividerBodiedInCustomPanelWithNoIconSelector = '[data-panel-type].ak-editor-panel__no-icon .ProseMirror-widget:first-child + .ProseMirror-widget:nth-child(2) + hr, [data-panel-type] hr:first-child';
 var withInlineNodeStyle = (0, _react.css)((0, _defineProperty2.default)({}, withInlineNodeStyleSelectors, {
@@ -117,6 +118,8 @@ var withInlineNodeStyle = (0, _react.css)((0, _defineProperty2.default)({}, with
   display: 'none !important'
 }));
 var withInlineNodeStyleWithChromeFixSelectors = ["".concat(dragHandleContainer, ":has(").concat(paragraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector), "".concat(dragHandleContainer, ":has(").concat(indentatedParagraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector), "".concat(dragHandleContainer, ":has(").concat(paragraphWithPlaceholder, ") ").concat(dragHandleSelector)].join(', ');
+var withFormatInLayoutStyleFixSelectors = ["".concat(dragHandleContainer, ":first-child + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + .fabric-editor-alignment > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-alignment > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-alignment > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-indentation-mark > p:first-child")].join(', ');
+
 /**
  * Please do not change change transform to display:none, or visibility:hidden
  * Otherwise it might break composition input for Chrome
@@ -153,6 +156,10 @@ var withMediaSingleStyleFix = (0, _react.css)((0, _defineProperty2.default)({},
   userSelect: 'auto',
   cursor: 'pointer'
 }));
+var withFormatInLayoutStyleFix = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(withFormatInLayoutStyleFixSelectors), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  marginTop: '0 !important'
+}));
 var getTextNodeStyle = function getTextNodeStyle() {
   return (0, _platformFeatureFlags.fg)('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
 };
@@ -160,6 +167,6 @@ var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWra
   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, {
       exposure: false
-    }) ? _globalStyles.emptyBlockExperimentGlobalStyles : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : 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]
   });
 };

package/dist/es2019/ui/consts.js

@@ -48,7 +48,7 @@ export const topPositionAdjustment = nodeType => {
       return 0;
   }
 };
-const dropTargetMarginMap = {
+export const dropTargetMarginMap = {
   [-24]: "var(--ds-space-negative-300, -24px)",
   [-20]: "var(--ds-space-negative-250, -20px)",
   [-16]: "var(--ds-space-negative-200, -16px)",
@@ -131,6 +131,10 @@ export const nodeMargins = {
     top: 24,
     bottom: 24
   },
+  media: {
+    top: 24,
+    bottom: 24
+  },
   bodiedExtension: {
     top: 0,
     bottom: 0

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

@@ -7,12 +7,13 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { layers } from '@atlaskit/theme/constants';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
-import { getNestedNodeLeftPaddingMargin, nodeMargins, spaceLookupMap } from './consts';
+import { dropTargetMarginMap, getNestedNodeLeftPaddingMargin, nodeMargins, spaceLookupMap } from './consts';
 const DEFAULT_DROP_INDICATOR_WIDTH = 760;
 const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH = '--editor-block-controls-drop-indicator-width';
 const EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN = '--editor-block-controls-drop-target-leftMargin';
@@ -51,6 +52,24 @@ const getNodeMargins = node => {
   }
   return nodeMargins[nodeTypeName] || nodeMargins['default'];
 };
+const getNestedDropTargetMarginTop = (prevNode, nextNode, isNestedDropTarget) => {
+  if (!prevNode || !nextNode) {
+    return css({
+      marginTop: "var(--ds-space-negative-100, -8px)"
+    });
+  }
+  const top = getNodeMargins(nextNode).top;
+  const bottom = getNodeMargins(prevNode).bottom;
+  if (['rule', 'media', 'mediaSingle'].includes(prevNode.type.name) && isNestedDropTarget && top > 0 && bottom > 0) {
+    const collapsedMarginOffset = top === bottom ? top : Math.abs(top - bottom);
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    const marginTop = dropTargetMarginMap[-collapsedMarginOffset - 8] || `-${collapsedMarginOffset + 8}px`;
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    return css({
+      marginTop
+    });
+  }
+};
 const getDropTargetOffsetStyle = (prevNode, nextNode) => {
   if (!prevNode || !nextNode) {
     return null;
@@ -145,6 +164,12 @@ export const DropTarget = ({
     }
     return getDropTargetOffsetStyle(prevNode, nextNode);
   }, [prevNode, nextNode, parentNode]);
+  const dropTargetMarginTopStyles = useMemo(() => {
+    if (parentNode === prevNode) {
+      return null;
+    }
+    return getNestedDropTargetMarginTop(prevNode, nextNode, isNestedDropTarget);
+  }, [prevNode, nextNode, parentNode, isNestedDropTarget]);
   const dynamicStyle = {
     width: isNestedDropTarget ? 'unset' : '100%',
     [EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH]: isNestedDropTarget ? '100%' : `${(widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH}px`,
@@ -154,8 +179,11 @@ export const DropTarget = ({
   return (
     // Note: Firefox has trouble with using a button element as the handle for drag and drop
     jsx("div", {
+      css: [styleDropTarget,
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      dropTargetOffsetStyle, isNestedDropTarget && nestedDropIndicatorStyle,
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      css: [styleDropTarget, dropTargetOffsetStyle, isNestedDropTarget && nestedDropIndicatorStyle]
+      fg('platform_editor_element_dnd_nested_fix_patch_2') && dropTargetMarginTopStyles]
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       ,
       style: dynamicStyle,

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

@@ -101,6 +101,7 @@ const indentatedParagraphWithTrailingBreakAsOnlyChild = '+ div.fabric-editor-ind
 const paragraphWithPlaceholder = '+ p > .placeholder-decoration';
 const dragHandleContainer = '.ProseMirror-widget[data-blocks-drag-handle-container="true"]';
 const dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
+const dropTargetContainer = '.ProseMirror-widget[data-blocks-drop-target-container="true"]';
 const withInlineNodeStyleSelectors = [`.ProseMirror-widget[data-blocks-drag-handle-container="true"]:has(${paragraphWithTrailingBreakAsOnlyChild})`, `.ProseMirror-widget[data-blocks-drag-handle-container="true"]:has(${indentatedParagraphWithTrailingBreakAsOnlyChild})`, `.ProseMirror-widget[data-blocks-drag-handle-container="true"]:has(${paragraphWithPlaceholder})`].join(', ');
 const dividerBodiedInCustomPanelWithNoIconSelector = '[data-panel-type].ak-editor-panel__no-icon .ProseMirror-widget:first-child + .ProseMirror-widget:nth-child(2) + hr, [data-panel-type] hr:first-child';
 const withInlineNodeStyle = css({
@@ -111,6 +112,8 @@ const withInlineNodeStyle = css({
   }
 });
 const withInlineNodeStyleWithChromeFixSelectors = [`${dragHandleContainer}:has(${paragraphWithTrailingBreakAsOnlyChild}) ${dragHandleSelector}`, `${dragHandleContainer}:has(${indentatedParagraphWithTrailingBreakAsOnlyChild}) ${dragHandleSelector}`, `${dragHandleContainer}:has(${paragraphWithPlaceholder}) ${dragHandleSelector}`].join(', ');
+const withFormatInLayoutStyleFixSelectors = [`${dragHandleContainer}:first-child + .fabric-editor-indentation-mark > p:first-child`, `${dragHandleContainer}:first-child + .fabric-editor-alignment > p:first-child`, `${dragHandleContainer}:first-child + ${dropTargetContainer} + .fabric-editor-indentation-mark > p:first-child`, `${dragHandleContainer}:first-child + ${dropTargetContainer} + .fabric-editor-alignment > p:first-child`, `${dropTargetContainer}:first-child + .fabric-editor-alignment > p:first-child`, `${dropTargetContainer}:first-child + .fabric-editor-indentation-mark > p:first-child`].join(', ');
+
 /**
  * Please do not change change transform to display:none, or visibility:hidden
  * Otherwise it might break composition input for Chrome
@@ -159,6 +162,13 @@ const withMediaSingleStyleFix = css({
     cursor: 'pointer'
   }
 });
+const withFormatInLayoutStyleFix = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
+  [`${withFormatInLayoutStyleFixSelectors}`]: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+    marginTop: '0 !important'
+  }
+});
 const getTextNodeStyle = () => {
   return fg('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
 };
@@ -166,6 +176,6 @@ export const GlobalStylesWrapper = () => {
   return jsx(Global, {
     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]
+    }) ? emptyBlockExperimentGlobalStyles : undefined, fg('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined]
   });
 };

package/dist/esm/ui/consts.js

@@ -50,7 +50,7 @@ export var topPositionAdjustment = function topPositionAdjustment(nodeType) {
       return 0;
   }
 };
-var dropTargetMarginMap = (_dropTargetMarginMap = {}, _defineProperty(_dropTargetMarginMap, -24, "var(--ds-space-negative-300, -24px)"), _defineProperty(_dropTargetMarginMap, -20, "var(--ds-space-negative-250, -20px)"), _defineProperty(_dropTargetMarginMap, -16, "var(--ds-space-negative-200, -16px)"), _defineProperty(_dropTargetMarginMap, -12, "var(--ds-space-negative-150, -12px)"), _defineProperty(_dropTargetMarginMap, -8, "var(--ds-space-negative-100, -8px)"), _defineProperty(_dropTargetMarginMap, -6, "var(--ds-space-negative-075, -6px)"), _defineProperty(_dropTargetMarginMap, -4, "var(--ds-space-negative-050, -4px)"), _defineProperty(_dropTargetMarginMap, -2, "var(--ds-space-negative-025, -2px)"), _defineProperty(_dropTargetMarginMap, 0, "var(--ds-space-0, 0)"), _defineProperty(_dropTargetMarginMap, 2, "var(--ds-space-025, 2px)"), _defineProperty(_dropTargetMarginMap, 4, "var(--ds-space-050, 4px)"), _defineProperty(_dropTargetMarginMap, 6, "var(--ds-space-075, 6px)"), _defineProperty(_dropTargetMarginMap, 8, "var(--ds-space-100, 8px)"), _defineProperty(_dropTargetMarginMap, 12, "var(--ds-space-150, 12px)"), _defineProperty(_dropTargetMarginMap, 16, "var(--ds-space-200, 16px)"), _defineProperty(_dropTargetMarginMap, 20, "var(--ds-space-250, 20px)"), _defineProperty(_dropTargetMarginMap, 24, "var(--ds-space-300, 24px)"), _dropTargetMarginMap);
+export var dropTargetMarginMap = (_dropTargetMarginMap = {}, _defineProperty(_dropTargetMarginMap, -24, "var(--ds-space-negative-300, -24px)"), _defineProperty(_dropTargetMarginMap, -20, "var(--ds-space-negative-250, -20px)"), _defineProperty(_dropTargetMarginMap, -16, "var(--ds-space-negative-200, -16px)"), _defineProperty(_dropTargetMarginMap, -12, "var(--ds-space-negative-150, -12px)"), _defineProperty(_dropTargetMarginMap, -8, "var(--ds-space-negative-100, -8px)"), _defineProperty(_dropTargetMarginMap, -6, "var(--ds-space-negative-075, -6px)"), _defineProperty(_dropTargetMarginMap, -4, "var(--ds-space-negative-050, -4px)"), _defineProperty(_dropTargetMarginMap, -2, "var(--ds-space-negative-025, -2px)"), _defineProperty(_dropTargetMarginMap, 0, "var(--ds-space-0, 0)"), _defineProperty(_dropTargetMarginMap, 2, "var(--ds-space-025, 2px)"), _defineProperty(_dropTargetMarginMap, 4, "var(--ds-space-050, 4px)"), _defineProperty(_dropTargetMarginMap, 6, "var(--ds-space-075, 6px)"), _defineProperty(_dropTargetMarginMap, 8, "var(--ds-space-100, 8px)"), _defineProperty(_dropTargetMarginMap, 12, "var(--ds-space-150, 12px)"), _defineProperty(_dropTargetMarginMap, 16, "var(--ds-space-200, 16px)"), _defineProperty(_dropTargetMarginMap, 20, "var(--ds-space-250, 20px)"), _defineProperty(_dropTargetMarginMap, 24, "var(--ds-space-300, 24px)"), _dropTargetMarginMap);
 
 /**
  * This document serves as a quick reference map for correlating various space matches
@@ -115,6 +115,10 @@ export var nodeMargins = {
     top: 24,
     bottom: 24
   },
+  media: {
+    top: 24,
+    bottom: 24
+  },
   bodiedExtension: {
     top: 0,
     bottom: 0

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

@@ -9,12 +9,13 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { layers } from '@atlaskit/theme/constants';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
-import { getNestedNodeLeftPaddingMargin, nodeMargins, spaceLookupMap } from './consts';
+import { dropTargetMarginMap, getNestedNodeLeftPaddingMargin, nodeMargins, spaceLookupMap } from './consts';
 var DEFAULT_DROP_INDICATOR_WIDTH = 760;
 var EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH = '--editor-block-controls-drop-indicator-width';
 var EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN = '--editor-block-controls-drop-target-leftMargin';
@@ -58,6 +59,24 @@ var getNodeMargins = function getNodeMargins(node) {
   }
   return nodeMargins[nodeTypeName] || nodeMargins['default'];
 };
+var getNestedDropTargetMarginTop = function getNestedDropTargetMarginTop(prevNode, nextNode, isNestedDropTarget) {
+  if (!prevNode || !nextNode) {
+    return css({
+      marginTop: "var(--ds-space-negative-100, -8px)"
+    });
+  }
+  var top = getNodeMargins(nextNode).top;
+  var bottom = getNodeMargins(prevNode).bottom;
+  if (['rule', 'media', 'mediaSingle'].includes(prevNode.type.name) && isNestedDropTarget && top > 0 && bottom > 0) {
+    var collapsedMarginOffset = top === bottom ? top : Math.abs(top - bottom);
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    var marginTop = dropTargetMarginMap[-collapsedMarginOffset - 8] || "-".concat(collapsedMarginOffset + 8, "px");
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    return css({
+      marginTop: marginTop
+    });
+  }
+};
 var getDropTargetOffsetStyle = function getDropTargetOffsetStyle(prevNode, nextNode) {
   if (!prevNode || !nextNode) {
     return null;
@@ -151,14 +170,23 @@ export var DropTarget = function DropTarget(_ref3) {
     }
     return getDropTargetOffsetStyle(prevNode, nextNode);
   }, [prevNode, nextNode, parentNode]);
+  var dropTargetMarginTopStyles = useMemo(function () {
+    if (parentNode === prevNode) {
+      return null;
+    }
+    return getNestedDropTargetMarginTop(prevNode, nextNode, isNestedDropTarget);
+  }, [prevNode, nextNode, parentNode, isNestedDropTarget]);
   var dynamicStyle = (_dynamicStyle = {
     width: isNestedDropTarget ? 'unset' : '100%'
   }, _defineProperty(_dynamicStyle, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat((widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH, "px")), _defineProperty(_dynamicStyle, EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, isNestedDropTarget ? getNestedNodeLeftPaddingMargin(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0'), _defineProperty(_dynamicStyle, EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX, editorExperiment('nested-dnd', true) ? layers.navigation() : layers.card()), _dynamicStyle);
   return (
     // Note: Firefox has trouble with using a button element as the handle for drag and drop
     jsx("div", {
+      css: [styleDropTarget,
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      dropTargetOffsetStyle, isNestedDropTarget && nestedDropIndicatorStyle,
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      css: [styleDropTarget, dropTargetOffsetStyle, isNestedDropTarget && nestedDropIndicatorStyle]
+      fg('platform_editor_element_dnd_nested_fix_patch_2') && dropTargetMarginTopStyles]
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       ,
       style: dynamicStyle,

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

@@ -102,6 +102,7 @@ var indentatedParagraphWithTrailingBreakAsOnlyChild = '+ div.fabric-editor-inden
 var paragraphWithPlaceholder = '+ p > .placeholder-decoration';
 var dragHandleContainer = '.ProseMirror-widget[data-blocks-drag-handle-container="true"]';
 var dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
+var dropTargetContainer = '.ProseMirror-widget[data-blocks-drop-target-container="true"]';
 var withInlineNodeStyleSelectors = [".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithTrailingBreakAsOnlyChild, ")"), ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(indentatedParagraphWithTrailingBreakAsOnlyChild, ")"), ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithPlaceholder, ")")].join(', ');
 var dividerBodiedInCustomPanelWithNoIconSelector = '[data-panel-type].ak-editor-panel__no-icon .ProseMirror-widget:first-child + .ProseMirror-widget:nth-child(2) + hr, [data-panel-type] hr:first-child';
 var withInlineNodeStyle = css(_defineProperty({}, withInlineNodeStyleSelectors, {
@@ -109,6 +110,8 @@ var withInlineNodeStyle = css(_defineProperty({}, withInlineNodeStyleSelectors,
   display: 'none !important'
 }));
 var withInlineNodeStyleWithChromeFixSelectors = ["".concat(dragHandleContainer, ":has(").concat(paragraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector), "".concat(dragHandleContainer, ":has(").concat(indentatedParagraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector), "".concat(dragHandleContainer, ":has(").concat(paragraphWithPlaceholder, ") ").concat(dragHandleSelector)].join(', ');
+var withFormatInLayoutStyleFixSelectors = ["".concat(dragHandleContainer, ":first-child + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + .fabric-editor-alignment > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-alignment > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-alignment > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-indentation-mark > p:first-child")].join(', ');
+
 /**
  * Please do not change change transform to display:none, or visibility:hidden
  * Otherwise it might break composition input for Chrome
@@ -145,6 +148,10 @@ var withMediaSingleStyleFix = css(_defineProperty({}, '.ProseMirror.ua-firefox .
   userSelect: 'auto',
   cursor: 'pointer'
 }));
+var withFormatInLayoutStyleFix = css(_defineProperty({}, "".concat(withFormatInLayoutStyleFixSelectors), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  marginTop: '0 !important'
+}));
 var getTextNodeStyle = function getTextNodeStyle() {
   return fg('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
 };
@@ -152,6 +159,6 @@ 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, {
       exposure: false
-    }) ? emptyBlockExperimentGlobalStyles : undefined, fg('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : 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]
   });
 };

package/dist/types/ui/consts.d.ts

@@ -10,6 +10,9 @@ export declare const DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT: number;
 export declare const dragHandleGap: (nodeType: string, parentNodeType?: string) => 4 | 8 | 12;
 export declare const getNestedNodeLeftPaddingMargin: (nodeType?: string) => "8px" | "16px" | "20px" | "24px" | "28px" | "40px";
 export declare const topPositionAdjustment: (nodeType: string) => number;
+export declare const dropTargetMarginMap: {
+    [key: number]: string;
+};
 /**
  * This document serves as a quick reference map for correlating various space matches
  * to the table provided above.

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

@@ -10,6 +10,9 @@ export declare const DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT: number;
 export declare const dragHandleGap: (nodeType: string, parentNodeType?: string) => 4 | 8 | 12;
 export declare const getNestedNodeLeftPaddingMargin: (nodeType?: string) => "8px" | "16px" | "20px" | "24px" | "28px" | "40px";
 export declare const topPositionAdjustment: (nodeType: string) => number;
+export declare const dropTargetMarginMap: {
+    [key: number]: string;
+};
 /**
  * This document serves as a quick reference map for correlating various space matches
  * to the table provided above.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.4.0",
+	"version": "2.4.1",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",