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

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @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

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

@@ -23,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)",
@@ -32,6 +33,12 @@ var styleDropTarget = (0, _react2.css)({
   display: 'block',
   zIndex: _constants.layers.card()
 });
+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'
 });
@@ -42,10 +49,9 @@ var marginLookupMap = Object.fromEntries(Object.entries(_consts.spaceLookupMap).
   return [key,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
   (0, _react2.css)({
-    marginTop: value
+    transform: "translateY(".concat(value, ")")
   })];
 }));
-var BASE_LINE_MARGIN = -8;
 var getNodeMargins = function getNodeMargins(node) {
   if (!node) {
     return _consts.nodeMargins['default'];
@@ -56,26 +62,19 @@ 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 EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH = '--editor-block-controls-drop-indicator-width';
-var styleDropIndicator = (0, _react2.css)({
-  height: '100%',
-  margin: '0 auto',
-  position: 'relative',
-  width: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, ", 100%)")
-});
 var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
   var api = _ref3.api,
     id = _ref3.id,
@@ -127,22 +126,22 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
       }
     });
   }, [id, api, formatMessage]);
-  var topTargetMarginStyle = (0, _react.useMemo)(function () {
+  var dropTargetOffsetStyle = (0, _react.useMemo)(function () {
     /**
      * First child of a nested node.
-     * Disable the position adjustment for the nested node temporarily
+     * Disable the position adjustment temporarily
      */
-    if (parentNode === prevNode || isNestedDropTarget) {
+    if (parentNode === prevNode) {
       return null;
     }
-    return getDropTargetPositionStyle(prevNode, nextNode);
-  }, [prevNode, nextNode, parentNode, isNestedDropTarget]);
+    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, isNestedDropTarget && nestedDropIndicatorStyle]
+      css: [styleDropTarget, dropTargetOffsetStyle, isNestedDropTarget && nestedDropIndicatorStyle]
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       ,
       style: widthStyle,

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,15 +23,20 @@ const styleDropTarget = css({
   display: 'block',
   zIndex: layers.card()
 });
+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
 css({
-  marginTop: value
+  transform: `translateY(${value})`
 })]));
-const BASE_LINE_MARGIN = -8;
 const getNodeMargins = node => {
   if (!node) {
     return nodeMargins['default'];
@@ -41,26 +47,19 @@ 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 EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH = '--editor-block-controls-drop-indicator-width';
-const styleDropIndicator = css({
-  height: '100%',
-  margin: '0 auto',
-  position: 'relative',
-  width: `var(${EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH}, 100%)`
-});
 export const DropTarget = ({
   api,
   id,
@@ -111,16 +110,16 @@ export const DropTarget = ({
       }
     });
   }, [id, api, formatMessage]);
-  const topTargetMarginStyle = useMemo(() => {
+  const dropTargetOffsetStyle = useMemo(() => {
     /**
      * First child of a nested node.
-     * Disable the position adjustment for the nested node temporarily
+     * Disable the position adjustment temporarily
      */
-    if (parentNode === prevNode || isNestedDropTarget) {
+    if (parentNode === prevNode) {
       return null;
     }
-    return getDropTargetPositionStyle(prevNode, nextNode);
-  }, [prevNode, nextNode, parentNode, isNestedDropTarget]);
+    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`
   };
@@ -128,7 +127,7 @@ export const DropTarget = ({
     // 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, isNestedDropTarget && nestedDropIndicatorStyle]
+      css: [styleDropTarget, dropTargetOffsetStyle, isNestedDropTarget && nestedDropIndicatorStyle]
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       ,
       style: widthStyle,

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

@@ -15,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)",
@@ -24,6 +25,12 @@ var styleDropTarget = css({
   display: 'block',
   zIndex: layers.card()
 });
+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'
 });
@@ -34,10 +41,9 @@ var marginLookupMap = Object.fromEntries(Object.entries(spaceLookupMap).map(func
   return [key,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
   css({
-    marginTop: value
+    transform: "translateY(".concat(value, ")")
   })];
 }));
-var BASE_LINE_MARGIN = -8;
 var getNodeMargins = function getNodeMargins(node) {
   if (!node) {
     return nodeMargins['default'];
@@ -48,26 +54,19 @@ 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 EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH = '--editor-block-controls-drop-indicator-width';
-var styleDropIndicator = css({
-  height: '100%',
-  margin: '0 auto',
-  position: 'relative',
-  width: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, ", 100%)")
-});
 export var DropTarget = function DropTarget(_ref3) {
   var api = _ref3.api,
     id = _ref3.id,
@@ -119,22 +118,22 @@ export var DropTarget = function DropTarget(_ref3) {
       }
     });
   }, [id, api, formatMessage]);
-  var topTargetMarginStyle = useMemo(function () {
+  var dropTargetOffsetStyle = useMemo(function () {
     /**
      * First child of a nested node.
-     * Disable the position adjustment for the nested node temporarily
+     * Disable the position adjustment temporarily
      */
-    if (parentNode === prevNode || isNestedDropTarget) {
+    if (parentNode === prevNode) {
       return null;
     }
-    return getDropTargetPositionStyle(prevNode, nextNode);
-  }, [prevNode, nextNode, parentNode, isNestedDropTarget]);
+    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, isNestedDropTarget && nestedDropIndicatorStyle]
+      css: [styleDropTarget, dropTargetOffsetStyle, isNestedDropTarget && nestedDropIndicatorStyle]
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       ,
       style: widthStyle,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "1.11.1",
+	"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.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",