@atlaskit/editor-plugin-block-controls 1.5.20 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.6.0
+
+### Minor Changes
+
+- [#121589](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/121589)
+  [`c8c2209805321`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c8c2209805321) -
+  [ux] ED-23588 fix drop target alignments
+
+### Patch Changes
+
+- [#119960](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/119960)
+  [`7b7393158a982`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7b7393158a982) -
+  ED-24136 fix composition input for chrome
+- [#119250](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/119250)
+  [`dce4805f0326c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dce4805f0326c) -
+  Fix image cannot be dragged with ProseMirror native DnD in Firefox
+- Updated dependencies
+
 ## 1.5.20
 
 ### Patch Changes

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

@@ -20,24 +20,29 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
   // Decoration state is used to keep track of the position of the drop targets
   // and allows us to easily map the updated position in the plugin apply method.
   var decorationState = [];
-  oldState.doc.nodesBetween(0, newState.doc.nodeSize - 2, function (_node, pos, _parent, index) {
+  var prevNode;
+  oldState.doc.nodesBetween(0, newState.doc.nodeSize - 2, function (node, pos, _parent, index) {
     decorationState.push({
       index: index,
       pos: pos
     });
+    var dropTargetDec = /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
+      api: api,
+      index: index,
+      prevNode: prevNode,
+      nextNode: node
+    });
     decs.push(_view.Decoration.widget(pos, function () {
       var element = document.createElement('div');
       element.setAttribute('data-blocks-drop-target-container', 'true');
       element.style.clear = 'unset';
-      _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
-        api: api,
-        index: index
-      }), element);
+      _reactDom.default.render(dropTargetDec, element);
       return element;
     }, {
       type: 'drop-target-decoration',
       side: -1
     }));
+    prevNode = node;
     return false;
   });
 

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

@@ -17,6 +17,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
+var _dragTargetDebug = require("../utils/drag-target-debug");
 var _decorations = require("./decorations");
 var _handleMouseOver = require("./handle-mouse-over");
 var _keymap = require("./keymap");
@@ -240,14 +241,17 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
             decorations = decorations.add(newState.doc, [_decs]);
           }
         }
-        // Add drop targets when node is being dragged
-        // if the transaction is only for analytics and user is dragging, continue to draw drop targets
-        if (meta !== null && meta !== void 0 && meta.isDragging && (!tr.docChanged || tr.docChanged && isAnalyticTr) && api) {
-          var _dropTargetDecoration = (0, _decorations.dropTargetDecorations)(oldState, newState, api),
-            _decs2 = _dropTargetDecoration.decs,
-            updatedDecorationState = _dropTargetDecoration.decorationState;
-          decorationState = updatedDecorationState;
-          decorations = decorations.add(newState.doc, _decs2);
+        if (api) {
+          // Add drop targets when node is being dragged
+          // if the transaction is only for analytics and user is dragging, continue to draw drop targets
+          var shouldShowDragTarget = (meta === null || meta === void 0 ? void 0 : meta.isDragging) && (!tr.docChanged || tr.docChanged && isAnalyticTr);
+          if (shouldShowDragTarget || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
+            var _dropTargetDecoration = (0, _decorations.dropTargetDecorations)(oldState, newState, api),
+              _decs2 = _dropTargetDecoration.decs,
+              updatedDecorationState = _dropTargetDecoration.decorationState;
+            decorationState = updatedDecorationState;
+            decorations = decorations.add(newState.doc, _decs2);
+          }
         }
 
         // Remove drop target decoration when dragging stops

package/dist/cjs/ui/consts.js

@@ -1,10 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.topPositionAdjustment = exports.dragHandleGap = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_BORDER_RADIUS = void 0;
+exports.topPositionAdjustment = exports.spaceLookupMap = exports.nodeMargins = exports.dragHandleGap = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_BORDER_RADIUS = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _dropTargetMarginMap;
 var DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_HEIGHT = 24;
 var DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_WIDTH = 12;
 var DRAG_HANDLE_BORDER_RADIUS = exports.DRAG_HANDLE_BORDER_RADIUS = 4;
@@ -28,4 +31,110 @@ var topPositionAdjustment = exports.topPositionAdjustment = function topPosition
     default:
       return 0;
   }
+};
+var dropTargetMarginMap = (_dropTargetMarginMap = {}, (0, _defineProperty2.default)(_dropTargetMarginMap, -24, "var(--ds-space-negative-300, -24px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, -20, "var(--ds-space-negative-250, -20px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, -16, "var(--ds-space-negative-200, -16px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, -12, "var(--ds-space-negative-150, -12px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, -8, "var(--ds-space-negative-100, -8px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, -6, "var(--ds-space-negative-075, -6px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, -4, "var(--ds-space-negative-050, -4px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, -2, "var(--ds-space-negative-025, -2px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, 0, "var(--ds-space-0, 0)"), (0, _defineProperty2.default)(_dropTargetMarginMap, 2, "var(--ds-space-025, 2px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, 4, "var(--ds-space-050, 4px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, 6, "var(--ds-space-075, 6px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, 8, "var(--ds-space-100, 8px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, 12, "var(--ds-space-150, 12px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, 16, "var(--ds-space-200, 16px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, 20, "var(--ds-space-250, 20px)"), (0, _defineProperty2.default)(_dropTargetMarginMap, 24, "var(--ds-space-300, 24px)"), _dropTargetMarginMap);
+
+/**
+ * This document serves as a quick reference map for correlating various space matches
+ * to the table provided above.
+ * For instance, the number 1 will correspond to \{0: token('space.0', '0')\}.
+ */
+var spaceLookupMap = exports.spaceLookupMap = Object.fromEntries(
+// 49 = -24 -> 0 -> 24 totaling 49 entries.
+Array.from({
+  length: 49
+}, function (_, index) {
+  var currKeyValue = index - 24;
+  var keyValues = Object.keys(dropTargetMarginMap).map(Number);
+  var value = keyValues.reduce(function (acc, curr) {
+    return Math.abs(currKeyValue - curr) < Math.abs(currKeyValue - acc) ? curr : acc;
+  }, 1000);
+  return [currKeyValue, dropTargetMarginMap[value]];
+}));
+
+// This table contains the "margins" of different nodes
+// Note this is not the actually margin of the DOM elements,
+// but a percepted margin, e.g. a paragraph has additional margin
+// due to the line height and the white spaces.
+var nodeMargins = exports.nodeMargins = {
+  table: {
+    top: 24,
+    bottom: 16
+  },
+  paragraph: {
+    top: 12,
+    bottom: 6
+  },
+  bulletList: {
+    top: 16,
+    bottom: 0
+  },
+  orderedList: {
+    top: 16,
+    bottom: 0
+  },
+  decisionList: {
+    top: 12,
+    bottom: 0
+  },
+  taskList: {
+    top: 8,
+    bottom: 0
+  },
+  codeBlock: {
+    top: 0,
+    bottom: 0
+  },
+  panel: {
+    top: 8,
+    bottom: 0
+  },
+  rule: {
+    top: 20,
+    bottom: 20
+  },
+  mediaSingle: {
+    top: 24,
+    bottom: 24
+  },
+  bodiedExtension: {
+    top: 0,
+    bottom: 0
+  },
+  extension: {
+    top: 12,
+    bottom: 12
+  },
+  heading1: {
+    top: 40,
+    bottom: 0
+  },
+  heading2: {
+    top: 40,
+    bottom: 0
+  },
+  heading3: {
+    top: 36,
+    bottom: 0
+  },
+  heading4: {
+    top: 22,
+    bottom: 0
+  },
+  heading5: {
+    top: 22,
+    bottom: 0
+  },
+  heading6: {
+    top: 18,
+    bottom: 0
+  },
+  layoutSection: {
+    top: 8,
+    bottom: 0
+  },
+  default: {
+    top: 0,
+    bottom: 0
+  }
 };

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

@@ -9,8 +9,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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 _dragTargetDebug = require("../utils/drag-target-debug");
+var _consts = require("./consts");
 /** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -23,17 +27,56 @@ var styleDropTarget = (0, _react2.css)({
   width: '100%',
   left: '0',
   display: 'block',
-  zIndex: 1
+  zIndex: _constants.layers.card()
 });
+var marginLookupMap = Object.fromEntries(
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+Object.entries(_consts.spaceLookupMap).map(function (_ref, i) {
+  var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+    key = _ref2[0],
+    value = _ref2[1];
+  return [key, (0, _react2.css)({
+    marginTop: value
+  })];
+}));
+var BASE_LINE_MARGIN = -8;
+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 getDropTargetPositionStyle = function getDropTargetPositionStyle(prevNode, nextNode) {
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_gap_fix')) {
+    return null;
+  }
+  if (!prevNode || !nextNode) {
+    return null;
+  }
+  var space = BASE_LINE_MARGIN - Math.round((getNodeMargins(prevNode).bottom - getNodeMargins(nextNode).top) / 2);
+  if (space < -24) {
+    return marginLookupMap[-24];
+  } else if (space > 24) {
+    return marginLookupMap[24];
+  } else {
+    return marginLookupMap[space];
+  }
+};
 var styleDropIndicator = (0, _react2.css)({
   height: '100%',
   width: '100%',
   margin: '0 auto',
   position: 'relative'
 });
-var DropTarget = exports.DropTarget = function DropTarget(_ref) {
-  var api = _ref.api,
-    index = _ref.index;
+var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
+  var api = _ref3.api,
+    index = _ref3.index,
+    prevNode = _ref3.prevNode,
+    nextNode = _ref3.nextNode;
   var ref = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -56,20 +99,20 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref) {
         setIsDraggedOver(true);
       },
       onDragLeave: function onDragLeave() {
-        return setIsDraggedOver(false);
+        setIsDraggedOver(false);
       },
       onDrop: function onDrop() {
         var _api$blockControls;
-        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,
-          decorationState = _ref2.decorationState;
+        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,
+          decorationState = _ref4.decorationState;
         if (!activeNode || !decorationState) {
           return;
         }
-        var _ref3 = decorationState.find(function (dec) {
+        var _ref5 = decorationState.find(function (dec) {
             return dec.index === index;
           }) || {},
-          pos = _ref3.pos;
+          pos = _ref5.pos;
         if (activeNode && pos !== undefined) {
           var _api$core, _api$blockControls2;
           var start = activeNode.pos;
@@ -78,15 +121,19 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref) {
       }
     });
   }, [index, api]);
+  var topTargetMarginStyle = (0, _react.useMemo)(function () {
+    return getDropTargetPositionStyle(prevNode, nextNode);
+  }, [prevNode, nextNode]);
   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
+      css: [styleDropTarget, topTargetMarginStyle],
       ref: ref,
       "data-testid": "block-ctrl-drop-target"
     },
     // 4px gap to clear expand node border
-    isDraggedOver && (0, _react2.jsx)("div", {
+    (isDraggedOver || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) && (0, _react2.jsx)("div", {
       css: styleDropIndicator,
       style: {
         width: "".concat(lineLength, "px")

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

@@ -46,14 +46,34 @@ var paragraphWithTrailingBreak = '+ p > .ProseMirror-trailingBreak';
 var paragraphWithCursorTarget = '+ p > .cursor-target';
 var paragraphWithTrailingBreakAsOnlyChild = '+ p > .ProseMirror-trailingBreak:only-child';
 var paragraphWithPlaceholder = '+ p > .placeholder-decoration';
-var withoutInlineNodeStyleFix = (0, _react.css)((0, _defineProperty2.default)({}, ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithTrailingBreak, "):not(:has(").concat(paragraphWithCursorTarget, "))"), {
+var dragHandleContainer = '.ProseMirror-widget[data-blocks-drag-handle-container="true"]';
+var dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
+var withoutInlineNodeStyle = (0, _react.css)((0, _defineProperty2.default)({}, ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithTrailingBreak, "):not(:has(").concat(paragraphWithCursorTarget, "))"), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
   display: 'none !important'
 }));
-var withInlineNodeStyleFix = (0, _react.css)((0, _defineProperty2.default)({}, ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithTrailingBreakAsOnlyChild, "), .ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(").concat(paragraphWithPlaceholder, ")"), {
+var withInlineNodeStyle = (0, _react.css)((0, _defineProperty2.default)({}, ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithTrailingBreakAsOnlyChild, "), .ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(").concat(paragraphWithPlaceholder, ")"), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
   display: 'none !important'
 }));
+
+/**
+ * Please do not change change transform to display:none, or visibility:hidden
+ * Otherwise it might break composition input for Chrome
+ * https://product-fabric.atlassian.net/browse/ED-24136
+ */
+var withoutInlineNodeStyleWithChromeFix = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(dragHandleContainer, ":has(").concat(paragraphWithTrailingBreak, "):not(:has(").concat(paragraphWithCursorTarget, ")) ").concat(dragHandleSelector), {
+  transform: 'scale(0)'
+}));
+
+/**
+ * Please do not change change transform to display:none, or visibility:hidden
+ * Otherwise it might break composition input for Chrome
+ * https://product-fabric.atlassian.net/browse/ED-24136
+ */
+var withInlineNodeStyleWithChromeFix = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(dragHandleContainer, ":has(").concat(paragraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector, ",\n\t  ").concat(dragHandleContainer, ":has(").concat(paragraphWithPlaceholder, ") ").concat(dragHandleSelector), {
+  transform: 'scale(0)'
+}));
 var globalStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '.ProseMirror-widget:first-child + *': {
@@ -61,12 +81,26 @@ var globalStyles = (0, _react.css)({
     marginTop: '0 !important'
   }
 });
-var withDeleteLinesStyleFix = (0, _react.css)((0, _defineProperty2.default)({}, "p[data-drag-handler-anchor-name] .ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]", {
+var withDeleteLinesStyleFix = (0, _react.css)((0, _defineProperty2.default)({}, "p[data-drag-handler-anchor-name] ".concat(dragHandleContainer), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
   display: 'none !important'
 }));
+
+// Image dnd is broken in Firefox due to a previous fix for image caption https://product-fabric.atlassian.net/browse/ED-14034
+// We could remove this fix if the previous issue is invalid
+var withMediaSingleStyleFix = (0, _react.css)((0, _defineProperty2.default)({}, '.ProseMirror.ua-firefox .mediaSingleView-content-wrap[data-drag-handler-node-type="mediaSingle"][data-drag-handler-anchor-name], .ProseMirror.ua-firefox [data-drag-handler-anchor-name][data-drag-handler-node-type] .mediaSingleView-content-wrap', {
+  userSelect: 'auto',
+  cursor: 'pointer'
+}));
+var getTextNodeStyle = function getTextNodeStyle() {
+  if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-ed-23868')) {
+    return (0, _platformFeatureFlags.fg)('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
+  } else {
+    return (0, _platformFeatureFlags.fg)('platform_editor_element_controls_chrome_input_fix') ? withoutInlineNodeStyleWithChromeFix : withoutInlineNodeStyle;
+  }
+};
 var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
   return (0, _react.jsx)(_react.Global, {
-    styles: [globalStyles, (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') && extendedHoverZone, (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-ed-23868') ? withInlineNodeStyleFix : withoutInlineNodeStyleFix, (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-ed-23932') && withDeleteLinesStyleFix]
+    styles: [globalStyles, (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') && extendedHoverZone, getTextNodeStyle(), (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-ed-23932') && withDeleteLinesStyleFix, (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24005') && withMediaSingleStyleFix]
   });
 };

package/dist/cjs/utils/drag-target-debug.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isBlocksDragTargetDebug = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var IS_GEMINI_TEST_ENV = Boolean(process.env.NODE_ENV === 'development') && Boolean(window.__gemini_set_feature_flag__);
+var isBlocksDragTargetDebug = exports.isBlocksDragTargetDebug = function isBlocksDragTargetDebug() {
+  return IS_GEMINI_TEST_ENV && (0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_gap_fix');
+};

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

@@ -12,24 +12,29 @@ export const dropTargetDecorations = (oldState, newState, api) => {
   // Decoration state is used to keep track of the position of the drop targets
   // and allows us to easily map the updated position in the plugin apply method.
   const decorationState = [];
-  oldState.doc.nodesBetween(0, newState.doc.nodeSize - 2, (_node, pos, _parent, index) => {
+  let prevNode;
+  oldState.doc.nodesBetween(0, newState.doc.nodeSize - 2, (node, pos, _parent, index) => {
     decorationState.push({
       index,
       pos
     });
+    const dropTargetDec = /*#__PURE__*/createElement(DropTarget, {
+      api,
+      index,
+      prevNode,
+      nextNode: node
+    });
     decs.push(Decoration.widget(pos, () => {
       const element = document.createElement('div');
       element.setAttribute('data-blocks-drop-target-container', 'true');
       element.style.clear = 'unset';
-      ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
-        api,
-        index
-      }), element);
+      ReactDOM.render(dropTargetDec, element);
       return element;
     }, {
       type: 'drop-target-decoration',
       side: -1
     }));
+    prevNode = node;
     return false;
   });
 

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

@@ -9,6 +9,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 import { dragHandleDecoration, dropTargetDecorations, emptyParagraphNodeDecorations, mouseMoveWrapperDecorations, nodeDecorations } from './decorations';
 import { handleMouseOver } from './handle-mouse-over';
 import { boundKeydownHandler } from './keymap';
@@ -228,15 +229,18 @@ export const createPlugin = (api, getIntl) => {
             decorations = decorations.add(newState.doc, [decs]);
           }
         }
-        // Add drop targets when node is being dragged
-        // if the transaction is only for analytics and user is dragging, continue to draw drop targets
-        if (meta !== null && meta !== void 0 && meta.isDragging && (!tr.docChanged || tr.docChanged && isAnalyticTr) && api) {
-          const {
-            decs,
-            decorationState: updatedDecorationState
-          } = dropTargetDecorations(oldState, newState, api);
-          decorationState = updatedDecorationState;
-          decorations = decorations.add(newState.doc, decs);
+        if (api) {
+          // Add drop targets when node is being dragged
+          // if the transaction is only for analytics and user is dragging, continue to draw drop targets
+          const shouldShowDragTarget = (meta === null || meta === void 0 ? void 0 : meta.isDragging) && (!tr.docChanged || tr.docChanged && isAnalyticTr);
+          if (shouldShowDragTarget || isBlocksDragTargetDebug()) {
+            const {
+              decs,
+              decorationState: updatedDecorationState
+            } = dropTargetDecorations(oldState, newState, api);
+            decorationState = updatedDecorationState;
+            decorations = decorations.add(newState.doc, decs);
+          }
         }
 
         // Remove drop target decoration when dragging stops

package/dist/es2019/ui/consts.js

@@ -22,4 +22,128 @@ export const topPositionAdjustment = nodeType => {
     default:
       return 0;
   }
+};
+const dropTargetMarginMap = {
+  [-24]: "var(--ds-space-negative-300, -24px)",
+  [-20]: "var(--ds-space-negative-250, -20px)",
+  [-16]: "var(--ds-space-negative-200, -16px)",
+  [-12]: "var(--ds-space-negative-150, -12px)",
+  [-8]: "var(--ds-space-negative-100, -8px)",
+  [-6]: "var(--ds-space-negative-075, -6px)",
+  [-4]: "var(--ds-space-negative-050, -4px)",
+  [-2]: "var(--ds-space-negative-025, -2px)",
+  0: "var(--ds-space-0, 0)",
+  2: "var(--ds-space-025, 2px)",
+  4: "var(--ds-space-050, 4px)",
+  6: "var(--ds-space-075, 6px)",
+  8: "var(--ds-space-100, 8px)",
+  12: "var(--ds-space-150, 12px)",
+  16: "var(--ds-space-200, 16px)",
+  20: "var(--ds-space-250, 20px)",
+  24: "var(--ds-space-300, 24px)"
+};
+
+/**
+ * This document serves as a quick reference map for correlating various space matches
+ * to the table provided above.
+ * For instance, the number 1 will correspond to \{0: token('space.0', '0')\}.
+ */
+export const spaceLookupMap = Object.fromEntries(
+// 49 = -24 -> 0 -> 24 totaling 49 entries.
+Array.from({
+  length: 49
+}, (_, index) => {
+  const currKeyValue = index - 24;
+  const keyValues = Object.keys(dropTargetMarginMap).map(Number);
+  const value = keyValues.reduce((acc, curr) => {
+    return Math.abs(currKeyValue - curr) < Math.abs(currKeyValue - acc) ? curr : acc;
+  }, 1000);
+  return [currKeyValue, dropTargetMarginMap[value]];
+}));
+
+// This table contains the "margins" of different nodes
+// Note this is not the actually margin of the DOM elements,
+// but a percepted margin, e.g. a paragraph has additional margin
+// due to the line height and the white spaces.
+export const nodeMargins = {
+  table: {
+    top: 24,
+    bottom: 16
+  },
+  paragraph: {
+    top: 12,
+    bottom: 6
+  },
+  bulletList: {
+    top: 16,
+    bottom: 0
+  },
+  orderedList: {
+    top: 16,
+    bottom: 0
+  },
+  decisionList: {
+    top: 12,
+    bottom: 0
+  },
+  taskList: {
+    top: 8,
+    bottom: 0
+  },
+  codeBlock: {
+    top: 0,
+    bottom: 0
+  },
+  panel: {
+    top: 8,
+    bottom: 0
+  },
+  rule: {
+    top: 20,
+    bottom: 20
+  },
+  mediaSingle: {
+    top: 24,
+    bottom: 24
+  },
+  bodiedExtension: {
+    top: 0,
+    bottom: 0
+  },
+  extension: {
+    top: 12,
+    bottom: 12
+  },
+  heading1: {
+    top: 40,
+    bottom: 0
+  },
+  heading2: {
+    top: 40,
+    bottom: 0
+  },
+  heading3: {
+    top: 36,
+    bottom: 0
+  },
+  heading4: {
+    top: 22,
+    bottom: 0
+  },
+  heading5: {
+    top: 22,
+    bottom: 0
+  },
+  heading6: {
+    top: 18,
+    bottom: 0
+  },
+  layoutSection: {
+    top: 8,
+    bottom: 0
+  },
+  default: {
+    top: 0,
+    bottom: 0
+  }
 };