@atlaskit/editor-plugin-block-controls 2.2.2 → 2.3.1

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

@@ -1,6 +1,8 @@
 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';
@@ -10,8 +12,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';
 var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
@@ -21,24 +25,101 @@ var DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
 var getNestedDepth = function getNestedDepth() {
   return editorExperiment('nested-dnd', true) ? 100 : 0;
 };
-var createDropTargetDecoration = function createDropTargetDecoration(pos, dropTargetDec) {
+export var getNodeAnchor = function getNodeAnchor(node) {
+  var handleId = ObjHash.getForNode(node);
+  return "--node-anchor-".concat(node.type.name, "-").concat(handleId);
+};
+var getNodeMargins = function getNodeMargins(node) {
+  if (!node) {
+    return nodeMargins['default'];
+  }
+  var nodeTypeName = node.type.name;
+  if (nodeTypeName === 'heading') {
+    return nodeMargins["heading".concat(node.attrs.level)] || nodeMargins['default'];
+  }
+  return nodeMargins[nodeTypeName] || nodeMargins['default'];
+};
+var getGapAndOffset = function getGapAndOffset(prevNode, nextNode, parentNode) {
+  if (!prevNode && nextNode) {
+    // first node
+    return {
+      gap: 0,
+      offset: 0
+    };
+  } else if (prevNode && !nextNode) {
+    return {
+      gap: 0,
+      offset: 0
+    };
+  }
+  var top = getNodeMargins(nextNode).top || 4;
+  var bottom = getNodeMargins(prevNode).bottom || 4;
+  var gap = Math.max(top, bottom);
+  var 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: gap,
+    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;
+};
+export var createDropTargetDecoration = function createDropTargetDecoration(pos, props, side, anchorHeightsCache) {
   return Decoration.widget(pos, function (_, getPos) {
     var 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')) {
+      var _getGapAndOffset = getGapAndOffset(props.prevNode, props.nextNode, props.parentNode),
+        gap = _getGapAndOffset.gap,
+        offset = _getGapAndOffset.offset;
+      element.style.setProperty(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, "".concat(offset, "px"));
+      element.style.setProperty(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, "".concat(gap, "px"));
+    }
+    if (fg('platform_editor_drag_and_drop_target_v2')) {
+      ReactDOM.render( /*#__PURE__*/createElement(DropTargetV2, _objectSpread(_objectSpread({}, props), {}, {
+        getPos: getPos,
+        anchorHeightsCache: anchorHeightsCache
+      })), element);
+    } else {
+      ReactDOM.render( /*#__PURE__*/createElement(DropTarget, _objectSpread(_objectSpread({}, props), {}, {
+        getPos: getPos
+      })), element);
+    }
     return element;
   }, {
     type: 'drop-target-decoration',
-    side: -1
+    side: side
   });
 };
-export var dropTargetDecorations = function dropTargetDecorations(newState, api, formatMessage, activeNode) {
+export var dropTargetDecorations = function dropTargetDecorations(newState, api, formatMessage, activeNode, anchorHeightsCache) {
   var decs = [];
   unmountDecorations('data-blocks-drop-target-container');
   var prevNode;
   var activeNodePos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
   var activePMNode = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos).nodeAfter;
+  anchorHeightsCache === null || anchorHeightsCache === void 0 || anchorHeightsCache.clear();
+  var prevNodeStack = [];
+  var popNodeStack = function popNodeStack(depth) {
+    var result;
+    var toDepth = Math.max(depth, 0);
+    while (prevNodeStack.length > toDepth) {
+      result = prevNodeStack.pop();
+    }
+    return result;
+  };
+  var pushNodeStack = function pushNodeStack(node, depth) {
+    popNodeStack(depth);
+    prevNodeStack.push(node);
+  };
   newState.doc.descendants(function (node, pos, parent, index) {
     var depth = 0;
     // drop target deco at the end position
@@ -46,62 +127,65 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
     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
       }
       var 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;
       }
     }
