@atlaskit/editor-plugin-block-controls 3.8.0 → 3.8.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.8.1
+
+### Patch Changes
+
+- [#135962](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/135962)
+  [`b7caf17e63935`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b7caf17e63935) -
+  Add refreshAnchorName function to fetch new anchor name if current anchor name isnt provided,
+  which is possible as a new mouseDown event listener has been added to fetch position even if
+  editor isnt ready
+
 ## 3.8.0
 
 ### Minor Changes

package/dist/cjs/pm-plugins/handle-mouse-down.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleMouseDown = void 0;
+var handleMouseDown = exports.handleMouseDown = function handleMouseDown(api) {
+  return function (view, event) {
+    if (view.editable) {
+      return false;
+    }
+    if (event.target instanceof HTMLElement) {
+      var _rootNode$type$name, _rootNode$type$name2;
+      var targetPos = view.posAtDOM(event.target, 0);
+      // always fetch top level position for mouseDown to avoid drag handle positions being incorrect
+      var rootPos = view.state.doc.resolve(targetPos).before(1);
+      var rootNode = view.state.doc.nodeAt(rootPos);
+      if (!rootNode) {
+        return false;
+      }
+      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.showDragHandleAt(rootPos, '', (_rootNode$type$name = rootNode.type.name) !== null && _rootNode$type$name !== void 0 ? _rootNode$type$name : '', undefined, rootPos, '', (_rootNode$type$name2 = rootNode.type.name) !== null && _rootNode$type$name2 !== void 0 ? _rootNode$type$name2 : ''));
+    }
+    return false;
+  };
+};

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

@@ -26,6 +26,7 @@ var _decorationsAnchor = require("./decorations-anchor");
 var _decorationsDragHandle = require("./decorations-drag-handle");
 var _decorationsDropTarget = require("./decorations-drop-target");
 var _decorationsQuickInsertButton = require("./decorations-quick-insert-button");
+var _handleMouseDown = require("./handle-mouse-down");
 var _handleMouseOver = require("./handle-mouse-over");
 var _keymap = require("./keymap");
 var _activeAnchorTracker = require("./utils/active-anchor-tracker");
@@ -728,6 +729,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
           (0, _handleMouseOver.handleMouseOver)(view, event, api);
           return false;
         },
+        mousedown: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2') ? (0, _handleMouseDown.handleMouseDown)(api) : undefined,
         keydown: function keydown(view, event) {
           if (isMultiSelectEnabled) {
             if (event.shiftKey && event.ctrlKey) {

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

@@ -34,6 +34,7 @@ var _getSelection = require("../pm-plugins/utils/getSelection");
 var _selection = require("../pm-plugins/utils/selection");
 var _consts = require("./consts");
 var _dragPreview = require("./drag-preview");
+var _anchorName = require("./utils/anchor-name");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
  * @jsxRuntime classic
@@ -130,8 +131,9 @@ var dragHandleContainerStyles = (0, _primitives.xcss)({
   boxSizing: 'border-box',
   zIndex: 'card'
 });
-var controlContainerStyles = (0, _primitives.xcss)({
-  top: '0',
+var tooltipContainerStyles = (0, _primitives.xcss)({
+  top: '8px',
+  bottom: '-8px',
   position: 'sticky',
   zIndex: 'card'
 });
@@ -518,7 +520,12 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       parentNodeType = node === null || node === void 0 ? void 0 : node.type.name;
     }
     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, "\"]"));
+    var safeAnchorName = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2') ? (0, _anchorName.refreshAnchorName)({
+      getPos: getPos,
+      view: view,
+      anchorName: anchorName
+    }) : anchorName;
+    var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(safeAnchorName, "\"]"));
     var hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
     var isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension' || nodeType === 'multiBodiedExtension' && (0, _platformFeatureFlags.fg)('platform_editor_multi_body_extension_extensibility');
     var isBlockCard = nodeType === 'blockCard' && !!blockCardWidth;
