@atlaskit/editor-plugin-block-controls 2.2.1 → 2.3.0

package/dist/cjs/utils/getSelection.js

@@ -3,9 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectNode = exports.getSelection = void 0;
+exports.setCursorPositionAtMovedNode = exports.selectNode = exports.getSelection = exports.getInlineNodePos = void 0;
+var _selection = require("@atlaskit/editor-common/selection");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-tables/utils");
+var getInlineNodePos = exports.getInlineNodePos = function getInlineNodePos(tr, start, nodeSize) {
+  var $startPos = tr.doc.resolve(start);
+  // To trigger the annotation floating toolbar for non-selectable node, we need to select inline nodes
+  // Find the first inline node in the node
+  var inlineNodePos = start;
+  var foundInlineNode = false;
+  var inlineNodeEndPos = 0;
+  tr.doc.nodesBetween($startPos.pos, $startPos.pos + nodeSize, function (n, pos) {
+    if (n.isInline) {
+      inlineNodeEndPos = pos + n.nodeSize;
+    }
+    if (n.isInline && !foundInlineNode) {
+      inlineNodePos = pos;
+      foundInlineNode = true;
+    }
+    return true;
+  });
+  return {
+    inlineNodePos: inlineNodePos,
+    inlineNodeEndPos: inlineNodeEndPos
+  };
+};
 var getSelection = exports.getSelection = function getSelection(tr, start) {
   var node = tr.doc.nodeAt(start);
   var isNodeSelection = node && _state.NodeSelection.isSelectable(node);
@@ -25,21 +48,9 @@ var getSelection = exports.getSelection = function getSelection(tr, start) {
   nodeName === 'mediaGroup') {
     return new _state.NodeSelection($startPos);
   } else {
-    // To trigger the annotation floating toolbar for non-selectable node, we need to select inline nodes
-    // Find the first inline node in the node
-    var inlineNodePos = start;
-    var foundInlineNode = false;
-    var inlineNodeEndPos = 0;
-    tr.doc.nodesBetween($startPos.pos, $startPos.pos + nodeSize, function (n, pos) {
-      if (n.isInline) {
-        inlineNodeEndPos = pos + n.nodeSize;
-      }
-      if (n.isInline && !foundInlineNode) {
-        inlineNodePos = pos;
-        foundInlineNode = true;
-      }
-      return true;
-    });
+    var _getInlineNodePos = getInlineNodePos(tr, start, nodeSize),
+      inlineNodePos = _getInlineNodePos.inlineNodePos,
+      inlineNodeEndPos = _getInlineNodePos.inlineNodeEndPos;
     return new _state.TextSelection(tr.doc.resolve(inlineNodeEndPos), tr.doc.resolve(inlineNodePos));
   }
 };
@@ -51,4 +62,20 @@ var selectNode = exports.selectNode = function selectNode(tr, start, nodeType) {
     tr.setSelection(getSelection(tr, start));
   }
   return tr;
+};
+var setCursorPositionAtMovedNode = exports.setCursorPositionAtMovedNode = function setCursorPositionAtMovedNode(tr, start) {
+  var node = tr.doc.nodeAt(start);
+  var isNodeSelection = node && _state.NodeSelection.isSelectable(node);
+  var nodeSize = node ? node.nodeSize : 1;
+  var selection;
+  // decisionList node is not selectable, but we want to select the whole node not just text
+  if (isNodeSelection || (node === null || node === void 0 ? void 0 : node.type.name) === 'decisionList') {
+    selection = new _selection.GapCursorSelection(tr.doc.resolve(start + node.nodeSize), _selection.Side.RIGHT);
+  } else {
+    var _getInlineNodePos2 = getInlineNodePos(tr, start, nodeSize),
+      inlineNodeEndPos = _getInlineNodePos2.inlineNodeEndPos;
+    selection = new _state.TextSelection(tr.doc.resolve(inlineNodeEndPos));
+  }
+  tr.setSelection(selection);
+  return tr;
 };

