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

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

@@ -22,7 +22,9 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _anchorUtils = require("../utils/anchor-utils");
 var _dragTargetDebug = require("../utils/drag-target-debug");
 var _transactions = require("../utils/transactions");
-var _decorations = require("./decorations");
+var _decorationsAnchor = require("./decorations-anchor");
+var _decorationsDragHandle = require("./decorations-drag-handle");
+var _decorationsDropTarget = require("./decorations-drop-target");
 var _handleMouseOver = require("./handle-mouse-over");
 var _keymap = require("./keymap");
 var key = exports.key = new _state.PluginKey('blockControls');
@@ -138,13 +140,13 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
   var shouldRedrawNodeDecs = !isResizerResizing && isNodeDecsMissing;
   var isActiveNodeModified = false;
   if (api && shouldRedrawNodeDecs) {
-    var oldNodeDecs = (0, _decorations.findNodeDecs)(decorations, from, to);
+    var oldNodeDecs = (0, _decorationsAnchor.findNodeDecs)(decorations, from, to);
     decorations = decorations.remove(oldNodeDecs);
-    var newNodeDecs = (0, _decorations.nodeDecorations)(newState, isDecSetEmpty ? undefined : from, isDecSetEmpty ? undefined : to);
+    var newNodeDecs = (0, _decorationsAnchor.nodeDecorations)(newState, isDecSetEmpty ? undefined : from, isDecSetEmpty ? undefined : to);
     decorations = decorations.add(newState.doc, newNodeDecs);
     if (latestActiveNode && !isActiveNodeDeleted) {
       // Find the newly minted node decs that touch the active node
-      var findNewNodeDecs = (0, _decorations.findNodeDecs)(decorations, latestActiveNode.pos - 1, to);
+      var findNewNodeDecs = (0, _decorationsAnchor.findNodeDecs)(decorations, latestActiveNode.pos - 1, to);
 
       // Find the specific dec that the active node corresponds to
       var nodeDecsAtActivePos = findNewNodeDecs.filter(function (dec) {
@@ -179,13 +181,13 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
   var shouldRemoveHandle = latestActiveNode && (isResizerResizing || isActiveNodeDeleted || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved));
   if (shouldRemoveHandle) {
     var _activeNode3, _activeNode4;
-    var oldHandle = (0, _decorations.findHandleDec)(decorations, (_activeNode3 = activeNode) === null || _activeNode3 === void 0 ? void 0 : _activeNode3.pos, (_activeNode4 = activeNode) === null || _activeNode4 === void 0 ? void 0 : _activeNode4.pos);
+    var oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (_activeNode3 = activeNode) === null || _activeNode3 === void 0 ? void 0 : _activeNode3.pos, (_activeNode4 = activeNode) === null || _activeNode4 === void 0 ? void 0 : _activeNode4.pos);
     decorations = decorations.remove(oldHandle);
   } else if (api && shouldRecreateHandle) {
     var _activeNode5, _activeNode6;
-    var _oldHandle = (0, _decorations.findHandleDec)(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.pos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.pos);
+    var _oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.pos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.pos);
     decorations = decorations.remove(_oldHandle);
-    var handleDec = (0, _decorations.dragHandleDecoration)(api, formatMessage, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.anchorName, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.nodeType, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.handleOptions);
+    var handleDec = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.anchorName, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.nodeType, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.handleOptions);
     decorations = decorations.add(newState.doc, [handleDec]);
   }
 
@@ -194,25 +196,25 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
 
   // Remove drop target decorations when dragging stops or they need to be redrawn
   if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
-    var dropTargetDecs = (0, _decorations.findDropTargetDecs)(decorations);
+    var dropTargetDecs = (0, _decorationsDropTarget.findDropTargetDecs)(decorations);
     decorations = decorations.remove(dropTargetDecs);
   }
 
   // Add drop targets when dragging starts or some are missing
   if (api) {
     if (meta !== null && meta !== void 0 && meta.isDragging || isDropTargetsMissing || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
-      var decs = (0, _decorations.dropTargetDecorations)(newState, api, formatMessage, latestActiveNode, anchorRectCache);
+      var decs = (0, _decorationsDropTarget.dropTargetDecorations)(newState, api, formatMessage, latestActiveNode, anchorRectCache);
       decorations = decorations.add(newState.doc, decs);
     }
   }
   var isEmptyDoc = (0, _utils.isEmptyDocument)(newState.doc);
   if (isEmptyDoc) {
-    var hasNodeDecoration = !!(0, _decorations.findNodeDecs)(decorations).length;
+    var hasNodeDecoration = !!(0, _decorationsAnchor.findNodeDecs)(decorations).length;
     if (!hasNodeDecoration) {
-      decorations = decorations.add(newState.doc, [(0, _decorations.emptyParagraphNodeDecorations)()]);
+      decorations = decorations.add(newState.doc, [(0, _decorationsDragHandle.emptyParagraphNodeDecorations)()]);
     }
   }
