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

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

@@ -26,7 +26,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import Tooltip from '@atlaskit/tooltip';
 import { key } from '../pm-plugins/main';
 import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
-import { getLeftPosition, getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
+import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, getNodeHeight, getTopPosition, shouldBeSticky } from '../pm-plugins/utils/drag-handle-positions';
 import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
 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';
@@ -42,6 +42,43 @@ const dragHandleColor = css({
   color: "var(--ds-icon-subtle, #626F86)"
 });
 const dragHandleButtonStyles = 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: 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: 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: 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: 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 ${"var(--ds-border-focused, #388BFF)"}`
+  },
+  '&:disabled': {
+    color: "var(--ds-icon-disabled, #8993A4)",
+    backgroundColor: 'transparent'
+  },
+  '&:hover:disabled': {
+    backgroundColor: "var(--ds-background-disabled, transparent)"
+  }
+});
+const dragHandleButtonStylesOld = css({
   position: 'absolute',
   padding: `${"var(--ds-space-025, 2px)"} 0`,
   boxSizing: 'border-box',
@@ -80,6 +117,16 @@ const dragHandleButtonStyles = css({
     backgroundColor: "var(--ds-background-disabled, transparent)"
   }
 });
+const dragHandleContainerStyles = xcss({
+  position: 'absolute',
+  boxSizing: 'border-box',
+  zIndex: 'card'
+});
+const controlContainerStyles = xcss({
+  top: '0',
+  position: 'sticky',
+  zIndex: 'card'
+});
 const dragHandleMultiLineSelectionFixFirefox = css({
   '&::selection': {
     backgroundColor: 'transparent'
@@ -141,7 +188,8 @@ export const DragHandle = ({
   anchorName,
   nodeType,
   handleOptions,
-  isTopLevelNode = true
+  isTopLevelNode = true,
+  anchorRectCache
 }) => {
   var _api$core2, _api$blockControls3, _api$analytics2, _api$core4;
   const start = getPos();
@@ -479,17 +527,22 @@ 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) : {};
       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)`
+        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc(anchor(${anchorName} top) - ${DRAG_HANDLE_WIDTH}px)` : `calc(anchor(${anchorName} 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) : {};
     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)
+      top: getTopPosition(dom, nodeType),
+      ...height
     };
-  }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates, getPos, isLayoutColumn]);
+  }, [anchorName, view.dom, view.state.doc, nodeType, blockCardWidth, macroInteractionUpdates, isTopLevelNode, isLayoutColumn, getPos, anchorRectCache]);
   const [positionStyles, setPositionStyles] = useState({
     display: 'none'
   });
