@atlaskit/editor-plugin-block-controls 1.4.11 → 1.4.13

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.4.13
+
+### Patch Changes
+
+- [#108531](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108531)
+  [`bc1dab1f64bd8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bc1dab1f64bd8) -
+  [ux] Don't render decorations when Editor is disabled or in 'view' mode
+- [#110258](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110258)
+  [`e12a40c7d31ee`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e12a40c7d31ee) -
+  set selection on drag handle mouse down to ensure drag and drop does not use native behaviour
+- Updated dependencies
+
+## 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

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

@@ -30,7 +30,6 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
       },
       apply: function apply(tr, currentState, oldState, newState) {
         var _decorationState, _meta$activeNode, _meta$isDragging, _meta$editorHeight;
-        // return currentState;
         var activeNode = currentState.activeNode,
           decorations = currentState.decorations,
           isMenuOpen = currentState.isMenuOpen,
@@ -115,7 +114,11 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
     },
     props: {
       decorations: function decorations(state) {
-        var _key$getState;
+        var _api$editorDisabled, _key$getState;
+        var isDisabled = api === null || api === void 0 || (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 || (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled === void 0 ? void 0 : _api$editorDisabled.editorDisabled;
+        if (isDisabled) {
+          return;
+        }
         return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
       }
     },

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

@@ -8,6 +8,7 @@ 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");
@@ -57,7 +58,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     dragHandleSelected = _useState2[0],
     setDragHandleSelected = _useState2[1];
-  var handleClick = (0, _react.useCallback)(function () {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['featureFlags']),
+    featureFlagsState = _useSharedPluginState.featureFlagsState;
+  var handleOnClick = (0, _react.useCallback)(function () {
     var _api$core, _api$core2;
     setDragHandleSelected(!dragHandleSelected);
     api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
@@ -73,6 +76,25 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     });
     api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.focus();
   }, [start, api, dragHandleSelected, setDragHandleSelected, nodeType]);
+
+  // handleMouseDown required along with onClick to ensure the correct selection
+  // is set immediately when the drag handle is clicked. Otherwise browser native
+  // drag and drop can take over and cause unpredictable behaviour.
+  var handleMouseDown = (0, _react.useCallback)(function () {
+    var _api$core3, _api$core4;
+    api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref3) {
+      var tr = _ref3.tr;
+      if (start === undefined) {
+        return tr;
+      }
+      tr = (0, _utils.selectNode)(tr, start, nodeType);
+      tr.setMeta(_main.key, {
+        pos: start
+      });
+      return tr;
+    });
+    api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.focus();
+  }, [start, api, nodeType]);
   (0, _react.useEffect)(function () {
     var element = buttonRef.current;
     if (!element) {
@@ -80,11 +102,11 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     }
     return (0, _adapter.draggable)({
       element: element,
-      onGenerateDragPreview: function onGenerateDragPreview(_ref3) {
-        var nativeSetDragImage = _ref3.nativeSetDragImage;
+      onGenerateDragPreview: function onGenerateDragPreview(_ref4) {
+        var nativeSetDragImage = _ref4.nativeSetDragImage;
         (0, _setCustomNativeDragPreview.setCustomNativeDragPreview)({
-          render: function render(_ref4) {
-            var container = _ref4.container;
+          render: function render(_ref5) {
+            var container = _ref5.container;
             var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
             if (!dom) {
               return;
@@ -95,17 +117,17 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         });
       },
       onDragStart: function onDragStart() {
-        var _api$core3, _api$blockControls, _api$core4;
+        var _api$core5, _api$blockControls, _api$core6;
         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, nodeType));
-        api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.focus();
+        api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.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$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.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 (_ref5) {
-          var tr = _ref5.tr;
+        var _api$core7;
+        api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref6) {
+          var tr = _ref6.tr;
           return tr.setMeta(_main.key, {
             isDragging: false
           });
@@ -113,30 +135,34 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       }
     });
   }, [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],
     ref: buttonRef,
     style: positionStyles,
-    onClick: handleClick,
+    onClick: handleOnClick,
+    onMouseDown: handleMouseDown,
     "data-testid": "block-ctrl-drag-handle"
   }, (0, _react2.jsx)(_dragHandler.default, {
     label: "",

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/es2019/pm-plugins/main.js

@@ -22,7 +22,6 @@ export const createPlugin = api => {
       },
       apply(tr, currentState, oldState, newState) {
         var _decorationState, _meta$activeNode, _meta$isDragging, _meta$editorHeight;
-        // return currentState;
         let {
           activeNode,
           decorations,
@@ -109,7 +108,11 @@ export const createPlugin = api => {
     },
     props: {
       decorations: state => {
-        var _key$getState;
+        var _api$editorDisabled, _api$editorDisabled$s, _key$getState;
+        const isDisabled = api === null || api === void 0 ? void 0 : (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 ? void 0 : (_api$editorDisabled$s = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled$s === void 0 ? void 0 : _api$editorDisabled$s.editorDisabled;
+        if (isDisabled) {
+          return;
+        }
         return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
       }
     },

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

@@ -1,6 +1,7 @@
 /** @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';
@@ -46,7 +47,10 @@ export const DragHandle = ({
   const start = getPos();
   const buttonRef = useRef(null);
   const [dragHandleSelected, setDragHandleSelected] = useState(false);
-  const handleClick = useCallback(() => {
+  const {
+    featureFlagsState
+  } = useSharedPluginState(api, ['featureFlags']);
+  const handleOnClick = useCallback(() => {
     var _api$core, _api$core2;
     setDragHandleSelected(!dragHandleSelected);
     api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
@@ -63,6 +67,26 @@ export const DragHandle = ({
     });
     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, nodeType]);
+
+  // handleMouseDown required along with onClick to ensure the correct selection
+  // is set immediately when the drag handle is clicked. Otherwise browser native
+  // drag and drop can take over and cause unpredictable behaviour.
+  const handleMouseDown = useCallback(() => {
+    var _api$core3, _api$core4;
+    api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(({
+      tr
+    }) => {
+      if (start === undefined) {
+        return tr;
+      }
+      tr = selectNode(tr, start, nodeType);
+      tr.setMeta(key, {
+        pos: start
+      });
+      return tr;
+    });
+    api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.focus();
+  }, [start, api, nodeType]);
   useEffect(() => {
     const element = buttonRef.current;
     if (!element) {
@@ -87,16 +111,16 @@ export const DragHandle = ({
         });
       },
       onDragStart() {
-        var _api$core3, _api$blockControls, _api$core4;
+        var _api$core5, _api$blockControls, _api$core6;
         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, nodeType));
-        api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.focus();
+        api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.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$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions.focus();
       },
       onDrop() {
-        var _api$core5;
-        api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions.execute(({
+        var _api$core7;
+        api === null || api === void 0 ? void 0 : (_api$core7 = api.core) === null || _api$core7 === void 0 ? void 0 : _api$core7.actions.execute(({
           tr
         }) => {
           return tr.setMeta(key, {
@@ -106,30 +130,34 @@ export const DragHandle = ({
       }
     });
   }, [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],
     ref: buttonRef,
     style: positionStyles,
-    onClick: handleClick,
+    onClick: handleOnClick,
+    onMouseDown: handleMouseDown,
     "data-testid": "block-ctrl-drag-handle"
   }, jsx(DragHandlerIcon, {
     label: "",

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/esm/pm-plugins/main.js

@@ -23,7 +23,6 @@ export var createPlugin = function createPlugin(api) {
       },
       apply: function apply(tr, currentState, oldState, newState) {
         var _decorationState, _meta$activeNode, _meta$isDragging, _meta$editorHeight;
-        // return currentState;
         var activeNode = currentState.activeNode,
           decorations = currentState.decorations,
           isMenuOpen = currentState.isMenuOpen,
@@ -108,7 +107,11 @@ export var createPlugin = function createPlugin(api) {
     },
     props: {
       decorations: function decorations(state) {
-        var _key$getState;
+        var _api$editorDisabled, _key$getState;
+        var isDisabled = api === null || api === void 0 || (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 || (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled === void 0 ? void 0 : _api$editorDisabled.editorDisabled;
+        if (isDisabled) {
+          return;
+        }
         return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
       }
     },

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

@@ -2,6 +2,7 @@ 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';
@@ -49,7 +50,9 @@ export var DragHandle = function DragHandle(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     dragHandleSelected = _useState2[0],
     setDragHandleSelected = _useState2[1];
-  var handleClick = useCallback(function () {
+  var _useSharedPluginState = useSharedPluginState(api, ['featureFlags']),
+    featureFlagsState = _useSharedPluginState.featureFlagsState;
+  var handleOnClick = useCallback(function () {
     var _api$core, _api$core2;
     setDragHandleSelected(!dragHandleSelected);
     api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
@@ -65,6 +68,25 @@ export var DragHandle = function DragHandle(_ref) {
     });
     api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.focus();
   }, [start, api, dragHandleSelected, setDragHandleSelected, nodeType]);
+
+  // handleMouseDown required along with onClick to ensure the correct selection
+  // is set immediately when the drag handle is clicked. Otherwise browser native
+  // drag and drop can take over and cause unpredictable behaviour.
+  var handleMouseDown = useCallback(function () {
+    var _api$core3, _api$core4;
+    api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref3) {
+      var tr = _ref3.tr;
+      if (start === undefined) {
+        return tr;
+      }
+      tr = selectNode(tr, start, nodeType);
+      tr.setMeta(key, {
+        pos: start
+      });
+      return tr;
+    });
+    api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.focus();
+  }, [start, api, nodeType]);
   useEffect(function () {
     var element = buttonRef.current;
     if (!element) {
@@ -72,11 +94,11 @@ export var DragHandle = function DragHandle(_ref) {
     }
     return draggable({
       element: element,
-      onGenerateDragPreview: function onGenerateDragPreview(_ref3) {
-        var nativeSetDragImage = _ref3.nativeSetDragImage;
+      onGenerateDragPreview: function onGenerateDragPreview(_ref4) {
+        var nativeSetDragImage = _ref4.nativeSetDragImage;
         setCustomNativeDragPreview({
-          render: function render(_ref4) {
-            var container = _ref4.container;
+          render: function render(_ref5) {
+            var container = _ref5.container;
             var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
             if (!dom) {
               return;
@@ -87,17 +109,17 @@ export var DragHandle = function DragHandle(_ref) {
         });
       },
       onDragStart: function onDragStart() {
-        var _api$core3, _api$blockControls, _api$core4;
+        var _api$core5, _api$blockControls, _api$core6;
         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, nodeType));
-        api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.focus();
+        api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.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$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.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 (_ref5) {
-          var tr = _ref5.tr;
+        var _api$core7;
+        api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref6) {
+          var tr = _ref6.tr;
           return tr.setMeta(key, {
             isDragging: false
           });
@@ -105,30 +127,34 @@ export var DragHandle = function DragHandle(_ref) {
       }
     });
   }, [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],
     ref: buttonRef,
     style: positionStyles,
-    onClick: handleClick,
+    onClick: handleOnClick,
+    onMouseDown: handleMouseDown,
     "data-testid": "block-ctrl-drag-handle"
   }, jsx(DragHandlerIcon, {
     label: "",

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/types/types.d.ts

@@ -1,4 +1,6 @@
 import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
+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 +17,11 @@ export interface PluginState {
 }
 export type ReleaseHiddenDecoration = () => boolean | undefined;
 export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
-    dependencies: [OptionalPlugin<WidthPlugin>];
+    dependencies: [
+        OptionalPlugin<EditorDisabledPlugin>,
+        OptionalPlugin<WidthPlugin>,
+        OptionalPlugin<FeatureFlagsPlugin>
+    ];
     sharedState: {
         isMenuOpen: boolean;
         activeNode: {

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-ts4.5/types.d.ts

@@ -1,4 +1,6 @@
 import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
+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 +18,9 @@ export interface PluginState {
 export type ReleaseHiddenDecoration = () => boolean | undefined;
 export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
     dependencies: [
-        OptionalPlugin<WidthPlugin>
+        OptionalPlugin<EditorDisabledPlugin>,
+        OptionalPlugin<WidthPlugin>,
+        OptionalPlugin<FeatureFlagsPlugin>
     ];
     sharedState: {
         isMenuOpen: boolean;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-block-controls",
-  "version": "1.4.11",
+  "version": "1.4.13",
   "description": "Block controls plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -31,7 +31,9 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/editor-common": "^82.1.0",
+    "@atlaskit/editor-common": "^82.3.0",
+    "@atlaskit/editor-plugin-editor-disabled": "^1.1.5",
+    "@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",
@@ -39,7 +41,7 @@
     "@atlaskit/pragmatic-drag-and-drop": "^1.1.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.3.0",
     "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
-    "@atlaskit/tokens": "^1.49.0",
+    "@atlaskit/tokens": "^1.50.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "raf-schd": "^4.0.3"