@atlaskit/editor-plugin-block-controls 1.11.0 → 1.11.2

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.11.2
+
+### Patch Changes
+
+- [#129108](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/129108)
+  [`c3bcb8b4001bd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c3bcb8b4001bd) -
+  ED-24540 Clean up droptarget decorations after dropping in nested nodes to fix node splitting
+  issue
+- [#129411](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/129411)
+  [`2cfee5779f921`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2cfee5779f921) -
+  ED-24456 improve drop target vertical position for nested nodes
+- Updated dependencies
+
+## 1.11.1
+
+### Patch Changes
+
+- [#128476](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/128476)
+  [`e6ccffdd6fe90`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e6ccffdd6fe90) -
+  ED-24408 fix nested drop target indicator location and appearance
+
 ## 1.11.0
 
 ### Minor Changes

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

@@ -48,15 +48,18 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
     if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
       depth = newState.doc.resolve(pos).depth;
       if (node.isInline || !parent) {
+        prevNode = node;
         return false;
       }
       if (IGNORE_NODES.includes(node.type.name)) {
+        prevNode = node;
         return true; //skip over, don't consider it a valid depth
       }
       var canDrop = activeNodeType && (0, _validation.canMoveToIndex)(parent, index, nodeType);
 
       //NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
       if (!canDrop && !(0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
+        prevNode = node;
         return false; //not valid pos, so nested not valid either
       }
       decorationState.push({
@@ -85,12 +88,14 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
       id: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? pos : index,
       formatMessage: formatMessage,
       prevNode: prevNode,
-      nextNode: node
+      nextNode: node,
+      parentNode: parent
     })));
     if (endDec) {
       decs.push(createDropTargetDecoration(endDec.pos, /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
         api: api,
         id: endDec.id,
+        parentNode: parent,
         formatMessage: formatMessage
       })));
     }

package/dist/cjs/pm-plugins/main.js

@@ -138,8 +138,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
         if (!(0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
           isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newState.doc.childCount;
         }
-        var dropTargetLen = decorations.find().filter(function (_ref8) {
-          var spec = _ref8.spec;
+        var dropTargetLen = decorations.find(undefined, undefined, function (spec) {
           return spec.type === 'drop-target-decoration';
         }).length;
 
@@ -164,8 +163,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
 
         // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
         if (redrawDecorations && !isResizerResizing && api) {
-          var oldNodeDecs = decorations.find().filter(function (_ref9) {
-            var spec = _ref9.spec;
+          var oldNodeDecs = decorations.find(undefined, undefined, function (spec) {
             return spec.type !== 'drop-target-decoration';
           });
           decorations = decorations.remove(oldNodeDecs);
@@ -202,8 +200,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
 
         // Remove previous drag handle widget and draw new drag handle widget when activeNode changes
         if (api && meta !== null && meta !== void 0 && meta.activeNode && ((meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) || meta !== null && meta !== void 0 && (_meta$activeNode$hand = meta.activeNode.handleOptions) !== null && _meta$activeNode$hand !== void 0 && _meta$activeNode$hand.isFocused)) {
-          var _oldHandle = decorations.find().filter(function (_ref10) {
-            var spec = _ref10.spec;
+          var _oldHandle = decorations.find(undefined, undefined, function (spec) {
             return spec.id === 'drag-handle';
           });
           decorations = decorations.remove(_oldHandle);
@@ -213,8 +210,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
 
         // Remove previous drag handle widget and draw new drag handle widget when node type changes
         if (activeNodeWithNewNodeType && ((_activeNodeWithNewNod = activeNodeWithNewNodeType) === null || _activeNodeWithNewNod === void 0 ? void 0 : _activeNodeWithNewNod.nodeType) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) && api) {
-          var _oldHandle2 = decorations.find().filter(function (_ref11) {
-            var spec = _ref11.spec;
+          var _oldHandle2 = decorations.find(undefined, undefined, function (spec) {
             return spec.id === 'drag-handle';
           });
           decorations = decorations.remove(_oldHandle2);
@@ -222,14 +218,20 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
           decorations = decorations.add(newState.doc, [_decs]);
         }
         var shouldUpdateDropTargets = (meta === null || meta === void 0 ? void 0 : meta.isDragging) || isDropTargetsMissing;
-        var shouldMapDropTargets = !shouldUpdateDropTargets && tr.docChanged && isDragging && (meta === null || meta === void 0 ? void 0 : meta.isDragging) !== false && !(meta !== null && meta !== void 0 && meta.nodeMoved);
+        var shouldMapDropTargets = !shouldUpdateDropTargets && tr.docChanged && isDragging && (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && !(meta !== null && meta !== void 0 && meta.nodeMoved);
         if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
-          // Remove drop target decoration when dragging stops
-          var dropTargetDecs = decorations.find().filter(function (_ref12) {
-            var spec = _ref12.spec;
-            return spec.type === 'drop-target-decoration';
-          });
-          decorations = decorations.remove(dropTargetDecs);
+          if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
+            var remainingDecs = decorations.find(undefined, undefined, function (spec) {
+              return spec.type !== 'drop-target-decoration';
+            });
+            decorations = _view.DecorationSet.create(newState.doc, remainingDecs);
+          } else {
+            // Remove drop target decoration when dragging stops
+            var dropTargetDecs = decorations.find(undefined, undefined, function (spec) {
+              return spec.type === 'drop-target-decoration';
+            });
+            decorations = decorations.remove(dropTargetDecs);
+          }
         }
         if (api) {
           // Add drop targets when node is being dragged
@@ -246,9 +248,9 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
 
         //Map drop target decoration positions when the document changes
         if (shouldMapDropTargets) {
-          decorationState = decorationState.map(function (_ref13) {
-            var id = _ref13.id,
-              pos = _ref13.pos;
+          decorationState = decorationState.map(function (_ref8) {
+            var id = _ref8.id,
+              pos = _ref8.pos;
             return {
               id: id,
               pos: tr.mapping.map(pos)
@@ -261,8 +263,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
           decorations = decorations.map(tr.mapping, tr.doc);
         }
         var isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
-        var hasNodeDecoration = decorations.find().some(function (_ref14) {
-          var spec = _ref14.spec;
+        var hasNodeDecoration = decorations.find().some(function (_ref9) {
+          var spec = _ref9.spec;
           return spec.type === 'node-decoration';
         });
         if (!hasNodeDecoration && isEmptyDoc) {

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DropTarget = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
@@ -22,6 +23,7 @@ var _consts = require("./consts");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var DEFAULT_DROP_INDICATOR_WIDTH = 760;
+var EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH = '--editor-block-controls-drop-indicator-width';
 var styleDropTarget = (0, _react2.css)({
   height: "var(--ds-space-100, 8px)",
   marginTop: "var(--ds-space-negative-100, -8px)",
@@ -31,17 +33,25 @@ var styleDropTarget = (0, _react2.css)({
   display: 'block',
   zIndex: _constants.layers.card()
 });
-var marginLookupMap = Object.fromEntries(
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-Object.entries(_consts.spaceLookupMap).map(function (_ref, i) {
+var styleDropIndicator = (0, _react2.css)({
+  height: '100%',
+  margin: '0 auto',
+  position: 'relative',
+  width: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, ", 100%)")
+});
+var nestedDropIndicatorStyle = (0, _react2.css)({
+  position: 'relative'
+});
+var marginLookupMap = Object.fromEntries(Object.entries(_consts.spaceLookupMap).map(function (_ref, i) {
   var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
     key = _ref2[0],
     value = _ref2[1];
-  return [key, (0, _react2.css)({
-    marginTop: value
+  return [key,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+  (0, _react2.css)({
+    transform: "translateY(".concat(value, ")")
   })];
 }));
-var BASE_LINE_MARGIN = -8;
 var getNodeMargins = function getNodeMargins(node) {
   if (!node) {
     return _consts.nodeMargins['default'];
@@ -52,30 +62,25 @@ var getNodeMargins = function getNodeMargins(node) {
   }
   return _consts.nodeMargins[nodeTypeName] || _consts.nodeMargins['default'];
 };
-var getDropTargetPositionStyle = function getDropTargetPositionStyle(prevNode, nextNode) {
+var getDropTargetOffsetStyle = function getDropTargetOffsetStyle(prevNode, nextNode) {
   if (!prevNode || !nextNode) {
     return null;
   }
-  var space = BASE_LINE_MARGIN - Math.round((getNodeMargins(prevNode).bottom - getNodeMargins(nextNode).top) / 2);
-  if (space < -24) {
-    return marginLookupMap[-24];
-  } else if (space > 24) {
-    return marginLookupMap[24];
-  } else {
-    return marginLookupMap[space];
+  var top = getNodeMargins(nextNode).top;
+  var bottom = getNodeMargins(prevNode).bottom;
+  var merginDiff = Math.round((top - bottom) / 2);
+  if (merginDiff === 0) {
+    return null;
   }
+  var offset = Math.max(Math.min(merginDiff, 24), -24);
+  return marginLookupMap[offset];
 };
-var styleDropIndicator = (0, _react2.css)({
-  height: '100%',
-  width: '100%',
-  margin: '0 auto',
-  position: 'relative'
-});
 var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
   var api = _ref3.api,
     id = _ref3.id,
     prevNode = _ref3.prevNode,
     nextNode = _ref3.nextNode,
+    parentNode = _ref3.parentNode,
     formatMessage = _ref3.formatMessage;
   var ref = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
@@ -84,7 +89,7 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
     setIsDraggedOver = _useState2[1];
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width']),
     widthState = _useSharedPluginState.widthState;
-  var lineLength = (widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH;
+  var isNestedDropTarget = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) !== 'doc';
   (0, _react.useEffect)(function () {
     var element = ref.current;
     if (!element) {
@@ -121,23 +126,31 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
       }
     });
   }, [id, api, formatMessage]);
-  var topTargetMarginStyle = (0, _react.useMemo)(function () {
-    return getDropTargetPositionStyle(prevNode, nextNode);
-  }, [prevNode, nextNode]);
+  var dropTargetOffsetStyle = (0, _react.useMemo)(function () {
+    /**
+     * First child of a nested node.
+     * Disable the position adjustment temporarily
+     */
+    if (parentNode === prevNode) {
+      return null;
+    }
+    return getDropTargetOffsetStyle(prevNode, nextNode);
+  }, [prevNode, nextNode, parentNode]);
+  var widthStyle = (0, _defineProperty2.default)({}, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat((widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH, "px"));
   return (
     // Note: Firefox has trouble with using a button element as the handle for drag and drop
     (0, _react2.jsx)("div", {
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      css: [styleDropTarget, topTargetMarginStyle],
+      css: [styleDropTarget, dropTargetOffsetStyle, isNestedDropTarget && nestedDropIndicatorStyle]
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ,
+      style: widthStyle,
       ref: ref,
       "data-testid": "block-ctrl-drop-target"
     },
     // 4px gap to clear expand node border
     (isDraggedOver || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) && (0, _react2.jsx)("div", {
       css: styleDropIndicator,
-      style: {
-        width: "".concat(lineLength, "px")
-      },
       "data-testid": "block-ctrl-drop-indicator"
     }, (0, _react2.jsx)(_box.DropIndicator, {
       edge: "bottom",

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

@@ -38,15 +38,18 @@ export const dropTargetDecorations = (oldState, newState, api, formatMessage, ac
     if (fg('platform_editor_elements_dnd_nested')) {
       depth = newState.doc.resolve(pos).depth;
       if (node.isInline || !parent) {
+        prevNode = node;
         return false;
       }
       if (IGNORE_NODES.includes(node.type.name)) {
+        prevNode = node;
         return true; //skip over, don't consider it a valid depth
       }
       const canDrop = activeNodeType && canMoveToIndex(parent, index, nodeType);
 
       //NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
       if (!canDrop && !isBlocksDragTargetDebug()) {
+        prevNode = node;
         return false; //not valid pos, so nested not valid either
       }
       decorationState.push({
@@ -75,12 +78,14 @@ export const dropTargetDecorations = (oldState, newState, api, formatMessage, ac
       id: fg('platform_editor_elements_dnd_nested') ? pos : index,
       formatMessage,
       prevNode,
-      nextNode: node
+      nextNode: node,
+      parentNode: parent
     })));
     if (endDec) {
       decs.push(createDropTargetDecoration(endDec.pos, /*#__PURE__*/createElement(DropTarget, {
         api,
         id: endDec.id,
+        parentNode: parent,
         formatMessage
       })));
     }

package/dist/es2019/pm-plugins/main.js

@@ -131,9 +131,7 @@ export const createPlugin = (api, getIntl) => {
         if (!fg('platform_editor_elements_dnd_nested')) {
           isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newState.doc.childCount;
         }
-        const dropTargetLen = decorations.find().filter(({
-          spec
-        }) => spec.type === 'drop-target-decoration').length;
+        const dropTargetLen = decorations.find(undefined, undefined, spec => spec.type === 'drop-target-decoration').length;
 
         //TODO: Fix this logic for nested scenarios
         if (!fg('platform_editor_elements_dnd_nested')) {
@@ -157,9 +155,7 @@ export const createPlugin = (api, getIntl) => {
 
         // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
         if (redrawDecorations && !isResizerResizing && api) {
-          const oldNodeDecs = decorations.find().filter(({
-            spec
-          }) => spec.type !== 'drop-target-decoration');
+          const oldNodeDecs = decorations.find(undefined, undefined, spec => spec.type !== 'drop-target-decoration');
           decorations = decorations.remove(oldNodeDecs);
           const nodeDecs = nodeDecorations(newState);
           decorations = decorations.add(newState.doc, [...nodeDecs]);
@@ -194,9 +190,7 @@ export const createPlugin = (api, getIntl) => {
 
         // Remove previous drag handle widget and draw new drag handle widget when activeNode changes
         if (api && meta !== null && meta !== void 0 && meta.activeNode && ((meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) || meta !== null && meta !== void 0 && (_meta$activeNode$hand = meta.activeNode.handleOptions) !== null && _meta$activeNode$hand !== void 0 && _meta$activeNode$hand.isFocused)) {
-          const oldHandle = decorations.find().filter(({
-            spec
-          }) => spec.id === 'drag-handle');
+          const oldHandle = decorations.find(undefined, undefined, spec => spec.id === 'drag-handle');
           decorations = decorations.remove(oldHandle);
           const decs = dragHandleDecoration(api, getIntl, meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, meta.activeNode.handleOptions);
           decorations = decorations.add(newState.doc, [decs]);
@@ -204,21 +198,22 @@ export const createPlugin = (api, getIntl) => {
 
         // Remove previous drag handle widget and draw new drag handle widget when node type changes
         if (activeNodeWithNewNodeType && ((_activeNodeWithNewNod = activeNodeWithNewNodeType) === null || _activeNodeWithNewNod === void 0 ? void 0 : _activeNodeWithNewNod.nodeType) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) && api) {
-          const oldHandle = decorations.find().filter(({
-            spec
-          }) => spec.id === 'drag-handle');
+          const oldHandle = decorations.find(undefined, undefined, spec => spec.id === 'drag-handle');
           decorations = decorations.remove(oldHandle);
           const decs = dragHandleDecoration(api, getIntl, activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType);
           decorations = decorations.add(newState.doc, [decs]);
         }
         const shouldUpdateDropTargets = (meta === null || meta === void 0 ? void 0 : meta.isDragging) || isDropTargetsMissing;
-        const shouldMapDropTargets = !shouldUpdateDropTargets && tr.docChanged && isDragging && (meta === null || meta === void 0 ? void 0 : meta.isDragging) !== false && !(meta !== null && meta !== void 0 && meta.nodeMoved);
+        const shouldMapDropTargets = !shouldUpdateDropTargets && tr.docChanged && isDragging && (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && !(meta !== null && meta !== void 0 && meta.nodeMoved);
         if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
-          // Remove drop target decoration when dragging stops
-          const dropTargetDecs = decorations.find().filter(({
-            spec
-          }) => spec.type === 'drop-target-decoration');
-          decorations = decorations.remove(dropTargetDecs);
+          if (fg('platform_editor_elements_dnd_nested')) {
+            const remainingDecs = decorations.find(undefined, undefined, spec => spec.type !== 'drop-target-decoration');
+            decorations = DecorationSet.create(newState.doc, remainingDecs);
+          } else {
+            // Remove drop target decoration when dragging stops
+            const dropTargetDecs = decorations.find(undefined, undefined, spec => spec.type === 'drop-target-decoration');
+            decorations = decorations.remove(dropTargetDecs);
+          }
         }
         if (api) {
           // Add drop targets when node is being dragged

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

@@ -13,6 +13,7 @@ import { layers } from '@atlaskit/theme/constants';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 import { nodeMargins, spaceLookupMap } from './consts';
 const DEFAULT_DROP_INDICATOR_WIDTH = 760;
+const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH = '--editor-block-controls-drop-indicator-width';
 const styleDropTarget = css({
   height: "var(--ds-space-100, 8px)",
   marginTop: "var(--ds-space-negative-100, -8px)",
@@ -22,12 +23,20 @@ const styleDropTarget = css({
   display: 'block',
   zIndex: layers.card()
 });
-const marginLookupMap = Object.fromEntries(
+const styleDropIndicator = css({
+  height: '100%',
+  margin: '0 auto',
+  position: 'relative',
+  width: `var(${EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH}, 100%)`
+});
+const nestedDropIndicatorStyle = css({
+  position: 'relative'
+});
+const marginLookupMap = Object.fromEntries(Object.entries(spaceLookupMap).map(([key, value], i) => [key,
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-Object.entries(spaceLookupMap).map(([key, value], i) => [key, css({
-  marginTop: value
+css({
+  transform: `translateY(${value})`
 })]));
-const BASE_LINE_MARGIN = -8;
 const getNodeMargins = node => {
   if (!node) {
     return nodeMargins['default'];
@@ -38,30 +47,25 @@ const getNodeMargins = node => {
   }
   return nodeMargins[nodeTypeName] || nodeMargins['default'];
 };
-const getDropTargetPositionStyle = (prevNode, nextNode) => {
+const getDropTargetOffsetStyle = (prevNode, nextNode) => {
   if (!prevNode || !nextNode) {
     return null;
   }
-  const space = BASE_LINE_MARGIN - Math.round((getNodeMargins(prevNode).bottom - getNodeMargins(nextNode).top) / 2);
-  if (space < -24) {
-    return marginLookupMap[-24];
-  } else if (space > 24) {
-    return marginLookupMap[24];
-  } else {
-    return marginLookupMap[space];
+  const top = getNodeMargins(nextNode).top;
+  const bottom = getNodeMargins(prevNode).bottom;
+  const merginDiff = Math.round((top - bottom) / 2);
+  if (merginDiff === 0) {
+    return null;
   }
+  const offset = Math.max(Math.min(merginDiff, 24), -24);
+  return marginLookupMap[offset];
 };
-const styleDropIndicator = css({
-  height: '100%',
-  width: '100%',
-  margin: '0 auto',
-  position: 'relative'
-});
 export const DropTarget = ({
   api,
   id,
   prevNode,
   nextNode,
+  parentNode,
   formatMessage
 }) => {
   const ref = useRef(null);
@@ -69,7 +73,7 @@ export const DropTarget = ({
   const {
     widthState
   } = useSharedPluginState(api, ['width']);
-  const lineLength = (widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH;
+  const isNestedDropTarget = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) !== 'doc';
   useEffect(() => {
     const element = ref.current;
     if (!element) {
@@ -106,23 +110,33 @@ export const DropTarget = ({
       }
     });
   }, [id, api, formatMessage]);
-  const topTargetMarginStyle = useMemo(() => {
-    return getDropTargetPositionStyle(prevNode, nextNode);
-  }, [prevNode, nextNode]);
+  const dropTargetOffsetStyle = useMemo(() => {
+    /**
+     * First child of a nested node.
+     * Disable the position adjustment temporarily
+     */
+    if (parentNode === prevNode) {
+      return null;
+    }
+    return getDropTargetOffsetStyle(prevNode, nextNode);
+  }, [prevNode, nextNode, parentNode]);
+  const widthStyle = {
+    [EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH]: isNestedDropTarget ? '100%' : `${(widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH}px`
+  };
   return (
     // Note: Firefox has trouble with using a button element as the handle for drag and drop
     jsx("div", {
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      css: [styleDropTarget, topTargetMarginStyle],
+      css: [styleDropTarget, dropTargetOffsetStyle, isNestedDropTarget && nestedDropIndicatorStyle]
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ,
+      style: widthStyle,
       ref: ref,
       "data-testid": "block-ctrl-drop-target"
     },
     // 4px gap to clear expand node border
     (isDraggedOver || isBlocksDragTargetDebug()) && jsx("div", {
       css: styleDropIndicator,
-      style: {
-        width: `${lineLength}px`
-      },
       "data-testid": "block-ctrl-drop-indicator"
     }, jsx(DropIndicator, {
       edge: "bottom",

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

@@ -41,15 +41,18 @@ export var dropTargetDecorations = function dropTargetDecorations(oldState, newS
     if (fg('platform_editor_elements_dnd_nested')) {
       depth = newState.doc.resolve(pos).depth;
       if (node.isInline || !parent) {
+        prevNode = node;
         return false;
       }
       if (IGNORE_NODES.includes(node.type.name)) {
+        prevNode = node;
         return true; //skip over, don't consider it a valid depth
       }
       var canDrop = activeNodeType && canMoveToIndex(parent, index, nodeType);
 
       //NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
       if (!canDrop && !isBlocksDragTargetDebug()) {
+        prevNode = node;
         return false; //not valid pos, so nested not valid either
       }
       decorationState.push({
@@ -78,12 +81,14 @@ export var dropTargetDecorations = function dropTargetDecorations(oldState, newS
       id: fg('platform_editor_elements_dnd_nested') ? pos : index,
       formatMessage: formatMessage,
       prevNode: prevNode,
-      nextNode: node
+      nextNode: node,
+      parentNode: parent
     })));
     if (endDec) {
       decs.push(createDropTargetDecoration(endDec.pos, /*#__PURE__*/createElement(DropTarget, {
         api: api,
         id: endDec.id,
+        parentNode: parent,
         formatMessage: formatMessage
       })));
     }

package/dist/esm/pm-plugins/main.js

@@ -131,8 +131,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
         if (!fg('platform_editor_elements_dnd_nested')) {
           isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newState.doc.childCount;
         }
-        var dropTargetLen = decorations.find().filter(function (_ref8) {
-          var spec = _ref8.spec;
+        var dropTargetLen = decorations.find(undefined, undefined, function (spec) {
           return spec.type === 'drop-target-decoration';
         }).length;
 
@@ -157,8 +156,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
 
         // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
         if (redrawDecorations && !isResizerResizing && api) {
-          var oldNodeDecs = decorations.find().filter(function (_ref9) {
-            var spec = _ref9.spec;
+          var oldNodeDecs = decorations.find(undefined, undefined, function (spec) {
             return spec.type !== 'drop-target-decoration';
           });
           decorations = decorations.remove(oldNodeDecs);
@@ -195,8 +193,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
 
         // Remove previous drag handle widget and draw new drag handle widget when activeNode changes
         if (api && meta !== null && meta !== void 0 && meta.activeNode && ((meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) || meta !== null && meta !== void 0 && (_meta$activeNode$hand = meta.activeNode.handleOptions) !== null && _meta$activeNode$hand !== void 0 && _meta$activeNode$hand.isFocused)) {
-          var _oldHandle = decorations.find().filter(function (_ref10) {
-            var spec = _ref10.spec;
+          var _oldHandle = decorations.find(undefined, undefined, function (spec) {
             return spec.id === 'drag-handle';
           });
           decorations = decorations.remove(_oldHandle);
@@ -206,8 +203,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
 
         // Remove previous drag handle widget and draw new drag handle widget when node type changes
         if (activeNodeWithNewNodeType && ((_activeNodeWithNewNod = activeNodeWithNewNodeType) === null || _activeNodeWithNewNod === void 0 ? void 0 : _activeNodeWithNewNod.nodeType) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) && api) {
-          var _oldHandle2 = decorations.find().filter(function (_ref11) {
-            var spec = _ref11.spec;
+          var _oldHandle2 = decorations.find(undefined, undefined, function (spec) {
             return spec.id === 'drag-handle';
           });
           decorations = decorations.remove(_oldHandle2);
@@ -215,14 +211,20 @@ export var createPlugin = function createPlugin(api, getIntl) {
           decorations = decorations.add(newState.doc, [_decs]);
         }
         var shouldUpdateDropTargets = (meta === null || meta === void 0 ? void 0 : meta.isDragging) || isDropTargetsMissing;
-        var shouldMapDropTargets = !shouldUpdateDropTargets && tr.docChanged && isDragging && (meta === null || meta === void 0 ? void 0 : meta.isDragging) !== false && !(meta !== null && meta !== void 0 && meta.nodeMoved);
+        var shouldMapDropTargets = !shouldUpdateDropTargets && tr.docChanged && isDragging && (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && !(meta !== null && meta !== void 0 && meta.nodeMoved);
         if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
-          // Remove drop target decoration when dragging stops
-          var dropTargetDecs = decorations.find().filter(function (_ref12) {
-            var spec = _ref12.spec;
-            return spec.type === 'drop-target-decoration';
-          });
-          decorations = decorations.remove(dropTargetDecs);
+          if (fg('platform_editor_elements_dnd_nested')) {
+            var remainingDecs = decorations.find(undefined, undefined, function (spec) {
+              return spec.type !== 'drop-target-decoration';
+            });
+            decorations = DecorationSet.create(newState.doc, remainingDecs);
+          } else {
+            // Remove drop target decoration when dragging stops
+            var dropTargetDecs = decorations.find(undefined, undefined, function (spec) {
+              return spec.type === 'drop-target-decoration';
+            });
+            decorations = decorations.remove(dropTargetDecs);
+          }
         }
         if (api) {
           // Add drop targets when node is being dragged
@@ -239,9 +241,9 @@ export var createPlugin = function createPlugin(api, getIntl) {
 
         //Map drop target decoration positions when the document changes
         if (shouldMapDropTargets) {
-          decorationState = decorationState.map(function (_ref13) {
-            var id = _ref13.id,
-              pos = _ref13.pos;
+          decorationState = decorationState.map(function (_ref8) {
+            var id = _ref8.id,
+              pos = _ref8.pos;
             return {
               id: id,
               pos: tr.mapping.map(pos)
@@ -254,8 +256,8 @@ export var createPlugin = function createPlugin(api, getIntl) {
           decorations = decorations.map(tr.mapping, tr.doc);
         }
         var isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
-        var hasNodeDecoration = decorations.find().some(function (_ref14) {
-          var spec = _ref14.spec;
+        var hasNodeDecoration = decorations.find().some(function (_ref9) {
+          var spec = _ref9.spec;
           return spec.type === 'node-decoration';
         });
         if (!hasNodeDecoration && isEmptyDoc) {

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

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
  * @jsxRuntime classic
@@ -14,6 +15,7 @@ import { layers } from '@atlaskit/theme/constants';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 import { nodeMargins, spaceLookupMap } from './consts';
 var DEFAULT_DROP_INDICATOR_WIDTH = 760;
+var EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH = '--editor-block-controls-drop-indicator-width';
 var styleDropTarget = css({
   height: "var(--ds-space-100, 8px)",
   marginTop: "var(--ds-space-negative-100, -8px)",
@@ -23,17 +25,25 @@ var styleDropTarget = css({
   display: 'block',
   zIndex: layers.card()
 });
-var marginLookupMap = Object.fromEntries(
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-Object.entries(spaceLookupMap).map(function (_ref, i) {
+var styleDropIndicator = css({
+  height: '100%',
+  margin: '0 auto',
+  position: 'relative',
+  width: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, ", 100%)")
+});
+var nestedDropIndicatorStyle = css({
+  position: 'relative'
+});
+var marginLookupMap = Object.fromEntries(Object.entries(spaceLookupMap).map(function (_ref, i) {
   var _ref2 = _slicedToArray(_ref, 2),
     key = _ref2[0],
     value = _ref2[1];
-  return [key, css({
-    marginTop: value
+  return [key,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+  css({
+    transform: "translateY(".concat(value, ")")
   })];
 }));
-var BASE_LINE_MARGIN = -8;
 var getNodeMargins = function getNodeMargins(node) {
   if (!node) {
     return nodeMargins['default'];
@@ -44,30 +54,25 @@ var getNodeMargins = function getNodeMargins(node) {
   }
   return nodeMargins[nodeTypeName] || nodeMargins['default'];
 };
-var getDropTargetPositionStyle = function getDropTargetPositionStyle(prevNode, nextNode) {
+var getDropTargetOffsetStyle = function getDropTargetOffsetStyle(prevNode, nextNode) {
   if (!prevNode || !nextNode) {
     return null;
   }
-  var space = BASE_LINE_MARGIN - Math.round((getNodeMargins(prevNode).bottom - getNodeMargins(nextNode).top) / 2);
-  if (space < -24) {
-    return marginLookupMap[-24];
-  } else if (space > 24) {
-    return marginLookupMap[24];
-  } else {
-    return marginLookupMap[space];
+  var top = getNodeMargins(nextNode).top;
+  var bottom = getNodeMargins(prevNode).bottom;
+  var merginDiff = Math.round((top - bottom) / 2);
+  if (merginDiff === 0) {
+    return null;
   }
+  var offset = Math.max(Math.min(merginDiff, 24), -24);
+  return marginLookupMap[offset];
 };
-var styleDropIndicator = css({
-  height: '100%',
-  width: '100%',
-  margin: '0 auto',
-  position: 'relative'
-});
 export var DropTarget = function DropTarget(_ref3) {
   var api = _ref3.api,
     id = _ref3.id,
     prevNode = _ref3.prevNode,
     nextNode = _ref3.nextNode,
+    parentNode = _ref3.parentNode,
     formatMessage = _ref3.formatMessage;
   var ref = useRef(null);
   var _useState = useState(false),
@@ -76,7 +81,7 @@ export var DropTarget = function DropTarget(_ref3) {
     setIsDraggedOver = _useState2[1];
   var _useSharedPluginState = useSharedPluginState(api, ['width']),
     widthState = _useSharedPluginState.widthState;
-  var lineLength = (widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH;
+  var isNestedDropTarget = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) !== 'doc';
   useEffect(function () {
     var element = ref.current;
     if (!element) {
@@ -113,23 +118,31 @@ export var DropTarget = function DropTarget(_ref3) {
       }
     });
   }, [id, api, formatMessage]);
-  var topTargetMarginStyle = useMemo(function () {
-    return getDropTargetPositionStyle(prevNode, nextNode);
-  }, [prevNode, nextNode]);
+  var dropTargetOffsetStyle = useMemo(function () {
+    /**
+     * First child of a nested node.
+     * Disable the position adjustment temporarily
+     */
+    if (parentNode === prevNode) {
+      return null;
+    }
+    return getDropTargetOffsetStyle(prevNode, nextNode);
+  }, [prevNode, nextNode, parentNode]);
+  var widthStyle = _defineProperty({}, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat((widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH, "px"));
   return (
     // Note: Firefox has trouble with using a button element as the handle for drag and drop
     jsx("div", {
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      css: [styleDropTarget, topTargetMarginStyle],
+      css: [styleDropTarget, dropTargetOffsetStyle, isNestedDropTarget && nestedDropIndicatorStyle]
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ,
+      style: widthStyle,
       ref: ref,
       "data-testid": "block-ctrl-drop-target"
     },
     // 4px gap to clear expand node border
     (isDraggedOver || isBlocksDragTargetDebug()) && jsx("div", {
       css: styleDropIndicator,
-      style: {
-        width: "".concat(lineLength, "px")
-      },
       "data-testid": "block-ctrl-drop-indicator"
     }, jsx(DropIndicator, {
       edge: "bottom",

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

@@ -8,6 +8,7 @@ export type DropTargetProps = {
     id: number;
     prevNode?: PMNode;
     nextNode?: PMNode;
+    parentNode?: PMNode;
     formatMessage?: IntlShape['formatMessage'];
 };
-export declare const DropTarget: ({ api, id, prevNode, nextNode, formatMessage }: DropTargetProps) => jsx.JSX.Element;
+export declare const DropTarget: ({ api, id, prevNode, nextNode, parentNode, formatMessage, }: DropTargetProps) => jsx.JSX.Element;

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

@@ -8,6 +8,7 @@ export type DropTargetProps = {
     id: number;
     prevNode?: PMNode;
     nextNode?: PMNode;
+    parentNode?: PMNode;
     formatMessage?: IntlShape['formatMessage'];
 };
-export declare const DropTarget: ({ api, id, prevNode, nextNode, formatMessage }: DropTargetProps) => jsx.JSX.Element;
+export declare const DropTarget: ({ api, id, prevNode, nextNode, parentNode, formatMessage, }: DropTargetProps) => jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "1.11.0",
+	"version": "1.11.2",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,7 +31,7 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/editor-common": "^87.6.0",
+		"@atlaskit/editor-common": "^87.10.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.7.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.2.0",
@@ -40,14 +40,14 @@
 		"@atlaskit/editor-prosemirror": "5.0.1",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/editor-tables": "^2.8.0",
-		"@atlaskit/icon": "^22.11.0",
+		"@atlaskit/icon": "^22.12.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/pragmatic-drag-and-drop": "^1.2.0",
+		"@atlaskit/pragmatic-drag-and-drop": "^1.3.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
-		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.57.0",
-		"@atlaskit/tooltip": "^18.6.0",
+		"@atlaskit/theme": "^13.0.0",
+		"@atlaskit/tokens": "^1.58.0",
+		"@atlaskit/tooltip": "^18.7.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",