@atlaskit/editor-plugin-block-controls 2.10.0 → 2.11.0

package/dist/esm/pm-plugins/{decorations.js → decorations-drop-target.js}

@@ -1,35 +1,26 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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 { createElement } from 'react';
-import { bind } from 'bind-event-listener';
 import ReactDOM from 'react-dom';
-import uuid from 'uuid';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { nodeMargins } from '../ui/consts';
-import { DragHandle } from '../ui/drag-handle';
 import { DropTarget } from '../ui/drop-target';
 import { DropTargetV2, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET } from '../ui/drop-target-v2';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 import { canMoveNodeToIndex } from '../utils/validation';
+import { getNestedDepth, TYPE_DROP_TARGET_DEC, unmountDecorations } from './decorations-common';
 var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
-var IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
 var PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
 var DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
-export var TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
-export var TYPE_HANDLE_DEC = 'drag-handle';
-export var TYPE_NODE_DEC = 'node-decoration';
-var getNestedDepth = function getNestedDepth() {
-  return editorExperiment('nested-dnd', true) ? 100 : 0;
-};
-export var getNodeAnchor = function getNodeAnchor(node) {
-  var handleId = ObjHash.getForNode(node);
-  return "--node-anchor-".concat(node.type.name, "-").concat(handleId);
+var shouldDescend = function shouldDescend(node) {
+  if (fg('platform_editor_drag_and_drop_target_v2')) {
+    return !['mediaSingle', 'paragraph', 'heading'].includes(node.type.name);
+  }
+  return true;
 };
 var getNodeMargins = function getNodeMargins(node) {
   if (!node) {
@@ -74,12 +65,6 @@ var getGapAndOffset = function getGapAndOffset(prevNode, nextNode, parentNode) {
     offset: offset
   };
 };
-var shouldDescend = function shouldDescend(node) {
-  if (fg('platform_editor_drag_and_drop_target_v2')) {
-    return !['mediaSingle', 'paragraph', 'heading'].includes(node.type.name);
-  }
-  return true;
-};
 
 /**
  * Find drop target decorations in the pos range between from and to
@@ -93,41 +78,6 @@ export var findDropTargetDecs = function findDropTargetDecs(decorations, from, t
     return spec.type === TYPE_DROP_TARGET_DEC;
   });
 };
-export var findHandleDec = function findHandleDec(decorations, from, to) {
-  return decorations.find(from, to, function (spec) {
-    return spec.type === TYPE_HANDLE_DEC;
-  });
-};
-
-/**
- * Find node decorations in the pos range between from and to (non-inclusive)
- * @param decorations
- * @param from
- * @param to
- * @returns
- */
-export var findNodeDecs = function findNodeDecs(decorations, from, to) {
-  var newfrom = from;
-  var newTo = to;
-
-  // make it non-inclusive
-  if (newfrom !== undefined) {
-    newfrom++;
-  }
-
-  // make it non-inclusive
-  if (newTo !== undefined) {
-    newTo--;
-  }
-
-  // return empty array if range reversed
-  if (newfrom !== undefined && newTo !== undefined && newfrom > newTo) {
-    return new Array();
-  }
-  return decorations.find(newfrom, newTo, function (spec) {
-    return spec.type === TYPE_NODE_DEC;
-  });
-};
 export var createDropTargetDecoration = function createDropTargetDecoration(pos, props, side, anchorRectCache) {
   return Decoration.widget(pos, function (_, getPos) {
     var element = document.createElement('div');
@@ -253,152 +203,4 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
     }, undefined, anchorRectCache));
   }
   return decs;
-};
-export var emptyParagraphNodeDecorations = function emptyParagraphNodeDecorations() {
-  var anchorName = "--node-anchor-paragraph-0";
-  var style = "anchor-name: ".concat(anchorName, "; margin-top: 0px;");
-  return Decoration.node(0, 2, _defineProperty({
-    style: style
-  }, 'data-drag-handler-anchor-name', anchorName), {
-    type: TYPE_NODE_DEC
-  });
-};
-var ObjHash = /*#__PURE__*/function () {
-  function ObjHash() {
-    _classCallCheck(this, ObjHash);
-  }
-  _createClass(ObjHash, null, [{
-    key: "getForNode",
-    value: function getForNode(node) {
-      if (this.caching.has(node)) {
-        return this.caching.get(node);
-      }
-      var uniqueId = uuid();
-      this.caching.set(node, uniqueId);
-      return uniqueId;
-    }
-  }]);
-  return ObjHash;
-}();
-_defineProperty(ObjHash, "caching", new WeakMap());
-var shouldIgnoreNode = function shouldIgnoreNode(node) {
-  // TODO use isWrappedMedia when clean up the featue flag
-  if ('mediaSingle' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_1')) {
-    if (['wrap-right', 'wrap-left'].includes(node.attrs.layout)) {
-      return true;
-    }
-  }
-  return IGNORE_NODES.includes(node.type.name);
-};
-export var shouldDescendIntoNode = function shouldDescendIntoNode(node) {
-  // Optimisation to avoid drawing node decorations for empty table cells
-  if (['tableCell', 'tableHeader'].includes(node.type.name) && !editorExperiment('table-nested-dnd', true) && fg('platform_editor_element_dnd_nested_fix_patch_3')) {
-    var _node$firstChild;
-    if (node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'paragraph') {
-      return false;
-    }
-  }
-  return !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
-};
-export var nodeDecorations = function nodeDecorations(newState, from, to) {
-  var decs = [];
-  var docFrom = from === undefined || from < 0 ? 0 : from;
-  var docTo = to === undefined || to > newState.doc.nodeSize - 2 ? newState.doc.nodeSize - 2 : to;
-  newState.doc.nodesBetween(docFrom, docTo, function (node, pos, _parent, index) {
-    var _Decoration$node2;
-    var depth = 0;
-    var anchorName;
-    var shouldDescend = shouldDescendIntoNode(node);
-    var handleId = ObjHash.getForNode(node);
-    anchorName = "--node-anchor-".concat(node.type.name, "-").concat(handleId);
-    if (editorExperiment('nested-dnd', true)) {
-      var _anchorName;
-      // Doesn't descend into a node
-      if (node.isInline) {
-        return false;
-      }
-      if (shouldIgnoreNode(node)) {
-        return shouldDescend; //skip over, don't consider it a valid depth
-      }
-      depth = newState.doc.resolve(pos).depth;
-      anchorName = (_anchorName = anchorName) !== null && _anchorName !== void 0 ? _anchorName : "--node-anchor-".concat(node.type.name, "-").concat(pos);
-    } else {
-      var _anchorName2;
-      anchorName = (_anchorName2 = anchorName) !== null && _anchorName2 !== void 0 ? _anchorName2 : "--node-anchor-".concat(node.type.name, "-").concat(index);
-    }
-    decs.push(Decoration.node(pos, pos + node.nodeSize, (_Decoration$node2 = {
-      style: "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '', "; position: relative; z-index: 1;")
-    }, _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: TYPE_NODE_DEC,
-      anchorName: anchorName,
-      nodeType: node.type.name
-    }));
-    return shouldDescend && depth < getNestedDepth();
-  });
-  return decs;
-};
-export var dragHandleDecoration = function dragHandleDecoration(api, formatMessage, pos, anchorName, nodeType, handleOptions) {
-  unmountDecorations('data-blocks-drag-handle-container');
-  var unbind;
-  return Decoration.widget(pos, function (view, getPos) {
-    var element = document.createElement('span');
-    // Need to set it to inline to avoid text being split when merging two paragraphs
-    // platform_editor_element_dnd_nested_fix_patch_2 -> inline decoration causes focus issues when refocusing Editor into first line
-    element.style.display = fg('platform_editor_element_dnd_nested_fix_patch_2') ? 'block' : 'inline';
-    element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
-    element.setAttribute('data-blocks-drag-handle-container', 'true');
-    var isTopLevelNode = true;
-    if (editorExperiment('nested-dnd', true)) {
-      var newPos = fg('platform_editor_element_dnd_nested_fix_patch_3') ? getPos() : pos;
-      if (typeof newPos === 'number') {
-        var $pos = view.state.doc.resolve(newPos);
-        isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.parent.type.name) === 'doc';
-      }
-      /*
-       * We disable mouseover event to fix flickering issue on hover
-       * However, the tooltip for nested drag handle is no long working.
-       */
-      if (newPos === undefined || !isTopLevelNode) {
-        // This will also hide the tooltip.
-        unbind = bind(element, {
-          type: 'mouseover',
-          listener: function listener(e) {
-            e.stopPropagation();
-          }
-        });
-      }
-    }
-
-    // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
-    // due to margins applied to other nodes eg. Headings
-    element.style.clear = 'unset';
-    ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
-      view: view,
-      api: api,
-      formatMessage: formatMessage,
-      getPos: getPos,
-      anchorName: anchorName,
-      nodeType: nodeType,
-      handleOptions: handleOptions,
-      isTopLevelNode: isTopLevelNode
-    }), element);
-    return element;
-  }, {
-    side: -1,
-    type: TYPE_HANDLE_DEC,
-    testid: "".concat(TYPE_HANDLE_DEC, "-").concat(uuid()),
-    destroy: function destroy() {
-      if (editorExperiment('nested-dnd', true)) {
-        unbind && unbind();
-      }
-    }
-  });
-};
-var unmountDecorations = function unmountDecorations(selector) {
-  // Removing decorations manually instead of using native destroy function in prosemirror API
-  // as it was more responsive and causes less re-rendering
-  var decorationsToRemove = document.querySelectorAll("[".concat(selector, "=\"true\"]"));
-  decorationsToRemove.forEach(function (el) {
-    ReactDOM.unmountComponentAtNode(el);
-  });
 };

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