@@ -622,14 +675,14 @@ export const DragHandle = ({
   // eslint-disable-next-line @atlaskit/design-system/no-html-button
   jsx("button", {
     type: "button",
-    css: [dragHandleButtonStyles, editorExperiment('platform_editor_controls', 'variant1') && dragHandleColor,
+    css: [fg('platform_editor_controls_sticky_controls') ? dragHandleButtonStyles : dragHandleButtonStylesOld, 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.gecko && fg('platform_editor_dnd_handle_highlight_fix_firefox') && dragHandleMultiLineSelectionFixFirefox, 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: !fg('platform_editor_controls_sticky_controls') && positionStyles || {},
     onClick: handleOnClick,
     onMouseDown: handleMouseDown,
     onKeyDown: handleKeyDown
@@ -651,17 +704,54 @@ export const DragHandle = ({
     LEGACY_fallbackIcon: DragHandlerIcon,
     LEGACY_size: "medium"
   })));
-  return !dragHandleDisabled && fg('platform_editor_element_drag_and_drop_ed_23873') ? jsx(Tooltip, {
+  const stickyWithTooltip = () => jsx(Box
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+  , {
+    style: positionStyles,
+    xcss: [dragHandleContainerStyles],
+    as: "span",
+    testId: "block-ctrl-drag-handle-container"
+  }, jsx(Box, {
+    xcss: [controlContainerStyles],
+    as: "span"
+  }, jsx(Tooltip, {
     content: jsx(TooltipContentWithMultipleShortcuts, {
       helpDescriptors: helpDescriptors
     }),
     ignoreTooltipPointerEvents: true,
-    position: editorExperiment('platform_editor_controls', 'variant1') ? 'top' : undefined,
+    position: 'top',
     onShow: () => {
       var _api$accessibilityUti;
       api === null || api === void 0 ? void 0 : (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify(message, {
         priority: 'important'
       });
     }
-  }, renderButton()) : renderButton();
+  }, renderButton())));
+  const stickyWithoutTooltip = () => jsx(Box
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+  , {
+    style: positionStyles,
+    xcss: [dragHandleContainerStyles],
+    as: "span",
+    testId: "block-ctrl-drag-handle-container"
+  }, jsx(Box, {
+    xcss: [controlContainerStyles],
+    as: "span"
+  }, renderButton()));
+  const buttonWithTooltip = () => jsx(Tooltip, {
+    content: jsx(TooltipContentWithMultipleShortcuts, {
+      helpDescriptors: helpDescriptors
+    }),
+    ignoreTooltipPointerEvents: true,
+    onShow: () => {
+      var _api$accessibilityUti2;
+      api === null || api === void 0 ? void 0 : (_api$accessibilityUti2 = api.accessibilityUtils) === null || _api$accessibilityUti2 === void 0 ? void 0 : _api$accessibilityUti2.actions.ariaNotify(message, {
+        priority: 'important'
+      });
+    }
+  }, renderButton());
+  const isTooltip = !dragHandleDisabled && fg('platform_editor_element_drag_and_drop_ed_23873');
+  const stickyRender = isTooltip ? stickyWithTooltip() : stickyWithoutTooltip();
+  const render = isTooltip ? buttonWithTooltip() : renderButton();
+  return fg('platform_editor_controls_sticky_controls') ? stickyRender : render;
 };

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

@@ -9,7 +9,7 @@ import AddIcon from '@atlaskit/icon/utility/add';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Pressable, xcss } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
-import { getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
+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 { isInTextSelection, isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from './utils/document-checks';
@@ -38,10 +38,52 @@ const buttonStyles = xcss({
     outline: `2px solid ${"var(--ds-border-focused, #388BFF)"}`
   }
 });
+const disabledStyles = xcss({
+  pointerEvents: 'none',
+  ':hover': {
+    backgroundColor: 'color.background.disabled'
+  },
+  ':active': {
+    backgroundColor: 'color.background.disabled'
+  }
+});
+const stickyButtonStyles = 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 ${"var(--ds-border-focused, #388BFF)"}`
+  }
+});
 const containerStaticStyles = xcss({
   position: 'absolute',
   zIndex: 'card'
 });
+const disabledContainerStyles = xcss({
+  cursor: 'not-allowed'
+});
+const tooltipContainerStyles = xcss({
+  top: '0',
+  position: 'sticky',
+  zIndex: 'card'
+});
 
 // TODO: ED-26959 - Share prop types between DragHandle - generic enough to create a type for block control decoration
 
@@ -50,10 +92,14 @@ export const TypeAheadControl = ({
   api,
   formatMessage,
   getPos,
+  nodeType,
+  anchorName,
   rootAnchorName,
-  rootNodeType
+  rootNodeType,
+  anchorRectCache
 }) => {
   const macroInteractionUpdates = useSharedPluginStateSelector(api, 'featureFlags.macroInteractionUpdates');
+  const isTypeAheadOpen = useSharedPluginStateSelector(api, 'typeAhead.isOpen');
   const [positionStyles, setPositionStyles] = useState({
     display: 'none'
   });
@@ -85,17 +131,27 @@ 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) : {};
     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)`
+        top: `calc(anchor(${rootAnchorName} start) + ${topPositionAdjustment(rootNodeType)}px)`,
+        ...bottom
       };
     }
+
+    // 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;
+    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)
+      top: getTopPosition(dom, rootNodeType),
+      ...height
     };
