@atlaskit/editor-plugin-block-controls 1.4.8 → 1.4.10

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.4.10
+
+### Patch Changes
+
+- [#105071](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/105071)
+  [`e70e9b713e1e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e70e9b713e1e) -
+  ED23246 - Refactor decorations to render wrapper around each node to track mouseenter events and
+  show drag handle when active node is set
+
+## 1.4.9
+
+### Patch Changes
+
+- [#106586](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/106586)
+  [`861ecd061c72`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/861ecd061c72) -
+  Increase the editor page guttering for full page appearance to support block drag and drop
+- [#107579](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/107579)
+  [`4953d4a32c98`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4953d4a32c98) -
+  [ux] Expand blocks drop target to full doc width
+- Updated dependencies
+
 ## 1.4.8
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -35,9 +35,43 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
           var mappedTo = tr.mapping.map(to);
           tr.insert(mappedTo, nodeCopy); // insert the content at the new position
           tr.setSelection((0, _getSelection.getSelection)(tr, mappedTo));
+          tr.setMeta(_main.key, {
+            nodeMoved: true
+          });
           api === null || api === void 0 || api.core.actions.focus();
           return tr;
         };
+      },
+      showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType) {
+        return function (_ref3) {
+          var tr = _ref3.tr;
+          tr.setMeta(_main.key, {
+            activeNode: {
+              pos: pos,
+              anchorName: anchorName,
+              nodeType: nodeType
+            }
+          });
+          return tr;
+        };
+      },
+      setNodeDragged: function setNodeDragged(pos, anchorName) {
+        return function (_ref4) {
+          var tr = _ref4.tr;
+          var newTr = tr;
+          if (pos === undefined) {
+            return tr;
+          }
+          newTr.setSelection((0, _getSelection.getSelection)(newTr, pos));
+          newTr.setMeta(_main.key, {
+            isDragging: true,
+            activeNode: {
+              pos: pos,
+              anchorName: anchorName
+            }
+          });
+          return newTr;
+        };
       }
     },
     getSharedState: function getSharedState(editorState) {

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

@@ -4,13 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.dropTargetDecorations = exports.dragHandleDecoration = void 0;
+exports.nodeDecorations = exports.mouseMoveWrapperDecorations = exports.dropTargetDecorations = exports.dragHandleDecoration = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _view = require("@atlaskit/editor-prosemirror/view");
-var _consts = require("../ui/consts");
 var _dragHandle = require("../ui/drag-handle");
 var _dropTarget = require("../ui/drop-target");
+var _mouseMoveWrapper = require("../ui/mouse-move-wrapper");
 var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetDecorations(oldState, newState, api) {
   var decs = [];
   // Decoration state is used to keep track of the position of the drop targets
@@ -28,6 +29,8 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
         index: index
       }), element);
       return element;
+    }, {
+      type: 'drop-target-decoration'
     }));
     return false;
   });
@@ -50,39 +53,71 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
       index: decorationState.length
     }), element);
     return element;
+  }, {
+    type: 'drop-target-decoration'
   }));
   return {
     decs: decs,
     decorationState: decorationState
   };
 };
-var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(oldState, meta, api) {
-  return _view.DecorationSet.create(oldState.doc, [_view.Decoration.widget(meta.pos, function (view, getPos) {
+var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newState) {
+  var decs = [];
+  newState.doc.descendants(function (node, pos, _parent, index) {
+    var anchorName = "--node-anchor-".concat(node.type.name, "-").concat(index);
+    var style = "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '');
+    decs.push(_view.Decoration.node(pos, pos + node.nodeSize, (0, _defineProperty2.default)({
+      style: style
+    }, 'data-drag-handler-anchor-name', anchorName)));
+    return false;
+  });
+  return decs;
+};
+/**
+ * Setting up decorations around each node to track mousemove events into each node
+ * When a mouseenter event is triggered on the node, we will set the activeNode to the node
+ * And show the drag handle
+ */
+var mouseMoveWrapperDecorations = exports.mouseMoveWrapperDecorations = function mouseMoveWrapperDecorations(newState, api) {
+  var decs = [];
+  newState.doc.descendants(function (node, pos, _parent, index) {
+    var anchorName = "--node-anchor-".concat(node.type.name, "-").concat(index);
+    decs.push(_view.Decoration.widget(pos, function (view, getPos) {
+      var element = document.createElement('div');
+      _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_mouseMoveWrapper.MouseMoveWrapper, {
+        view: view,
+        api: api,
+        anchorName: anchorName,
+        nodeType: node.type.name,
+        getPos: getPos
+      }), element);
+      return element;
+    }, {
+      type: 'mouse-move-wrapper',
+      side: -1,
+      ignoreSelection: true,
+      stopEvent: function stopEvent(e) {
+        return true;
+      }
+    }));
+    return false;
+  });
+  return decs;
+};
+var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(pos, anchorName, nodeType, api) {
+  return _view.Decoration.widget(pos, function (view, getPos) {
     var element = document.createElement('div');
+    element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {
-      dom: meta.dom,
+      view: view,
       api: api,
-      start: meta.pos
+      getPos: getPos,
+      anchorName: anchorName,
+      nodeType: nodeType
     }), element);
-    element.style.position = 'absolute';
-    element.style.zIndex = '1';
-
-    // If the selected node is a table or mediaSingle with resizer, we need to adjust the position of the drag handle
-    var resizer = ['table', 'mediaSingle'].includes(meta.type) ? meta.dom.querySelector('.resizer-item') : null;
-    if (resizer) {
-      element.style.left = getComputedStyle(resizer).transform === 'none' ? "".concat(resizer.offsetLeft - _consts.DRAG_HANDLE_NODE_GAP - _consts.DRAG_HANDLE_WIDTH, "px") : "".concat(resizer.offsetLeft - resizer.offsetWidth / 2 - _consts.DRAG_HANDLE_NODE_GAP - _consts.DRAG_HANDLE_WIDTH, "px");
-    } else {
-      element.style.left = "".concat(meta.dom.offsetLeft - _consts.DRAG_HANDLE_NODE_GAP - _consts.DRAG_HANDLE_WIDTH, "px");
-    }
-    if (meta.type === 'table') {
-      var table = meta.dom.querySelector('table');
-      element.style.top = "".concat(meta.dom.offsetTop + ((table === null || table === void 0 ? void 0 : table.offsetTop) || 0), "px");
-    } else {
-      element.style.top = "".concat(meta.dom.offsetTop, "px");
-    }
-    element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     return element;
   }, {
-    side: -1
-  })]);
+    side: -1,
+    id: 'drag-handle'
+  });
 };

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

@@ -1,9 +1,12 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.key = exports.createPlugin = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
@@ -21,47 +24,67 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
           isDragging: false,
           isMenuOpen: false,
           start: null,
-          end: null
+          end: null,
+          editorHeight: 0
         };
       },
       apply: function apply(tr, currentState, oldState, newState) {
-        var _decorationState, _meta$pos, _meta$isDragging;
+        var _decorationState, _meta$activeNode, _meta$isDragging, _meta$editorHeight;
         // return currentState;
         var activeNode = currentState.activeNode,
           decorations = currentState.decorations,
           isMenuOpen = currentState.isMenuOpen,
-          decorationState = currentState.decorationState;
+          decorationState = currentState.decorationState,
+          editorHeight = currentState.editorHeight;
         var meta = tr.getMeta(key);
 
-        // Drag handle decoration
-        if (meta && meta.pos !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && api) {
-          decorations = (0, _decorations.dragHandleDecoration)(newState, meta, api);
-        }
-        // Drop target decorations
-        if (meta !== null && meta !== void 0 && meta.isDragging && api) {
+        // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
+        var redrawDecorations = decorations === _view.DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || tr.docChanged && tr.doc.childCount === newState.doc.childCount || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved) && tr.docChanged;
+        if (redrawDecorations && api) {
           decorations = _view.DecorationSet.create(newState.doc, []);
+          var nodeDecs = (0, _decorations.nodeDecorations)(newState);
+          var mouseWrapperDecs = (0, _decorations.mouseMoveWrapperDecorations)(newState, api);
+          decorations = decorations.add(newState.doc, [].concat((0, _toConsumableArray2.default)(nodeDecs), (0, _toConsumableArray2.default)(mouseWrapperDecs)));
+          if (activeNode) {
+            var draghandleDec = (0, _decorations.dragHandleDecoration)(activeNode.pos, activeNode.anchorName, activeNode.nodeType, api);
+            decorations = decorations.add(newState.doc, [draghandleDec]);
+          }
+        }
+
+        // Remove previous drag handle widget and draw new drag handle widget when activeNode changes
+        if (meta !== null && meta !== void 0 && meta.activeNode && (meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) && api) {
+          var oldHandle = decorations.find().filter(function (_ref) {
+            var spec = _ref.spec;
+            return spec.id === 'drag-handle';
+          });
+          decorations = decorations.remove(oldHandle);
+          var decs = (0, _decorations.dragHandleDecoration)(meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, api);
+          decorations = decorations.add(newState.doc, [decs]);
+        }
+
+        // Add drop targets when node is being dragged
+        if (meta !== null && meta !== void 0 && meta.isDragging && !tr.docChanged && api) {
           var _dropTargetDecoration = (0, _decorations.dropTargetDecorations)(oldState, newState, api),
-            decs = _dropTargetDecoration.decs,
+            _decs = _dropTargetDecoration.decs,
             updatedDecorationState = _dropTargetDecoration.decorationState;
           decorationState = updatedDecorationState;
-          decorations = decorations.add(newState.doc, decs);
+          decorations = decorations.add(newState.doc, _decs);
         }
 
-        // Remove drop target decorations when dragging is stopped
-        if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false) {
-          decorations = _view.DecorationSet.create(newState.doc, []);
-        }
-
-        // Map decorations when the document changes
-        if (tr.docChanged && decorations !== _view.DecorationSet.empty) {
-          decorations = decorations.map(tr.mapping, tr.doc);
+        // Remove drop target decoration when dragging stops
+        if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && !tr.docChanged) {
+          var dropTargetDecs = decorations.find().filter(function (_ref2) {
+            var spec = _ref2.spec;
+            return spec.type === 'drop-target-decoration';
+          });
+          decorations = decorations.remove(dropTargetDecs);
         }
 
         // Map drop target decoration positions when the document changes
         if (tr.docChanged && currentState.isDragging) {
-          decorationState = decorationState.map(function (_ref) {
-            var index = _ref.index,
-              pos = _ref.pos;
+          decorationState = decorationState.map(function (_ref3) {
+            var index = _ref3.index,
+              pos = _ref3.pos;
             return {
               index: index,
               pos: tr.mapping.map(pos)
@@ -69,16 +92,23 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
           });
         }
 
+        // Map decorations if document changes and node decorations do not need to be redrawn
+        if (tr.docChanged && !redrawDecorations) {
+          decorations = decorations.map(tr.mapping, tr.doc);
+        }
+
         // Map active node position when the document changes
-        var mappedActiveNodePos = tr.docChanged && activeNode ? tr.mapping.map(activeNode.pos) : activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
+        var mappedActiveNodePos = tr.docChanged && activeNode ? {
+          pos: tr.mapping.map(activeNode.pos),
+          anchorName: activeNode.anchorName
+        } : activeNode;
         return {
           decorations: decorations,
           decorationState: (_decorationState = decorationState) !== null && _decorationState !== void 0 ? _decorationState : currentState.decorationState,
-          activeNode: {
-            pos: (_meta$pos = meta === null || meta === void 0 ? void 0 : meta.pos) !== null && _meta$pos !== void 0 ? _meta$pos : mappedActiveNodePos
-          },
+          activeNode: (_meta$activeNode = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode !== void 0 ? _meta$activeNode : mappedActiveNodePos,
           isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : currentState.isDragging,
-          isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen
+          isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
+          editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight
         };
       }
     },
@@ -86,40 +116,31 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
       decorations: function decorations(state) {
         var _key$getState;
         return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
-      },
-      handleDOMEvents: {
-        mousemove: function mousemove(view, event) {
-          var pos = view.posAtCoords({
-            left: event.clientX,
-            top: event.clientY
-          });
-          if ((pos === null || pos === void 0 ? void 0 : pos.inside) !== undefined && pos.inside >= 0) {
-            var _api$core;
-            var node = view.state.doc.nodeAt(pos.inside);
-            if (!node) {
-              return;
-            }
-            var resolvedPos = view.state.doc.resolve(pos.pos);
-            var topLevelPos = resolvedPos.before(1); // 1 here restricts the depth to the root level
-            var topLevelNode = view.state.doc.nodeAt(topLevelPos);
-            if (!topLevelNode) {
-              return;
-            }
-            var dom = view.nodeDOM(topLevelPos);
-            if (!dom) {
-              return;
-            }
-            api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
-              var tr = _ref2.tr;
-              return tr.setMeta(key, {
-                pos: topLevelPos,
-                dom: dom,
-                type: topLevelNode.type.name
-              });
-            });
-          }
-        }
       }
+    },
+    view: function view(editorView) {
+      var dom = editorView.dom;
+
+      // Use ResizeObserver to observe height changes
+      var resizeObserver = new ResizeObserver((0, _rafSchd.default)(function () {
+        var editorHeight = dom.offsetHeight;
+
+        // Update the plugin state when the height changes
+        var pluginState = key.getState(editorView.state);
+        if (!(pluginState !== null && pluginState !== void 0 && pluginState.isDragging)) {
+          editorView.dispatch(editorView.state.tr.setMeta(key, {
+            editorHeight: editorHeight
+          }));
+        }
+      }));
+
+      // Start observing the editor DOM element
+      resizeObserver.observe(dom);
+      return {
+        destroy: function destroy() {
+          resizeObserver.unobserve(dom);
+        }
+      };
     }
   });
 };

package/dist/cjs/ui/consts.js

@@ -3,8 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_NODE_GAP = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_BORDER_RADIUS = void 0;
+exports.dragHandleGap = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_BORDER_RADIUS = void 0;
 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;
-var DRAG_HANDLE_NODE_GAP = exports.DRAG_HANDLE_NODE_GAP = 12;
+var nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
+var dragHandleGap = exports.dragHandleGap = function dragHandleGap(nodeType) {
+  if (nodeTypeExcludeList.includes(nodeType)) {
+    return 12;
+  }
+  return 8;
+};

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

@@ -12,12 +12,14 @@ var _dragHandler = _interopRequireDefault(require("@atlaskit/icon/glyph/drag-han
 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 _main = require("../pm-plugins/main");
+var _dragHandlePositions = require("../utils/drag-handle-positions");
 var _getSelection = require("../utils/getSelection");
 var _consts = require("./consts");
 var _dragPreview = require("./drag-preview");
 /** @jsx jsx */
 
 var dragHandleButtonStyles = (0, _react2.css)({
+  position: 'absolute',
   padding: "var(--ds-space-025, 2px)".concat(" 0"),
   boxSizing: 'border-box',
   display: 'flex',
@@ -31,10 +33,11 @@ var dragHandleButtonStyles = (0, _react2.css)({
   borderRadius: _consts.DRAG_HANDLE_BORDER_RADIUS,
   color: "var(--ds-icon, #44546F)",
   cursor: 'grab',
-  ':hover': {
+  zIndex: 2,
+  '&:hover': {
     backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
   },
-  ':active': {
+  '&:active': {
     backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
   }
 });
@@ -43,11 +46,13 @@ var selectedStyles = (0, _react2.css)({
   color: "var(--ds-icon-selected, #0C66E4)"
 });
 var DragHandle = exports.DragHandle = function DragHandle(_ref) {
-  var dom = _ref.dom,
+  var view = _ref.view,
     api = _ref.api,
-    start = _ref.start;
+    getPos = _ref.getPos,
+    anchorName = _ref.anchorName,
+    nodeType = _ref.nodeType;
+  var start = getPos();
   var buttonRef = (0, _react.useRef)(null);
-  var domRef = (0, _react.useRef)(dom);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     dragHandleSelected = _useState2[0],
@@ -55,15 +60,15 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   var handleClick = (0, _react.useCallback)(function () {
     var _api$core, _api$core2;
     setDragHandleSelected(!dragHandleSelected);
-    // TODO - add drag menu
-    // api?.core?.actions.execute(({ tr }) =>
-    //   tr.setMeta(key, {
-    //     toggleMenu: true,
-    //   }),
-    // );
     api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
       var tr = _ref2.tr;
+      if (start === undefined) {
+        return tr;
+      }
       tr.setSelection((0, _getSelection.getSelection)(tr, start));
+      tr.setMeta(_main.key, {
+        pos: start
+      });
       return tr;
     });
     api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.focus();
@@ -80,40 +85,57 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         (0, _setCustomNativeDragPreview.setCustomNativeDragPreview)({
           render: function render(_ref4) {
             var container = _ref4.container;
-            return (0, _dragPreview.dragPreview)(container, domRef);
+            var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
+            if (!dom) {
+              return;
+            }
+            return (0, _dragPreview.dragPreview)(container, dom);
           },
           nativeSetDragImage: nativeSetDragImage
         });
       },
       onDragStart: function onDragStart() {
-        var _api$core3, _api$core4;
-        api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref5) {
-          var tr = _ref5.tr;
-          var newTr = tr;
-          newTr.setSelection((0, _getSelection.getSelection)(newTr, start));
-          newTr.setMeta(_main.key, {
-            isDragging: true,
-            start: start
-          });
-          return newTr;
-        });
+        var _api$core3, _api$blockControls, _api$core4;
+        if (start === undefined) {
+          return;
+        }
+        api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.setNodeDragged(start, anchorName));
         api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.focus();
       },
       onDrop: function onDrop() {
         var _api$core5;
-        api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref6) {
-          var tr = _ref6.tr;
+        api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref5) {
+          var tr = _ref5.tr;
           return tr.setMeta(_main.key, {
             isDragging: false
           });
         });
       }
     });
-  }, [api, start]);
+  }, [api, start, view, anchorName]);
+  var positionStyles = (0, _react.useMemo)(function () {
+    var supportsAnchor = CSS.supports('top', "anchor(".concat(anchorName, " start)")) && CSS.supports('left', "anchor(".concat(anchorName, " start)"));
+    var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
+    if (supportsAnchor) {
+      var hasResizer = (anchorName.includes('table') || anchorName.includes('mediaSingle')) && dom;
+      return {
+        left: hasResizer ? (0, _dragHandlePositions.getLeftPosition)(dom, nodeType) : "calc(anchor(".concat(anchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType), "px)"),
+        top: anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(_consts.DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
+      };
+    }
+    if (!dom) {
+      return;
+    }
+    return {
+      left: (0, _dragHandlePositions.getLeftPosition)(dom, nodeType),
+      top: (0, _dragHandlePositions.getTopPosition)(dom)
+    };
+  }, [anchorName, view, nodeType]);
   return (0, _react2.jsx)("button", {
     type: "button",
     css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],
     ref: buttonRef,
+    style: positionStyles,
     onClick: handleClick,
     "data-testid": "block-ctrl-drag-handle"
   }, (0, _react2.jsx)(_dragHandler.default, {

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.dragPreview = void 0;
-var dragPreview = exports.dragPreview = function dragPreview(container, domRef) {
-  var rect = domRef.current.getBoundingClientRect();
+var dragPreview = exports.dragPreview = function dragPreview(container, dom) {
+  var rect = dom.getBoundingClientRect();
   container.style.width = "".concat(rect.width, "px");
   container.style.height = "".concat(rect.height, "px");
   container.style.pointerEvents = 'none';
@@ -13,8 +13,8 @@ var dragPreview = exports.dragPreview = function dragPreview(container, domRef)
   // ProseMirror class is required to make sure the cloned dom is styled correctly
   parent.classList.add('ProseMirror');
   parent.style.opacity = '0.3';
-  var resizer = domRef.current.querySelector('.resizer-item');
-  var clonedDom = resizer ? resizer.cloneNode(true) : domRef.current.cloneNode(true);
+  var resizer = dom.querySelector('.resizer-item');
+  var clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(true);
 
   // Remove any margin from the cloned element to ensure is doesn't position incorrectly
   clonedDom.style.marginLeft = '0';

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

@@ -8,15 +8,26 @@ exports.DropTarget = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
 var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 /** @jsx jsx */
 
+var DEFAULT_DROP_INDICATOR_WIDTH = 760;
 var styleDropTarget = (0, _react2.css)({
   height: "var(--ds-space-100, 8px)",
   marginTop: "var(--ds-space-negative-100, -8px)",
+  position: 'absolute',
+  width: '100%',
+  left: '0',
+  display: 'block'
+});
+var styleDropIndicator = (0, _react2.css)({
+  height: '100%',
+  width: '100%',
+  margin: '0 auto',
   position: 'relative'
 });
 var DropTarget = exports.DropTarget = function DropTarget(_ref) {
@@ -27,6 +38,9 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isDraggedOver = _useState2[0],
     setIsDraggedOver = _useState2[1];
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width']),
+    widthState = _useSharedPluginState.widthState;
+  var lineLength = (widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH;
   (0, _react.useEffect)(function () {
     var element = ref.current;
     if (!element) {
@@ -83,9 +97,15 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref) {
       "data-testid": "block-ctrl-drop-target"
     },
     //4px gap to clear expand node border
-    isDraggedOver && (0, _react2.jsx)(_box.DropIndicator, {
+    isDraggedOver && (0, _react2.jsx)("div", {
+      css: styleDropIndicator,
+      style: {
+        'width': "".concat(lineLength, "px")
+      },
+      "data-testid": "block-ctrl-drop-indicator"
+    }, (0, _react2.jsx)(_box.DropIndicator, {
       edge: "bottom",
       gap: "4px"
-    }))
+    })))
   );
 };