@atlaskit/editor-plugin-block-controls 1.9.1 → 1.10.0

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

@@ -146,13 +146,21 @@ export const createPlugin = (api, getIntl) => {
           const decsLength = decorations.find().filter(({
             spec
           }) => spec.id !== 'drag-handle').length;
-          isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newState.doc.childCount;
+
+          //TODO: Fix this logic for nested scenarios
+          if (!fg('platform_editor_elements_dnd_nested')) {
+            isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newState.doc.childCount;
+          }
         }
         if (fg('platform_editor_element_drag_and_drop_ed_24372')) {
           const dropTargetLen = decorations.find().filter(({
             spec
           }) => spec.type === 'drop-target-decoration').length;
-          isDropTargetsMissing = isDragging && dropTargetLen !== newState.doc.childCount + 1;
+
+          //TODO: Fix this logic for nested scenarios
+          if (!fg('platform_editor_elements_dnd_nested')) {
+            isDropTargetsMissing = isDragging && (meta === null || meta === void 0 ? void 0 : meta.isDragging) !== false && dropTargetLen !== newState.doc.childCount + 1;
+          }
         }
 
         // This is not targeted enough - it's trying to catch events like expand being set to breakout
@@ -239,7 +247,7 @@ export const createPlugin = (api, getIntl) => {
         const shouldUpdateDropTargets = (meta === null || meta === void 0 ? void 0 : meta.isDragging) || isDropTargetsMissing;
         let shouldMapDropTargets = false;
         if (fg('platform_editor_element_drag_and_drop_ed_24372')) {
-          shouldMapDropTargets = !shouldUpdateDropTargets && tr.docChanged && isDragging;
+          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(({
@@ -260,14 +268,14 @@ export const createPlugin = (api, getIntl) => {
             }
           }
 
-          // Map drop target decoration positions when the document changes
+          //Map drop target decoration positions when the document changes
           if (shouldMapDropTargets) {
             decorationState = decorationState.map(({
-              index,
+              id,
               pos
             }) => {
               return {
-                index,
+                id,
                 pos: tr.mapping.map(pos)
               };
             });
@@ -298,11 +306,11 @@ export const createPlugin = (api, getIntl) => {
           // Map drop target decoration positions when the document changes
           if (tr.docChanged && isDragging) {
             decorationState = decorationState.map(({
-              index,
+              id,
               pos
             }) => {
               return {
-                index,
+                id,
                 pos: tr.mapping.map(pos)
               };
             });

package/dist/es2019/ui/consts.js

@@ -3,15 +3,17 @@ export const DRAG_HANDLE_HEIGHT = 24;
 export const DRAG_HANDLE_WIDTH = 12;
 export const DRAG_HANDLE_BORDER_RADIUS = 4;
 export const DRAG_HANDLE_ZINDEX = akRichMediaResizeZIndex + akEditorUnitZIndex; //place above legacy resizer
-
+export const DRAG_HANDLE_DEFAULT_GAP = 8;
+export const DRAG_HANDLE_MAX_GAP = 12;
+export const DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = DRAG_HANDLE_WIDTH + DRAG_HANDLE_MAX_GAP;
 export const DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = 4 + 2; // 4px for the divider vertical padding and 2px for the divider height
 
 const nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
 export const dragHandleGap = nodeType => {
   if (nodeTypeExcludeList.includes(nodeType)) {
-    return 12;
+    return DRAG_HANDLE_MAX_GAP;
   }
-  return 8;
+  return DRAG_HANDLE_DEFAULT_GAP;
 };
 export const topPositionAdjustment = nodeType => {
   switch (nodeType) {

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

@@ -63,7 +63,7 @@ const styleDropIndicator = css({
 });
 export const DropTarget = ({
   api,
-  index,
+  id,
   prevNode,
   nextNode
 }) => {
@@ -98,7 +98,7 @@ export const DropTarget = ({
         }
         const {
           pos
-        } = decorationState.find(dec => dec.index === index) || {};
+        } = decorationState.find(dec => dec.id === id) || {};
         if (activeNode && pos !== undefined) {
           var _api$core, _api$blockControls2, _api$blockControls2$c;
           const {
@@ -108,7 +108,7 @@ export const DropTarget = ({
         }
       }
     });
-  }, [index, api]);
+  }, [id, api]);
   const topTargetMarginStyle = useMemo(() => {
     return getDropTargetPositionStyle(prevNode, nextNode);
   }, [prevNode, nextNode]);

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

@@ -5,6 +5,7 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
 const extendedHoverZone = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
@@ -31,11 +32,55 @@ const extendedHoverZone = css({
   'hr[data-drag-handler-anchor-name]': {
     overflow: 'visible'
   },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '[data-blocks-drag-handle-container="true"] + *::after': {
     display: 'none'
   }
 });
+const extendedHoverZoneNested = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+    display: 'none !important'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&& [data-drag-handler-anchor-name]::after': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      left: `-${DRAG_HANDLE_MAX_WIDTH_PLUS_GAP}px`,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      width: `${DRAG_HANDLE_MAX_WIDTH_PLUS_GAP}px`,
+      height: '100%',
+      cursor: 'default',
+      zIndex: 1
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&& [data-drag-handler-anchor-depth="0"][data-drag-handler-anchor-name]::after': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      left: '-100%',
+      width: '100%',
+      height: '100%',
+      cursor: 'default',
+      zIndex: -1
+    }
+  },
+  // TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'hr[data-drag-handler-anchor-name]': {
+    overflow: 'visible'
+  },
+  //Hide psudeo element at top depth level. Leave for nested depths to prevent mouseover loop.
+  //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-blocks-drag-handle-container="true"] + [data-drag-handler-anchor-depth="0"]::after': {
+    display: 'none'
+  }
+});
 const paragraphWithTrailingBreak = '+ p > .ProseMirror-trailingBreak';
 const paragraphWithCursorTarget = '+ p > .cursor-target';
 const paragraphWithTrailingBreakAsOnlyChild = '+ p > .ProseMirror-trailingBreak:only-child';