-    var previousNode = prevNode; // created scoped variable
-    decs.push(createDropTargetDecoration(pos, function (getPos) {
-      return /*#__PURE__*/createElement(DropTarget, {
+    var previousNode = fg('platform_editor_drag_and_drop_target_v2') ? popNodeStack(depth) : prevNode; // created scoped variable
+    decs.push(createDropTargetDecoration(pos, {
+      api: api,
+      prevNode: previousNode,
+      nextNode: node,
+      parentNode: parent || undefined,
+      formatMessage: formatMessage
+    }, -1, anchorHeightsCache));
+    if (endPos !== undefined) {
+      decs.push(createDropTargetDecoration(endPos, {
         api: api,
-        getPos: getPos,
-        prevNode: previousNode,
-        nextNode: node,
-        parentNode: parent,
+        prevNode: fg('platform_editor_drag_and_drop_target_v2') ? node : undefined,
+        parentNode: parent || undefined,
         formatMessage: formatMessage
-      });
-    }));
-    if (endPos !== undefined) {
-      decs.push(createDropTargetDecoration(endPos, function (getPos) {
-        return /*#__PURE__*/createElement(DropTarget, {
-          api: api,
-          getPos: getPos,
-          parentNode: parent,
-          formatMessage: formatMessage
-        });
-      }));
+      }, -1, anchorHeightsCache));
+    }
+    if (fg('platform_editor_drag_and_drop_target_v2')) {
+      pushNodeStack(node, depth);
+    } else {
+      prevNode = node;
     }
-    prevNode = node;
-    return depth < getNestedDepth();
+    return depth < getNestedDepth() && shouldDescend(node);
   });