package/dist/cjs/utils/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "getInlineNodePos", {
+  enumerable: true,
+  get: function get() {
+    return _getSelection.getInlineNodePos;
+  }
+});
 Object.defineProperty(exports, "getNestedNodePosition", {
   enumerable: true,
   get: function get() {
@@ -21,5 +27,11 @@ Object.defineProperty(exports, "selectNode", {
     return _getSelection.selectNode;
   }
 });
+Object.defineProperty(exports, "setCursorPositionAtMovedNode", {
+  enumerable: true,
+  get: function get() {
+    return _getSelection.setCursorPositionAtMovedNode;
+  }
+});
 var _getSelection = require("./getSelection");
 var _getNestedNodePosition = require("./getNestedNodePosition");

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

@@ -10,6 +10,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DIRECTION } from '../consts';
 import { key } from '../pm-plugins/main';
 import { getNestedNodePosition, selectNode } from '../utils';
+import { setCursorPositionAtMovedNode } from '../utils/getSelection';
 import { canMoveNodeToIndex, isInsideTable, transformSliceExpandToNestedExpand } from '../utils/validation';
 
 /**
@@ -183,7 +184,7 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
     mappedTo = tr.mapping.map(to);
     tr.insert(mappedTo, nodeCopy); // insert the content at the new position
   }
-  tr = selectNode(tr, mappedTo, node.type.name);
+  tr = inputMethod === INPUT_METHOD.DRAG_AND_DROP && fg('platform_editor_element_dnd_nested_fix_patch_2') ? setCursorPositionAtMovedNode(tr, mappedTo) : selectNode(tr, mappedTo, node.type.name);
   tr.setMeta(key, {
     nodeMoved: true
   });

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

@@ -8,8 +8,10 @@ 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';
 const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
@@ -17,24 +19,104 @@ const IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaS
 const PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
 const DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
 const getNestedDepth = () => editorExperiment('nested-dnd', true) ? 100 : 0;
-const createDropTargetDecoration = (pos, dropTargetDec) => {
+export const getNodeAnchor = node => {
+  const handleId = ObjHash.getForNode(node);
+  return `--node-anchor-${node.type.name}-${handleId}`;
+};
+const getNodeMargins = node => {
+  if (!node) {
+    return nodeMargins['default'];
+  }
+  const nodeTypeName = node.type.name;
+  if (nodeTypeName === 'heading') {
+    return nodeMargins[`heading${node.attrs.level}`] || nodeMargins['default'];
+  }
+  return nodeMargins[nodeTypeName] || nodeMargins['default'];
+};
+const getGapAndOffset = (prevNode, nextNode, parentNode) => {
+  if (!prevNode && nextNode) {
+    // first node
+    return {
+      gap: 0,
+      offset: 0
+    };
+  } else if (prevNode && !nextNode) {
+    return {
+      gap: 0,
+      offset: 0
+    };
+  }
+  const top = getNodeMargins(nextNode).top || 4;
+  const bottom = getNodeMargins(prevNode).bottom || 4;
+  const gap = Math.max(top, bottom);
+  let offset = top - gap / 2;
+  if ((prevNode === null || prevNode === void 0 ? void 0 : prevNode.type.name) === 'mediaSingle' && (nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name) === 'mediaSingle') {
+    offset = -offset;
+  } else if (prevNode !== null && prevNode !== void 0 && prevNode.type.name && ['tableCell', 'tableHeader'].includes(prevNode === null || prevNode === void 0 ? void 0 : prevNode.type.name)) {
+    offset = 0;
+  }
+  return {
+    gap,
+    offset
+  };
+};
+const shouldDescend = node => {
+  if (fg('platform_editor_drag_and_drop_target_v2')) {
+    return !['mediaSingle', 'paragraph', 'heading'].includes(node.type.name);
+  }
+  return true;
+};
+export const createDropTargetDecoration = (pos, props, side, anchorHeightsCache) => {
   return Decoration.widget(pos, (_, getPos) => {
     const element = document.createElement('div');
     element.setAttribute('data-blocks-drop-target-container', 'true');
     element.style.clear = 'unset';
-    ReactDOM.render(dropTargetDec(getPos), element);
+    if (fg('platform_editor_drag_and_drop_target_v2')) {
+      const {
+        gap,
+        offset
+      } = getGapAndOffset(props.prevNode, props.nextNode, props.parentNode);
+      element.style.setProperty(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, `${offset}px`);
+      element.style.setProperty(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, `${gap}px`);
+    }
+    if (fg('platform_editor_drag_and_drop_target_v2')) {
+      ReactDOM.render( /*#__PURE__*/createElement(DropTargetV2, {
+        ...props,
+        getPos,
+        anchorHeightsCache
+      }), element);
+    } else {
+      ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
+        ...props,
+        getPos
+      }), element);
+    }
     return element;
   }, {
     type: 'drop-target-decoration',
-    side: -1
+    side
   });
 };