-  }, [rootAnchorName, view.dom, rootNodeType, macroInteractionUpdates]);
+  }, [rootAnchorName, view.dom, rootNodeType, macroInteractionUpdates, anchorName, anchorRectCache]);
   useEffect(() => {
     let cleanUpTransitionListener;
     if (rootNodeType === 'extension' || rootNodeType === 'embedCard') {
@@ -180,26 +236,29 @@ export const TypeAheadControl = ({
       });
     }
   }, [api, view.state]);
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-    React.createElement(Box, {
-      style: positionStyles,
-      xcss: [containerStaticStyles]
-    }, /*#__PURE__*/React.createElement(Tooltip, {
-      position: "top",
-      content: /*#__PURE__*/React.createElement(ToolTipContent, {
-        description: formatMessage(messages.insert)
-      })
-    }, /*#__PURE__*/React.createElement(Pressable, {
-      type: "button",
-      "aria-label": formatMessage(messages.insert),
-      xcss: [buttonStyles],
-      onClick: handleQuickInsert,
-      onMouseDown: handleMouseDown
-    }, /*#__PURE__*/React.createElement(AddIcon, {
-      label: "add",
-      color: "var(--ds-icon-subtle, #626F86)"
-    }))))
-  );
+  const tooltipPressable = () => /*#__PURE__*/React.createElement(Tooltip, {
+    position: "top",
+    content: /*#__PURE__*/React.createElement(ToolTipContent, {
+      description: formatMessage(messages.insert)
+    })
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    testId: "editor-quick-insert-button",
+    type: "button",
+    "aria-label": formatMessage(messages.insert),
+    xcss: [fg('platform_editor_controls_sticky_controls') ? buttonStyles : stickyButtonStyles, isTypeAheadOpen && fg('platform_editor_controls_patch_1') && disabledStyles],
+    onClick: handleQuickInsert,
+    onMouseDown: fg('platform_editor_controls_patch_1') ? undefined : handleMouseDown,
+    isDisabled: fg('platform_editor_controls_patch_1') ? isTypeAheadOpen : undefined
+  }, /*#__PURE__*/React.createElement(AddIcon, {
+    label: "add",
+    color: isTypeAheadOpen ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
+  })));
+  return /*#__PURE__*/React.createElement(Box
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+  , {
+    style: positionStyles,
+    xcss: [containerStaticStyles, isTypeAheadOpen && fg('platform_editor_controls_patch_1') && disabledContainerStyles]
+  }, fg('platform_editor_controls_sticky_controls') ? /*#__PURE__*/React.createElement(Box, {
+    xcss: [tooltipContainerStyles]
+  }, tooltipPressable()) : tooltipPressable());
 };

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

@@ -21,7 +21,7 @@ export var findHandleDec = function findHandleDec(decorations, from, to) {
     return spec.type === TYPE_HANDLE_DEC;
   });
 };
-export var dragHandleDecoration = function dragHandleDecoration(api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions) {
+export var dragHandleDecoration = function dragHandleDecoration(api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions, anchorRectCache) {
   unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
   var unbind;
   var key = uuid();
@@ -93,7 +93,8 @@ export var dragHandleDecoration = function dragHandleDecoration(api, formatMessa
       anchorName: anchorName,
       nodeType: nodeType,
       handleOptions: handleOptions,
-      isTopLevelNode: isTopLevelNode
+      isTopLevelNode: isTopLevelNode,
+      anchorRectCache: anchorRectCache
     }), element);
     //}
     return element;

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

@@ -8,7 +8,7 @@ export var findQuickInsertInsertButtonDecoration = function findQuickInsertInser
     return spec.type === TYPE_QUICK_INSERT;
   });
 };