-
-  //TODO: Should this use createDropTargetDecoration?
-  decs.push(Decoration.widget(newState.doc.nodeSize - 2, function (_, getPos) {
-    var element = document.createElement('div');
-    element.setAttribute('data-blocks-drop-target-container', 'true');
-    ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
-      api: api,
-      getPos: getPos,
-      formatMessage: formatMessage
-    }), element);
-    return element;
-  }, {
-    type: 'drop-target-decoration'
-  }));
+  decs.push(createDropTargetDecoration(newState.doc.nodeSize - 2, {
+    api: api,
+    formatMessage: formatMessage,
+    prevNode: newState.doc.lastChild || undefined,
+    parentNode: newState.doc
+  }, undefined, anchorHeightsCache));
   return decs;
 };
 export var emptyParagraphNodeDecorations = function emptyParagraphNodeDecorations() {

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

@@ -12,6 +12,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';
@@ -95,6 +96,10 @@ export var createPlugin = function createPlugin(api, getIntl) {
   if (fg('platform_editor_element_dnd_nested_fix_patch_2')) {
     // TODO: Remove this once FG is used in code
   }
+  var anchorHeightsCache;
+  if (!isAnchorSupported() && fg('platform_editor_drag_and_drop_target_v2')) {
+    anchorHeightsCache = new AnchorHeightsCache();
+  }
   return new SafePlugin({
     key: key,
     state: {
@@ -263,7 +268,7 @@ export var createPlugin = function 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;
-            var _decs2 = 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);
+            var _decs2 = 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, _decs2);
           }
         }
@@ -340,6 +345,8 @@ export var createPlugin = function createPlugin(api, getIntl) {
           return false;
         },
         dragstart: function dragstart(view) {
+          var _anchorHeightsCache;
+          (_anchorHeightsCache = anchorHeightsCache) === null || _anchorHeightsCache === void 0 || _anchorHeightsCache.setEditorView(view);
           view.dispatch(view.state.tr.setMeta(key, {
             isPMDragging: true
           }));

package/dist/esm/ui/consts.js

@@ -100,7 +100,7 @@ export var nodeMargins = {
     bottom: 0
   },
   codeBlock: {
-    top: 0,
+    top: 12,
     bottom: 0
   },
   panel: {
@@ -108,8 +108,8 @@ export var nodeMargins = {
     bottom: 0
   },
   rule: {
-    top: 20,
-    bottom: 20
+    top: 24,
+    bottom: 24
   },
   mediaSingle: {
     top: 24,

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

@@ -0,0 +1,176 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * @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';
+var DEFAULT_DROP_INDICATOR_WIDTH = 760;
+var EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH = '--editor-block-controls-drop-indicator-width';
+var EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN = '--editor-block-controls-drop-target-leftMargin';
+var EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX = '--editor-block-controls-drop-target-zindex';
+export var EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET = '--editor-block-controls-drop-indicator-offset';
+export var EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP = '--editor-block-controls-drop-indicator-gap';
+var styleDropTarget = css({
+  marginLeft: "calc(-1 * var(".concat(EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, ", 0))"),
+  paddingLeft: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, ", 0)"),
+  position: 'absolute',
+  left: '0',
+  display: 'block',
+  zIndex: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX, ", 110)"),
+  transform: "translateY(var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, ", 0))")
+});
+var styleDropIndicator = css({
+  height: '100%',
+  margin: '0 auto',
+  position: 'relative',
+  width: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, ", 100%)")
+});
+var nestedDropIndicatorStyle = css({
+  position: 'relative'
+});
+var dropZoneStyles = css({
+  margin: 0,
+  position: 'absolute',
+  width: '100%',
+  zIndex: 110,
+  minHeight: '4px'
+});
+var nestedDropZoneStyle = css({
+  left: '4px',
+  right: '4px',
+  width: 'unset'
+});
+var enableDropZone = ['paragraph', 'mediaSingle', 'heading', 'codeBlock', 'decisionList', 'bulletList', 'orderedList', 'taskList', 'extension', 'blockCard'];
+var HoverZone = function HoverZone(_ref) {
+  var onDragEnter = _ref.onDragEnter,
+    onDragLeave = _ref.onDragLeave,
+    onDrop = _ref.onDrop,
+    node = _ref.node,
+    editorWidth = _ref.editorWidth,
+    anchorHeightsCache = _ref.anchorHeightsCache,
+    position = _ref.position,
+    isNestedDropTarget = _ref.isNestedDropTarget;
+  var ref = useRef(null);
+  useEffect(function () {
+    if (ref.current) {
+      return dropTargetForElements({
+        element: ref.current,
+        onDragEnter: onDragEnter,
+        onDragLeave: onDragLeave,
+        onDrop: onDrop
+      });
+    }
+  }, [onDragEnter, onDragLeave, onDrop]);
+  var hoverZoneUpperStyle = useMemo(function () {
+    var anchorName = node ? 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) || '') ? isAnchorSupported() ? "calc(anchor-size(".concat(anchorName, " height)/2 + ").concat(heightStyleOffset, ")") : "calc(".concat(((anchorHeightsCache === null || anchorHeightsCache === void 0 ? void 0 : anchorHeightsCache.getHeight(anchorName)) || 0) / 2, "px + ").concat(heightStyleOffset, ")") : '4px';
+    var transform = position === 'upper' ? "translateY(calc(-100% + ".concat(transformOffset, "))") : "translateY(".concat(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: "".concat(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-".concat(position)
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
+    css: [dropZoneStyles, isNestedDropTarget && nestedDropZoneStyle, hoverZoneUpperStyle]
+  });
+};
+export var DropTargetV2 = function DropTargetV2(_ref2) {
+  var _dynamicStyle;
+  var api = _ref2.api,
+    getPos = _ref2.getPos,
+    prevNode = _ref2.prevNode,
+    nextNode = _ref2.nextNode,
+    parentNode = _ref2.parentNode,
+    formatMessage = _ref2.formatMessage,
+    anchorHeightsCache = _ref2.anchorHeightsCache;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDraggedOver = _useState2[0],
+    setIsDraggedOver = _useState2[1];
+  var _useSharedPluginState = useSharedPluginState(api, ['width']),
+    widthState = _useSharedPluginState.widthState;
+  var isNestedDropTarget = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) !== 'doc';
+  var onDrop = function onDrop() {
+    var _api$blockControls;
+    var _ref3 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
+      activeNode = _ref3.activeNode;
+    if (!activeNode) {
+      return;
+    }
+    var pos = getPos();
+    if (activeNode && pos !== undefined) {
+      var _api$core, _api$blockControls2;
+      var start = activeNode.pos;
+      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveNode(start, pos, undefined, formatMessage));
+    }
+  };
+  var dynamicStyle = (_dynamicStyle = {
+    width: isNestedDropTarget ? 'unset' : '100%'
+  }, _defineProperty(_dynamicStyle, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat((widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH, "px")), _defineProperty(_dynamicStyle, EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, isNestedDropTarget ? getNestedNodeLeftPaddingMargin(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0'), _defineProperty(_dynamicStyle, EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX, editorExperiment('nested-dnd', true) ? layers.navigation() : layers.card()), _dynamicStyle);
+  return jsx(Fragment, null, jsx(HoverZone, {
+    onDragEnter: function onDragEnter() {
+      return setIsDraggedOver(true);
+    },
+    onDragLeave: function onDragLeave() {
+      return 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: function onDragEnter() {
+      return setIsDraggedOver(true);
+    },
+    onDragLeave: function onDragLeave() {
+      return setIsDraggedOver(false);
+    },
+    onDrop: onDrop,
+    node: nextNode,
+    editorWidth: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
+    anchorHeightsCache: anchorHeightsCache,
+    position: "lower",
+    isNestedDropTarget: isNestedDropTarget
+  }));
+};

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

@@ -0,0 +1,63 @@
+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 memoizeOne from 'memoize-one';
+export var isAnchorSupported = memoizeOne(function () {
+  // directly use CSS would cause failed SSR tests.
+  if (window.CSS && window.CSS.supports) {
+    return window.CSS.supports('anchor-name: --a');
+  }
+  return false;
+});
+export var AnchorHeightsCache = /*#__PURE__*/function () {
+  function AnchorHeightsCache() {
+    _classCallCheck(this, AnchorHeightsCache);
+    _defineProperty(this, "anchorHeightsMap", {});
+    _defineProperty(this, "isAnchorSupported", isAnchorSupported());
+    _defineProperty(this, "isDirty", true);
+    _defineProperty(this, "view", null);
+  }
+  _createClass(AnchorHeightsCache, [{
+    key: "clear",
+    value: function clear() {
+      this.isDirty = true;
+      this.anchorHeightsMap = {};
+    }
+  }, {
+    key: "getHeights",
+    value: function getHeights() {
+      if (this.isDirty) {
+        var _this$view;
+        var 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(function (prev, curr) {
+          var anchorName = curr.getAttribute('data-drag-handler-anchor-name');
+          if (anchorName) {
+            return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, anchorName, curr.clientHeight));
+          }
+          return prev;
+        }, {});
+        this.isDirty = false;
+      }
+      return this.anchorHeightsMap;
+    }
+  }, {
+    key: "setEditorView",
+    value: function setEditorView(view) {
+      if (this.view !== view) {
+        this.view = view;
+      }
+    }
+  }, {
+    key: "getHeight",
+    value: function getHeight(anchorName) {
+      if (this.isAnchorSupported) {
+        return null;
+      }
+      var heights = this.getHeights();
+      return heights[anchorName];
+    }
+  }]);
+  return AnchorHeightsCache;
+}();

package/dist/esm/utils/getNestedNodePosition.js

@@ -9,10 +9,10 @@ export var getNestedNodePosition = function getNestedNodePosition(state) {
     if ($pos.depth < 1) {
       return nestedNodePos;
     }
-    var parentNodeOfSpecificTypes = findParentNodeOfType([state.schema.nodes.bulletList, state.schema.nodes.orderedList, state.schema.nodes.blockquote, state.schema.nodes.taskList])(state.selection);
+    var parentNodeOfSpecificTypes = findParentNodeOfType([state.schema.nodes.bulletList, state.schema.nodes.orderedList, state.schema.nodes.blockquote, state.schema.nodes.taskList, state.schema.nodes.decisionList])(state.selection);
     if (parentNodeOfSpecificTypes) {
       var parentNodeType = parentNodeOfSpecificTypes.node.type.name;
-      nestedNodePos = ['bulletList', 'orderedList'].includes(parentNodeType) ? $pos.before($pos.depth - 1) : ['blockquote', 'taskList'].includes(parentNodeType) ? $pos.before() : nestedNodePos;
+      nestedNodePos = ['bulletList', 'orderedList'].includes(parentNodeType) ? $pos.before($pos.depth - 1) : ['blockquote', 'taskList', 'decisionList'].includes(parentNodeType) ? $pos.before() : nestedNodePos;
     }
   } else {
     nestedNodePos = selection.$from.pos;

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

@@ -1,9 +1,14 @@
 import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import type { ActiveNode, BlockControlsPlugin, HandleOptions } from '../types';
-export declare const dropTargetDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNode?: ActiveNode) => Decoration[];
+import { type DropTargetProps } from '../ui/drop-target';
+import { type AnchorHeightsCache } from '../utils/anchor-utils';
+export declare const getNodeAnchor: (node: PMNode) => string;
+export declare const createDropTargetDecoration: (pos: number, props: Omit<DropTargetProps, 'getPos'>, side?: number, anchorHeightsCache?: AnchorHeightsCache) => Decoration;
+export declare const dropTargetDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNode?: ActiveNode, anchorHeightsCache?: AnchorHeightsCache) => Decoration[];
 export declare const emptyParagraphNodeDecorations: () => Decoration;
 export declare const nodeDecorations: (newState: EditorState) => Decoration[];
 export declare const dragHandleDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, getIntl: () => IntlShape, pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => Decoration;

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

@@ -0,0 +1,8 @@
+import { jsx } from '@emotion/react';
+import { type AnchorHeightsCache } from '../utils/anchor-utils';
+import { type DropTargetProps } from './drop-target';
+export declare const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET = "--editor-block-controls-drop-indicator-offset";
+export declare const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP = "--editor-block-controls-drop-indicator-gap";
+export declare const DropTargetV2: ({ api, getPos, prevNode, nextNode, parentNode, formatMessage, anchorHeightsCache, }: DropTargetProps & {
+    anchorHeightsCache?: AnchorHeightsCache | undefined;
+}) => jsx.JSX.Element;

package/dist/types/utils/anchor-utils.d.ts

@@ -0,0 +1,12 @@
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const isAnchorSupported: import("memoize-one").MemoizedFn<() => boolean>;
+export declare class AnchorHeightsCache {
+    private anchorHeightsMap;
+    private isAnchorSupported;
+    private isDirty;
+    private view;
+    clear(): void;
+    private getHeights;
+    setEditorView(view: EditorView): void;
+    getHeight(anchorName: string): number | null;
+}

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

@@ -1,9 +1,14 @@
 import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import type { ActiveNode, BlockControlsPlugin, HandleOptions } from '../types';
-export declare const dropTargetDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNode?: ActiveNode) => Decoration[];
+import { type DropTargetProps } from '../ui/drop-target';
+import { type AnchorHeightsCache } from '../utils/anchor-utils';
+export declare const getNodeAnchor: (node: PMNode) => string;
+export declare const createDropTargetDecoration: (pos: number, props: Omit<DropTargetProps, 'getPos'>, side?: number, anchorHeightsCache?: AnchorHeightsCache) => Decoration;
+export declare const dropTargetDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNode?: ActiveNode, anchorHeightsCache?: AnchorHeightsCache) => Decoration[];
 export declare const emptyParagraphNodeDecorations: () => Decoration;
 export declare const nodeDecorations: (newState: EditorState) => Decoration[];
 export declare const dragHandleDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, getIntl: () => IntlShape, pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => Decoration;