@@ -540,18 +547,18 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
     var isSticky = (0, _dragHandlePositions.shouldBeSticky)(nodeType);
     if (supportsAnchor) {
-      var bottom = (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? (0, _dragHandlePositions.getControlBottomCSSValue)(anchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
+      var bottom = (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
       return _objectSpread({
-        left: isEdgeCase ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(anchorName, " right) + anchor(").concat(anchorName, " left))/2 - ").concat(_consts.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(anchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType, parentNodeType), "px)"),
-        top: (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(anchorName, " top) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(anchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(nodeType), "px)")
+        left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(safeAnchorName, " right) + anchor(").concat(safeAnchorName, " left))/2 - ").concat(_consts.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType, parentNodeType), "px)"),
+        top: (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(nodeType), "px)")
       }, bottom);
     }
-    var height = (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, anchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(_consts.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
+    var height = (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(_consts.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
     return _objectSpread({
       left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
       top: (0, _dragHandlePositions.getTopPosition)(dom, nodeType)
     }, height);
-  }, [anchorName, view.dom, view.state.doc, nodeType, blockCardWidth, macroInteractionUpdates, isTopLevelNode, isLayoutColumn, getPos, anchorRectCache]);
+  }, [anchorName, getPos, view, nodeType, blockCardWidth, macroInteractionUpdates, anchorRectCache, isTopLevelNode, isLayoutColumn]);
   var _useState7 = (0, _react.useState)({
       display: 'none'
     }),
@@ -728,7 +735,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       as: "span",
       testId: "block-ctrl-drag-handle-container"
     }, (0, _react2.jsx)(_primitives.Box, {
-      xcss: [controlContainerStyles],
+      xcss: [tooltipContainerStyles],
       as: "span"
     }, (0, _react2.jsx)(_tooltip.default, {
       content: (0, _react2.jsx)(_keymaps.TooltipContentWithMultipleShortcuts, {
@@ -753,7 +760,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       as: "span",
       testId: "block-ctrl-drag-handle-container"
     }, (0, _react2.jsx)(_primitives.Box, {
-      xcss: [controlContainerStyles],
+      xcss: [tooltipContainerStyles],
       as: "span"
     }, renderButton()));
   };

package/dist/cjs/ui/quick-insert-button.js

@@ -22,6 +22,7 @@ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _dragHandlePositions = require("../pm-plugins/utils/drag-handle-positions");
 var _widgetPositions = require("../pm-plugins/utils/widget-positions");
 var _consts = require("./consts");
+var _anchorName = require("./utils/anchor-name");
 var _documentChecks = require("./utils/document-checks");
 var _editorCommands = require("./utils/editor-commands");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -94,7 +95,8 @@ var disabledContainerStyles = (0, _primitives.xcss)({
   cursor: 'not-allowed'
 });
 var tooltipContainerStyles = (0, _primitives.xcss)({
-  top: '0',
+  top: '8px',
+  bottom: '-8px',
   position: 'sticky',
   zIndex: 'card'
 });
@@ -127,7 +129,12 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
   // CHANGES - `removed editorExperiment('advanced_layouts', true) && isLayoutColumn` checks as quick insert button will not be positioned for layout column
   var calculatePosition = (0, _react.useCallback)(function () {
     var supportsAnchor = CSS.supports('top', "anchor(".concat(rootAnchorName, " start)")) && CSS.supports('left', "anchor(".concat(rootAnchorName, " start)"));
-    var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(rootAnchorName, "\"]"));
+    var safeAnchorName = (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2') ? (0, _anchorName.refreshAnchorName)({
+      getPos: getPos,
+      view: view,
+      anchorName: rootAnchorName
+    }) : rootAnchorName;
+    var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(safeAnchorName, "\"]"));
     var hasResizer = rootNodeType === 'table' || rootNodeType === 'mediaSingle';
     var isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension';
     var isBlockCard = rootNodeType === 'blockCard';
@@ -148,24 +155,24 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
     }
     var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
     var isSticky = (0, _dragHandlePositions.shouldBeSticky)(rootNodeType);
-    var bottom = (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? (0, _dragHandlePositions.getControlBottomCSSValue)(rootAnchorName || anchorName, isSticky, true) : {};
+    var bottom = (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName || anchorName, isSticky, true) : {};
     if (supportsAnchor) {
       return _objectSpread({
-        left: isEdgeCase ? "calc(anchor(".concat(rootAnchorName, " start) + ").concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(anchor(".concat(rootAnchorName, " start) - ").concat(_consts.QUICK_INSERT_DIMENSIONS.width, "px - ").concat((0, _consts.rootElementGap)(rootNodeType), "px + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)"),
-        top: "calc(anchor(".concat(rootAnchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(rootNodeType), "px)")
+        left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(_consts.QUICK_INSERT_DIMENSIONS.width, "px - ").concat((0, _consts.rootElementGap)(rootNodeType), "px + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)"),
+        top: "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(rootNodeType), "px)")
       }, bottom);
     }
 
     // expensive, calls offsetHeight, guard behind FG
     var nodeHeight =
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-    (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') && (0, _dragHandlePositions.getNodeHeight)(dom, rootAnchorName || anchorName, anchorRectCache) || 0;
+    (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') && (0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName || anchorName, anchorRectCache) || 0;
     var height = (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? (0, _dragHandlePositions.getControlHeightCSSValue)(nodeHeight, isSticky, true, "var(--ds-space-300, 24px)") : {};
     return _objectSpread({
       left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(".concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)"),
       top: (0, _dragHandlePositions.getTopPosition)(dom, rootNodeType)
     }, height);
-  }, [rootAnchorName, view.dom, rootNodeType, macroInteractionUpdates, anchorName, anchorRectCache]);
+  }, [rootAnchorName, getPos, view, rootNodeType, macroInteractionUpdates, anchorName, anchorRectCache]);
   (0, _react.useEffect)(function () {
     var cleanUpTransitionListener;
     if (rootNodeType === 'extension' || rootNodeType === 'embedCard') {

package/dist/cjs/ui/utils/anchor-name.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.refreshAnchorName = void 0;
+var _decorationsAnchor = require("../../pm-plugins/decorations-anchor");
+var _main = require("../../pm-plugins/main");
+/**
+ * Checks for plugin state for latest anchorName based on the position, returns
+ * provided anchorName if available
+ */
+var refreshAnchorName = exports.refreshAnchorName = function refreshAnchorName(_ref) {
+  var getPos = _ref.getPos,
+    view = _ref.view,
+    anchorName = _ref.anchorName;
+  var newAnchorName = anchorName || '';
+  var pos = getPos();
+  if (anchorName || pos === undefined) {
+    return newAnchorName;
+  }
+  var node = view.state.doc.nodeAt(pos);
+  var state = _main.key.getState(view.state);
+  if (state !== null && state !== void 0 && state.decorations) {
+    var _node$nodeSize;
+    var nodeDecs = (0, _decorationsAnchor.findNodeDecs)(state.decorations, pos, pos + ((_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 0));
+    var nodeDec = nodeDecs.at(0);
+    if (!nodeDec) {
+      return newAnchorName;
+    }
+    newAnchorName = nodeDec.spec.anchorName;
+  }
+  return newAnchorName;
+};

package/dist/es2019/pm-plugins/handle-mouse-down.js

@@ -0,0 +1,17 @@
+export const handleMouseDown = api => (view, event) => {
+  if (view.editable) {
+    return false;
+  }
+  if (event.target instanceof HTMLElement) {
+    var _rootNode$type$name, _rootNode$type$name2;
+    const targetPos = view.posAtDOM(event.target, 0);
+    // always fetch top level position for mouseDown to avoid drag handle positions being incorrect
+    const rootPos = view.state.doc.resolve(targetPos).before(1);
+    const rootNode = view.state.doc.nodeAt(rootPos);
+    if (!rootNode) {
+      return false;
+    }
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.showDragHandleAt(rootPos, '', (_rootNode$type$name = rootNode.type.name) !== null && _rootNode$type$name !== void 0 ? _rootNode$type$name : '', undefined, rootPos, '', (_rootNode$type$name2 = rootNode.type.name) !== null && _rootNode$type$name2 !== void 0 ? _rootNode$type$name2 : ''));
+  }
+  return false;
+};

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

@@ -17,6 +17,7 @@ import { findNodeDecs, nodeDecorations } from './decorations-anchor';
 import { dragHandleDecoration, emptyParagraphNodeDecorations, findHandleDec } from './decorations-drag-handle';
 import { dropTargetDecorations, findDropTargetDecs } from './decorations-drop-target';
 import { findQuickInsertInsertButtonDecoration, quickInsertButtonDecoration } from './decorations-quick-insert-button';
+import { handleMouseDown } from './handle-mouse-down';
 import { handleMouseOver } from './handle-mouse-over';
 import { boundKeydownHandler } from './keymap';
 import { defaultActiveAnchorTracker } from './utils/active-anchor-tracker';
@@ -714,6 +715,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
           handleMouseOver(view, event, api);
           return false;
         },
+        mousedown: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2') ? handleMouseDown(api) : undefined,
         keydown(view, event) {
           if (isMultiSelectEnabled) {
             if (event.shiftKey && event.ctrlKey) {

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

@@ -31,6 +31,7 @@ import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/g
 import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
 import { BLOCK_MENU_ENABLED, DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, topPositionAdjustment } from './consts';
 import { dragPreview } from './drag-preview';
+import { refreshAnchorName } from './utils/anchor-name';
 const iconWrapperStyles = xcss({
   display: 'flex',
   justifyContent: 'center',
@@ -122,8 +123,9 @@ const dragHandleContainerStyles = xcss({
   boxSizing: 'border-box',
   zIndex: 'card'
 });
-const controlContainerStyles = xcss({
-  top: '0',
+const tooltipContainerStyles = xcss({
+  top: '8px',
+  bottom: '-8px',
   position: 'sticky',
   zIndex: 'card'
 });
@@ -507,7 +509,12 @@ export const DragHandle = ({
       parentNodeType = node === null || node === void 0 ? void 0 : node.type.name;
     }
     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}"]`);
+    const safeAnchorName = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2') ? refreshAnchorName({
+      getPos,
+      view,
+      anchorName
+    }) : anchorName;
+    const dom = view.dom.querySelector(`[data-drag-handler-anchor-name="${safeAnchorName}"]`);
     const hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
     const isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension' || nodeType === 'multiBodiedExtension' && fg('platform_editor_multi_body_extension_extensibility');
     const isBlockCard = nodeType === 'blockCard' && !!blockCardWidth;
@@ -529,20 +536,20 @@ export const DragHandle = ({
     const isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
     const isSticky = shouldBeSticky(nodeType);
     if (supportsAnchor) {
-      const bottom = fg('platform_editor_controls_sticky_controls') ? getControlBottomCSSValue(anchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
+      const bottom = fg('platform_editor_controls_sticky_controls') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
       return {
-        left: isEdgeCase ? `calc(anchor(${anchorName} start) + ${getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType)})` : editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc((anchor(${anchorName} right) + anchor(${anchorName} left))/2 - ${DRAG_HANDLE_HEIGHT / 2}px)` : `calc(anchor(${anchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType, parentNodeType)}px)`,
-        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc(anchor(${anchorName} top) - ${DRAG_HANDLE_WIDTH}px)` : `calc(anchor(${anchorName} start) + ${topPositionAdjustment(nodeType)}px)`,
+        left: isEdgeCase ? `calc(anchor(${safeAnchorName} start) + ${getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType)})` : editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc((anchor(${safeAnchorName} right) + anchor(${safeAnchorName} left))/2 - ${DRAG_HANDLE_HEIGHT / 2}px)` : `calc(anchor(${safeAnchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType, parentNodeType)}px)`,
+        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc(anchor(${safeAnchorName} top) - ${DRAG_HANDLE_WIDTH}px)` : `calc(anchor(${safeAnchorName} start) + ${topPositionAdjustment(nodeType)}px)`,
         ...bottom
       };
     }
-    const height = fg('platform_editor_controls_sticky_controls') ? getControlHeightCSSValue(getNodeHeight(dom, anchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, `${DRAG_HANDLE_HEIGHT}`, isLayoutColumn) : {};
+    const height = fg('platform_editor_controls_sticky_controls') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, `${DRAG_HANDLE_HEIGHT}`, isLayoutColumn) : {};
     return {
       left: isEdgeCase ? `calc(${(dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0}px + ${getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType)})` : getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
       top: getTopPosition(dom, nodeType),
       ...height
     };
-  }, [anchorName, view.dom, view.state.doc, nodeType, blockCardWidth, macroInteractionUpdates, isTopLevelNode, isLayoutColumn, getPos, anchorRectCache]);
+  }, [anchorName, getPos, view, nodeType, blockCardWidth, macroInteractionUpdates, anchorRectCache, isTopLevelNode, isLayoutColumn]);
   const [positionStyles, setPositionStyles] = useState({
     display: 'none'
   });
@@ -712,7 +719,7 @@ export const DragHandle = ({
     as: "span",
     testId: "block-ctrl-drag-handle-container"
   }, jsx(Box, {
-    xcss: [controlContainerStyles],
+    xcss: [tooltipContainerStyles],
     as: "span"
   }, jsx(Tooltip, {
     content: jsx(TooltipContentWithMultipleShortcuts, {
@@ -735,7 +742,7 @@ export const DragHandle = ({
     as: "span",
     testId: "block-ctrl-drag-handle-container"
   }, jsx(Box, {
-    xcss: [controlContainerStyles],
+    xcss: [tooltipContainerStyles],
     as: "span"
   }, renderButton()));
   const buttonWithTooltip = () => jsx(Tooltip, {

package/dist/es2019/ui/quick-insert-button.js

@@ -12,6 +12,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { getControlBottomCSSValue, getControlHeightCSSValue, getNodeHeight, getTopPosition, shouldBeSticky } from '../pm-plugins/utils/drag-handle-positions';
 import { getLeftPositionForRootElement } from '../pm-plugins/utils/widget-positions';
 import { rootElementGap, topPositionAdjustment, QUICK_INSERT_DIMENSIONS, QUICK_INSERT_LEFT_OFFSET } from './consts';
+import { refreshAnchorName } from './utils/anchor-name';
 import { isInTextSelection, isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from './utils/document-checks';
 import { createNewLine } from './utils/editor-commands';
 const TEXT_PARENT_TYPES = ['paragraph', 'heading', 'blockquote', 'taskItem', 'decisionItem'];
@@ -80,7 +81,8 @@ const disabledContainerStyles = xcss({
   cursor: 'not-allowed'
 });
 const tooltipContainerStyles = xcss({
-  top: '0',
+  top: '8px',
+  bottom: '-8px',
   position: 'sticky',
   zIndex: 'card'
 });
@@ -111,7 +113,12 @@ export const TypeAheadControl = ({
   // CHANGES - `removed editorExperiment('advanced_layouts', true) && isLayoutColumn` checks as quick insert button will not be positioned for layout column
   const calculatePosition = useCallback(() => {
     const supportsAnchor = CSS.supports('top', `anchor(${rootAnchorName} start)`) && CSS.supports('left', `anchor(${rootAnchorName} start)`);
-    const dom = view.dom.querySelector(`[data-drag-handler-anchor-name="${rootAnchorName}"]`);
+    const safeAnchorName = fg('platform_editor_controls_patch_2') ? refreshAnchorName({
+      getPos,
+      view,
+      anchorName: rootAnchorName
+    }) : rootAnchorName;
+    const dom = view.dom.querySelector(`[data-drag-handler-anchor-name="${safeAnchorName}"]`);
     const hasResizer = rootNodeType === 'table' || rootNodeType === 'mediaSingle';
     const isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension';
     const isBlockCard = rootNodeType === 'blockCard';
@@ -132,11 +139,11 @@ export const TypeAheadControl = ({
     }
     const isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
     const isSticky = shouldBeSticky(rootNodeType);
-    const bottom = fg('platform_editor_controls_sticky_controls') ? getControlBottomCSSValue(rootAnchorName || anchorName, isSticky, true) : {};
+    const bottom = fg('platform_editor_controls_sticky_controls') ? getControlBottomCSSValue(safeAnchorName || anchorName, isSticky, true) : {};
     if (supportsAnchor) {
       return {
-        left: isEdgeCase ? `calc(anchor(${rootAnchorName} start) + ${getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates)} + -${QUICK_INSERT_LEFT_OFFSET}px)` : `calc(anchor(${rootAnchorName} start) - ${QUICK_INSERT_DIMENSIONS.width}px - ${rootElementGap(rootNodeType)}px + -${QUICK_INSERT_LEFT_OFFSET}px)`,
-        top: `calc(anchor(${rootAnchorName} start) + ${topPositionAdjustment(rootNodeType)}px)`,
+        left: isEdgeCase ? `calc(anchor(${safeAnchorName} start) + ${getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates)} + -${QUICK_INSERT_LEFT_OFFSET}px)` : `calc(anchor(${safeAnchorName} start) - ${QUICK_INSERT_DIMENSIONS.width}px - ${rootElementGap(rootNodeType)}px + -${QUICK_INSERT_LEFT_OFFSET}px)`,
+        top: `calc(anchor(${safeAnchorName} start) + ${topPositionAdjustment(rootNodeType)}px)`,
         ...bottom
       };
     }
@@ -144,14 +151,14 @@ export const TypeAheadControl = ({
     // expensive, calls offsetHeight, guard behind FG
     const nodeHeight =
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-    fg('platform_editor_controls_sticky_controls') && getNodeHeight(dom, rootAnchorName || anchorName, anchorRectCache) || 0;
+    fg('platform_editor_controls_sticky_controls') && getNodeHeight(dom, safeAnchorName || anchorName, anchorRectCache) || 0;
     const height = fg('platform_editor_controls_sticky_controls') ? getControlHeightCSSValue(nodeHeight, isSticky, true, "var(--ds-space-300, 24px)") : {};
     return {
       left: isEdgeCase ? `calc(${(dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0}px + ${getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates)} + -${QUICK_INSERT_LEFT_OFFSET}px)` : `calc(${getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates)} + -${QUICK_INSERT_LEFT_OFFSET}px)`,
       top: getTopPosition(dom, rootNodeType),
       ...height
     };
-  }, [rootAnchorName, view.dom, rootNodeType, macroInteractionUpdates, anchorName, anchorRectCache]);
+  }, [rootAnchorName, getPos, view, rootNodeType, macroInteractionUpdates, anchorName, anchorRectCache]);
   useEffect(() => {
     let cleanUpTransitionListener;
     if (rootNodeType === 'extension' || rootNodeType === 'embedCard') {

package/dist/es2019/ui/utils/anchor-name.js

@@ -0,0 +1,29 @@
+import { findNodeDecs } from '../../pm-plugins/decorations-anchor';
+import { key } from '../../pm-plugins/main';
+/**
+ * Checks for plugin state for latest anchorName based on the position, returns
+ * provided anchorName if available
+ */
+export const refreshAnchorName = ({
+  getPos,
+  view,
+  anchorName
+}) => {
+  let newAnchorName = anchorName || '';
+  const pos = getPos();
+  if (anchorName || pos === undefined) {
+    return newAnchorName;
+  }
+  const node = view.state.doc.nodeAt(pos);
+  const state = key.getState(view.state);
+  if (state !== null && state !== void 0 && state.decorations) {
+    var _node$nodeSize;
+    const nodeDecs = findNodeDecs(state.decorations, pos, pos + ((_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 0));
+    const nodeDec = nodeDecs.at(0);
+    if (!nodeDec) {
+      return newAnchorName;
+    }
+    newAnchorName = nodeDec.spec.anchorName;
+  }
+  return newAnchorName;
+};

package/dist/esm/pm-plugins/handle-mouse-down.js

@@ -0,0 +1,19 @@
+export var handleMouseDown = function handleMouseDown(api) {
+  return function (view, event) {
+    if (view.editable) {
+      return false;
+    }
+    if (event.target instanceof HTMLElement) {
+      var _rootNode$type$name, _rootNode$type$name2;
+      var targetPos = view.posAtDOM(event.target, 0);
+      // always fetch top level position for mouseDown to avoid drag handle positions being incorrect
+      var rootPos = view.state.doc.resolve(targetPos).before(1);
+      var rootNode = view.state.doc.nodeAt(rootPos);
+      if (!rootNode) {
+        return false;
+      }
+      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.showDragHandleAt(rootPos, '', (_rootNode$type$name = rootNode.type.name) !== null && _rootNode$type$name !== void 0 ? _rootNode$type$name : '', undefined, rootPos, '', (_rootNode$type$name2 = rootNode.type.name) !== null && _rootNode$type$name2 !== void 0 ? _rootNode$type$name2 : ''));
+    }
+    return false;
+  };
+};

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

@@ -21,6 +21,7 @@ import { findNodeDecs, nodeDecorations } from './decorations-anchor';
 import { dragHandleDecoration, emptyParagraphNodeDecorations, findHandleDec } from './decorations-drag-handle';
 import { dropTargetDecorations, findDropTargetDecs } from './decorations-drop-target';
 import { findQuickInsertInsertButtonDecoration, quickInsertButtonDecoration } from './decorations-quick-insert-button';
+import { handleMouseDown } from './handle-mouse-down';
 import { handleMouseOver } from './handle-mouse-over';
 import { boundKeydownHandler } from './keymap';
 import { defaultActiveAnchorTracker } from './utils/active-anchor-tracker';
@@ -721,6 +722,7 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
           handleMouseOver(view, event, api);
           return false;
         },
+        mousedown: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2') ? handleMouseDown(api) : undefined,
         keydown: function keydown(view, event) {
           if (isMultiSelectEnabled) {
             if (event.shiftKey && event.ctrlKey) {

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

@@ -36,6 +36,7 @@ import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/g
 import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
 import { BLOCK_MENU_ENABLED, DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, topPositionAdjustment } from './consts';
 import { dragPreview } from './drag-preview';
+import { refreshAnchorName } from './utils/anchor-name';
 var iconWrapperStyles = xcss({
   display: 'flex',
   justifyContent: 'center',
@@ -127,8 +128,9 @@ var dragHandleContainerStyles = xcss({
   boxSizing: 'border-box',
   zIndex: 'card'
 });
-var controlContainerStyles = xcss({
-  top: '0',
+var tooltipContainerStyles = xcss({
+  top: '8px',
+  bottom: '-8px',
   position: 'sticky',
   zIndex: 'card'
 });
@@ -515,7 +517,12 @@ export var DragHandle = function DragHandle(_ref) {
       parentNodeType = node === null || node === void 0 ? void 0 : node.type.name;
     }
     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, "\"]"));
+    var safeAnchorName = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2') ? refreshAnchorName({
+      getPos: getPos,
+      view: view,
+      anchorName: anchorName
+    }) : anchorName;
+    var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(safeAnchorName, "\"]"));
     var hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
     var isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension' || nodeType === 'multiBodiedExtension' && fg('platform_editor_multi_body_extension_extensibility');
     var isBlockCard = nodeType === 'blockCard' && !!blockCardWidth;
@@ -537,18 +544,18 @@ export var DragHandle = function DragHandle(_ref) {
     var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
     var isSticky = shouldBeSticky(nodeType);
     if (supportsAnchor) {
-      var bottom = fg('platform_editor_controls_sticky_controls') ? getControlBottomCSSValue(anchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
+      var bottom = fg('platform_editor_controls_sticky_controls') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
       return _objectSpread({
-        left: isEdgeCase ? "calc(anchor(".concat(anchorName, " start) + ").concat(getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(anchorName, " right) + anchor(").concat(anchorName, " left))/2 - ").concat(DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(anchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType, parentNodeType), "px)"),
-        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(anchorName, " top) - ").concat(DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(anchorName, " start) + ").concat(topPositionAdjustment(nodeType), "px)")
+        left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat(getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(safeAnchorName, " right) + anchor(").concat(safeAnchorName, " left))/2 - ").concat(DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType, parentNodeType), "px)"),
+        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat(topPositionAdjustment(nodeType), "px)")
       }, bottom);
     }
-    var height = fg('platform_editor_controls_sticky_controls') ? getControlHeightCSSValue(getNodeHeight(dom, anchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
+    var height = fg('platform_editor_controls_sticky_controls') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
     return _objectSpread({
       left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat(getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
       top: getTopPosition(dom, nodeType)
     }, height);
-  }, [anchorName, view.dom, view.state.doc, nodeType, blockCardWidth, macroInteractionUpdates, isTopLevelNode, isLayoutColumn, getPos, anchorRectCache]);
+  }, [anchorName, getPos, view, nodeType, blockCardWidth, macroInteractionUpdates, anchorRectCache, isTopLevelNode, isLayoutColumn]);
   var _useState7 = useState({
       display: 'none'
     }),
@@ -725,7 +732,7 @@ export var DragHandle = function DragHandle(_ref) {
       as: "span",
       testId: "block-ctrl-drag-handle-container"
     }, jsx(Box, {
-      xcss: [controlContainerStyles],
+      xcss: [tooltipContainerStyles],
       as: "span"
     }, jsx(Tooltip, {
       content: jsx(TooltipContentWithMultipleShortcuts, {
@@ -750,7 +757,7 @@ export var DragHandle = function DragHandle(_ref) {
       as: "span",
       testId: "block-ctrl-drag-handle-container"
     }, jsx(Box, {
-      xcss: [controlContainerStyles],
+      xcss: [tooltipContainerStyles],
       as: "span"
     }, renderButton()));
   };

package/dist/esm/ui/quick-insert-button.js

@@ -16,6 +16,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { getControlBottomCSSValue, getControlHeightCSSValue, getNodeHeight, getTopPosition, shouldBeSticky } from '../pm-plugins/utils/drag-handle-positions';
 import { getLeftPositionForRootElement } from '../pm-plugins/utils/widget-positions';
 import { rootElementGap, topPositionAdjustment, QUICK_INSERT_DIMENSIONS, QUICK_INSERT_LEFT_OFFSET } from './consts';
+import { refreshAnchorName } from './utils/anchor-name';
 import { isInTextSelection, isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from './utils/document-checks';
 import { createNewLine } from './utils/editor-commands';
 var TEXT_PARENT_TYPES = ['paragraph', 'heading', 'blockquote', 'taskItem', 'decisionItem'];
@@ -84,7 +85,8 @@ var disabledContainerStyles = xcss({
   cursor: 'not-allowed'
 });
 var tooltipContainerStyles = xcss({
-  top: '0',
+  top: '8px',
+  bottom: '-8px',
   position: 'sticky',
   zIndex: 'card'
 });
@@ -117,7 +119,12 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
   // CHANGES - `removed editorExperiment('advanced_layouts', true) && isLayoutColumn` checks as quick insert button will not be positioned for layout column
   var calculatePosition = useCallback(function () {
     var supportsAnchor = CSS.supports('top', "anchor(".concat(rootAnchorName, " start)")) && CSS.supports('left', "anchor(".concat(rootAnchorName, " start)"));
-    var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(rootAnchorName, "\"]"));
+    var safeAnchorName = fg('platform_editor_controls_patch_2') ? refreshAnchorName({
+      getPos: getPos,
+      view: view,
+      anchorName: rootAnchorName
+    }) : rootAnchorName;
+    var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(safeAnchorName, "\"]"));
     var hasResizer = rootNodeType === 'table' || rootNodeType === 'mediaSingle';
     var isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension';
     var isBlockCard = rootNodeType === 'blockCard';
@@ -138,24 +145,24 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
     }
     var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
     var isSticky = shouldBeSticky(rootNodeType);
-    var bottom = fg('platform_editor_controls_sticky_controls') ? getControlBottomCSSValue(rootAnchorName || anchorName, isSticky, true) : {};
+    var bottom = fg('platform_editor_controls_sticky_controls') ? getControlBottomCSSValue(safeAnchorName || anchorName, isSticky, true) : {};
     if (supportsAnchor) {
       return _objectSpread({
-        left: isEdgeCase ? "calc(anchor(".concat(rootAnchorName, " start) + ").concat(getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(anchor(".concat(rootAnchorName, " start) - ").concat(QUICK_INSERT_DIMENSIONS.width, "px - ").concat(rootElementGap(rootNodeType), "px + -").concat(QUICK_INSERT_LEFT_OFFSET, "px)"),
-        top: "calc(anchor(".concat(rootAnchorName, " start) + ").concat(topPositionAdjustment(rootNodeType), "px)")
+        left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat(getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(QUICK_INSERT_DIMENSIONS.width, "px - ").concat(rootElementGap(rootNodeType), "px + -").concat(QUICK_INSERT_LEFT_OFFSET, "px)"),
+        top: "calc(anchor(".concat(safeAnchorName, " start) + ").concat(topPositionAdjustment(rootNodeType), "px)")
       }, bottom);
     }
 
     // expensive, calls offsetHeight, guard behind FG
     var nodeHeight =
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-    fg('platform_editor_controls_sticky_controls') && getNodeHeight(dom, rootAnchorName || anchorName, anchorRectCache) || 0;
+    fg('platform_editor_controls_sticky_controls') && getNodeHeight(dom, safeAnchorName || anchorName, anchorRectCache) || 0;
     var height = fg('platform_editor_controls_sticky_controls') ? getControlHeightCSSValue(nodeHeight, isSticky, true, "var(--ds-space-300, 24px)") : {};
     return _objectSpread({
       left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat(getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(".concat(getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(QUICK_INSERT_LEFT_OFFSET, "px)"),
       top: getTopPosition(dom, rootNodeType)
     }, height);
-  }, [rootAnchorName, view.dom, rootNodeType, macroInteractionUpdates, anchorName, anchorRectCache]);
+  }, [rootAnchorName, getPos, view, rootNodeType, macroInteractionUpdates, anchorName, anchorRectCache]);
   useEffect(function () {
     var cleanUpTransitionListener;
     if (rootNodeType === 'extension' || rootNodeType === 'embedCard') {

package/dist/esm/ui/utils/anchor-name.js

@@ -0,0 +1,28 @@
+import { findNodeDecs } from '../../pm-plugins/decorations-anchor';
+import { key } from '../../pm-plugins/main';
+/**
+ * Checks for plugin state for latest anchorName based on the position, returns
+ * provided anchorName if available
+ */
+export var refreshAnchorName = function refreshAnchorName(_ref) {
+  var getPos = _ref.getPos,
+    view = _ref.view,
+    anchorName = _ref.anchorName;
+  var newAnchorName = anchorName || '';
+  var pos = getPos();
+  if (anchorName || pos === undefined) {
+    return newAnchorName;
+  }
+  var node = view.state.doc.nodeAt(pos);
+  var state = key.getState(view.state);
+  if (state !== null && state !== void 0 && state.decorations) {
+    var _node$nodeSize;
+    var nodeDecs = findNodeDecs(state.decorations, pos, pos + ((_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 0));
+    var nodeDec = nodeDecs.at(0);
+    if (!nodeDec) {
+      return newAnchorName;
+    }
+    newAnchorName = nodeDec.spec.anchorName;
+  }
+  return newAnchorName;
+};

package/dist/types/pm-plugins/handle-mouse-down.d.ts

@@ -0,0 +1,4 @@
+import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { BlockControlsPlugin } from '../blockControlsPluginType';
+export declare const handleMouseDown: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => (view: EditorView, event: MouseEvent) => boolean;

package/dist/types/ui/utils/anchor-name.d.ts

@@ -0,0 +1,12 @@
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+type RefreshAnchorNameParams = {
+    getPos: () => number | undefined;
+    view: EditorView;
+    anchorName?: string;
+};
+/**
+ * Checks for plugin state for latest anchorName based on the position, returns
+ * provided anchorName if available
+ */
+export declare const refreshAnchorName: ({ getPos, view, anchorName }: RefreshAnchorNameParams) => string;
+export {};

package/dist/types-ts4.5/pm-plugins/handle-mouse-down.d.ts

@@ -0,0 +1,4 @@
+import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { BlockControlsPlugin } from '../blockControlsPluginType';
+export declare const handleMouseDown: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => (view: EditorView, event: MouseEvent) => boolean;

package/dist/types-ts4.5/ui/utils/anchor-name.d.ts

@@ -0,0 +1,12 @@
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+type RefreshAnchorNameParams = {
+    getPos: () => number | undefined;
+    view: EditorView;
+    anchorName?: string;
+};
+/**
+ * Checks for plugin state for latest anchorName based on the position, returns
+ * provided anchorName if available
+ */
+export declare const refreshAnchorName: ({ getPos, view, anchorName }: RefreshAnchorNameParams) => string;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.8.0",
+	"version": "3.8.1",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,7 +33,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^102.16.0",
+		"@atlaskit/editor-common": "^102.18.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
@@ -41,20 +41,20 @@
 		"@atlaskit/editor-plugin-metrics": "^3.4.0",
 		"@atlaskit/editor-plugin-quick-insert": "^2.2.0",
 		"@atlaskit/editor-plugin-selection": "^2.1.0",
-		"@atlaskit/editor-plugin-type-ahead": "^2.2.0",
+		"@atlaskit/editor-plugin-type-ahead": "^2.3.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/icon": "^25.4.0",
+		"@atlaskit/icon": "^25.5.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.0.0",
-		"@atlaskit/primitives": "^14.2.0",
+		"@atlaskit/primitives": "^14.3.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tmp-editor-statsig": "^4.6.0",
-		"@atlaskit/tokens": "^4.5.0",
+		"@atlaskit/tokens": "^4.6.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -170,6 +170,9 @@
 		},
 		"platform_editor_controls_sticky_controls": {
 			"type": "boolean"
+		},
+		"platform_editor_controls_patch_2": {
+			"type": "boolean"
 		}
 	}
 }