@@ -118,6 +163,6 @@ const getTextNodeStyle = () => {
 };
 export const GlobalStylesWrapper = () => {
   return jsx(Global, {
-    styles: [globalStyles, fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') && extendedHoverZone, getTextNodeStyle(), fg('platform.editor.elements.drag-and-drop-ed-23932') && withDeleteLinesStyleFix, fg('platform_editor_element_drag_and_drop_ed_24005') && withMediaSingleStyleFix]
+    styles: [globalStyles, fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? fg('platform_editor_elements_dnd_nested') ? extendedHoverZoneNested : extendedHoverZone : false, getTextNodeStyle(), fg('platform.editor.elements.drag-and-drop-ed-23932') && withDeleteLinesStyleFix, fg('platform_editor_element_drag_and_drop_ed_24005') && withMediaSingleStyleFix]
   });
 };

package/dist/esm/commands/move-node.js

@@ -3,11 +3,19 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { GapCursorSelection } from '@atlaskit/editor-common/selection';
+import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
 import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { DIRECTION } from '../consts';
 import { key } from '../pm-plugins/main';
 import { selectNode } from '../utils';
+function transformNested(nodeCopy, destType) {
+  var firstChild = nodeCopy.content.firstChild;
+  if (firstChild && firstChild.type.name === 'nestedExpand' && destType === 'doc') {
+    return transformSliceNestedExpandToExpand(nodeCopy, firstChild.type.schema);
+  }
+  return nodeCopy;
+}
 
 /**
  *
@@ -99,10 +107,20 @@ export var moveNode = function moveNode(api) {
       }
       var size = (_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 1;
       var end = start + size;
-      var nodeCopy = tr.doc.content.cut(start, end); // cut the content
-      tr.delete(start, end); // delete the content from the original position
-      var mappedTo = tr.mapping.map(to);
-      tr.insert(mappedTo, nodeCopy); // insert the content at the new position
+      var mappedTo;
+      if (fg('platform_editor_elements_dnd_nested')) {
+        var nodeCopy = tr.doc.slice(start, end, false); // cut the content
+        var destType = tr.doc.resolve(to).node().type.name;
+        var convertedNode = transformNested(nodeCopy, destType).content;
+        tr.delete(start, end); // delete the content from the original position
+        mappedTo = tr.mapping.map(to);
+        tr.insert(mappedTo, convertedNode); // insert the content at the new position
+      } else {
+        var _nodeCopy = tr.doc.content.cut(start, end); // cut the content
+        tr.delete(start, end); // delete the content from the original position
+        mappedTo = tr.mapping.map(to);
+        tr.insert(mappedTo, _nodeCopy); // insert the content at the new position
+      }
       tr = selectNode(tr, mappedTo, node.type.name);
       tr.setMeta(key, {
         nodeMoved: true

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

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { createElement } from 'react';
+import { bind } from 'bind-event-listener';
 import ReactDOM from 'react-dom';
 import { RawIntlProvider } from 'react-intl-next';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
@@ -7,6 +8,8 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { DragHandle } from '../ui/drag-handle';
 import { DropTarget } from '../ui/drop-target';
 import { MouseMoveWrapper } from '../ui/mouse-move-wrapper';
+var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn'];
+var NESTED_DEPTH = fg('platform_editor_elements_dnd_nested') ? 100 : 0;
 export var dropTargetDecorations = function dropTargetDecorations(oldState, newState, api) {
   var decs = [];
   unmountDecorations('data-blocks-drop-target-container');
@@ -16,13 +19,28 @@ export var dropTargetDecorations = function dropTargetDecorations(oldState, newS
   var prevNode;
   var state = fg('platform_editor_element_drag_and_drop_ed_24372') ? newState : oldState;
   state.doc.nodesBetween(0, newState.doc.nodeSize - 2, function (node, pos, _parent, index) {
-    decorationState.push({
-      index: index,
-      pos: pos
-    });
+    var depth = 0;
+    if (fg('platform_editor_elements_dnd_nested')) {
+      depth = newState.doc.resolve(pos).depth;
+      if (node.isInline) {
+        return false;
+      }
+      if (IGNORE_NODES.includes(node.type.name)) {
+        return true; //skip over, don't consider it a valid depth
+      }
+      decorationState.push({
+        id: pos,
+        pos: pos
+      });
+    } else {
+      decorationState.push({
+        id: index,
+        pos: pos
+      });
+    }
     var dropTargetDec = /*#__PURE__*/createElement(DropTarget, {
       api: api,
-      index: index,
+      id: fg('platform_editor_elements_dnd_nested') ? pos : index,
       prevNode: prevNode,
       nextNode: node
     });
@@ -37,7 +55,7 @@ export var dropTargetDecorations = function dropTargetDecorations(oldState, newS
       side: -1
     }));
     prevNode = node;
