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

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.4.12
+
+### Patch Changes
+
+- [#108853](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108853)
+  [`390f442689fd6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/390f442689fd6) -
+  Fix position of drag handle for extension/ bodiedExtension nodes in wide or fullWidth layout
+
+## 1.4.11
+
+### Patch Changes
+
+- [#108763](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108763)
+  [`f97149e66b556`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f97149e66b556) -
+  Fix table scroll when table selected by drag handle
+- Updated dependencies
+
 ## 1.4.10
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _main = require("./pm-plugins/main");
 var _dragHandleMenu = require("./ui/drag-handle-menu");
 var _globalStyles = require("./ui/global-styles");
-var _getSelection = require("./utils/getSelection");
+var _utils = require("./utils");
 var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPlugin(_ref) {
   var api = _ref.api;
   return {
@@ -28,13 +28,16 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
           var _node$nodeSize;
           var tr = _ref2.tr;
           var node = tr.doc.nodeAt(start);
+          if (!node) {
+            return tr;
+          }
           var size = (_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 1;
           var end = start + size;
           var nodeCopy = tr.doc.content.cut(start, end); // cut the content
           tr.delete(start, end); // delete the content from the original position
           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 = (0, _utils.selectNode)(tr, mappedTo, node.type.name);
           tr.setMeta(_main.key, {
             nodeMoved: true
           });
@@ -55,19 +58,20 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
           return tr;
         };
       },
-      setNodeDragged: function setNodeDragged(pos, anchorName) {
+      setNodeDragged: function setNodeDragged(pos, anchorName, nodeType) {
         return function (_ref4) {
           var tr = _ref4.tr;
-          var newTr = tr;
           if (pos === undefined) {
             return tr;
           }
-          newTr.setSelection((0, _getSelection.getSelection)(newTr, pos));
+          var newTr = tr;
+          newTr = (0, _utils.selectNode)(newTr, pos, nodeType);
           newTr.setMeta(_main.key, {
             isDragging: true,
             activeNode: {
               pos: pos,
-              anchorName: anchorName
+              anchorName: anchorName,
+              nodeType: nodeType
             }
           });
           return newTr;

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

@@ -100,7 +100,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
         // Map active node position when the document changes
         var mappedActiveNodePos = tr.docChanged && activeNode ? {
           pos: tr.mapping.map(activeNode.pos),
-          anchorName: activeNode.anchorName
+          anchorName: activeNode.anchorName,
+          nodeType: activeNode.nodeType
         } : activeNode;
         return {
           decorations: decorations,

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

@@ -8,12 +8,13 @@ exports.DragHandle = 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 _dragHandler = _interopRequireDefault(require("@atlaskit/icon/glyph/drag-handler"));
 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 _utils = require("../utils");
 var _dragHandlePositions = require("../utils/drag-handle-positions");
-var _getSelection = require("../utils/getSelection");
 var _consts = require("./consts");
 var _dragPreview = require("./drag-preview");
 /** @jsx jsx */
@@ -57,6 +58,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     dragHandleSelected = _useState2[0],
     setDragHandleSelected = _useState2[1];
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['featureFlags']),
+    featureFlagsState = _useSharedPluginState.featureFlagsState;
   var handleClick = (0, _react.useCallback)(function () {
     var _api$core, _api$core2;
     setDragHandleSelected(!dragHandleSelected);
@@ -65,14 +68,14 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       if (start === undefined) {
         return tr;
       }
-      tr.setSelection((0, _getSelection.getSelection)(tr, start));
+      tr = (0, _utils.selectNode)(tr, start, nodeType);
       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();
-  }, [start, api, dragHandleSelected, setDragHandleSelected]);
+  }, [start, api, dragHandleSelected, setDragHandleSelected, nodeType]);
   (0, _react.useEffect)(function () {
     var element = buttonRef.current;
     if (!element) {
@@ -99,7 +102,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         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$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, nodeType));
         api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.focus();
       },
       onDrop: function onDrop() {
@@ -112,25 +115,28 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         });
       }
     });
-  }, [api, start, view, anchorName]);
+  }, [api, start, view, anchorName, nodeType]);
+  var macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
   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 (!dom) {
+      return;
+    }
+    var hasResizer = anchorName.includes('table') || anchorName.includes('mediaSingle');
+    var isExtension = anchorName.includes('extension') || anchorName.includes('bodiedExtension');
+    var innerContainer = hasResizer ? dom.querySelector('.resizer-item') : isExtension ? dom.querySelector('.extension-container[data-layout]') : null;
     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)"),
+        left: hasResizer || isExtension ? (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates) : "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),
+      left: (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates),
       top: (0, _dragHandlePositions.getTopPosition)(dom)
     };
-  }, [anchorName, view, nodeType]);
+  }, [anchorName, view, nodeType, macroInteractionUpdates]);
   return (0, _react2.jsx)("button", {
     type: "button",
     css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],

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

@@ -100,7 +100,7 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref) {
     isDraggedOver && (0, _react2.jsx)("div", {
       css: styleDropIndicator,
       style: {
-        'width': "".concat(lineLength, "px")
+        width: "".concat(lineLength, "px")
       },
       "data-testid": "block-ctrl-drop-indicator"
     }, (0, _react2.jsx)(_box.DropIndicator, {

package/dist/cjs/utils/drag-handle-positions.js

@@ -13,11 +13,14 @@ var getTopPosition = exports.getTopPosition = function getTopPosition(dom) {
     return "".concat(dom.offsetTop, "px");
   }
 };
-var getLeftPosition = exports.getLeftPosition = function getLeftPosition(dom, type) {
-  var resizer = ['table', 'mediaSingle'].includes(type) ? dom.querySelector('.resizer-item') : null;
-  var left = "".concat(dom.offsetLeft - (0, _consts.dragHandleGap)(type) - _consts.DRAG_HANDLE_WIDTH, "px");
-  if (resizer) {
-    left = getComputedStyle(resizer).transform === 'none' ? "".concat(resizer.offsetLeft - (0, _consts.dragHandleGap)(type) - _consts.DRAG_HANDLE_WIDTH, "px") : "".concat(resizer.offsetLeft - resizer.offsetWidth / 2 - (0, _consts.dragHandleGap)(type) - _consts.DRAG_HANDLE_WIDTH, "px");
+var getLeftPosition = exports.getLeftPosition = function getLeftPosition(dom, type, innerContainer, macroInteractionUpdates) {
+  if (!innerContainer) {
+    return "".concat(dom.offsetLeft - (0, _consts.dragHandleGap)(type) - _consts.DRAG_HANDLE_WIDTH, "px");
   }
-  return left;
+
+  // There is a showMacroInteractionDesignUpdates prop in extension node wrapper that can add a relative span under the top level div
+  // We need to adjust the left offset position of the drag handle to account for the relative span
+  var relativeSpan = macroInteractionUpdates ? dom.querySelector('span.relative') : null;
+  var leftAdjustment = relativeSpan ? relativeSpan.offsetLeft : 0;
+  return getComputedStyle(innerContainer).transform === 'none' ? "".concat(innerContainer.offsetLeft + leftAdjustment - (0, _consts.dragHandleGap)(type) - _consts.DRAG_HANDLE_WIDTH, "px") : "".concat(innerContainer.offsetLeft + leftAdjustment - innerContainer.offsetWidth / 2 - (0, _consts.dragHandleGap)(type) - _consts.DRAG_HANDLE_WIDTH, "px");
 };

package/dist/cjs/utils/getSelection.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSelection = void 0;
+exports.selectNode = exports.getSelection = void 0;
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils = require("@atlaskit/editor-tables/utils");
 var getSelection = exports.getSelection = function getSelection(tr, start) {
   var node = tr.doc.nodeAt(start);
   var isNodeSelection = node && _state.NodeSelection.isSelectable(node);
@@ -31,4 +32,13 @@ var getSelection = exports.getSelection = function getSelection(tr, start) {
     var textNodeDepth = textNodesPos - start;
     return new _state.TextSelection(tr.doc.resolve(textNodesPos), tr.doc.resolve(start + nodeSize - textNodeDepth));
   }
+};
+var selectNode = exports.selectNode = function selectNode(tr, start, nodeType) {
+  // For table, we need to do cell selection instead of node selection
+  if (nodeType === 'table') {
+    tr = (0, _utils.selectTableClosestToPos)(tr, tr.doc.resolve(start + 1));
+  } else {
+    tr.setSelection(getSelection(tr, start));
+  }
+  return tr;
 };

package/dist/cjs/utils/index.js

@@ -9,4 +9,10 @@ Object.defineProperty(exports, "getSelection", {
     return _getSelection.getSelection;
   }
 });
+Object.defineProperty(exports, "selectNode", {
+  enumerable: true,
+  get: function get() {
+    return _getSelection.selectNode;
+  }
+});
 var _getSelection = require("./getSelection");

package/dist/es2019/plugin.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { createPlugin, key } from './pm-plugins/main';
 import { DragHandleMenu } from './ui/drag-handle-menu';
 import { GlobalStylesWrapper } from './ui/global-styles';
-import { getSelection } from './utils/getSelection';
+import { selectNode } from './utils';
 export const blockControlsPlugin = ({
   api
 }) => ({
@@ -19,13 +19,16 @@ export const blockControlsPlugin = ({
     }) => {
       var _node$nodeSize;
       const node = tr.doc.nodeAt(start);
+      if (!node) {
+        return tr;
+      }
       const size = (_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 1;
       const end = start + size;
       let nodeCopy = tr.doc.content.cut(start, end); // cut the content
       tr.delete(start, end); // delete the content from the original position
       const mappedTo = tr.mapping.map(to);
       tr.insert(mappedTo, nodeCopy); // insert the content at the new position
-      tr.setSelection(getSelection(tr, mappedTo));
+      tr = selectNode(tr, mappedTo, node.type.name);
       tr.setMeta(key, {
         nodeMoved: true
       });
@@ -44,19 +47,20 @@ export const blockControlsPlugin = ({
       });
       return tr;
     },
-    setNodeDragged: (pos, anchorName) => ({
+    setNodeDragged: (pos, anchorName, nodeType) => ({
       tr
     }) => {
-      const newTr = tr;
       if (pos === undefined) {
         return tr;
       }
-      newTr.setSelection(getSelection(newTr, pos));
+      let newTr = tr;
+      newTr = selectNode(newTr, pos, nodeType);
       newTr.setMeta(key, {
         isDragging: true,
         activeNode: {
           pos,
-          anchorName
+          anchorName,
+          nodeType
         }
       });
       return newTr;

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

@@ -94,7 +94,8 @@ export const createPlugin = api => {
         // Map active node position when the document changes
         const mappedActiveNodePos = tr.docChanged && activeNode ? {
           pos: tr.mapping.map(activeNode.pos),
-          anchorName: activeNode.anchorName
+          anchorName: activeNode.anchorName,
+          nodeType: activeNode.nodeType
         } : activeNode;
         return {
           decorations,

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

@@ -1,12 +1,13 @@
 /** @jsx jsx */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
 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 { key } from '../pm-plugins/main';
+import { selectNode } from '../utils';
 import { getLeftPosition, getTopPosition } from '../utils/drag-handle-positions';
-import { getSelection } from '../utils/getSelection';
 import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, dragHandleGap } from './consts';
 import { dragPreview } from './drag-preview';
 const dragHandleButtonStyles = css({
@@ -46,6 +47,9 @@ export const DragHandle = ({
   const start = getPos();
   const buttonRef = useRef(null);
   const [dragHandleSelected, setDragHandleSelected] = useState(false);
+  const {
+    featureFlagsState
+  } = useSharedPluginState(api, ['featureFlags']);
   const handleClick = useCallback(() => {
     var _api$core, _api$core2;
     setDragHandleSelected(!dragHandleSelected);
@@ -55,14 +59,14 @@ export const DragHandle = ({
       if (start === undefined) {
         return tr;
       }
-      tr.setSelection(getSelection(tr, start));
+      tr = selectNode(tr, start, nodeType);
       tr.setMeta(key, {
         pos: start
       });
       return tr;
     });
     api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.focus();
-  }, [start, api, dragHandleSelected, setDragHandleSelected]);
+  }, [start, api, dragHandleSelected, setDragHandleSelected, nodeType]);
   useEffect(() => {
     const element = buttonRef.current;
     if (!element) {
@@ -91,7 +95,7 @@ export const DragHandle = ({
         if (start === undefined) {
           return;
         }
-        api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.setNodeDragged(start, anchorName));
+        api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.setNodeDragged(start, anchorName, nodeType));
         api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.focus();
       },
       onDrop() {
@@ -105,25 +109,28 @@ export const DragHandle = ({
         });
       }
     });
-  }, [api, start, view, anchorName]);
+  }, [api, start, view, anchorName, nodeType]);
+  const macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
   const positionStyles = useMemo(() => {
     const supportsAnchor = CSS.supports('top', `anchor(${anchorName} start)`) && CSS.supports('left', `anchor(${anchorName} start)`);
     const dom = view.dom.querySelector(`[data-drag-handler-anchor-name="${anchorName}"]`);
+    if (!dom) {
+      return;
+    }
+    const hasResizer = anchorName.includes('table') || anchorName.includes('mediaSingle');
+    const isExtension = anchorName.includes('extension') || anchorName.includes('bodiedExtension');
+    const innerContainer = hasResizer ? dom.querySelector('.resizer-item') : isExtension ? dom.querySelector('.extension-container[data-layout]') : null;
     if (supportsAnchor) {
-      const hasResizer = (anchorName.includes('table') || anchorName.includes('mediaSingle')) && dom;
       return {
-        left: hasResizer ? getLeftPosition(dom, nodeType) : `calc(anchor(${anchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType)}px)`,
+        left: hasResizer || isExtension ? getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates) : `calc(anchor(${anchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType)}px)`,
         top: anchorName.includes('table') ? `calc(anchor(${anchorName} start) + ${DRAG_HANDLE_HEIGHT}px)` : `anchor(${anchorName} start)`
       };
     }
-    if (!dom) {
-      return;
-    }
     return {
-      left: getLeftPosition(dom, nodeType),
+      left: getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates),
       top: getTopPosition(dom)
     };
-  }, [anchorName, view, nodeType]);
+  }, [anchorName, view, nodeType, macroInteractionUpdates]);
   return jsx("button", {
     type: "button",
     css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],

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

@@ -86,7 +86,7 @@ export const DropTarget = ({
     isDraggedOver && jsx("div", {
       css: styleDropIndicator,
       style: {
-        'width': `${lineLength}px`
+        width: `${lineLength}px`
       },
       "data-testid": "block-ctrl-drop-indicator"
     }, jsx(DropIndicator, {

package/dist/es2019/utils/drag-handle-positions.js

@@ -7,11 +7,14 @@ export const getTopPosition = dom => {
     return `${dom.offsetTop}px`;
   }
 };
-export const getLeftPosition = (dom, type) => {
-  const resizer = ['table', 'mediaSingle'].includes(type) ? dom.querySelector('.resizer-item') : null;
-  let left = `${dom.offsetLeft - dragHandleGap(type) - DRAG_HANDLE_WIDTH}px`;
-  if (resizer) {
-    left = getComputedStyle(resizer).transform === 'none' ? `${resizer.offsetLeft - dragHandleGap(type) - DRAG_HANDLE_WIDTH}px` : `${resizer.offsetLeft - resizer.offsetWidth / 2 - dragHandleGap(type) - DRAG_HANDLE_WIDTH}px`;
+export const getLeftPosition = (dom, type, innerContainer, macroInteractionUpdates) => {
+  if (!innerContainer) {
+    return `${dom.offsetLeft - dragHandleGap(type) - DRAG_HANDLE_WIDTH}px`;
   }
-  return left;
+
+  // There is a showMacroInteractionDesignUpdates prop in extension node wrapper that can add a relative span under the top level div
+  // We need to adjust the left offset position of the drag handle to account for the relative span
+  const relativeSpan = macroInteractionUpdates ? dom.querySelector('span.relative') : null;
+  const leftAdjustment = relativeSpan ? relativeSpan.offsetLeft : 0;
+  return getComputedStyle(innerContainer).transform === 'none' ? `${innerContainer.offsetLeft + leftAdjustment - dragHandleGap(type) - DRAG_HANDLE_WIDTH}px` : `${innerContainer.offsetLeft + leftAdjustment - innerContainer.offsetWidth / 2 - dragHandleGap(type) - DRAG_HANDLE_WIDTH}px`;
 };

package/dist/es2019/utils/getSelection.js

@@ -1,4 +1,5 @@
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { selectTableClosestToPos } from '@atlaskit/editor-tables/utils';
 export const getSelection = (tr, start) => {
   const node = tr.doc.nodeAt(start);
   const isNodeSelection = node && NodeSelection.isSelectable(node);
@@ -25,4 +26,13 @@ export const getSelection = (tr, start) => {
     const textNodeDepth = textNodesPos - start;
     return new TextSelection(tr.doc.resolve(textNodesPos), tr.doc.resolve(start + nodeSize - textNodeDepth));
   }
+};
+export const selectNode = (tr, start, nodeType) => {
+  // For table, we need to do cell selection instead of node selection
+  if (nodeType === 'table') {
+    tr = selectTableClosestToPos(tr, tr.doc.resolve(start + 1));
+  } else {
+    tr.setSelection(getSelection(tr, start));
+  }
+  return tr;
 };

package/dist/es2019/utils/index.js

@@ -1 +1 @@
-export { getSelection } from './getSelection';
+export { getSelection, selectNode } from './getSelection';

package/dist/esm/plugin.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { createPlugin, key } from './pm-plugins/main';
 import { DragHandleMenu } from './ui/drag-handle-menu';
 import { GlobalStylesWrapper } from './ui/global-styles';
-import { getSelection } from './utils/getSelection';
+import { selectNode } from './utils';
 export var blockControlsPlugin = function blockControlsPlugin(_ref) {
   var api = _ref.api;
   return {
@@ -21,13 +21,16 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
           var _node$nodeSize;
           var tr = _ref2.tr;
           var node = tr.doc.nodeAt(start);
+          if (!node) {
+            return tr;
+          }
           var size = (_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 1;
           var end = start + size;
           var nodeCopy = tr.doc.content.cut(start, end); // cut the content
           tr.delete(start, end); // delete the content from the original position
           var mappedTo = tr.mapping.map(to);
           tr.insert(mappedTo, nodeCopy); // insert the content at the new position
-          tr.setSelection(getSelection(tr, mappedTo));
+          tr = selectNode(tr, mappedTo, node.type.name);
           tr.setMeta(key, {
             nodeMoved: true
           });
@@ -48,19 +51,20 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
           return tr;
         };
       },
-      setNodeDragged: function setNodeDragged(pos, anchorName) {
+      setNodeDragged: function setNodeDragged(pos, anchorName, nodeType) {
         return function (_ref4) {
           var tr = _ref4.tr;
-          var newTr = tr;
           if (pos === undefined) {
             return tr;
           }
-          newTr.setSelection(getSelection(newTr, pos));
+          var newTr = tr;
+          newTr = selectNode(newTr, pos, nodeType);
           newTr.setMeta(key, {
             isDragging: true,
             activeNode: {
               pos: pos,
-              anchorName: anchorName
+              anchorName: anchorName,
+              nodeType: nodeType
             }
           });
           return newTr;

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

@@ -93,7 +93,8 @@ export var createPlugin = function createPlugin(api) {
         // Map active node position when the document changes
         var mappedActiveNodePos = tr.docChanged && activeNode ? {
           pos: tr.mapping.map(activeNode.pos),
-          anchorName: activeNode.anchorName
+          anchorName: activeNode.anchorName,
+          nodeType: activeNode.nodeType
         } : activeNode;
         return {
           decorations: decorations,

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

@@ -2,12 +2,13 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
 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 { key } from '../pm-plugins/main';
+import { selectNode } from '../utils';
 import { getLeftPosition, getTopPosition } from '../utils/drag-handle-positions';
-import { getSelection } from '../utils/getSelection';
 import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, dragHandleGap } from './consts';
 import { dragPreview } from './drag-preview';
 var dragHandleButtonStyles = css({
@@ -49,6 +50,8 @@ export var DragHandle = function DragHandle(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     dragHandleSelected = _useState2[0],
     setDragHandleSelected = _useState2[1];
+  var _useSharedPluginState = useSharedPluginState(api, ['featureFlags']),
+    featureFlagsState = _useSharedPluginState.featureFlagsState;
   var handleClick = useCallback(function () {
     var _api$core, _api$core2;
     setDragHandleSelected(!dragHandleSelected);
@@ -57,14 +60,14 @@ export var DragHandle = function DragHandle(_ref) {
       if (start === undefined) {
         return tr;
       }
-      tr.setSelection(getSelection(tr, start));
+      tr = selectNode(tr, start, nodeType);
       tr.setMeta(key, {
         pos: start
       });
       return tr;
     });
     api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.focus();
-  }, [start, api, dragHandleSelected, setDragHandleSelected]);
+  }, [start, api, dragHandleSelected, setDragHandleSelected, nodeType]);
   useEffect(function () {
     var element = buttonRef.current;
     if (!element) {
@@ -91,7 +94,7 @@ export var DragHandle = function DragHandle(_ref) {
         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$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, nodeType));
         api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.focus();
       },
       onDrop: function onDrop() {
@@ -104,25 +107,28 @@ export var DragHandle = function DragHandle(_ref) {
         });
       }
     });
-  }, [api, start, view, anchorName]);
+  }, [api, start, view, anchorName, nodeType]);
+  var macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
   var positionStyles = 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 (!dom) {
+      return;
+    }
+    var hasResizer = anchorName.includes('table') || anchorName.includes('mediaSingle');
+    var isExtension = anchorName.includes('extension') || anchorName.includes('bodiedExtension');
+    var innerContainer = hasResizer ? dom.querySelector('.resizer-item') : isExtension ? dom.querySelector('.extension-container[data-layout]') : null;
     if (supportsAnchor) {
-      var hasResizer = (anchorName.includes('table') || anchorName.includes('mediaSingle')) && dom;
       return {
-        left: hasResizer ? getLeftPosition(dom, nodeType) : "calc(anchor(".concat(anchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType), "px)"),
+        left: hasResizer || isExtension ? getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates) : "calc(anchor(".concat(anchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType), "px)"),
         top: anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
       };
     }
-    if (!dom) {
-      return;
-    }
     return {
-      left: getLeftPosition(dom, nodeType),
+      left: getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates),
       top: getTopPosition(dom)
     };
-  }, [anchorName, view, nodeType]);
+  }, [anchorName, view, nodeType, macroInteractionUpdates]);
   return jsx("button", {
     type: "button",
     css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],

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

@@ -92,7 +92,7 @@ export var DropTarget = function DropTarget(_ref) {
     isDraggedOver && jsx("div", {
       css: styleDropIndicator,
       style: {
-        'width': "".concat(lineLength, "px")
+        width: "".concat(lineLength, "px")
       },
       "data-testid": "block-ctrl-drop-indicator"
     }, jsx(DropIndicator, {

package/dist/esm/utils/drag-handle-positions.js

@@ -7,11 +7,14 @@ export var getTopPosition = function getTopPosition(dom) {
     return "".concat(dom.offsetTop, "px");
   }
 };
-export var getLeftPosition = function getLeftPosition(dom, type) {
-  var resizer = ['table', 'mediaSingle'].includes(type) ? dom.querySelector('.resizer-item') : null;
-  var left = "".concat(dom.offsetLeft - dragHandleGap(type) - DRAG_HANDLE_WIDTH, "px");
-  if (resizer) {
-    left = getComputedStyle(resizer).transform === 'none' ? "".concat(resizer.offsetLeft - dragHandleGap(type) - DRAG_HANDLE_WIDTH, "px") : "".concat(resizer.offsetLeft - resizer.offsetWidth / 2 - dragHandleGap(type) - DRAG_HANDLE_WIDTH, "px");
+export var getLeftPosition = function getLeftPosition(dom, type, innerContainer, macroInteractionUpdates) {
+  if (!innerContainer) {
+    return "".concat(dom.offsetLeft - dragHandleGap(type) - DRAG_HANDLE_WIDTH, "px");
   }
-  return left;
+
+  // There is a showMacroInteractionDesignUpdates prop in extension node wrapper that can add a relative span under the top level div
+  // We need to adjust the left offset position of the drag handle to account for the relative span
+  var relativeSpan = macroInteractionUpdates ? dom.querySelector('span.relative') : null;
+  var leftAdjustment = relativeSpan ? relativeSpan.offsetLeft : 0;
+  return getComputedStyle(innerContainer).transform === 'none' ? "".concat(innerContainer.offsetLeft + leftAdjustment - dragHandleGap(type) - DRAG_HANDLE_WIDTH, "px") : "".concat(innerContainer.offsetLeft + leftAdjustment - innerContainer.offsetWidth / 2 - dragHandleGap(type) - DRAG_HANDLE_WIDTH, "px");
 };

package/dist/esm/utils/getSelection.js

@@ -1,4 +1,5 @@
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { selectTableClosestToPos } from '@atlaskit/editor-tables/utils';
 export var getSelection = function getSelection(tr, start) {
   var node = tr.doc.nodeAt(start);
   var isNodeSelection = node && NodeSelection.isSelectable(node);
@@ -25,4 +26,13 @@ export var getSelection = function getSelection(tr, start) {
     var textNodeDepth = textNodesPos - start;
     return new TextSelection(tr.doc.resolve(textNodesPos), tr.doc.resolve(start + nodeSize - textNodeDepth));
   }
+};
+export var selectNode = function selectNode(tr, start, nodeType) {
+  // For table, we need to do cell selection instead of node selection
+  if (nodeType === 'table') {
+    tr = selectTableClosestToPos(tr, tr.doc.resolve(start + 1));
+  } else {
+    tr.setSelection(getSelection(tr, start));
+  }
+  return tr;
 };

package/dist/esm/utils/index.js

@@ -1 +1 @@
-export { getSelection } from './getSelection';
+export { getSelection, selectNode } from './getSelection';

package/dist/types/types.d.ts

@@ -1,4 +1,5 @@
 import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import { type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 export interface PluginState {
@@ -15,7 +16,7 @@ export interface PluginState {
 }
 export type ReleaseHiddenDecoration = () => boolean | undefined;
 export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
-    dependencies: [OptionalPlugin<WidthPlugin>];
+    dependencies: [OptionalPlugin<WidthPlugin>, OptionalPlugin<FeatureFlagsPlugin>];
     sharedState: {
         isMenuOpen: boolean;
         activeNode: {
@@ -28,7 +29,7 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
     commands: {
         moveNode: (start: number, to: number) => EditorCommand;
         showDragHandleAt: (pos: number, anchorName: string, nodeType: string) => EditorCommand;
-        setNodeDragged: (posNumber: number, anchorName: string) => EditorCommand;
+        setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => EditorCommand;
     };
 }>;
 export type DecorationState = {

package/dist/types/utils/drag-handle-positions.d.ts

@@ -1,2 +1,2 @@
 export declare const getTopPosition: (dom: HTMLElement) => string;
-export declare const getLeftPosition: (dom: HTMLElement, type: string) => string;
+export declare const getLeftPosition: (dom: HTMLElement, type: string, innerContainer?: HTMLElement | null, macroInteractionUpdates?: boolean) => string;

package/dist/types/utils/getSelection.d.ts

@@ -1,2 +1,3 @@
 import { NodeSelection, TextSelection, type Transaction } from '@atlaskit/editor-prosemirror/state';
 export declare const getSelection: (tr: Transaction, start: number) => NodeSelection | TextSelection;
+export declare const selectNode: (tr: Transaction, start: number, nodeType: string) => Transaction;

package/dist/types/utils/index.d.ts

@@ -1 +1 @@
-export { getSelection } from './getSelection';
+export { getSelection, selectNode } from './getSelection';

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

@@ -1,4 +1,5 @@
 import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import { type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 export interface PluginState {
@@ -16,7 +17,8 @@ export interface PluginState {
 export type ReleaseHiddenDecoration = () => boolean | undefined;
 export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
     dependencies: [
-        OptionalPlugin<WidthPlugin>
+        OptionalPlugin<WidthPlugin>,
+        OptionalPlugin<FeatureFlagsPlugin>
     ];
     sharedState: {
         isMenuOpen: boolean;
@@ -30,7 +32,7 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
     commands: {
         moveNode: (start: number, to: number) => EditorCommand;
         showDragHandleAt: (pos: number, anchorName: string, nodeType: string) => EditorCommand;
-        setNodeDragged: (posNumber: number, anchorName: string) => EditorCommand;
+        setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => EditorCommand;
     };
 }>;
 export type DecorationState = {

package/dist/types-ts4.5/utils/drag-handle-positions.d.ts

@@ -1,2 +1,2 @@
 export declare const getTopPosition: (dom: HTMLElement) => string;
-export declare const getLeftPosition: (dom: HTMLElement, type: string) => string;
+export declare const getLeftPosition: (dom: HTMLElement, type: string, innerContainer?: HTMLElement | null, macroInteractionUpdates?: boolean) => string;

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

@@ -1,2 +1,3 @@
 import { NodeSelection, TextSelection, type Transaction } from '@atlaskit/editor-prosemirror/state';
 export declare const getSelection: (tr: Transaction, start: number) => NodeSelection | TextSelection;
+export declare const selectNode: (tr: Transaction, start: number, nodeType: string) => Transaction;

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

@@ -1 +1 @@
-export { getSelection } from './getSelection';
+export { getSelection, selectNode } from './getSelection';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-block-controls",
-  "version": "1.4.10",
+  "version": "1.4.12",
   "description": "Block controls plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -31,9 +31,11 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/editor-common": "^82.0.0",
+    "@atlaskit/editor-common": "^82.2.0",
+    "@atlaskit/editor-plugin-feature-flags": "^1.1.0",
     "@atlaskit/editor-plugin-width": "^1.1.0",
     "@atlaskit/editor-prosemirror": "4.0.1",
+    "@atlaskit/editor-tables": "^2.7.0",
     "@atlaskit/icon": "^22.3.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.1.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.3.0",