@atlaskit/editor-plugin-block-controls 2.21.1 → 2.21.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.21.3
+
+### Patch Changes
+
+- [#103498](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103498)
+  [`a2fd134b068cd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a2fd134b068cd) -
+  [ED-26267] Fix a bug where when selection is across multiple nodes, dragging a drag handle within
+  the selection range does not trigger pragmatic DnD
+
+## 2.21.2
+
+### Patch Changes
+
+- [#103365](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103365)
+  [`fb69e4b7a2f59`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fb69e4b7a2f59) -
+  ED-26243 Removed unused drop-target v1
+
 ## 2.21.1
 
 ### Patch Changes

package/dist/cjs/pm-plugins/decorations-drop-target.js

@@ -14,8 +14,8 @@ var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("../ui/consts");
+var _dropTarget = require("../ui/drop-target");
 var _dropTargetLayout = require("../ui/drop-target-layout");
-var _dropTargetV = require("../ui/drop-target-v2");
 var _decorationsCommon = require("./decorations-common");
 var _consts2 = require("./utils/consts");
 var _dragTargetDebug = require("./utils/drag-target-debug");
@@ -104,19 +104,19 @@ var createDropTargetDecoration = exports.createDropTargetDecoration = function c
     var _getGapAndOffset = getGapAndOffset(props.prevNode, props.nextNode, props.parentNode),
       gap = _getGapAndOffset.gap,
       offset = _getGapAndOffset.offset;
-    element.style.setProperty(_dropTargetV.EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, "".concat(offset, "px"));
-    element.style.setProperty(_dropTargetV.EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, "".concat(gap, "px"));
+    element.style.setProperty(_dropTarget.EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, "".concat(offset, "px"));
+    element.style.setProperty(_dropTarget.EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, "".concat(gap, "px"));
     element.style.setProperty('display', 'block');
     if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
       nodeViewPortalProviderAPI.render(function () {
-        return /*#__PURE__*/(0, _react.createElement)(_dropTargetV.DropTargetV2, _objectSpread(_objectSpread({}, props), {}, {
+        return /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, _objectSpread(_objectSpread({}, props), {}, {
           getPos: getPos,
           anchorRectCache: anchorRectCache,
           isSameLayout: isSameLayout
         }));
       }, element, key);
     } else {
-      _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTargetV.DropTargetV2, _objectSpread(_objectSpread({}, props), {}, {
+      _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, _objectSpread(_objectSpread({}, props), {}, {
         getPos: getPos,
         anchorRectCache: anchorRectCache,
         isSameLayout: isSameLayout

package/dist/cjs/ui/drag-handle.js

@@ -11,6 +11,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _bindEventListener = require("bind-event-listener");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _browser = require("@atlaskit/editor-common/browser");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
@@ -19,6 +20,7 @@ var _dragHandler = _interopRequireDefault(require("@atlaskit/icon/glyph/drag-han
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
+var _primitives = require("@atlaskit/primitives");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _main = require("../pm-plugins/main");
@@ -34,6 +36,11 @@ var _dragPreview = require("./drag-preview");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+var iconWrapperStyles = (0, _primitives.xcss)({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
 var dragHandleButtonStyles = (0, _react2.css)({
   position: 'absolute',
   padding: "var(--ds-space-025, 2px)".concat(" 0"),
@@ -72,6 +79,27 @@ var selectedStyles = (0, _react2.css)({
   backgroundColor: "var(--ds-background-selected, #E9F2FF)",
   color: "var(--ds-icon-selected, #0C66E4)"
 });
+
+// [Chrome only] When selection contains multiple nodes and then drag a drag handle that is within the selection range,
+// icon span receives dragStart event, instead of button, and since it is not registered as a draggable element
+// with pragmatic DnD and pragmatic DnD is not triggered
+var handleIconDragStart = function handleIconDragStart(e) {
+  if (!_browser.browser.chrome || !(0, _platformFeatureFlags.fg)('platform_editor_dnd_update_drag_start_target')) {
+    return;
+  }
+  // prevent dragStart handler triggered by icon
+  e.stopPropagation();
+  var dragEvent = new DragEvent('dragstart', {
+    bubbles: true,
+    cancelable: true,
+    dataTransfer: e.dataTransfer
+  });
+  if (e.target instanceof HTMLElement) {
+    var _e$target$closest;
+    // re-dispatch drag event on button so that pragmatic DnD can be triggered properly
+    (_e$target$closest = e.target.closest('button')) === null || _e$target$closest === void 0 || _e$target$closest.dispatchEvent(dragEvent);
+  }
+};
 var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   var _api$core2, _api$analytics2, _api$core4;
   var view = _ref.view,
@@ -411,10 +439,16 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         onMouseDown: handleMouseDown,
         onKeyDown: handleKeyDown,
         "data-testid": "block-ctrl-drag-handle"
-      }, (0, _react2.jsx)(_dragHandler.default, {
+      }, (0, _react2.jsx)(_primitives.Box, {
+        as: "span",
+        xcss: iconWrapperStyles
+        // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+        ,
+        onDragStart: handleIconDragStart
+      }, ' ', (0, _react2.jsx)(_dragHandler.default, {
         label: "",
         size: "medium"
-      }))
+      })))
     );
   };
   return (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873') ? (0, _react2.jsx)(_tooltip.default, {

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

@@ -4,7 +4,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DropTarget = void 0;
+exports.EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET = exports.EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP = exports.DropTarget = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
@@ -14,8 +15,13 @@ 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 _decorationsCommon = require("../pm-plugins/decorations-common");
+var _activeAnchorTracker = require("../pm-plugins/utils/active-anchor-tracker");
+var _anchorUtils = require("../pm-plugins/utils/anchor-utils");
 var _dragTargetDebug = require("../pm-plugins/utils/drag-target-debug");
+var _inlineDropTarget = require("../pm-plugins/utils/inline-drop-target");
 var _consts = require("./consts");
+var _inlineDropTarget2 = require("./inline-drop-target");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -27,15 +33,16 @@ 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';
+var EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET = exports.EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET = '--editor-block-controls-drop-indicator-offset';
+var EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP = exports.EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP = '--editor-block-controls-drop-indicator-gap';
 var styleDropTarget = (0, _react2.css)({
-  height: "var(--ds-space-100, 8px)",
-  marginTop: "var(--ds-space-negative-100, -8px)",
   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)")
+  zIndex: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX, ", 110)"),
+  transform: "translateY(var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, ", 0))")
 });
 var styleDropIndicator = (0, _react2.css)({
   height: '100%',
@@ -46,65 +53,141 @@ var styleDropIndicator = (0, _react2.css)({
 var nestedDropIndicatorStyle = (0, _react2.css)({
   position: 'relative'
 });
-var marginLookupMap = Object.fromEntries(Object.entries(_consts.spaceLookupMap).map(function (_ref, i) {
-  var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
-    key = _ref2[0],
-    value = _ref2[1];
-  return [key,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-  (0, _react2.css)({
-    transform: "translateY(".concat(value, ")")
-  })];
-}));
-var getNodeMargins = function getNodeMargins(node) {
-  if (!node) {
-    return _consts.nodeMargins['default'];
-  }
-  var nodeTypeName = node.type.name;
-  if (nodeTypeName === 'heading') {
-    return _consts.nodeMargins["heading".concat(node.attrs.level)] || _consts.nodeMargins['default'];
-  }
-  return _consts.nodeMargins[nodeTypeName] || _consts.nodeMargins['default'];
-};
-var getNestedDropTargetMarginTop = function getNestedDropTargetMarginTop(prevNode, nextNode, isNestedDropTarget) {
-  if (!prevNode || !nextNode) {
-    return (0, _react2.css)({
-      marginTop: "var(--ds-space-negative-100, -8px)"
-    });
-  }
-  var top = getNodeMargins(nextNode).top;
-  var bottom = getNodeMargins(prevNode).bottom;
-  if (['rule', 'media', 'mediaSingle'].includes(prevNode.type.name) && isNestedDropTarget && top > 0 && bottom > 0) {
-    var collapsedMarginOffset = top === bottom ? top : Math.abs(top - bottom);
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-    var marginTop = _consts.dropTargetMarginMap[-collapsedMarginOffset - 8] || "-".concat(collapsedMarginOffset + 8, "px");
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+var dropZoneStyles = (0, _react2.css)({
+  margin: 0,
+  position: 'absolute',
+  width: '100%',
+  zIndex: 110,
+  minHeight: '4px'
+});
+var nestedDropZoneStyle = (0, _react2.css)({
+  left: '4px',
+  right: '4px',
+  width: 'unset'
+});
+var enableDropZone = ['paragraph', 'mediaSingle', 'heading', 'codeBlock', 'decisionList', 'bulletList', 'orderedList', 'taskList', 'extension', 'blockCard'];
+
+// This z index is used in container like layout
+var fullHeightStyleAdjustZIndexStyle = (0, _react2.css)({
+  zIndex: 0
+});
+var HoverZone = function HoverZone(_ref) {
+  var _onDragEnter = _ref.onDragEnter,
+    onDragLeave = _ref.onDragLeave,
+    onDrop = _ref.onDrop,
+    node = _ref.node,
+    parent = _ref.parent,
+    editorWidth = _ref.editorWidth,
+    anchorRectCache = _ref.anchorRectCache,
+    position = _ref.position,
+    isNestedDropTarget = _ref.isNestedDropTarget,
+    dropTargetStyle = _ref.dropTargetStyle;
+  var ref = (0, _react.useRef)(null);
+  var isRemainingheight = dropTargetStyle === 'remainingHeight';
+  var anchorName = (0, _react.useMemo)(function () {
+    return node ? (0, _decorationsCommon.getNodeAnchor)(node) : '';
+  }, [node]);
+  var _useActiveAnchorTrack = (0, _activeAnchorTracker.useActiveAnchorTracker)(anchorName),
+    _useActiveAnchorTrack2 = (0, _slicedToArray2.default)(_useActiveAnchorTrack, 2),
+    _isActive = _useActiveAnchorTrack2[0],
+    setActiveAnchor = _useActiveAnchorTrack2[1];
+  (0, _react.useEffect)(function () {
+    if (ref.current) {
+      return (0, _adapter.dropTargetForElements)({
+        element: ref.current,
+        onDragEnter: function onDragEnter() {
+          if (!isNestedDropTarget && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
+            setActiveAnchor();
+          }
+          _onDragEnter();
+        },
+        onDragLeave: onDragLeave,
+        onDrop: onDrop
+      });
+    }
+  }, [isNestedDropTarget, _onDragEnter, onDragLeave, onDrop, setActiveAnchor]);
+  var hoverZoneUpperStyle = (0, _react.useMemo)(function () {
+    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';
+    var transform = position === 'upper' ? "translateY(calc(-100% + ".concat(transformOffset, "))") : "translateY(".concat(transformOffset, ")");
     return (0, _react2.css)({
-      marginTop: marginTop
+      // 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")
     });
-  }
-};
-var getDropTargetOffsetStyle = function getDropTargetOffsetStyle(prevNode, nextNode) {
-  if (!prevNode || !nextNode) {
-    return null;
-  }
-  var top = getNodeMargins(nextNode).top;
-  var bottom = getNodeMargins(prevNode).bottom;
-  var marginDiff = Math.round((top - bottom) / 2);
-  if (marginDiff === 0) {
+  }, [anchorName, anchorRectCache, editorWidth, node === null || node === void 0 ? void 0 : node.type.name, position]);
+
+  /**
+   * 1. Above the last empty line
+   * 2. Below the last element
+   *
+   * Both cases will take the remaining height of the the container
+   */
+  var heightStyle = (0, _react.useMemo)(function () {
+    // only apply upper drop zone
+    if (isRemainingheight && position === 'upper') {
+      // previous 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) || '');
+        if ((0, _anchorUtils.isAnchorSupported)()) {
+          top = enabledDropZone ? "calc(anchor(".concat(_anchorName, " 50%))") : "calc(anchor(".concat(_anchorName, " bottom) - 4px)");
+        } else if (anchorRectCache) {
+          var preNodeTopPos = anchorRectCache.getTop(_anchorName) || 0;
+          var prevNodeHeight = anchorRectCache.getHeight(_anchorName) || 0;
+          top = enabledDropZone ? "calc(".concat(preNodeTopPos, "px + ").concat(prevNodeHeight / 2, "px)") : "calc(".concat(preNodeTopPos, "px + ").concat(prevNodeHeight, "px - 4px)");
+        } else {
+          // Should not happen
+          return null;
+        }
+      } else {
+        // first empty paragraph
+        top = '4px';
+      }
+      return (0, _react2.css)({
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+        top: top,
+        bottom: '4px',
+        height: 'unset',
+        zIndex: 10,
+        transform: 'none'
+      });
+    }
     return null;
-  }
-  var offset = Math.max(Math.min(marginDiff, 24), -24);
-  return marginLookupMap[offset];
+  }, [anchorRectCache, isRemainingheight, node, position]);
+  var isFullHeightInLayout = isRemainingheight && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutColumn';
+  return (0, _react2.jsx)("div", {
+    ref: ref
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: "drop-target-hover-zone-".concat(position),
+    "data-testid": "drop-target-zone-".concat(position)
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
+    css: [dropZoneStyles, isNestedDropTarget && nestedDropZoneStyle,
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    hoverZoneUpperStyle,
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    heightStyle, isFullHeightInLayout && fullHeightStyleAdjustZIndexStyle]
+  });
 };
-var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
-  var api = _ref3.api,
-    getPos = _ref3.getPos,
-    prevNode = _ref3.prevNode,
-    nextNode = _ref3.nextNode,
-    parentNode = _ref3.parentNode,
-    formatMessage = _ref3.formatMessage;
-  var ref = (0, _react.useRef)(null);
+var DropTarget = exports.DropTarget = function DropTarget(props) {
+  var _api$blockControls;
+  var api = props.api,
+    getPos = props.getPos,
+    prevNode = props.prevNode,
+    nextNode = props.nextNode,
+    parentNode = props.parentNode,
+    formatMessage = props.formatMessage,
+    anchorRectCache = props.anchorRectCache,
+    _props$dropTargetStyl = props.dropTargetStyle,
+    dropTargetStyle = _props$dropTargetStyl === void 0 ? 'default' : _props$dropTargetStyl,
+    isSameLayout = props.isSameLayout;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isDraggedOver = _useState2[0],
@@ -112,102 +195,73 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width']),
     widthState = _useSharedPluginState.widthState;
   var isNestedDropTarget = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) !== 'doc';
-  (0, _react.useEffect)(function () {
-    var element = ref.current;
-    if (!element) {
+  var _ref2 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
+    activeNode = _ref2.activeNode;
+  var onDrop = function onDrop() {
+    if (!activeNode) {
       return;
     }
-
-    // This should be moved to platform/packages/editor/editor-plugin-block-controls/src/pm-plugins/utils/validation.ts
-    // Since we are moved to drop-target-v2
-    // Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
-    if ((0, _experiments.editorExperiment)('nest-media-and-codeblock-in-quote', false)) {
-      var _api$blockControls;
-      var _ref4 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
-        activeNode = _ref4.activeNode;
-      var parentNodeType = parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name;
-      var activeNodeType = activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType;
-      if (parentNodeType === 'blockquote' && (activeNodeType === 'mediaGroup' || activeNodeType === 'mediaSingle' || activeNodeType === 'codeBlock')) {
-        return;
-      }
-    }
-    if ((0, _experiments.editorExperiment)('nested-expand-in-expand', false)) {
-      var _api$blockControls2;
-      var _ref5 = (api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.sharedState.currentState()) || {},
-        _activeNode = _ref5.activeNode;
-      var _parentNodeType = parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name;
-      var _activeNodeType = _activeNode === null || _activeNode === void 0 ? void 0 : _activeNode.nodeType;
-      if (_parentNodeType === 'expand' && (_activeNodeType === 'expand' || _activeNodeType === 'nestedExpand')) {
-        return;
-      }
-    }
-    return (0, _adapter.dropTargetForElements)({
-      element: element,
-      getIsSticky: function getIsSticky() {
-        return true;
-      },
-      onDragEnter: function onDragEnter() {
-        setIsDraggedOver(true);
-      },
-      onDragLeave: function onDragLeave() {
-        setIsDraggedOver(false);
-      },
-      onDrop: function onDrop() {
-        var _api$blockControls3;
-        var _ref6 = (api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.sharedState.currentState()) || {},
-          activeNode = _ref6.activeNode;
-        if (!activeNode) {
-          return;
-        }
-        var pos = getPos();
-        if (activeNode && pos !== undefined) {
-          var _api$core, _api$blockControls4;
-          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$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 || (_api$blockControls4 = _api$blockControls4.commands) === null || _api$blockControls4 === void 0 ? void 0 : _api$blockControls4.moveNode(start, pos, undefined, formatMessage));
-        }
-      }
-    });
-  }, [api, formatMessage, getPos, parentNode]);
-  var dropTargetOffsetStyle = (0, _react.useMemo)(function () {
-    /**
-     * First child of a nested node.
-     * Disable the position adjustment temporarily
-     */
-    if (parentNode === prevNode) {
-      return null;
+    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));
     }
-    return getDropTargetOffsetStyle(prevNode, nextNode);
-  }, [prevNode, nextNode, parentNode]);
-  var dropTargetMarginTopStyles = (0, _react.useMemo)(function () {
-    if (parentNode === prevNode) {
-      return null;
-    }
-    return getNestedDropTargetMarginTop(prevNode, nextNode, isNestedDropTarget);
-  }, [prevNode, nextNode, parentNode, isNestedDropTarget]);
+  };
   var dynamicStyle = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
     width: isNestedDropTarget ? 'unset' : '100%'
   }, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat((widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH, "px")), EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, isNestedDropTarget ? (0, _consts.getNestedNodeLeftPaddingMargin)(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0'), EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX, (0, _experiments.editorExperiment)('nested-dnd', true) ? _constants.layers.navigation() : _constants.layers.card());
-  return (
-    // Note: Firefox has trouble with using a button element as the handle for drag and drop
-    (0, _react2.jsx)("div", {
-      css: [styleDropTarget,
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      dropTargetOffsetStyle, isNestedDropTarget && nestedDropIndicatorStyle,
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      dropTargetMarginTopStyles]
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      ,
-      style: dynamicStyle,
-      ref: ref,
-      "data-testid": "block-ctrl-drop-target"
+  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.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,
+    anchorRectCache: anchorRectCache,
+    position: "upper",
+    isNestedDropTarget: isNestedDropTarget,
+    dropTargetStyle: dropTargetStyle
+  }), (0, _react2.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 || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) && (0, _react2.jsx)("div", {
+    css: styleDropIndicator,
+    "data-testid": "block-ctrl-drop-indicator"
+  }, (0, _react2.jsx)(_box.DropIndicator, {
+    edge: "bottom"
+  }))), dropTargetStyle !== 'remainingHeight' && (0, _react2.jsx)(HoverZone, {
+    onDragEnter: function onDragEnter() {
+      return setIsDraggedOver(true);
+    },
+    onDragLeave: function onDragLeave() {
+      return setIsDraggedOver(false);
     },
-    // 4px gap to clear expand node border
-    (isDraggedOver || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) && (0, _react2.jsx)("div", {
-      css: styleDropIndicator,
-      "data-testid": "block-ctrl-drop-indicator"
-    }, (0, _react2.jsx)(_box.DropIndicator, {
-      edge: "bottom",
-      gap: "4px"
-    })))
-  );
+    onDrop: onDrop,
+    node: nextNode,
+    parent: parentNode,
+    editorWidth: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
+    anchorRectCache: anchorRectCache,
+    position: "lower",
+    isNestedDropTarget: isNestedDropTarget
+  }), (0, _inlineDropTarget.shouldAllowInlineDropTarget)(isNestedDropTarget, nextNode, isSameLayout, activeNode) && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_inlineDropTarget2.InlineDropTarget
+  // Ignored via go/ees005
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  , (0, _extends2.default)({}, props, {
+    position: "left"
+  })), (0, _react2.jsx)(_inlineDropTarget2.InlineDropTarget
+  // Ignored via go/ees005
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  , (0, _extends2.default)({}, props, {
+    position: "right"
+  }))));
 };

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

@@ -6,8 +6,8 @@ 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 { DropTarget, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET } from '../ui/drop-target';
 import { DropTargetLayout } from '../ui/drop-target-layout';
-import { DropTargetV2, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET } from '../ui/drop-target-v2';
 import { getNestedDepth, TYPE_DROP_TARGET_DEC, unmountDecorations } from './decorations-common';
 import { maxLayoutColumnSupported } from './utils/consts';
 import { isBlocksDragTargetDebug } from './utils/drag-target-debug';
@@ -97,14 +97,14 @@ export const createDropTargetDecoration = (pos, props, nodeViewPortalProviderAPI
     element.style.setProperty(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, `${gap}px`);
     element.style.setProperty('display', 'block');
     if (fg('platform_editor_react18_plugin_portalprovider')) {
-      nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(DropTargetV2, {
+      nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(DropTarget, {
         ...props,
         getPos,
         anchorRectCache,
         isSameLayout
       }), element, key);
     } else {
-      ReactDOM.render( /*#__PURE__*/createElement(DropTargetV2, {
+      ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
         ...props,
         getPos,
         anchorRectCache,

package/dist/es2019/ui/drag-handle.js

@@ -7,6 +7,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { browser } from '@atlaskit/editor-common/browser';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
 import { blockControlsMessages } from '@atlaskit/editor-common/messages';
@@ -15,6 +16,7 @@ import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
+import { Box, xcss } from '@atlaskit/primitives';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import Tooltip from '@atlaskit/tooltip';
 import { key } from '../pm-plugins/main';
@@ -23,6 +25,11 @@ import { getNestedNodePosition } from '../pm-plugins/utils/getNestedNodePosition
 import { selectNode } from '../pm-plugins/utils/getSelection';
 import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, topPositionAdjustment } from './consts';
 import { dragPreview } from './drag-preview';
+const iconWrapperStyles = xcss({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
 const dragHandleButtonStyles = css({
   position: 'absolute',
   padding: `${"var(--ds-space-025, 2px)"} 0`,
@@ -61,6 +68,27 @@ const selectedStyles = css({
   backgroundColor: "var(--ds-background-selected, #E9F2FF)",
   color: "var(--ds-icon-selected, #0C66E4)"
 });
+
+// [Chrome only] When selection contains multiple nodes and then drag a drag handle that is within the selection range,
+// icon span receives dragStart event, instead of button, and since it is not registered as a draggable element
+// with pragmatic DnD and pragmatic DnD is not triggered
+const handleIconDragStart = e => {
+  if (!browser.chrome || !fg('platform_editor_dnd_update_drag_start_target')) {
+    return;
+  }
+  // prevent dragStart handler triggered by icon
+  e.stopPropagation();
+  const dragEvent = new DragEvent('dragstart', {
+    bubbles: true,
+    cancelable: true,
+    dataTransfer: e.dataTransfer
+  });
+  if (e.target instanceof HTMLElement) {
+    var _e$target$closest;
+    // re-dispatch drag event on button so that pragmatic DnD can be triggered properly
+    (_e$target$closest = e.target.closest('button')) === null || _e$target$closest === void 0 ? void 0 : _e$target$closest.dispatchEvent(dragEvent);
+  }
+};
 export const DragHandle = ({
   view,
   api,
@@ -390,10 +418,16 @@ export const DragHandle = ({
     onMouseDown: handleMouseDown,
     onKeyDown: handleKeyDown,
     "data-testid": "block-ctrl-drag-handle"
-  }, jsx(DragHandlerIcon, {
+  }, jsx(Box, {
+    as: "span",
+    xcss: iconWrapperStyles
+    // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+    ,
+    onDragStart: handleIconDragStart
+  }, ' ', jsx(DragHandlerIcon, {
     label: "",
     size: "medium"
-  }));
+  })));
   return fg('platform_editor_element_drag_and_drop_ed_23873') ? jsx(Tooltip, {
     content: jsx(TooltipContentWithMultipleShortcuts, {
       helpDescriptors: helpDescriptors