-export const dropTargetDecorations = (newState, api, formatMessage, activeNode) => {
+export const dropTargetDecorations = (newState, api, formatMessage, activeNode, anchorHeightsCache) => {
   const decs = [];
   unmountDecorations('data-blocks-drop-target-container');
   let prevNode;
   const activeNodePos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
   const activePMNode = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos).nodeAfter;
+  anchorHeightsCache === null || anchorHeightsCache === void 0 ? void 0 : anchorHeightsCache.clear();
+  const prevNodeStack = [];
+  const popNodeStack = depth => {
+    let result;
+    const toDepth = Math.max(depth, 0);
+    while (prevNodeStack.length > toDepth) {
+      result = prevNodeStack.pop();
+    }
+    return result;
+  };
+  const pushNodeStack = (node, depth) => {
+    popNodeStack(depth);
+    prevNodeStack.push(node);
+  };
   newState.doc.descendants((node, pos, parent, index) => {
     let depth = 0;
     // drop target deco at the end position
@@ -42,58 +124,65 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode)
     if (editorExperiment('nested-dnd', true)) {
       depth = newState.doc.resolve(pos).depth;
       if (node.isInline || !parent || DISABLE_CHILD_DROP_TARGET.includes(parent.type.name)) {
-        prevNode = node;
+        if (fg('platform_editor_drag_and_drop_target_v2')) {
+          pushNodeStack(node, depth);
+        } else {
+          prevNode = node;
+        }
         return false;
       }
       if (IGNORE_NODES.includes(node.type.name)) {
-        prevNode = node;
-        return true; //skip over, don't consider it a valid depth
+        if (fg('platform_editor_drag_and_drop_target_v2')) {
+          pushNodeStack(node, depth);
+        } else {
+          prevNode = node;
+        }
+        return shouldDescend(node); //skip over, don't consider it a valid depth
       }
       const canDrop = activePMNode && canMoveNodeToIndex(parent, index, activePMNode);
 
       //NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
       if (!canDrop && !isBlocksDragTargetDebug()) {
-        prevNode = node;
+        if (fg('platform_editor_drag_and_drop_target_v2')) {
+          pushNodeStack(node, depth);
+        } else {
+          prevNode = node;
+        }
         return false; //not valid pos, so nested not valid either
       }
       if (parent.lastChild === node && !isEmptyParagraph(node) && PARENT_WITH_END_DROP_TARGET.includes(parent.type.name)) {
         endPos = pos + node.nodeSize;
       }
     }
-    const previousNode = prevNode; // created scoped variable
-    decs.push(createDropTargetDecoration(pos, getPos => /*#__PURE__*/createElement(DropTarget, {
+    const previousNode = fg('platform_editor_drag_and_drop_target_v2') ? popNodeStack(depth) : prevNode; // created scoped variable
+    decs.push(createDropTargetDecoration(pos, {
       api,
-      getPos,
       prevNode: previousNode,
       nextNode: node,
-      parentNode: parent,
+      parentNode: parent || undefined,
       formatMessage
-    })));
+    }, -1, anchorHeightsCache));
     if (endPos !== undefined) {
-      decs.push(createDropTargetDecoration(endPos, getPos => /*#__PURE__*/createElement(DropTarget, {
+      decs.push(createDropTargetDecoration(endPos, {
         api,
-        getPos,
-        parentNode: parent,
+        prevNode: fg('platform_editor_drag_and_drop_target_v2') ? node : undefined,
+        parentNode: parent || undefined,
         formatMessage
-      })));
+      }, -1, anchorHeightsCache));
     }
-    prevNode = node;
-    return depth < getNestedDepth();
+    if (fg('platform_editor_drag_and_drop_target_v2')) {
+      pushNodeStack(node, depth);
+    } else {
+      prevNode = node;
+    }
+    return depth < getNestedDepth() && shouldDescend(node);
   });