-  var newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && (0, _decorations.findHandleDec)(decorations, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos).length === 0 ? null : latestActiveNode;
+  var newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && (0, _decorationsDragHandle.findHandleDec)(decorations, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos).length === 0 ? null : latestActiveNode;
   return {
     decorations: decorations,
     activeNode: newActiveNode,
@@ -307,7 +309,7 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
       return spec.type !== 'drop-target-decoration';
     });
     decorations = decorations.remove(oldNodeDecs);
-    var newNodeDecs = (0, _decorations.nodeDecorations)(newState);
+    var newNodeDecs = (0, _decorationsAnchor.nodeDecorations)(newState);
     decorations = decorations.add(newState.doc, (0, _toConsumableArray2.default)(newNodeDecs));
     if (activeNode && !(meta !== null && meta !== void 0 && meta.nodeMoved) && !isDecsMissing) {
       var mappedPosisiton = tr.mapping.map(activeNode.pos);
@@ -331,7 +333,7 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
         var decAtPos = newNodeDecs.find(function (dec) {
           return dec.from === mappedPosisiton;
         });
-        draghandleDec = (0, _decorations.dragHandleDecoration)(api, formatMessage, (_meta$activeNode$pos = meta === null || meta === void 0 || (_meta$activeNode3 = meta.activeNode) === null || _meta$activeNode3 === void 0 ? void 0 : _meta$activeNode3.pos) !== null && _meta$activeNode$pos !== void 0 ? _meta$activeNode$pos : mappedPosisiton, (_ref6 = (_meta$activeNode$anch = meta === null || meta === void 0 || (_meta$activeNode4 = meta.activeNode) === null || _meta$activeNode4 === void 0 ? void 0 : _meta$activeNode4.anchorName) !== null && _meta$activeNode$anch !== void 0 ? _meta$activeNode$anch : decAtPos === null || decAtPos === void 0 || (_decAtPos$spec = decAtPos.spec) === null || _decAtPos$spec === void 0 ? void 0 : _decAtPos$spec.anchorName) !== null && _ref6 !== void 0 ? _ref6 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName, (_ref7 = (_meta$activeNode$node = meta === null || meta === void 0 || (_meta$activeNode5 = meta.activeNode) === null || _meta$activeNode5 === void 0 ? void 0 : _meta$activeNode5.nodeType) !== null && _meta$activeNode$node !== void 0 ? _meta$activeNode$node : decAtPos === null || decAtPos === void 0 || (_decAtPos$spec2 = decAtPos.spec) === null || _decAtPos$spec2 === void 0 ? void 0 : _decAtPos$spec2.nodeType) !== null && _ref7 !== void 0 ? _ref7 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType, meta === null || meta === void 0 || (_meta$activeNode6 = meta.activeNode) === null || _meta$activeNode6 === void 0 ? void 0 : _meta$activeNode6.handleOptions);
+        draghandleDec = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, (_meta$activeNode$pos = meta === null || meta === void 0 || (_meta$activeNode3 = meta.activeNode) === null || _meta$activeNode3 === void 0 ? void 0 : _meta$activeNode3.pos) !== null && _meta$activeNode$pos !== void 0 ? _meta$activeNode$pos : mappedPosisiton, (_ref6 = (_meta$activeNode$anch = meta === null || meta === void 0 || (_meta$activeNode4 = meta.activeNode) === null || _meta$activeNode4 === void 0 ? void 0 : _meta$activeNode4.anchorName) !== null && _meta$activeNode$anch !== void 0 ? _meta$activeNode$anch : decAtPos === null || decAtPos === void 0 || (_decAtPos$spec = decAtPos.spec) === null || _decAtPos$spec === void 0 ? void 0 : _decAtPos$spec.anchorName) !== null && _ref6 !== void 0 ? _ref6 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName, (_ref7 = (_meta$activeNode$node = meta === null || meta === void 0 || (_meta$activeNode5 = meta.activeNode) === null || _meta$activeNode5 === void 0 ? void 0 : _meta$activeNode5.nodeType) !== null && _meta$activeNode$node !== void 0 ? _meta$activeNode$node : decAtPos === null || decAtPos === void 0 || (_decAtPos$spec2 = decAtPos.spec) === null || _decAtPos$spec2 === void 0 ? void 0 : _decAtPos$spec2.nodeType) !== null && _ref7 !== void 0 ? _ref7 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType, meta === null || meta === void 0 || (_meta$activeNode6 = meta.activeNode) === null || _meta$activeNode6 === void 0 ? void 0 : _meta$activeNode6.handleOptions);
       } else {
         var nodeType = activeNode.nodeType;
         var anchorName = activeNode.anchorName;
@@ -344,7 +346,7 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
             anchorName: anchorName
           };
         }