package/dist/types-ts4.5/ui/drop-target-v2.d.ts

@@ -0,0 +1,8 @@
+import { jsx } from '@emotion/react';
+import { type AnchorHeightsCache } from '../utils/anchor-utils';
+import { type DropTargetProps } from './drop-target';
+export declare const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET = "--editor-block-controls-drop-indicator-offset";
+export declare const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP = "--editor-block-controls-drop-indicator-gap";
+export declare const DropTargetV2: ({ api, getPos, prevNode, nextNode, parentNode, formatMessage, anchorHeightsCache, }: DropTargetProps & {
+    anchorHeightsCache?: AnchorHeightsCache | undefined;
+}) => jsx.JSX.Element;

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

@@ -0,0 +1,12 @@
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const isAnchorSupported: import("memoize-one").MemoizedFn<() => boolean>;
+export declare class AnchorHeightsCache {
+    private anchorHeightsMap;
+    private isAnchorSupported;
+    private isDirty;
+    private view;
+    clear(): void;
+    private getHeights;
+    setEditorView(view: EditorView): void;
+    getHeight(anchorName: string): number | null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.2.2",
+	"version": "2.3.1",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -150,6 +150,9 @@
 		},
 		"platform_editor_element_dnd_nested_a11y": {
 			"type": "boolean"
+		},
+		"platform_editor_drag_and_drop_target_v2": {
+			"type": "boolean"
 		}
 	}
 }