-export var quickInsertButtonDecoration = function quickInsertButtonDecoration(api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType) {
+export var quickInsertButtonDecoration = function quickInsertButtonDecoration(api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType, anchorRectCache) {
   var key = uuid();
   return Decoration.widget(rootPos, function (view, getPos) {
     var element = document.createElement('span');
@@ -24,7 +24,8 @@ export var quickInsertButtonDecoration = function quickInsertButtonDecoration(ap
         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/esm/pm-plugins/main.js

@@ -348,14 +348,14 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
       var _activeNode9, _activeNode10, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
       var _oldHandle = 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 = 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 = 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 && editorExperiment('platform_editor_controls', 'variant1')) {
       var _activeNode11, _activeNode12, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode10;
       var _oldQuickInsertButton = 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 = 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 = 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]);
     }
   }

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

@@ -1,4 +1,6 @@
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_H1_TOP_ADJUSTMENT, DRAG_HANDLE_H2_TOP_ADJUSTMENT, DRAG_HANDLE_H4_TOP_ADJUSTMENT, DRAG_HANDLE_H5_TOP_ADJUSTMENT, DRAG_HANDLE_H6_TOP_ADJUSTMENT, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT, DRAG_HANDLE_WIDTH, dragHandleGap } from '../../ui/consts';
+var STICKY_NODES = ['panel', 'table', 'expand', 'layoutSection', 'bodiedExtension'];
 export var getTopPosition = function getTopPosition(dom, type) {
   if (!dom) {
     return 'auto';
@@ -42,4 +44,26 @@ export var getLeftPosition = function getLeftPosition(dom, type, innerContainer,
   var relativeSpan = macroInteractionUpdates ? dom.querySelector('span.relative') : null;
   var leftAdjustment = relativeSpan ? relativeSpan.offsetLeft : 0;
   return getComputedStyle(innerContainer).transform === 'none' ? "".concat(innerContainer.offsetLeft + leftAdjustment - dragHandleGap(type, parentType) - DRAG_HANDLE_WIDTH, "px") : "".concat(innerContainer.offsetLeft + leftAdjustment - innerContainer.offsetWidth / 2 - dragHandleGap(type, parentType) - DRAG_HANDLE_WIDTH, "px");
+};
+
+// anchorRectCache seems to have a 100% cache miss rate
+export var 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);
+};
+export var shouldBeSticky = function shouldBeSticky(nodeType) {
+  return editorExperiment('platform_editor_controls', 'variant1') && STICKY_NODES.includes(nodeType);
+};
+export var getControlBottomCSSValue = function getControlBottomCSSValue(anchor, isSticky, isTopLevelNode, isLayoutColumn) {
+  return editorExperiment('advanced_layouts', true) && isLayoutColumn || !isSticky || !isTopLevelNode ? {
+    bottom: 'unset'
+  } : {
+    bottom: "anchor(".concat(anchor, " end)")
+  };
+};
+export var getControlHeightCSSValue = function getControlHeightCSSValue(nodeHeight, isSticky, isTopLevelNode, fallbackPxHeight, isLayoutColumn) {
+  return editorExperiment('advanced_layouts', true) && isLayoutColumn || !isSticky || !isTopLevelNode ? {
+    height: 'unset'
+  } : {
+    height: "".concat(nodeHeight || fallbackPxHeight, "px")
+  };
 };

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

@@ -31,7 +31,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import Tooltip from '@atlaskit/tooltip';
 import { key } from '../pm-plugins/main';
 import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
-import { getLeftPosition, getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
+import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, getNodeHeight, getTopPosition, shouldBeSticky } from '../pm-plugins/utils/drag-handle-positions';
 import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
 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';