@@ -15,7 +15,9 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { AnchorRectCache, isAnchorSupported } from '../utils/anchor-utils';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 import { getTrMetadata } from '../utils/transactions';
-import { dragHandleDecoration, dropTargetDecorations, emptyParagraphNodeDecorations, findDropTargetDecs, findHandleDec, findNodeDecs, nodeDecorations } from './decorations';
+import { findNodeDecs, nodeDecorations } from './decorations-anchor';
+import { dragHandleDecoration, emptyParagraphNodeDecorations, findHandleDec } from './decorations-drag-handle';
+import { dropTargetDecorations, findDropTargetDecs } from './decorations-drop-target';
 import { handleMouseOver } from './handle-mouse-over';
 import { boundKeydownHandler } from './keymap';
 export var key = new PluginKey('blockControls');

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

@@ -14,7 +14,7 @@ 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 { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { getNodeAnchor } from '../pm-plugins/decorations';
+import { getNodeAnchor } from '../pm-plugins/decorations-common';
 import { isAnchorSupported } from '../utils/anchor-utils';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 import { shouldAllowInlineDropTarget } from '../utils/inline-drop-target';

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

@@ -9,94 +9,100 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
 import { emptyBlockExperimentGlobalStyles } from './empty-block-experiment/global-styles';
-var extendedHoverZone = 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,
-      left: '-100%',
-      width: '100%',
-      height: '100%',
-      background: 'transparent',
-      cursor: 'default',
-      zIndex: -1
+var extendedHoverZone = function extendedHoverZone() {
+  return 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,
+        left: '-100%',
+        width: '100%',
+        height: '100%',
+        background: 'transparent',
+        cursor: 'default',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+        zIndex: fg('platform_editor_element_dnd_nested_fix_patch_3') ? 1 : -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'
+    },
+    //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-blocks-drag-handle-container="true"] + *::after': {
+      display: 'none'
     }