-    return false;
+    return depth < NESTED_DEPTH;
   });
 
   /**
@@ -47,16 +65,25 @@ export var dropTargetDecorations = function dropTargetDecorations(oldState, newS
    * node and not its size.
    *
    */
-  decorationState.push({
-    index: decorationState.length + 1,
-    pos: newState.doc.nodeSize - 2
-  });
+
+  var lastPos = newState.doc.content.size;
+  if (fg('platform_editor_elements_dnd_nested')) {
+    decorationState.push({
+      id: lastPos,
+      pos: lastPos
+    });
+  } else {
+    decorationState.push({
+      id: decorationState.length + 1,
+      pos: newState.doc.nodeSize - 2
+    });
+  }
   decs.push(Decoration.widget(newState.doc.nodeSize - 2, function () {
     var element = document.createElement('div');
     element.setAttribute('data-blocks-drop-target-container', 'true');
     ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
       api: api,
-      index: decorationState.length
+      id: fg('platform_editor_elements_dnd_nested') ? lastPos : decorationState.length
     }), element);
     return element;
   }, {
@@ -80,7 +107,20 @@ export var nodeDecorations = function nodeDecorations(newState) {
   var decs = [];
   newState.doc.descendants(function (node, pos, _parent, index) {
     var _Decoration$node2;
-    var anchorName = "--node-anchor-".concat(node.type.name, "-").concat(index);
+    var depth = 0;
+    var anchorName;
+    if (fg('platform_editor_elements_dnd_nested')) {
+      if (node.isInline) {
+        return false;
+      }
+      if (IGNORE_NODES.includes(node.type.name)) {
+        return true; //skip over, don't consider it a valid depth
+      }
+      depth = newState.doc.resolve(pos).depth;
+      anchorName = "--node-anchor-".concat(node.type.name, "-").concat(pos);
+    } else {
+      anchorName = "--node-anchor-".concat(node.type.name, "-").concat(index);
+    }
     var style;
     if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
       style = "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '', "; position: relative; z-index: 1;");
@@ -89,10 +129,10 @@ export var nodeDecorations = function nodeDecorations(newState) {
     }
     decs.push(Decoration.node(pos, pos + node.nodeSize, (_Decoration$node2 = {
       style: style
-    }, _defineProperty(_Decoration$node2, 'data-drag-handler-anchor-name', anchorName), _defineProperty(_Decoration$node2, 'data-drag-handler-node-type', node.type.name), _Decoration$node2), {
+    }, _defineProperty(_Decoration$node2, 'data-drag-handler-anchor-name', anchorName), _defineProperty(_Decoration$node2, 'data-drag-handler-node-type', node.type.name), _defineProperty(_Decoration$node2, 'data-drag-handler-anchor-depth', "".concat(depth)), _Decoration$node2), {
       type: 'node-decoration'
     }));
-    return false;
+    return depth < NESTED_DEPTH;
   });
   return decs;
 };