-
-  //TODO: Should this use createDropTargetDecoration?
-  decs.push(Decoration.widget(newState.doc.nodeSize - 2, (_, getPos) => {
-    const element = document.createElement('div');
-    element.setAttribute('data-blocks-drop-target-container', 'true');
-    ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
-      api,
-      getPos,
-      formatMessage
-    }), element);
-    return element;
-  }, {
-    type: 'drop-target-decoration'
-  }));
+  decs.push(createDropTargetDecoration(newState.doc.nodeSize - 2, {
+    api,
+    formatMessage,
+    prevNode: newState.doc.lastChild || undefined,
+    parentNode: newState.doc
+  }, undefined, anchorHeightsCache));
   return decs;
 };
 export const emptyParagraphNodeDecorations = () => {

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

@@ -11,6 +11,7 @@ import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-sc
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { AnchorHeightsCache, isAnchorSupported } from '../utils/anchor-utils';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 import { dragHandleDecoration, dropTargetDecorations, emptyParagraphNodeDecorations, nodeDecorations } from './decorations';
 import { handleMouseOver } from './handle-mouse-over';
@@ -97,6 +98,10 @@ export const createPlugin = (api, getIntl) => {
   if (fg('platform_editor_element_dnd_nested_fix_patch_2')) {
     // TODO: Remove this once FG is used in code
   }
+  let anchorHeightsCache;
+  if (!isAnchorSupported() && fg('platform_editor_drag_and_drop_target_v2')) {
+    anchorHeightsCache = new AnchorHeightsCache();
+  }
   return new SafePlugin({
     key,
     state: {
@@ -244,7 +249,7 @@ export const createPlugin = (api, getIntl) => {
           // if the transaction is only for analytics and user is dragging, continue to draw drop targets
           if (shouldCreateDropTargets || isBlocksDragTargetDebug()) {
             var _meta$activeNode6;
-            const decs = dropTargetDecorations(newState, api, formatMessage, isNestedEnabled ? (_meta$activeNode6 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode6 !== void 0 ? _meta$activeNode6 : mappedActiveNodePos : meta === null || meta === void 0 ? void 0 : meta.activeNode);
+            const decs = dropTargetDecorations(newState, api, formatMessage, isNestedEnabled ? (_meta$activeNode6 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode6 !== void 0 ? _meta$activeNode6 : mappedActiveNodePos : meta === null || meta === void 0 ? void 0 : meta.activeNode, anchorHeightsCache);
             decorations = decorations.add(newState.doc, decs);
           }
         }
@@ -319,6 +324,8 @@ export const createPlugin = (api, getIntl) => {
           return false;
         },
         dragstart(view) {
+          var _anchorHeightsCache;
+          (_anchorHeightsCache = anchorHeightsCache) === null || _anchorHeightsCache === void 0 ? void 0 : _anchorHeightsCache.setEditorView(view);
           view.dispatch(view.state.tr.setMeta(key, {
             isPMDragging: true
           }));

package/dist/es2019/ui/consts.js

@@ -116,7 +116,7 @@ export const nodeMargins = {
     bottom: 0
   },
   codeBlock: {
-    top: 0,
+    top: 12,
     bottom: 0
   },
   panel: {
@@ -124,8 +124,8 @@ export const nodeMargins = {
     bottom: 0
   },
   rule: {
-    top: 20,
-    bottom: 20
+    top: 24,
+    bottom: 24
   },
   mediaSingle: {
     top: 24,

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

@@ -0,0 +1,171 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+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 { layers } from '@atlaskit/theme/constants';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { getNodeAnchor } from '../pm-plugins/decorations';
+import { isAnchorSupported } from '../utils/anchor-utils';
+import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
+import { getNestedNodeLeftPaddingMargin } from './consts';
+const DEFAULT_DROP_INDICATOR_WIDTH = 760;
+const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH = '--editor-block-controls-drop-indicator-width';
+const EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN = '--editor-block-controls-drop-target-leftMargin';
+const EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX = '--editor-block-controls-drop-target-zindex';
+export const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET = '--editor-block-controls-drop-indicator-offset';
+export const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP = '--editor-block-controls-drop-indicator-gap';
+const styleDropTarget = css({
+  marginLeft: `calc(-1 * var(${EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN}, 0))`,
+  paddingLeft: `var(${EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN}, 0)`,
+  position: 'absolute',
+  left: '0',
+  display: 'block',
+  zIndex: `var(${EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX}, 110)`,
+  transform: `translateY(var(${EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET}, 0))`
+});
+const styleDropIndicator = css({
+  height: '100%',
+  margin: '0 auto',
+  position: 'relative',
+  width: `var(${EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH}, 100%)`
+});
+const nestedDropIndicatorStyle = css({
+  position: 'relative'
+});
+const dropZoneStyles = css({
+  margin: 0,
+  position: 'absolute',
+  width: '100%',
+  zIndex: 110,
+  minHeight: '4px'
+});
+const nestedDropZoneStyle = css({
+  left: '4px',
+  right: '4px',
+  width: 'unset'
+});
+const enableDropZone = ['paragraph', 'mediaSingle', 'heading', 'codeBlock', 'decisionList', 'bulletList', 'orderedList', 'taskList', 'extension', 'blockCard'];
+const HoverZone = ({
+  onDragEnter,
+  onDragLeave,
+  onDrop,
+  node,
+  editorWidth,
+  anchorHeightsCache,
+  position,
+  isNestedDropTarget
+}) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) {
+      return dropTargetForElements({
+        element: ref.current,
+        onDragEnter,
+        onDragLeave,
+        onDrop
+      });
+    }
+  }, [onDragEnter, onDragLeave, onDrop]);
+  const hoverZoneUpperStyle = useMemo(() => {
+    const anchorName = node ? getNodeAnchor(node) : '';
+    const heightStyleOffset = `var(--editor-block-controls-drop-indicator-gap, 0)/2`;
+    const transformOffset = `var(${EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET}, 0)`;
+    const heightStyle = anchorName && enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '') ? isAnchorSupported() ? `calc(anchor-size(${anchorName} height)/2 + ${heightStyleOffset})` : `calc(${((anchorHeightsCache === null || anchorHeightsCache === void 0 ? void 0 : anchorHeightsCache.getHeight(anchorName)) || 0) / 2}px + ${heightStyleOffset})` : '4px';
+    const transform = position === 'upper' ? `translateY(calc(-100% + ${transformOffset}))` : `translateY(${transformOffset})`;
+    return css({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      height: heightStyle,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      transform: transform,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      maxWidth: `${editorWidth || 0}px`
+    });
+  }, [anchorHeightsCache, editorWidth, node, position]);
+  return jsx("div", {
+    ref: ref
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: `drop-target-hover-zone-${position}`
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
+    css: [dropZoneStyles, isNestedDropTarget && nestedDropZoneStyle, hoverZoneUpperStyle]
+  });
+};
+export const DropTargetV2 = ({
+  api,
+  getPos,
+  prevNode,
+  nextNode,
+  parentNode,
+  formatMessage,
+  anchorHeightsCache
+}) => {
+  const [isDraggedOver, setIsDraggedOver] = useState(false);
+  const {
+    widthState
+  } = useSharedPluginState(api, ['width']);
+  const isNestedDropTarget = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) !== 'doc';
+  const onDrop = () => {
+    var _api$blockControls;
+    const {
+      activeNode
+    } = (api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {};
+    if (!activeNode) {
+      return;
+    }
+    const pos = getPos();
+    if (activeNode && pos !== undefined) {
+      var _api$core, _api$blockControls2, _api$blockControls2$c;
+      const {
+        pos: start
+      } = activeNode;
+      api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.moveNode(start, pos, undefined, formatMessage));
+    }
+  };
+  const dynamicStyle = {
+    width: isNestedDropTarget ? 'unset' : '100%',
+    [EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH]: isNestedDropTarget ? '100%' : `${(widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH}px`,
+    [EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN]: isNestedDropTarget ? getNestedNodeLeftPaddingMargin(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0',
+    [EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX]: editorExperiment('nested-dnd', true) ? layers.navigation() : layers.card()
+  };
+  return jsx(Fragment, null, jsx(HoverZone, {
+    onDragEnter: () => setIsDraggedOver(true),
+    onDragLeave: () => setIsDraggedOver(false),
+    onDrop: onDrop,
+    node: prevNode,
+    editorWidth: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
+    anchorHeightsCache: anchorHeightsCache,
+    position: "upper",
+    isNestedDropTarget: isNestedDropTarget
+  }), jsx("div", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    css: [styleDropTarget, isNestedDropTarget && nestedDropIndicatorStyle]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: dynamicStyle,
+    "data-testid": "block-ctrl-drop-target"
+  },
+  // 4px gap to clear expand node border
+  (isDraggedOver || isBlocksDragTargetDebug()) && jsx("div", {
+    css: styleDropIndicator,
+    "data-testid": "block-ctrl-drop-indicator"
+  }, jsx(DropIndicator, {
+    edge: "bottom"
+  }))), jsx(HoverZone, {
+    onDragEnter: () => setIsDraggedOver(true),
+    onDragLeave: () => setIsDraggedOver(false),
+    onDrop: onDrop,
+    node: nextNode,
+    editorWidth: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
+    anchorHeightsCache: anchorHeightsCache,
+    position: "lower",
+    isNestedDropTarget: isNestedDropTarget
+  }));
+};

package/dist/es2019/utils/anchor-utils.js

@@ -0,0 +1,51 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import memoizeOne from 'memoize-one';
+export const isAnchorSupported = memoizeOne(() => {
+  // directly use CSS would cause failed SSR tests.
+  if (window.CSS && window.CSS.supports) {
+    return window.CSS.supports('anchor-name: --a');
+  }
+  return false;
+});
+export class AnchorHeightsCache {
+  constructor() {
+    _defineProperty(this, "anchorHeightsMap", {});
+    _defineProperty(this, "isAnchorSupported", isAnchorSupported());
+    _defineProperty(this, "isDirty", true);
+    _defineProperty(this, "view", null);
+  }
+  clear() {
+    this.isDirty = true;
+    this.anchorHeightsMap = {};
+  }
+  getHeights() {
+    if (this.isDirty) {
+      var _this$view;
+      const anchorElements = ((_this$view = this.view) === null || _this$view === void 0 ? void 0 : _this$view.dom.querySelectorAll('[data-drag-handler-anchor-name]')) || [];
+      this.anchorHeightsMap = Array.from(anchorElements).reduce((prev, curr) => {
+        const anchorName = curr.getAttribute('data-drag-handler-anchor-name');
+        if (anchorName) {
+          return {
+            ...prev,
+            [anchorName]: curr.clientHeight
+          };
+        }
+        return prev;
+      }, {});
+      this.isDirty = false;
+    }
+    return this.anchorHeightsMap;
+  }
+  setEditorView(view) {
+    if (this.view !== view) {
+      this.view = view;
+    }
+  }
+  getHeight(anchorName) {
+    if (this.isAnchorSupported) {
+      return null;
+    }
+    const heights = this.getHeights();
+    return heights[anchorName];
+  }
+}