-  },
-  // 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'
-  },
-  //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
+  });
+};
+var extendedHoverZoneNested = function extendedHoverZoneNested() {
+  return 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, @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
+    // 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',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+        zIndex: fg('platform_editor_element_dnd_nested_fix_patch_3') ? 1 : -1
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '&& :is(.pm-table-cell-content-wrap, .pm-table-header-content-wrap) > [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(editorExperiment('table-nested-dnd', true) ? DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+        width: "".concat(editorExperiment('table-nested-dnd', true) ? DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "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
-    '&& :is(.pm-table-cell-content-wrap, .pm-table-header-content-wrap) > [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(editorExperiment('table-nested-dnd', true) ? DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      width: "".concat(editorExperiment('table-nested-dnd', true) ? DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
-      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 pseudo 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'
     }
-  },
-  // 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 pseudo 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 paragraphWithTrailingBreakAsOnlyChild = '+ :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
 var indentatedParagraphWithTrailingBreakAsOnlyChild = '+ div.fabric-editor-indentation-mark > :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
 var paragraphWithPlaceholder = '+ p > .placeholder-decoration';
@@ -149,10 +155,19 @@ var withFormatInLayoutStyleFix = css(_defineProperty({}, "".concat(withFormatInL
 var getTextNodeStyle = function getTextNodeStyle() {
   return fg('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
 };
+var withRelativePosStyle = css({
+  // 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]': {
+      position: 'relative'
+    }
+  }
+});
 export var GlobalStylesWrapper = function GlobalStylesWrapper() {
   return jsx(Global, {
-    styles: [globalStyles, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested : extendedHoverZone, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, editorExperiment('platform_editor_empty_line_prompt', true, {
+    styles: [globalStyles, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, editorExperiment('platform_editor_empty_line_prompt', true, {
       exposure: false
-    }) ? emptyBlockExperimentGlobalStyles : undefined, fg('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined]
+    }) ? emptyBlockExperimentGlobalStyles : undefined, fg('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_3') ? withRelativePosStyle : undefined]
   });
 };

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

@@ -12,7 +12,7 @@ import { css, jsx } from '@emotion/react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { getNodeAnchor } from '../pm-plugins/decorations';
+import { getNodeAnchor } from '../pm-plugins/decorations-common';
 import { isAnchorSupported } from '../utils/anchor-utils';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 var dropTargetCommonStyle = css({

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

@@ -0,0 +1,13 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export declare const shouldDescendIntoNode: (node: PMNode) => boolean;
+/**
+ * Find node decorations in the pos range between from and to (non-inclusive)
+ * @param decorations
+ * @param from
+ * @param to
+ * @returns
+ */
+export declare const findNodeDecs: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
+export declare const nodeDecorations: (newState: EditorState, from?: number, to?: number) => Decoration[];

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

@@ -0,0 +1,7 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+export declare const TYPE_DROP_TARGET_DEC = "drop-target-decoration";
+export declare const TYPE_HANDLE_DEC = "drag-handle";
+export declare const TYPE_NODE_DEC = "node-decoration";
+export declare const getNestedDepth: () => 0 | 100;
+export declare const getNodeAnchor: (node: PMNode) => string;
+export declare const unmountDecorations: (selector: string) => void;

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

@@ -0,0 +1,7 @@
+import { type IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { BlockControlsPlugin, HandleOptions } from '../types';
+export declare const emptyParagraphNodeDecorations: () => Decoration;
+export declare const findHandleDec: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
+export declare const dragHandleDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => Decoration;

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

@@ -0,0 +1,17 @@
+import { type IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { ActiveNode, BlockControlsPlugin } from '../types';
+import { type DropTargetProps } from '../ui/drop-target';
+import { type AnchorRectCache } from '../utils/anchor-utils';
+/**
+ * Find drop target decorations in the pos range between from and to
+ * @param decorations
+ * @param from
+ * @param to
+ * @returns
+ */
+export declare const findDropTargetDecs: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
+export declare const createDropTargetDecoration: (pos: number, props: Omit<DropTargetProps, 'getPos'>, side?: number, anchorRectCache?: AnchorRectCache) => Decoration;
+export declare const dropTargetDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNode?: ActiveNode, anchorRectCache?: AnchorRectCache, from?: number, to?: number) => Decoration[];

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

@@ -0,0 +1,13 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export declare const shouldDescendIntoNode: (node: PMNode) => boolean;
+/**
+ * Find node decorations in the pos range between from and to (non-inclusive)
+ * @param decorations
+ * @param from
+ * @param to
+ * @returns
+ */
+export declare const findNodeDecs: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
+export declare const nodeDecorations: (newState: EditorState, from?: number, to?: number) => Decoration[];

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

@@ -0,0 +1,7 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+export declare const TYPE_DROP_TARGET_DEC = "drop-target-decoration";
+export declare const TYPE_HANDLE_DEC = "drag-handle";
+export declare const TYPE_NODE_DEC = "node-decoration";
+export declare const getNestedDepth: () => 0 | 100;
+export declare const getNodeAnchor: (node: PMNode) => string;
+export declare const unmountDecorations: (selector: string) => void;

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

@@ -0,0 +1,7 @@
+import { type IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { BlockControlsPlugin, HandleOptions } from '../types';
+export declare const emptyParagraphNodeDecorations: () => Decoration;
+export declare const findHandleDec: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
+export declare const dragHandleDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => Decoration;

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

@@ -0,0 +1,17 @@
+import { type IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { ActiveNode, BlockControlsPlugin } from '../types';
+import { type DropTargetProps } from '../ui/drop-target';
+import { type AnchorRectCache } from '../utils/anchor-utils';
+/**
+ * Find drop target decorations in the pos range between from and to
+ * @param decorations
+ * @param from
+ * @param to
+ * @returns
+ */
+export declare const findDropTargetDecs: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
+export declare const createDropTargetDecoration: (pos: number, props: Omit<DropTargetProps, 'getPos'>, side?: number, anchorRectCache?: AnchorRectCache) => Decoration;
+export declare const dropTargetDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNode?: ActiveNode, anchorRectCache?: AnchorRectCache, from?: number, to?: number) => Decoration[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.10.0",
+	"version": "2.11.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,7 +31,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^42.3.1",
-		"@atlaskit/editor-common": "^94.2.0",
+		"@atlaskit/editor-common": "^94.4.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
@@ -39,7 +39,7 @@
 		"@atlaskit/editor-plugin-quick-insert": "^1.5.0",
 		"@atlaskit/editor-plugin-width": "^1.3.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
-		"@atlaskit/editor-shared-styles": "^3.0.0",
+		"@atlaskit/editor-shared-styles": "^3.1.0",
 		"@atlaskit/editor-tables": "^2.8.0",
 		"@atlaskit/icon": "^22.24.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
@@ -48,7 +48,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
 		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.8.0",
+		"@atlaskit/tmp-editor-statsig": "^2.9.0",
 		"@atlaskit/tokens": "^2.0.0",
 		"@atlaskit/tooltip": "^18.8.0",
 		"@babel/runtime": "^7.0.0",