@@ -136,6 +176,7 @@ export var mouseMoveWrapperDecorations = function mouseMoveWrapperDecorations(ne
   return decs;
 };
 export var dragHandleDecoration = function dragHandleDecoration(api, getIntl, pos, anchorName, nodeType, handleOptions) {
+  var unbind;
   var elementType = fg('platform_editor_element_drag_and_drop_ed_24150') ? 'span' : 'div';
   return Decoration.widget(pos, function (view, getPos) {
     var element = document.createElement(elementType);
@@ -143,6 +184,14 @@ export var dragHandleDecoration = function dragHandleDecoration(api, getIntl, po
     element.style.display = 'inline';
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     element.setAttribute('data-blocks-drag-handle-container', 'true');
+    if (fg('platform_editor_elements_dnd_nested')) {
+      unbind = bind(element, {
+        type: 'mouseover',
+        listener: function listener(e) {
+          e.stopPropagation();
+        }
+      });
+    }
     if (fg('platform_editor_element_drag_and_drop_ed_23896')) {
       unmountDecorations('data-blocks-drag-handle-container');
     }
@@ -166,6 +215,9 @@ export var dragHandleDecoration = function dragHandleDecoration(api, getIntl, po
     side: -1,
     id: 'drag-handle',
     destroy: function destroy(node) {
+      if (fg('platform_editor_elements_dnd_nested')) {
+        unbind && unbind();
+      }
       if (!fg('platform_editor_element_drag_and_drop_ed_23896')) {
         ReactDOM.unmountComponentAtNode(node);
       }

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

@@ -23,7 +23,14 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
       return false;
     }
     var pos = view.posAtDOM(rootElement, 0, 0);
-    var rootPos = view.state.doc.resolve(pos).start(1) - 1;
+    var rootPos;
+    if (fg('platform_editor_elements_dnd_nested')) {
+      var $rootPos = view.state.doc.resolve(pos);
+      var depth = $rootPos.depth;
+      rootPos = depth ? $rootPos.before() : $rootPos.pos;
+    } 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;

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

@@ -148,14 +148,22 @@ export var createPlugin = function createPlugin(api, getIntl) {
             var spec = _ref7.spec;
             return spec.id !== 'drag-handle';
           }).length;
-          isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newState.doc.childCount;
+
+          //TODO: Fix this logic for nested scenarios
+          if (!fg('platform_editor_elements_dnd_nested')) {
+            isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newState.doc.childCount;
+          }
         }
         if (fg('platform_editor_element_drag_and_drop_ed_24372')) {
           var dropTargetLen = decorations.find().filter(function (_ref8) {
             var spec = _ref8.spec;
             return spec.type === 'drop-target-decoration';
           }).length;
-          isDropTargetsMissing = isDragging && dropTargetLen !== newState.doc.childCount + 1;
+
+          //TODO: Fix this logic for nested scenarios
+          if (!fg('platform_editor_elements_dnd_nested')) {
+            isDropTargetsMissing = isDragging && (meta === null || meta === void 0 ? void 0 : meta.isDragging) !== false && dropTargetLen !== newState.doc.childCount + 1;
+          }
         }
 
         // This is not targeted enough - it's trying to catch events like expand being set to breakout
@@ -245,7 +253,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
         var shouldUpdateDropTargets = (meta === null || meta === void 0 ? void 0 : meta.isDragging) || isDropTargetsMissing;
         var shouldMapDropTargets = false;
         if (fg('platform_editor_element_drag_and_drop_ed_24372')) {
-          shouldMapDropTargets = !shouldUpdateDropTargets && tr.docChanged && isDragging;
+          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) {
@@ -266,13 +274,13 @@ export var createPlugin = function createPlugin(api, getIntl) {
             }
           }
 
-          // Map drop target decoration positions when the document changes
+          //Map drop target decoration positions when the document changes
           if (shouldMapDropTargets) {
             decorationState = decorationState.map(function (_ref13) {
-              var index = _ref13.index,
+              var id = _ref13.id,
                 pos = _ref13.pos;
               return {
-                index: index,
+                id: id,
                 pos: tr.mapping.map(pos)
               };
             });
@@ -303,10 +311,10 @@ export var createPlugin = function createPlugin(api, getIntl) {
           // Map drop target decoration positions when the document changes
           if (tr.docChanged && isDragging) {
             decorationState = decorationState.map(function (_ref15) {
-              var index = _ref15.index,
+              var id = _ref15.id,
                 pos = _ref15.pos;
               return {
-                index: index,
+                id: id,
                 pos: tr.mapping.map(pos)
               };
             });

package/dist/esm/ui/consts.js

@@ -5,15 +5,17 @@ export var DRAG_HANDLE_HEIGHT = 24;
 export var DRAG_HANDLE_WIDTH = 12;
 export var DRAG_HANDLE_BORDER_RADIUS = 4;
 export var DRAG_HANDLE_ZINDEX = akRichMediaResizeZIndex + akEditorUnitZIndex; //place above legacy resizer
-
+export var DRAG_HANDLE_DEFAULT_GAP = 8;
+export var DRAG_HANDLE_MAX_GAP = 12;
+export var DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = DRAG_HANDLE_WIDTH + DRAG_HANDLE_MAX_GAP;
 export var DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = 4 + 2; // 4px for the divider vertical padding and 2px for the divider height
 
 var nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
 export var dragHandleGap = function dragHandleGap(nodeType) {
   if (nodeTypeExcludeList.includes(nodeType)) {
-    return 12;
+    return DRAG_HANDLE_MAX_GAP;
   }
-  return 8;
+  return DRAG_HANDLE_DEFAULT_GAP;
 };
 export var topPositionAdjustment = function topPositionAdjustment(nodeType) {
   switch (nodeType) {

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

@@ -69,7 +69,7 @@ var styleDropIndicator = css({
 });
 export var DropTarget = function DropTarget(_ref3) {
   var api = _ref3.api,
-    index = _ref3.index,
+    id = _ref3.id,
     prevNode = _ref3.prevNode,
     nextNode = _ref3.nextNode;
   var ref = useRef(null);
@@ -105,7 +105,7 @@ export var DropTarget = function DropTarget(_ref3) {
           return;
         }
         var _ref5 = decorationState.find(function (dec) {
-            return dec.index === index;
+            return dec.id === id;
           }) || {},
           pos = _ref5.pos;
         if (activeNode && pos !== undefined) {
@@ -115,7 +115,7 @@ export var DropTarget = function DropTarget(_ref3) {
         }
       }
     });
-  }, [index, api]);
+  }, [id, api]);
   var topTargetMarginStyle = useMemo(function () {
     return getDropTargetPositionStyle(prevNode, nextNode);
   }, [prevNode, nextNode]);

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

@@ -6,6 +6,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
 var extendedHoverZone = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
@@ -32,11 +33,55 @@ var extendedHoverZone = css({
   'hr[data-drag-handler-anchor-name]': {
     overflow: 'visible'
   },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '[data-blocks-drag-handle-container="true"] + *::after': {
     display: 'none'
   }
 });
+var extendedHoverZoneNested = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+    display: 'none !important'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&& [data-drag-handler-anchor-name]::after': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      left: "-".concat(DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      width: "".concat(DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
+      height: '100%',
+      cursor: 'default',
+      zIndex: 1
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&& [data-drag-handler-anchor-depth="0"][data-drag-handler-anchor-name]::after': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      left: '-100%',
+      width: '100%',
+      height: '100%',
+      cursor: 'default',
+      zIndex: -1
+    }
+  },
+  // TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'hr[data-drag-handler-anchor-name]': {
+    overflow: 'visible'
+  },
+  //Hide psudeo element at top depth level. Leave for nested depths to prevent mouseover loop.
+  //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-blocks-drag-handle-container="true"] + [data-drag-handler-anchor-depth="0"]::after': {
+    display: 'none'
+  }
+});
 var paragraphWithTrailingBreak = '+ p > .ProseMirror-trailingBreak';
 var paragraphWithCursorTarget = '+ p > .cursor-target';
 var paragraphWithTrailingBreakAsOnlyChild = '+ p > .ProseMirror-trailingBreak:only-child';
