@atlaskit/editor-plugin-block-controls 1.12.8 → 1.12.10

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.12.10
+
+### Patch Changes
+
+- [#136410](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/136410)
+  [`52083ca79b5dc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/52083ca79b5dc) -
+  [ux] ED-24603 Disable dragging nested nodes within table behind FF
+
+## 1.12.9
+
+### Patch Changes
+
+- [#136177](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/136177)
+  [`557c5bcfce83c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/557c5bcfce83c) -
+  [ux] Adjust margin of drop targets in nested scenarios
+- [#136348](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/136348)
+  [`fb4fb56f1da7c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fb4fb56f1da7c) -
+  Use optimised entry-points on editor-common for browser.
+- Updated dependencies
+
 ## 1.12.8
 
 ### Patch Changes

package/dist/cjs/pm-plugins/handle-mouse-over.js

@@ -22,7 +22,14 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
   }
   var rootElement = target === null || target === void 0 ? void 0 : target.closest('[data-drag-handler-anchor-name]');
   if (rootElement) {
+    var tableElement = rootElement.closest('[data-drag-handler-node-type="table"]');
+    if (tableElement && (0, _experiments.editorExperiment)('nested-dnd', true) && (0, _experiments.editorExperiment)('table-nested-dnd', false, {
+      exposure: true
+    })) {
+      rootElement = tableElement;
+    }
     var anchorName = rootElement.getAttribute('data-drag-handler-anchor-name');
+    var nodeType = rootElement.getAttribute('data-drag-handler-node-type');
     if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) === anchorName) {
       return false;
     }
@@ -39,6 +46,7 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
       var depth = $rootPos.depth;
       var isParentAnIsolatingNode = ((_$rootPos$parent = $rootPos.parent) === null || _$rootPos$parent === void 0 ? void 0 : _$rootPos$parent.type.name) !== 'doc' && ((_$rootPos$parent2 = $rootPos.parent) === null || _$rootPos$parent2 === void 0 ? void 0 : _$rootPos$parent2.type.spec.isolating);
       var isCurrentNodeAtom = (_$rootPos$nodeAfter = $rootPos.nodeAfter) === null || _$rootPos$nodeAfter === void 0 ? void 0 : _$rootPos$nodeAfter.isAtom;
+
       /**
        * If the parent node is an isolating node, the sides of nodes of this type are considered boundaries, such as a table cell.
        * And the current node, as a direct child, is an atom node, meaning it does not have directly editable content.
@@ -51,7 +59,6 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
     } else {
       rootPos = view.state.doc.resolve(pos).start(1) - 1;
     }
-    var nodeType = rootElement.getAttribute('data-drag-handler-node-type');
     if (nodeType) {
       var _api$core, _api$blockControls2;
       api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.showDragHandleAt(rootPos, anchorName, nodeType));

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

@@ -8,8 +8,8 @@ exports.key = exports.createPlugin = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _browser = require("@atlaskit/editor-common/browser");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
-var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -391,7 +391,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
             selection = _view$state.selection,
             doc = _view$state.doc,
             tr = _view$state.tr;
-          var metaKey = _utils.browser.mac ? event.metaKey : event.ctrlKey;
+          var metaKey = _browser.browser.mac ? event.metaKey : event.ctrlKey;
           if (event.key === 'ArrowUp' && event.shiftKey && metaKey) {
             if (selection instanceof _state.TextSelection || selection instanceof _state.NodeSelection) {
               var newSelection = _state.TextSelection.create(doc, selection.head, 1);

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.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.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;
@@ -28,6 +28,25 @@ var dragHandleGap = exports.dragHandleGap = function dragHandleGap(nodeType, par
   }
   return DRAG_HANDLE_DEFAULT_GAP;
 };
+var getNestedNodeLeftPaddingMargin = exports.getNestedNodeLeftPaddingMargin = function getNestedNodeLeftPaddingMargin(nodeType) {
+  switch (nodeType) {
+    case 'bodiedExtension':
+      return '28px';
+    case 'expand':
+    case 'nestedExpand':
+      return '24px';
+    case 'layoutColumn':
+      return '20px';
+    case 'panel':
+      return '44px';
+    case 'tableCell':
+      return '8px';
+    case 'tableHeader':
+      return '8px';
+    default:
+      return "".concat(DRAG_HANDLE_WIDTH + DRAG_HANDLE_NARROW_GAP, "px");
+  }
+};
 var topPositionAdjustment = exports.topPositionAdjustment = function topPositionAdjustment(nodeType) {
   switch (nodeType) {
     case 'rule':

package/dist/cjs/ui/drag-preview.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.dragPreview = void 0;
-var _utils = require("@atlaskit/editor-common/utils");
+var _browser = require("@atlaskit/editor-common/browser");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var previewStyle = {
@@ -50,7 +50,7 @@ var dragPreview = exports.dragPreview = function dragPreview(container, dom, nod
     clonedDom.style.marginRight = '0';
     clonedDom.style.marginBottom = '0';
     clonedDom.style.boxShadow = 'none';
-    clonedDom.style.opacity = _utils.browser.windows ? '1' : (0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_23189') ? '0.31' : '0.4';
+    clonedDom.style.opacity = _browser.browser.windows ? '1' : (0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_23189') ? '0.31' : '0.4';
     parent.appendChild(clonedDom);
   }
   container.appendChild(parent);

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

@@ -24,11 +24,13 @@ var _consts = require("./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_INDICATOR_LEFT_MARGIN = '--editor-block-controls-drop-indicator-leftMargin';
 var styleDropTarget = (0, _react2.css)({
   height: "var(--ds-space-100, 8px)",
   marginTop: "var(--ds-space-negative-100, -8px)",
+  marginLeft: "calc(-1 * var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_LEFT_MARGIN, ", 0))"),
+  paddingLeft: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_LEFT_MARGIN, ", 0)"),
   position: 'absolute',
-  width: '100%',
   left: '0',
   display: 'block',
   zIndex: _constants.layers.card()
@@ -76,6 +78,7 @@ var getDropTargetOffsetStyle = function getDropTargetOffsetStyle(prevNode, nextN
   return marginLookupMap[offset];
 };
 var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
+  var _widthStyle;
   var api = _ref3.api,
     id = _ref3.id,
     prevNode = _ref3.prevNode,
@@ -136,7 +139,9 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
     }
     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"));
+  var widthStyle = (_widthStyle = {
+    width: isNestedDropTarget ? 'unset' : '100%'
+  }, (0, _defineProperty2.default)(_widthStyle, 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)(_widthStyle, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_LEFT_MARGIN, isNestedDropTarget ? (0, _consts.getNestedNodeLeftPaddingMargin)(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0'), _widthStyle);
   return (
     // Note: Firefox has trouble with using a button element as the handle for drag and drop
     (0, _react2.jsx)("div", {

package/dist/es2019/pm-plugins/handle-mouse-over.js

@@ -15,9 +15,16 @@ export const handleMouseOver = (view, event, api) => {
   if (target.classList.contains('ProseMirror')) {
     return false;
   }
-  const rootElement = target === null || target === void 0 ? void 0 : target.closest('[data-drag-handler-anchor-name]');
+  let rootElement = target === null || target === void 0 ? void 0 : target.closest('[data-drag-handler-anchor-name]');
   if (rootElement) {
+    const tableElement = rootElement.closest('[data-drag-handler-node-type="table"]');
+    if (tableElement && editorExperiment('nested-dnd', true) && editorExperiment('table-nested-dnd', false, {
+      exposure: true
+    })) {
+      rootElement = tableElement;
+    }
     const anchorName = rootElement.getAttribute('data-drag-handler-anchor-name');
+    const nodeType = rootElement.getAttribute('data-drag-handler-node-type');
     if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) === anchorName) {
       return false;
     }
@@ -34,6 +41,7 @@ export const handleMouseOver = (view, event, api) => {
       const depth = $rootPos.depth;
       const isParentAnIsolatingNode = ((_$rootPos$parent = $rootPos.parent) === null || _$rootPos$parent === void 0 ? void 0 : _$rootPos$parent.type.name) !== 'doc' && ((_$rootPos$parent2 = $rootPos.parent) === null || _$rootPos$parent2 === void 0 ? void 0 : _$rootPos$parent2.type.spec.isolating);
       const isCurrentNodeAtom = (_$rootPos$nodeAfter = $rootPos.nodeAfter) === null || _$rootPos$nodeAfter === void 0 ? void 0 : _$rootPos$nodeAfter.isAtom;
+
       /**
        * If the parent node is an isolating node, the sides of nodes of this type are considered boundaries, such as a table cell.
        * And the current node, as a direct child, is an atom node, meaning it does not have directly editable content.
@@ -46,7 +54,6 @@ export const handleMouseOver = (view, event, api) => {
     } else {
       rootPos = view.state.doc.resolve(pos).start(1) - 1;
     }
-    const nodeType = rootElement.getAttribute('data-drag-handler-node-type');
     if (nodeType) {
       var _api$core, _api$blockControls2;
       api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.showDragHandleAt(rootPos, anchorName, nodeType));

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

@@ -1,7 +1,7 @@
 import rafSchedule from 'raf-schd';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { browser } from '@atlaskit/editor-common/browser';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { browser } from '@atlaskit/editor-common/utils';
 import { NodeSelection, PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';

package/dist/es2019/ui/consts.js

@@ -19,6 +19,25 @@ export const dragHandleGap = (nodeType, parentNodeType) => {
   }
   return DRAG_HANDLE_DEFAULT_GAP;
 };
+export const getNestedNodeLeftPaddingMargin = nodeType => {
+  switch (nodeType) {
+    case 'bodiedExtension':
+      return '28px';
+    case 'expand':
+    case 'nestedExpand':
+      return '24px';
+    case 'layoutColumn':
+      return '20px';
+    case 'panel':
+      return '44px';
+    case 'tableCell':
+      return '8px';
+    case 'tableHeader':
+      return '8px';
+    default:
+      return `${DRAG_HANDLE_WIDTH + DRAG_HANDLE_NARROW_GAP}px`;
+  }
+};
 export const topPositionAdjustment = nodeType => {
   switch (nodeType) {
     case 'rule':

package/dist/es2019/ui/drag-preview.js

@@ -1,4 +1,4 @@
-import { browser } from '@atlaskit/editor-common/utils';
+import { browser } from '@atlaskit/editor-common/browser';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { B200, N20, N30 } from '@atlaskit/theme/colors';
 const previewStyle = {

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

@@ -11,14 +11,16 @@ import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indi
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { layers } from '@atlaskit/theme/constants';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
-import { nodeMargins, spaceLookupMap } from './consts';
+import { 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_INDICATOR_LEFT_MARGIN = '--editor-block-controls-drop-indicator-leftMargin';
 const styleDropTarget = css({
   height: "var(--ds-space-100, 8px)",
   marginTop: "var(--ds-space-negative-100, -8px)",
+  marginLeft: `calc(-1 * var(${EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_LEFT_MARGIN}, 0))`,
+  paddingLeft: `var(${EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_LEFT_MARGIN}, 0)`,
   position: 'absolute',
-  width: '100%',
   left: '0',
   display: 'block',
   zIndex: layers.card()
@@ -121,7 +123,9 @@ export const DropTarget = ({
     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`
+    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`,
+    [EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_LEFT_MARGIN]: isNestedDropTarget ? getNestedNodeLeftPaddingMargin(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0'
   };
   return (
     // Note: Firefox has trouble with using a button element as the handle for drag and drop

package/dist/esm/pm-plugins/handle-mouse-over.js

@@ -16,7 +16,14 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
   }
   var rootElement = target === null || target === void 0 ? void 0 : target.closest('[data-drag-handler-anchor-name]');
   if (rootElement) {
+    var tableElement = rootElement.closest('[data-drag-handler-node-type="table"]');
+    if (tableElement && editorExperiment('nested-dnd', true) && editorExperiment('table-nested-dnd', false, {
+      exposure: true
+    })) {
+      rootElement = tableElement;
+    }
     var anchorName = rootElement.getAttribute('data-drag-handler-anchor-name');
+    var nodeType = rootElement.getAttribute('data-drag-handler-node-type');
     if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) === anchorName) {
       return false;
     }
@@ -33,6 +40,7 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
       var depth = $rootPos.depth;
       var isParentAnIsolatingNode = ((_$rootPos$parent = $rootPos.parent) === null || _$rootPos$parent === void 0 ? void 0 : _$rootPos$parent.type.name) !== 'doc' && ((_$rootPos$parent2 = $rootPos.parent) === null || _$rootPos$parent2 === void 0 ? void 0 : _$rootPos$parent2.type.spec.isolating);
       var isCurrentNodeAtom = (_$rootPos$nodeAfter = $rootPos.nodeAfter) === null || _$rootPos$nodeAfter === void 0 ? void 0 : _$rootPos$nodeAfter.isAtom;
+
       /**
        * If the parent node is an isolating node, the sides of nodes of this type are considered boundaries, such as a table cell.
        * And the current node, as a direct child, is an atom node, meaning it does not have directly editable content.
@@ -45,7 +53,6 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
     } else {
       rootPos = view.state.doc.resolve(pos).start(1) - 1;
     }
-    var nodeType = rootElement.getAttribute('data-drag-handler-node-type');
     if (nodeType) {
       var _api$core, _api$blockControls2;
       api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.showDragHandleAt(rootPos, anchorName, nodeType));

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

@@ -1,8 +1,8 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import rafSchedule from 'raf-schd';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { browser } from '@atlaskit/editor-common/browser';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { browser } from '@atlaskit/editor-common/utils';
 import { NodeSelection, PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';

package/dist/esm/ui/consts.js

@@ -21,6 +21,25 @@ export var dragHandleGap = function dragHandleGap(nodeType, parentNodeType) {
   }
   return DRAG_HANDLE_DEFAULT_GAP;
 };
+export var getNestedNodeLeftPaddingMargin = function getNestedNodeLeftPaddingMargin(nodeType) {
+  switch (nodeType) {
+    case 'bodiedExtension':
+      return '28px';
+    case 'expand':
+    case 'nestedExpand':
+      return '24px';
+    case 'layoutColumn':
+      return '20px';
+    case 'panel':
+      return '44px';
+    case 'tableCell':
+      return '8px';
+    case 'tableHeader':
+      return '8px';
+    default:
+      return "".concat(DRAG_HANDLE_WIDTH + DRAG_HANDLE_NARROW_GAP, "px");
+  }
+};
 export var topPositionAdjustment = function topPositionAdjustment(nodeType) {
   switch (nodeType) {
     case 'rule':

package/dist/esm/ui/drag-preview.js

@@ -1,4 +1,4 @@
-import { browser } from '@atlaskit/editor-common/utils';
+import { browser } from '@atlaskit/editor-common/browser';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { B200, N20, N30 } from '@atlaskit/theme/colors';
 var previewStyle = {

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

@@ -13,14 +13,16 @@ import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indi
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { layers } from '@atlaskit/theme/constants';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
-import { nodeMargins, spaceLookupMap } from './consts';
+import { 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_INDICATOR_LEFT_MARGIN = '--editor-block-controls-drop-indicator-leftMargin';
 var styleDropTarget = css({
   height: "var(--ds-space-100, 8px)",
   marginTop: "var(--ds-space-negative-100, -8px)",
+  marginLeft: "calc(-1 * var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_LEFT_MARGIN, ", 0))"),
+  paddingLeft: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_LEFT_MARGIN, ", 0)"),
   position: 'absolute',
-  width: '100%',
   left: '0',
   display: 'block',
   zIndex: layers.card()
@@ -68,6 +70,7 @@ var getDropTargetOffsetStyle = function getDropTargetOffsetStyle(prevNode, nextN
   return marginLookupMap[offset];
 };
 export var DropTarget = function DropTarget(_ref3) {
+  var _widthStyle;
   var api = _ref3.api,
     id = _ref3.id,
     prevNode = _ref3.prevNode,
@@ -128,7 +131,9 @@ export var DropTarget = function DropTarget(_ref3) {
     }
     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"));
+  var widthStyle = (_widthStyle = {
+    width: isNestedDropTarget ? 'unset' : '100%'
+  }, _defineProperty(_widthStyle, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat((widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH, "px")), _defineProperty(_widthStyle, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_LEFT_MARGIN, isNestedDropTarget ? getNestedNodeLeftPaddingMargin(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0'), _widthStyle);
   return (
     // Note: Firefox has trouble with using a button element as the handle for drag and drop
     jsx("div", {

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

@@ -8,6 +8,7 @@ export declare const DRAG_HANDLE_MAX_GAP = 12;
 export declare const DRAG_HANDLE_MAX_WIDTH_PLUS_GAP: number;
 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" | "44px";
 export declare const topPositionAdjustment: (nodeType: string) => number;
 /**
  * This document serves as a quick reference map for correlating various space matches

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

@@ -8,6 +8,7 @@ export declare const DRAG_HANDLE_MAX_GAP = 12;
 export declare const DRAG_HANDLE_MAX_WIDTH_PLUS_GAP: number;
 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" | "44px";
 export declare const topPositionAdjustment: (nodeType: string) => number;
 /**
  * This document serves as a quick reference map for correlating various space matches

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "1.12.8",
+	"version": "1.12.10",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,7 +29,7 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/editor-common": "^88.6.0",
+		"@atlaskit/editor-common": "^88.8.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
@@ -44,7 +44,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.0.0",
+		"@atlaskit/tmp-editor-statsig": "^2.1.0",
 		"@atlaskit/tokens": "^1.59.0",
 		"@atlaskit/tooltip": "^18.7.0",
 		"@babel/runtime": "^7.0.0",