@@ -47,6 +47,43 @@ var dragHandleColor = css({
   color: "var(--ds-icon-subtle, #626F86)"
 });
 var dragHandleButtonStyles = 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: 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: 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: 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: 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 = css({
   position: 'absolute',
   padding: "var(--ds-space-025, 2px)".concat(" 0"),
   boxSizing: 'border-box',
@@ -85,6 +122,16 @@ var dragHandleButtonStyles = css({
     backgroundColor: "var(--ds-background-disabled, transparent)"
   }
 });
+var dragHandleContainerStyles = xcss({
+  position: 'absolute',
+  boxSizing: 'border-box',
+  zIndex: 'card'
+});
+var controlContainerStyles = xcss({
+  top: '0',
+  position: 'sticky',
+  zIndex: 'card'
+});
 var dragHandleMultiLineSelectionFixFirefox = css({
   '&::selection': {
     backgroundColor: 'transparent'
@@ -148,7 +195,8 @@ export var 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 = useRef(null);
   var _useState = useState(768),
@@ -487,17 +535,20 @@ export var DragHandle = function DragHandle(_ref) {
       }
     }
     var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
+    var isSticky = shouldBeSticky(nodeType);
     if (supportsAnchor) {
-      return {
+      var bottom = fg('platform_editor_controls_sticky_controls') ? getControlBottomCSSValue(anchorName, 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)")
-      };
+      }, bottom);
     }
-    return {
+    var height = fg('platform_editor_controls_sticky_controls') ? getControlHeightCSSValue(getNodeHeight(dom, anchorName, 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)
-    };
-  }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates, getPos, isLayoutColumn]);
+    }, height);
+  }, [anchorName, view.dom, view.state.doc, nodeType, blockCardWidth, macroInteractionUpdates, isTopLevelNode, isLayoutColumn, getPos, anchorRectCache]);
   var _useState7 = useState({
       display: 'none'
     }),
@@ -634,14 +685,14 @@ export var DragHandle = function DragHandle(_ref) {
       // eslint-disable-next-line @atlaskit/design-system/no-html-button
       jsx("button", {
         type: "button",
-        css: [dragHandleButtonStyles, editorExperiment('platform_editor_controls', 'variant1') && dragHandleColor,
+        css: [fg('platform_editor_controls_sticky_controls') ? dragHandleButtonStyles : dragHandleButtonStylesOld, 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.gecko && fg('platform_editor_dnd_handle_highlight_fix_firefox') && dragHandleMultiLineSelectionFixFirefox, 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: !fg('platform_editor_controls_sticky_controls') && positionStyles || {},
         onClick: handleOnClick,
         onMouseDown: handleMouseDown,
         onKeyDown: handleKeyDown
@@ -665,17 +716,60 @@ export var DragHandle = function DragHandle(_ref) {
       })))
     );
   };
-  return !dragHandleDisabled && fg('platform_editor_element_drag_and_drop_ed_23873') ? jsx(Tooltip, {
-    content: jsx(TooltipContentWithMultipleShortcuts, {
-      helpDescriptors: helpDescriptors
-    }),
-    ignoreTooltipPointerEvents: true,
-    position: 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 jsx(Box
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    , {
+      style: positionStyles,
+      xcss: [dragHandleContainerStyles],
+      as: "span",
+      testId: "block-ctrl-drag-handle-container"
+    }, jsx(Box, {
+      xcss: [controlContainerStyles],
+      as: "span"
+    }, jsx(Tooltip, {
+      content: jsx(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 jsx(Box
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    , {
+      style: positionStyles,
+      xcss: [dragHandleContainerStyles],
+      as: "span",
+      testId: "block-ctrl-drag-handle-container"
+    }, jsx(Box, {
+      xcss: [controlContainerStyles],
+      as: "span"
+    }, renderButton()));
+  };
+  var buttonWithTooltip = function buttonWithTooltip() {
+    return jsx(Tooltip, {
+      content: jsx(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 && fg('platform_editor_element_drag_and_drop_ed_23873');
+  var stickyRender = isTooltip ? stickyWithTooltip() : stickyWithoutTooltip();
+  var render = isTooltip ? buttonWithTooltip() : renderButton();
+  return fg('platform_editor_controls_sticky_controls') ? stickyRender : render;
 };