@@ -96,6 +141,6 @@ var getTextNodeStyle = function getTextNodeStyle() {
 };
 export var GlobalStylesWrapper = function GlobalStylesWrapper() {
   return jsx(Global, {
-    styles: [globalStyles, fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') && extendedHoverZone, getTextNodeStyle(), fg('platform.editor.elements.drag-and-drop-ed-23932') && withDeleteLinesStyleFix, fg('platform_editor_element_drag_and_drop_ed_24005') && withMediaSingleStyleFix]
+    styles: [globalStyles, fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? fg('platform_editor_elements_dnd_nested') ? extendedHoverZoneNested : extendedHoverZone : false, getTextNodeStyle(), fg('platform.editor.elements.drag-and-drop-ed-23932') && withDeleteLinesStyleFix, fg('platform_editor_element_drag_and_drop_ed_24005') && withMediaSingleStyleFix]
   });
 };

package/dist/types/pm-plugins/decorations.d.ts

@@ -6,7 +6,7 @@ import type { BlockControlsPlugin, HandleOptions } from '../types';
 export declare const dropTargetDecorations: (oldState: EditorState, newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>) => {
     decs: Decoration[];
     decorationState: {
-        index: number;
+        id: number;
         pos: number;
     }[];
 };

package/dist/types/types.d.ts

@@ -55,7 +55,7 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
     };
 }>;
 export type DecorationState = {
-    index: number;
+    id: number;
     pos: number;
 }[];
 export type BlockControlsMeta = {

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

@@ -2,6 +2,9 @@ export declare const DRAG_HANDLE_HEIGHT = 24;
 export declare const DRAG_HANDLE_WIDTH = 12;
 export declare const DRAG_HANDLE_BORDER_RADIUS = 4;
 export declare const DRAG_HANDLE_ZINDEX: number;
+export declare const DRAG_HANDLE_DEFAULT_GAP = 8;
+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) => 8 | 12;
 export declare const topPositionAdjustment: (nodeType: string) => number;

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

@@ -2,9 +2,9 @@ import { jsx } from '@emotion/react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { BlockControlsPlugin } from '../types';
-export declare const DropTarget: ({ api, index, prevNode, nextNode, }: {
+export declare const DropTarget: ({ api, id, prevNode, nextNode, }: {
     api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
-    index: number;
+    id: number;
     prevNode?: PMNode | undefined;
     nextNode?: PMNode | undefined;
 }) => jsx.JSX.Element;

package/dist/types-ts4.5/pm-plugins/decorations.d.ts

@@ -6,7 +6,7 @@ import type { BlockControlsPlugin, HandleOptions } from '../types';
 export declare const dropTargetDecorations: (oldState: EditorState, newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>) => {
     decs: Decoration[];
     decorationState: {
-        index: number;
+        id: number;
         pos: number;
     }[];
 };

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

@@ -55,7 +55,7 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
     };
 }>;
 export type DecorationState = {
-    index: number;
+    id: number;
     pos: number;
 }[];
 export type BlockControlsMeta = {