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

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @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
+
+- [#132443](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/132443)
+  [`d4f6243b5f21a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d4f6243b5f21a) -
+  [ux] Add sticky controls under experiment
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.7.1
 
 ### Patch Changes

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

@@ -28,7 +28,7 @@ var findHandleDec = exports.findHandleDec = function findHandleDec(decorations,
     return spec.type === _decorationsCommon.TYPE_HANDLE_DEC;
   });
 };
-var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions) {
+var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions, anchorRectCache) {
   (0, _decorationsCommon.unmountDecorations)(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
   var unbind;
   var key = (0, _uuid.default)();
@@ -100,7 +100,8 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
       anchorName: anchorName,
       nodeType: nodeType,
       handleOptions: handleOptions,
-      isTopLevelNode: isTopLevelNode
+      isTopLevelNode: isTopLevelNode,
+      anchorRectCache: anchorRectCache
     }), element);
     //}
     return element;

package/dist/cjs/pm-plugins/decorations-quick-insert-button.js

@@ -15,7 +15,7 @@ var findQuickInsertInsertButtonDecoration = exports.findQuickInsertInsertButtonD
     return spec.type === TYPE_QUICK_INSERT;
   });
 };
-var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function quickInsertButtonDecoration(api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType) {
+var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function quickInsertButtonDecoration(api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType, anchorRectCache) {
   var key = (0, _uuid.default)();
   return _view.Decoration.widget(rootPos, function (view, getPos) {
     var element = document.createElement('span');
@@ -31,7 +31,8 @@ var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function
         nodeType: nodeType,
         anchorName: anchorName,
         rootAnchorName: rootAnchorName,
-        rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType
+        rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
+        anchorRectCache: anchorRectCache
       });
     }, element, key);
     return element;

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");
@@ -355,14 +356,14 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
       var _activeNode9, _activeNode10, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
       var _oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.pos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.pos);
       decorations = decorations.remove(_oldHandle);
-      var handleDec = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, (_latestActiveNode = latestActiveNode) === null || _latestActiveNode === void 0 ? void 0 : _latestActiveNode.pos, (_latestActiveNode2 = latestActiveNode) === null || _latestActiveNode2 === void 0 ? void 0 : _latestActiveNode2.anchorName, (_latestActiveNode3 = latestActiveNode) === null || _latestActiveNode3 === void 0 ? void 0 : _latestActiveNode3.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode4 = latestActiveNode) === null || _latestActiveNode4 === void 0 ? void 0 : _latestActiveNode4.handleOptions);
+      var handleDec = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, (_latestActiveNode = latestActiveNode) === null || _latestActiveNode === void 0 ? void 0 : _latestActiveNode.pos, (_latestActiveNode2 = latestActiveNode) === null || _latestActiveNode2 === void 0 ? void 0 : _latestActiveNode2.anchorName, (_latestActiveNode3 = latestActiveNode) === null || _latestActiveNode3 === void 0 ? void 0 : _latestActiveNode3.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode4 = latestActiveNode) === null || _latestActiveNode4 === void 0 ? void 0 : _latestActiveNode4.handleOptions, anchorRectCache);
       decorations = decorations.add(newState.doc, [handleDec]);
     }
     if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
       var _activeNode11, _activeNode12, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode10;
       var _oldQuickInsertButton = (0, _decorationsQuickInsertButton.findQuickInsertInsertButtonDecoration)(decorations, (_activeNode11 = activeNode) === null || _activeNode11 === void 0 ? void 0 : _activeNode11.rootPos, (_activeNode12 = activeNode) === null || _activeNode12 === void 0 ? void 0 : _activeNode12.rootPos);
       decorations = decorations.remove(_oldQuickInsertButton);
-      var quickInsertButton = (0, _decorationsQuickInsertButton.quickInsertButtonDecoration)(api, formatMessage, (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.rootPos, (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.anchorName, (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName, (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.rootNodeType);
+      var quickInsertButton = (0, _decorationsQuickInsertButton.quickInsertButtonDecoration)(api, formatMessage, (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.rootPos, (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.anchorName, (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName, (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.rootNodeType, anchorRectCache);
       decorations = decorations.add(newState.doc, [quickInsertButton]);
     }
   }
@@ -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/pm-plugins/utils/drag-handle-positions.js

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTopPosition = exports.getLeftPosition = void 0;
+exports.shouldBeSticky = exports.getTopPosition = exports.getNodeHeight = exports.getLeftPosition = exports.getControlHeightCSSValue = exports.getControlBottomCSSValue = void 0;
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("../../ui/consts");
+var STICKY_NODES = ['panel', 'table', 'expand', 'layoutSection', 'bodiedExtension'];
 var getTopPosition = exports.getTopPosition = function getTopPosition(dom, type) {
   if (!dom) {
     return 'auto';
@@ -48,4 +50,26 @@ var getLeftPosition = exports.getLeftPosition = function getLeftPosition(dom, ty
   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, parentType) - _consts.DRAG_HANDLE_WIDTH, "px") : "".concat(innerContainer.offsetLeft + leftAdjustment - innerContainer.offsetWidth / 2 - (0, _consts.dragHandleGap)(type, parentType) - _consts.DRAG_HANDLE_WIDTH, "px");
+};
+
+// anchorRectCache seems to have a 100% cache miss rate
+var getNodeHeight = exports.getNodeHeight = function getNodeHeight(dom, anchor, anchorRectCache) {
+  return (anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchor)) || (dom === null || dom === void 0 ? void 0 : dom.offsetHeight);
+};
+var shouldBeSticky = exports.shouldBeSticky = function shouldBeSticky(nodeType) {
+  return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && STICKY_NODES.includes(nodeType);
+};
+var getControlBottomCSSValue = exports.getControlBottomCSSValue = function getControlBottomCSSValue(anchor, isSticky, isTopLevelNode, isLayoutColumn) {
+  return (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn || !isSticky || !isTopLevelNode ? {
+    bottom: 'unset'
+  } : {
+    bottom: "anchor(".concat(anchor, " end)")
+  };
+};
+var getControlHeightCSSValue = exports.getControlHeightCSSValue = function getControlHeightCSSValue(nodeHeight, isSticky, isTopLevelNode, fallbackPxHeight, isLayoutColumn) {
+  return (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn || !isSticky || !isTopLevelNode ? {
+    height: 'unset'
+  } : {
+    height: "".concat(nodeHeight || fallbackPxHeight, "px")
+  };
 };

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
@@ -50,6 +51,43 @@ var dragHandleColor = (0, _react2.css)({
   color: "var(--ds-icon-subtle, #626F86)"
 });
 var dragHandleButtonStyles = (0, _react2.css)({
+  display: 'flex',
+  boxSizing: 'border-box',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  height: _consts.DRAG_HANDLE_HEIGHT,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  width: _consts.DRAG_HANDLE_WIDTH,
+  border: 'none',
+  background: 'transparent',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  borderRadius: _consts.DRAG_HANDLE_BORDER_RADIUS,
+  // when platform_editor_controls is enabled, the drag handle color is overridden. Update color here when experiment is cleaned up.
+  color: "var(--ds-icon, #44546F)",
+  cursor: 'grab',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  zIndex: _consts.DRAG_HANDLE_ZINDEX,
+  outline: 'none',
+  '&:hover': {
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+  },
+  '&:active': {
+    backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+  },
+  '&:focus': {
+    outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
+  },
+  '&:disabled': {
+    color: "var(--ds-icon-disabled, #8993A4)",
+    backgroundColor: 'transparent'
+  },
+  '&:hover:disabled': {
+    backgroundColor: "var(--ds-background-disabled, transparent)"
+  }
+});
+var dragHandleButtonStylesOld = (0, _react2.css)({
   position: 'absolute',
   padding: "var(--ds-space-025, 2px)".concat(" 0"),
   boxSizing: 'border-box',
@@ -88,6 +126,17 @@ var dragHandleButtonStyles = (0, _react2.css)({
     backgroundColor: "var(--ds-background-disabled, transparent)"
   }
 });
+var dragHandleContainerStyles = (0, _primitives.xcss)({
+  position: 'absolute',
+  boxSizing: 'border-box',
+  zIndex: 'card'
+});
+var tooltipContainerStyles = (0, _primitives.xcss)({
+  top: '8px',
+  bottom: '-8px',
+  position: 'sticky',
+  zIndex: 'card'
+});
 var dragHandleMultiLineSelectionFixFirefox = (0, _react2.css)({
   '&::selection': {
     backgroundColor: 'transparent'
@@ -151,7 +200,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     nodeType = _ref.nodeType,
     handleOptions = _ref.handleOptions,
     _ref$isTopLevelNode = _ref.isTopLevelNode,
-    isTopLevelNode = _ref$isTopLevelNode === void 0 ? true : _ref$isTopLevelNode;
+    isTopLevelNode = _ref$isTopLevelNode === void 0 ? true : _ref$isTopLevelNode,
+    anchorRectCache = _ref.anchorRectCache;
   var start = getPos();
   var buttonRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(768),
@@ -470,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;
@@ -490,17 +545,20 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       }
     }
     var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
+    var isSticky = (0, _dragHandlePositions.shouldBeSticky)(nodeType);
     if (supportsAnchor) {
-      return {
-        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)")
-      };
+      var bottom = (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
+      return _objectSpread({
+        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);
     }
-    return {
+    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)
-    };
-  }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates, getPos, isLayoutColumn]);
+    }, height);
+  }, [anchorName, getPos, view, nodeType, blockCardWidth, macroInteractionUpdates, anchorRectCache, isTopLevelNode, isLayoutColumn]);
   var _useState7 = (0, _react.useState)({
       display: 'none'
     }),
@@ -637,14 +695,14 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       // eslint-disable-next-line @atlaskit/design-system/no-html-button
       (0, _react2.jsx)("button", {
         type: "button",
-        css: [dragHandleButtonStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && dragHandleColor,
+        css: [(0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? dragHandleButtonStyles : dragHandleButtonStylesOld, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && dragHandleColor,
         // ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
         // See https://product-fabric.atlassian.net/browse/ED-26266
         _browser.browser.gecko && (0, _platformFeatureFlags.fg)('platform_editor_dnd_handle_highlight_fix_firefox') && dragHandleMultiLineSelectionFixFirefox, (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
         ref: buttonRef
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
-        style: positionStyles,
+        style: !(0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') && positionStyles || {},
         onClick: handleOnClick,
         onMouseDown: handleMouseDown,
         onKeyDown: handleKeyDown
@@ -668,17 +726,60 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       })))
     );
   };
-  return !dragHandleDisabled && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873') ? (0, _react2.jsx)(_tooltip.default, {
-    content: (0, _react2.jsx)(_keymaps.TooltipContentWithMultipleShortcuts, {
-      helpDescriptors: helpDescriptors
-    }),
-    ignoreTooltipPointerEvents: true,
-    position: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? 'top' : undefined,
-    onShow: function onShow() {
-      var _api$accessibilityUti;
-      api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 || _api$accessibilityUti.actions.ariaNotify(message, {
-        priority: 'important'
-      });
-    }
-  }, renderButton()) : renderButton();
+  var stickyWithTooltip = function stickyWithTooltip() {
+    return (0, _react2.jsx)(_primitives.Box
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    , {
+      style: positionStyles,
+      xcss: [dragHandleContainerStyles],
+      as: "span",
+      testId: "block-ctrl-drag-handle-container"
+    }, (0, _react2.jsx)(_primitives.Box, {
+      xcss: [tooltipContainerStyles],
+      as: "span"
+    }, (0, _react2.jsx)(_tooltip.default, {
+      content: (0, _react2.jsx)(_keymaps.TooltipContentWithMultipleShortcuts, {
+        helpDescriptors: helpDescriptors
+      }),
+      ignoreTooltipPointerEvents: true,
+      position: 'top',
+      onShow: function onShow() {
+        var _api$accessibilityUti;
+        api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 || _api$accessibilityUti.actions.ariaNotify(message, {
+          priority: 'important'
+        });
+      }
+    }, renderButton())));
+  };
+  var stickyWithoutTooltip = function stickyWithoutTooltip() {
+    return (0, _react2.jsx)(_primitives.Box
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    , {
+      style: positionStyles,
+      xcss: [dragHandleContainerStyles],
+      as: "span",
+      testId: "block-ctrl-drag-handle-container"
+    }, (0, _react2.jsx)(_primitives.Box, {
+      xcss: [tooltipContainerStyles],
+      as: "span"
+    }, renderButton()));
+  };
+  var buttonWithTooltip = function buttonWithTooltip() {
+    return (0, _react2.jsx)(_tooltip.default, {
+      content: (0, _react2.jsx)(_keymaps.TooltipContentWithMultipleShortcuts, {
+        helpDescriptors: helpDescriptors
+      }),
+      ignoreTooltipPointerEvents: true,
+      onShow: function onShow() {
+        var _api$accessibilityUti2;
+        api === null || api === void 0 || (_api$accessibilityUti2 = api.accessibilityUtils) === null || _api$accessibilityUti2 === void 0 || _api$accessibilityUti2.actions.ariaNotify(message, {
+          priority: 'important'
+        });
+      }
+    }, renderButton());
+  };
+  var isTooltip = !dragHandleDisabled && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873');
+  var stickyRender = isTooltip ? stickyWithTooltip() : stickyWithoutTooltip();
+  var render = isTooltip ? buttonWithTooltip() : renderButton();
+  return (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? stickyRender : render;
 };

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TypeAheadControl = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
@@ -21,10 +22,13 @@ 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); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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; }
 var TEXT_PARENT_TYPES = ['paragraph', 'heading', 'blockquote', 'taskItem', 'decisionItem'];
 var buttonStyles = (0, _primitives.xcss)({
   boxSizing: 'border-box',
@@ -58,6 +62,31 @@ var disabledStyles = (0, _primitives.xcss)({
     backgroundColor: 'color.background.disabled'
   }
 });
+var stickyButtonStyles = (0, _primitives.xcss)({
+  top: '0',
+  position: 'sticky',
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: "var(--ds-space-300, 24px)",
+  width: "var(--ds-space-300, 24px)",
+  border: 'none',
+  backgroundColor: 'color.background.neutral.subtle',
+  borderRadius: '50%',
+  zIndex: 'card',
+  outline: 'none',
+  ':hover': {
+    backgroundColor: 'color.background.neutral.subtle.hovered'
+  },
+  ':active': {
+    backgroundColor: 'color.background.neutral.subtle.pressed'
+  },
+  ':focus': {
+    outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
+  }
+});
 var containerStaticStyles = (0, _primitives.xcss)({
   position: 'absolute',
   zIndex: 'card'
@@ -65,6 +94,12 @@ var containerStaticStyles = (0, _primitives.xcss)({
 var disabledContainerStyles = (0, _primitives.xcss)({
   cursor: 'not-allowed'
 });
+var tooltipContainerStyles = (0, _primitives.xcss)({
+  top: '8px',
+  bottom: '-8px',
+  position: 'sticky',
+  zIndex: 'card'
+});
 
 // TODO: ED-26959 - Share prop types between DragHandle - generic enough to create a type for block control decoration
 
@@ -73,8 +108,11 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
     api = _ref.api,
     formatMessage = _ref.formatMessage,
     getPos = _ref.getPos,
+    nodeType = _ref.nodeType,
+    anchorName = _ref.anchorName,
     rootAnchorName = _ref.rootAnchorName,
-    rootNodeType = _ref.rootNodeType;
+    rootNodeType = _ref.rootNodeType,
+    anchorRectCache = _ref.anchorRectCache;
   var macroInteractionUpdates = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'featureFlags.macroInteractionUpdates');
   var isTypeAheadOpen = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.isOpen');
   var _useState = (0, _react.useState)({
@@ -91,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';
@@ -111,17 +154,25 @@ 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)(safeAnchorName || anchorName, isSticky, true) : {};
     if (supportsAnchor) {
-      return {
-        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)")
-      };
+      return _objectSpread({
+        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);
     }
-    return {
+
+    // 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, 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)
-    };
-  }, [rootAnchorName, view.dom, rootNodeType, macroInteractionUpdates]);
+    }, height);
+  }, [rootAnchorName, getPos, view, rootNodeType, macroInteractionUpdates, anchorName, anchorRectCache]);
   (0, _react.useEffect)(function () {
     var cleanUpTransitionListener;
     if (rootNodeType === 'extension' || rootNodeType === 'embedCard') {
@@ -206,26 +257,31 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
       });
     }
   }, [api, view.state]);
+  var tooltipPressable = function tooltipPressable() {
+    return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      position: "top",
+      content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+        description: formatMessage(_messages.blockControlsMessages.insert)
+      })
+    }, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+      testId: "editor-quick-insert-button",
+      type: "button",
+      "aria-label": formatMessage(_messages.blockControlsMessages.insert),
+      xcss: [(0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? buttonStyles : stickyButtonStyles, isTypeAheadOpen && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') && disabledStyles],
+      onClick: handleQuickInsert,
+      onMouseDown: (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') ? undefined : handleMouseDown,
+      isDisabled: (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') ? isTypeAheadOpen : undefined
+    }, /*#__PURE__*/_react.default.createElement(_add.default, {
+      label: "add",
+      color: isTypeAheadOpen ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
+    })));
+  };
   return /*#__PURE__*/_react.default.createElement(_primitives.Box
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
   , {
     style: positionStyles,
     xcss: [containerStaticStyles, isTypeAheadOpen && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') && disabledContainerStyles]
-  }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-    position: "top",
-    content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
-      description: formatMessage(_messages.blockControlsMessages.insert)
-    })
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
-    testId: "editor-quick-insert-button",
-    type: "button",
-    "aria-label": formatMessage(_messages.blockControlsMessages.insert),
-    xcss: [buttonStyles, isTypeAheadOpen && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') && disabledStyles],
-    onClick: handleQuickInsert,
-    onMouseDown: (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') ? undefined : handleMouseDown,
-    isDisabled: (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') ? isTypeAheadOpen : undefined
-  }, /*#__PURE__*/_react.default.createElement(_add.default, {
-    label: "add",
-    color: isTypeAheadOpen ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
-  }))));
+  }, (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: [tooltipContainerStyles]
+  }, tooltipPressable()) : tooltipPressable());
 };

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/decorations-drag-handle.js

@@ -19,7 +19,7 @@ export const emptyParagraphNodeDecorations = () => {
 export const findHandleDec = (decorations, from, to) => {
   return decorations.find(from, to, spec => spec.type === TYPE_HANDLE_DEC);
 };
-export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions) => {
+export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions, anchorRectCache) => {
   unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
   let unbind;
   const key = uuid();
@@ -91,7 +91,8 @@ export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeTy
       anchorName,
       nodeType,
       handleOptions,
-      isTopLevelNode
+      isTopLevelNode,
+      anchorRectCache
     }), element);
     //}
     return element;

package/dist/es2019/pm-plugins/decorations-quick-insert-button.js

@@ -6,7 +6,7 @@ const TYPE_QUICK_INSERT = 'INSERT_BUTTON';
 export const findQuickInsertInsertButtonDecoration = (decorations, from, to) => {
   return decorations.find(from, to, spec => spec.type === TYPE_QUICK_INSERT);
 };
-export const quickInsertButtonDecoration = (api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType) => {
+export const quickInsertButtonDecoration = (api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType, anchorRectCache) => {
   const key = uuid();
   return Decoration.widget(rootPos, (view, getPos) => {
     const element = document.createElement('span');
@@ -21,7 +21,8 @@ export const quickInsertButtonDecoration = (api, formatMessage, rootPos, anchorN
       nodeType,
       anchorName,
       rootAnchorName,
-      rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType
+      rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
+      anchorRectCache
     }), element, key);
     return element;
   }, {