-        draghandleDec = (0, _decorations.dragHandleDecoration)(api, formatMessage, activeNode.pos, anchorName, nodeType);
+        draghandleDec = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, activeNode.pos, anchorName, nodeType);
       }
       decorations = decorations.add(newState.doc, [draghandleDec]);
     }
@@ -356,7 +358,7 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
       return spec.type === 'drag-handle';
     });
     decorations = decorations.remove(_oldHandle3);
-    var decs = (0, _decorations.dragHandleDecoration)(api, formatMessage, meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, meta.activeNode.handleOptions);
+    var decs = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, meta.activeNode.handleOptions);
     decorations = decorations.add(newState.doc, [decs]);
   }
 
@@ -366,7 +368,7 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
       return spec.type === 'drag-handle';
     });
     decorations = decorations.remove(_oldHandle4);
-    var _decs = (0, _decorations.dragHandleDecoration)(api, formatMessage, activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType);
+    var _decs = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType);
     decorations = decorations.add(newState.doc, [_decs]);
   }
   if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
@@ -389,7 +391,7 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
     // if the transaction is only for analytics and user is dragging, continue to draw drop targets
     if (shouldCreateDropTargets || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
       var _meta$activeNode7;
-      var _decs2 = (0, _decorations.dropTargetDecorations)(newState, api, formatMessage, isNestedEnabled ? (_meta$activeNode7 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode7 !== void 0 ? _meta$activeNode7 : mappedActiveNodePos : meta === null || meta === void 0 ? void 0 : meta.activeNode, anchorRectCache);
+      var _decs2 = (0, _decorationsDropTarget.dropTargetDecorations)(newState, api, formatMessage, isNestedEnabled ? (_meta$activeNode7 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode7 !== void 0 ? _meta$activeNode7 : mappedActiveNodePos : meta === null || meta === void 0 ? void 0 : meta.activeNode, anchorRectCache);
       decorations = decorations.add(newState.doc, _decs2);
     }
   }
@@ -399,7 +401,7 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
       return spec.type === 'node-decoration';
     }).length;
     if (!hasNodeDecoration) {
-      decorations = decorations.add(newState.doc, [(0, _decorations.emptyParagraphNodeDecorations)()]);
+      decorations = decorations.add(newState.doc, [(0, _decorationsDragHandle.emptyParagraphNodeDecorations)()]);
     }
   }
   var newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && decorations.find(undefined, undefined, function (spec) {

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

@@ -15,7 +15,7 @@ var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box")
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _constants = require("@atlaskit/theme/constants");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
-var _decorations = require("../pm-plugins/decorations");
+var _decorationsCommon = require("../pm-plugins/decorations-common");
 var _anchorUtils = require("../utils/anchor-utils");
 var _dragTargetDebug = require("../utils/drag-target-debug");
 var _inlineDropTarget = require("../utils/inline-drop-target");
@@ -94,7 +94,7 @@ var HoverZone = function HoverZone(_ref) {
   }, [onDragEnter, onDragLeave, onDrop]);
   var isRemainingheight = dropTargetStyle === 'remainingHeight';
   var hoverZoneUpperStyle = (0, _react.useMemo)(function () {
-    var anchorName = node ? (0, _decorations.getNodeAnchor)(node) : '';
+    var anchorName = node ? (0, _decorationsCommon.getNodeAnchor)(node) : '';
     var heightStyleOffset = "var(--editor-block-controls-drop-indicator-gap, 0)/2";
     var transformOffset = "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, ", 0)");
     var heightStyle = anchorName && enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '') ? (0, _anchorUtils.isAnchorSupported)() ? "calc(anchor-size(".concat(anchorName, " height)/2 + ").concat(heightStyleOffset, ")") : "calc(".concat(((anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0) / 2, "px + ").concat(heightStyleOffset, ")") : '4px';
@@ -119,7 +119,7 @@ var HoverZone = function HoverZone(_ref) {
     // only apply upper drop zone
     if (isRemainingheight && position === 'upper') {
       // previous node
-      var anchorName = node ? (0, _decorations.getNodeAnchor)(node) : '';
+      var anchorName = node ? (0, _decorationsCommon.getNodeAnchor)(node) : '';
       var top = 'unset';
       if (anchorName) {
         var enabledDropZone = enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '');

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

@@ -17,94 +17,100 @@ var _globalStyles = require("./empty-block-experiment/global-styles");
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-var extendedHoverZone = (0, _react.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 (0, _react.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: (0, _platformFeatureFlags.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 = (0, _react.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(_consts.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(_consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
-      height: '100%',
-      cursor: 'default',
-      zIndex: 1
+  });
+};
+var extendedHoverZoneNested = function extendedHoverZoneNested() {
+  return (0, _react.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(_consts.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(_consts.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: (0, _platformFeatureFlags.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((0, _experiments.editorExperiment)('table-nested-dnd', true) ? _consts.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((0, _experiments.editorExperiment)('table-nested-dnd', true) ? _consts.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((0, _experiments.editorExperiment)('table-nested-dnd', true) ? _consts.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((0, _experiments.editorExperiment)('table-nested-dnd', true) ? _consts.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';
@@ -157,10 +163,19 @@ var withFormatInLayoutStyleFix = (0, _react.css)((0, _defineProperty2.default)({
 var getTextNodeStyle = function getTextNodeStyle() {
   return (0, _platformFeatureFlags.fg)('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
 };
+var withRelativePosStyle = (0, _react.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'
+    }
+  }
+});
 var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
   return (0, _react.jsx)(_react.Global, {
-    styles: [globalStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested : extendedHoverZone, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, (0, _experiments.editorExperiment)('platform_editor_empty_line_prompt', true, {
+    styles: [globalStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, (0, _experiments.editorExperiment)('platform_editor_empty_line_prompt', true, {
       exposure: false
-    }) ? _globalStyles.emptyBlockExperimentGlobalStyles : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined]
+    }) ? _globalStyles.emptyBlockExperimentGlobalStyles : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? withRelativePosStyle : undefined]
   });
 };

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

@@ -11,7 +11,7 @@ var _react2 = require("@emotion/react");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
-var _decorations = require("../pm-plugins/decorations");
+var _decorationsCommon = require("../pm-plugins/decorations-common");
 var _anchorUtils = require("../utils/anchor-utils");
 var _dragTargetDebug = require("../utils/drag-target-debug");
 /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
@@ -104,7 +104,7 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isDraggedOver = _useState2[0],
     setIsDraggedOver = _useState2[1];
-  var anchorName = nextNode ? (0, _decorations.getNodeAnchor)(nextNode) : '';
+  var anchorName = nextNode ? (0, _decorationsCommon.getNodeAnchor)(nextNode) : '';
   var handleDragEnter = (0, _react.useCallback)(function () {
     setIsDraggedOver(true);
   }, []);
@@ -172,7 +172,7 @@ var InlineHoverZone = exports.InlineHoverZone = function InlineHoverZone(_ref3)
   var ref = (0, _react.useRef)(null);
   var _ref4 = editorWidthState || {},
     editorWith = _ref4.width;
-  var anchorName = node ? (0, _decorations.getNodeAnchor)(node) : '';
+  var anchorName = node ? (0, _decorationsCommon.getNodeAnchor)(node) : '';
   (0, _react.useEffect)(function () {
     if (ref.current) {
       return (0, _adapter.dropTargetForElements)({

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

@@ -0,0 +1,89 @@
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { getNestedDepth, getNodeAnchor, TYPE_NODE_DEC } from './decorations-common';
+const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
+const IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
+export const 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);
+};
+const shouldIgnoreNode = node => {
+  const isEmbedCard = 'embedCard' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_3');
+
+  // TODO use isWrappedMedia when clean up the feature flag
+  const isMediaSingle = 'mediaSingle' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_1');
+  return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : IGNORE_NODES.includes(node.type.name);
+};
+
+/**
+ * Find node decorations in the pos range between from and to (non-inclusive)
+ * @param decorations
+ * @param from
+ * @param to
+ * @returns
+ */
+export const findNodeDecs = (decorations, from, to) => {
+  let newfrom = from;
+  let 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, spec => spec.type === TYPE_NODE_DEC);
+};
+export const nodeDecorations = (newState, from, to) => {
+  const decs = [];
+  const docFrom = from === undefined || from < 0 ? 0 : from;
+  const docTo = to === undefined || to > newState.doc.nodeSize - 2 ? newState.doc.nodeSize - 2 : to;
+  newState.doc.nodesBetween(docFrom, docTo, (node, pos, _parent, index) => {
+    let depth = 0;
+    let anchorName;
+    const shouldDescend = shouldDescendIntoNode(node);
+    anchorName = getNodeAnchor(node);
+    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-${node.type.name}-${pos}`;
+    } else {
+      var _anchorName2;
+      anchorName = (_anchorName2 = anchorName) !== null && _anchorName2 !== void 0 ? _anchorName2 : `--node-anchor-${node.type.name}-${index}`;
+    }
+    decs.push(Decoration.node(pos, pos + node.nodeSize, {
+      style: `anchor-name: ${anchorName}; ${pos === 0 ? 'margin-top: 0px;' : ''} ${fg('platform_editor_element_dnd_nested_fix_patch_3') ? '' : 'position: relative; z-index: 1;'}`,
+      ['data-drag-handler-anchor-name']: anchorName,
+      ['data-drag-handler-node-type']: node.type.name,
+      ['data-drag-handler-anchor-depth']: `${depth}`
+    }, {
+      type: TYPE_NODE_DEC,
+      anchorName,
+      nodeType: node.type.name
+    }));
+    return shouldDescend && depth < getNestedDepth();
+  });
+  return decs;
+};

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

@@ -0,0 +1,31 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import ReactDOM from 'react-dom';
+import uuid from 'uuid';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+export const TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
+export const TYPE_HANDLE_DEC = 'drag-handle';
+export const TYPE_NODE_DEC = 'node-decoration';
+export const getNestedDepth = () => editorExperiment('nested-dnd', true) ? 100 : 0;
+export const getNodeAnchor = node => {
+  const handleId = ObjHash.getForNode(node);
+  return `--node-anchor-${node.type.name}-${handleId}`;
+};
+class ObjHash {
+  static getForNode(node) {
+    if (this.caching.has(node)) {
+      return this.caching.get(node);
+    }
+    const uniqueId = uuid();
+    this.caching.set(node, uniqueId);
+    return uniqueId;
+  }
+}
+_defineProperty(ObjHash, "caching", new WeakMap());
+export const unmountDecorations = selector => {
+  // Removing decorations manually instead of using native destroy function in prosemirror API
+  // as it was more responsive and causes less re-rendering
+  const decorationsToRemove = document.querySelectorAll(`[${selector}="true"]`);
+  decorationsToRemove.forEach(el => {
+    ReactDOM.unmountComponentAtNode(el);
+  });
+};

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

@@ -0,0 +1,79 @@
+import { createElement } from 'react';
+import { bind } from 'bind-event-listener';
+import ReactDOM from 'react-dom';
+import uuid from 'uuid';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { DragHandle } from '../ui/drag-handle';
+import { TYPE_HANDLE_DEC, TYPE_NODE_DEC, unmountDecorations } from './decorations-common';
+export const emptyParagraphNodeDecorations = () => {
+  const anchorName = `--node-anchor-paragraph-0`;
+  const style = `anchor-name: ${anchorName}; margin-top: 0px;`;
+  return Decoration.node(0, 2, {
+    style,
+    ['data-drag-handler-anchor-name']: anchorName
+  }, {
+    type: TYPE_NODE_DEC
+  });
+};
+export const findHandleDec = (decorations, from, to) => {
+  return decorations.find(from, to, spec => spec.type === TYPE_HANDLE_DEC);
+};
+export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeType, handleOptions) => {
+  unmountDecorations('data-blocks-drag-handle-container');
+  let unbind;
+  return Decoration.widget(pos, (view, getPos) => {
+    const 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');
+    let isTopLevelNode = true;
+    if (editorExperiment('nested-dnd', true)) {
+      const newPos = fg('platform_editor_element_dnd_nested_fix_patch_3') ? getPos() : pos;
+      if (typeof newPos === 'number') {
+        const $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: 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,
+      api,
+      formatMessage,
+      getPos,
+      anchorName,
+      nodeType,
+      handleOptions,
+      isTopLevelNode
+    }), element);
+    return element;
+  }, {
+    side: -1,
+    type: TYPE_HANDLE_DEC,
+    testid: `${TYPE_HANDLE_DEC}-${uuid()}`,
+    destroy: () => {
+      if (editorExperiment('nested-dnd', true)) {
+        unbind && unbind();
+      }
+    }
+  });
+};