@atlaskit/editor-plugin-block-controls 17.3.8 → 17.3.10

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 17.3.10
+
+### Patch Changes
+
+- [`42ff8dffbdf01`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/42ff8dffbdf01) -
+  EDITOR-8771: Buttons registered on the same surface position now stay visible independently of
+  eachother: a button that renders without hover (e.g. an AI suggestions icon) no longer
+  hides/showstogether with a hover-only button (e.g. Remix) that shares its position.Increase the
+  default drag-handle/surface gap for non-resizable, default-sized nodes from 8px to12px, matching
+  the gap already used for resizable/breakout nodes, so spacing is consistent acrossnode
+  types.Simplify `surfaceNodePositionsEnabled` (which controls whether the "stored" whole-doc
+  surface scanruns) to depend only on `platform_editor_block_control_migration`, dropping the
+  extra`platform_editor_collapsible_headings` OR-condition now
+  that`platform_editor_block_control_right_surface` consumers need the same behavior.
+- Updated dependencies
+
+## 17.3.9
+
+### Patch Changes
+
+- [`09b54fe3854bd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/09b54fe3854bd) -
+  Keep Quick Insert stationary when the drag handle moves to a nested block under
+  `platform_editor_block_control_migration`, and keep layout-column drag handles visible across the
+  full editor width.
+- Updated dependencies
+
 ## 17.3.8
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -46,7 +46,6 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
   var rightSideControlsEnabled = (_config$rightSideCont = config === null || config === void 0 ? void 0 : config.rightSideControlsEnabled) !== null && _config$rightSideCont !== void 0 ? _config$rightSideCont : false;
   var quickInsertButtonEnabled = (_config$quickInsertBu = config === null || config === void 0 ? void 0 : config.quickInsertButtonEnabled) !== null && _config$quickInsertBu !== void 0 ? _config$quickInsertBu : true;
   var registryBlockControlsEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration');
-  var surfaceNodePositionsEnabled = registryBlockControlsEnabled && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_collapsible_headings');
   var legacyBlockControlsEnabled = !registryBlockControlsEnabled;
   var rightSurfaceEnabled = registryBlockControlsEnabled && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_right_surface');
   if (registryBlockControlsEnabled) {
@@ -146,7 +145,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         plugin: function plugin(_ref2) {
           var getIntl = _ref2.getIntl,
             nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
-          return (0, _main.createPlugin)(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled, surfaceNodePositionsEnabled, rightSurfaceEnabled);
+          return (0, _main.createPlugin)(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled, rightSurfaceEnabled);
         }
       }];
       if ((0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1')) {
@@ -448,7 +447,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         isEditing: (_interactionTrackingP = _pmPlugin.interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
         isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState10 = _main.key.getState(editorState)) === null || _key$getState10 === void 0 ? void 0 : _key$getState10.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
       };
-      if (surfaceNodePositionsEnabled) {
+      if (registryBlockControlsEnabled) {
         var _key$getState$surface, _key$getState11;
         sharedState.surfaceNodePositions = (_key$getState$surface = (_key$getState11 = _main.key.getState(editorState)) === null || _key$getState11 === void 0 ? void 0 : _key$getState11.surfaceNodePositions) !== null && _key$getState$surface !== void 0 ? _key$getState$surface : [];
       }

package/dist/cjs/pm-plugins/interaction-tracking/handle-mouse-move.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.handleMouseMove = exports.handleMouseLeave = exports.handleMouseEnter = void 0;
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _handleMouseOver = require("../handle-mouse-over");
 var _commands = require("./commands");
@@ -30,6 +31,10 @@ var clearPendingHoverSide = function clearPendingHoverSide(view) {
 };
 var BLOCK_SELECTORS = '[data-node-anchor], [data-drag-handler-anchor-name]';
 var RIGHT_EDGE_SELECTOR = '[data-blocks-right-edge-button-container]';
+var LEGACY_LEFT_CONTROL_SELECTOR = '[data-blocks-drag-handle-container], [data-testid="block-ctrl-drag-handle"], [data-testid="block-ctrl-drag-handle-container"], [data-testid="block-ctrl-decorator-widget"], [data-testid="block-ctrl-quick-insert-button"]';
+var getLeftControlSelector = function getLeftControlSelector() {
+  return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') ? "[data-editor-block-ctrl-drag-handle], ".concat(LEGACY_LEFT_CONTROL_SELECTOR) : LEGACY_LEFT_CONTROL_SELECTOR;
+};
 
 // Top-level blocks (no block ancestor), matched by anchor attribute so it works under both the
 // legacy and native-anchor schemes.
@@ -128,7 +133,7 @@ var processHoverSide = function processHoverSide(view, api) {
     }
     return;
   }
-  var leftControlElement = target === null || target === void 0 ? void 0 : target.closest('[data-blocks-drag-handle-container], [data-testid="block-ctrl-drag-handle"], [data-testid="block-ctrl-drag-handle-container"], [data-testid="block-ctrl-decorator-widget"], [data-testid="block-ctrl-quick-insert-button"]');
+  var leftControlElement = target === null || target === void 0 ? void 0 : target.closest(getLeftControlSelector());
   if (leftControlElement) {
     if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== 'left') {
       (0, _commands.setHoverSide)(view, 'left');
@@ -186,9 +191,7 @@ var processHoverSide = function processHoverSide(view, api) {
     (0, _commands.setHoverSide)(view, nextHoverSide);
   }
 };
-var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, event) {
-  var rightSideControlsEnabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  var api = arguments.length > 3 ? arguments[3] : undefined;
+var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, event, rightSideControlsEnabled, api) {
   var state = (0, _pmPlugin.getInteractionTrackingState)(view.state);
   // if user has stopped editing and moved their mouse, show block controls again
   if (state !== null && state !== void 0 && state.isEditing) {
@@ -210,8 +213,7 @@ var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, e
   rafIdByView.set(view, id);
   return false;
 };
-var handleMouseLeave = exports.handleMouseLeave = function handleMouseLeave(view) {
-  var rightSideControlsEnabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+var handleMouseLeave = exports.handleMouseLeave = function handleMouseLeave(view, rightSideControlsEnabled) {
   if (rightSideControlsEnabled) {
     clearPendingHoverSide(view);
   }

package/dist/cjs/pm-plugins/interaction-tracking/pm-plugin.js

@@ -19,13 +19,16 @@ var _handleMouseMove = require("./handle-mouse-move");
 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; }
 /** Elements that extend the editor hover area (block controls, right-edge button, etc.) */
-var BLOCK_CONTROLS_HOVER_AREA_SELECTOR = '[data-blocks-right-edge-button-container], [data-blocks-drag-handle-container], [data-testid="block-ctrl-drag-handle"], [data-testid="block-ctrl-drag-handle-container"], [data-testid="block-ctrl-decorator-widget"], [data-testid="block-ctrl-quick-insert-button"]';
+var LEGACY_BLOCK_CONTROLS_HOVER_AREA_SELECTOR = '[data-blocks-right-edge-button-container], [data-blocks-drag-handle-container], [data-testid="block-ctrl-drag-handle"], [data-testid="block-ctrl-drag-handle-container"], [data-testid="block-ctrl-decorator-widget"], [data-testid="block-ctrl-quick-insert-button"]';
+var getBlockControlsHoverAreaSelector = function getBlockControlsHoverAreaSelector() {
+  return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') ? "[data-editor-block-ctrl-drag-handle], ".concat(LEGACY_BLOCK_CONTROLS_HOVER_AREA_SELECTOR) : LEGACY_BLOCK_CONTROLS_HOVER_AREA_SELECTOR;
+};
 var MOUSE_LEAVE_DEBOUNCE_MS = 200;
 
 /** ClickAreaBlock overlay that wraps the editor content and covers the right margin. */
 var CLICK_AREA_SELECTOR = '[data-editor-click-wrapper]';
 var isMovingToBlockControlsArea = function isMovingToBlockControlsArea(target) {
-  return target instanceof Element && !!target.closest(BLOCK_CONTROLS_HOVER_AREA_SELECTOR);
+  return target instanceof Element && !!target.closest(getBlockControlsHoverAreaSelector());
 };
 
 /**

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

@@ -890,14 +890,16 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
   var rightSideControlsEnabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   var quickInsertButtonEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;
   var legacyDragHandleEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : true;
-  var surfaceNodePositionsEnabled = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
-  var rightSurfaceEnabled = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
+  var rightSurfaceEnabled = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
   var _getIntl = getIntl(),
     formatMessage = _getIntl.formatMessage;
   var isAdvancedLayoutEnabled = (0, _editorExperiment.editorExperiment)('advanced_layouts', true, {
     exposure: true
   });
   var toolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
+  // Mirrors `registryBlockControlsEnabled` in blockControlsPlugin.tsx: `legacyDragHandleEnabled` is
+  // only false once that gate is on.
+  var surfaceNodePositionsEnabled = !legacyDragHandleEnabled;
   var flags = {
     legacyDragHandleEnabled: legacyDragHandleEnabled,
     surfaceNodePositionsEnabled: surfaceNodePositionsEnabled,

package/dist/cjs/ui/block-controls-left-surface.js

@@ -9,8 +9,12 @@ exports.BlockControlsLeftSurface = void 0;
 require("./block-controls-left-surface.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
+var _blockControlUiContext = require("@atlaskit/editor-common/block-controls/block-control-ui-context");
 var _surfaceKeys = require("@atlaskit/editor-common/block-controls/surface-keys");
 var _surfaceRenderer = require("@atlaskit/editor-ui-control-model/surface-renderer");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
+var _blockControlsSurfaceContext = require("./block-controls-surface-context");
+var _partitionComponentsByPersistence = require("./utils/partition-components-by-persistence");
 var _visibilityContainer = require("./visibility-container");
 var leftSurfaceOuterStyles = null;
 var leftSurfaceRowStyles = null;
@@ -31,11 +35,11 @@ var BlockControlsLeftSurface = exports.BlockControlsLeftSurface = function Block
   if (!placement || !(0, _surfaceRenderer.willSurfaceRender)(components, _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext)) {
     return null;
   }
-  var surface = /*#__PURE__*/_react.default.createElement(_surfaceRenderer.SurfaceRenderer, {
-    components: components,
-    surface: _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE,
-    surfaceContext: surfaceContext
-  });
+  var _partitionComponentsB = (0, _partitionComponentsByPersistence.partitionComponentsByPersistence)(components, _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext),
+    hoverOnlyComponents = _partitionComponentsB.hoverOnlyComponents,
+    persistentComponents = _partitionComponentsB.persistentComponents;
+  var willRenderPersistent = (0, _surfaceRenderer.willSurfaceRender)(persistentComponents, _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext);
+  var willRenderHoverOnly = (0, _surfaceRenderer.willSurfaceRender)(hoverOnlyComponents, _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext);
   var isSticky = placement.height !== undefined;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-editor-block-controls-surface": true,
@@ -46,10 +50,23 @@ var BlockControlsLeftSurface = exports.BlockControlsLeftSurface = function Block
     className: (0, _runtime.ax)(["_kqswstnw _1pbyb4wl"])
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)(["_zulpv77o _4cvr1h6o _1e0c1txw", isSticky && "_kqsw1if8 _154iu2gc"])
-  }, /*#__PURE__*/_react.default.createElement(_visibilityContainer.VisibilityContainer, {
+  }, willRenderPersistent && /*#__PURE__*/_react.default.createElement(_visibilityContainer.VisibilityContainer, {
     api: api,
-    controlSide: "left",
+    controlSide: (0, _blockControlsSurfaceContext.getBlockControlsSurfaceControlSide)(surfaceContext.get(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT), (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_controls_reliable_anchor')),
     forceVisibleOnMouseOut: forceVisibleOnMouseOut,
     shouldUseDisplayContents: true
-  }, surface)));
+  }, /*#__PURE__*/_react.default.createElement(_surfaceRenderer.SurfaceRenderer, {
+    components: persistentComponents,
+    surface: _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE,
+    surfaceContext: surfaceContext
+  })), willRenderHoverOnly && /*#__PURE__*/_react.default.createElement(_visibilityContainer.VisibilityContainer, {
+    api: api,
+    controlSide: (0, _blockControlsSurfaceContext.getBlockControlsSurfaceControlSide)(surfaceContext.get(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT), (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_controls_reliable_anchor')),
+    forceVisibleOnMouseOut: forceVisibleOnMouseOut,
+    shouldUseDisplayContents: true
+  }, /*#__PURE__*/_react.default.createElement(_surfaceRenderer.SurfaceRenderer, {
+    components: hoverOnlyComponents,
+    surface: _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE,
+    surfaceContext: surfaceContext
+  }))));
 };

package/dist/cjs/ui/block-controls-right-surface.js

@@ -11,6 +11,7 @@ var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _surfaceKeys = require("@atlaskit/editor-common/block-controls/surface-keys");
 var _surfaceRenderer = require("@atlaskit/editor-ui-control-model/surface-renderer");
+var _partitionComponentsByPersistence = require("./utils/partition-components-by-persistence");
 var _visibilityContainer = require("./visibility-container");
 var rightSurfaceOuterStyles = null;
 var rightSurfaceRowStyles = null;
@@ -31,11 +32,11 @@ var BlockControlsRightSurface = exports.BlockControlsRightSurface = function Blo
   if (!placement || !(0, _surfaceRenderer.willSurfaceRender)(components, _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext)) {
     return null;
   }
-  var surface = /*#__PURE__*/_react.default.createElement(_surfaceRenderer.SurfaceRenderer, {
-    components: components,
-    surface: _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE,
-    surfaceContext: surfaceContext
-  });
+  var _partitionComponentsB = (0, _partitionComponentsByPersistence.partitionComponentsByPersistence)(components, _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext),
+    hoverOnlyComponents = _partitionComponentsB.hoverOnlyComponents,
+    persistentComponents = _partitionComponentsB.persistentComponents;
+  var willRenderPersistent = (0, _surfaceRenderer.willSurfaceRender)(persistentComponents, _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext);
+  var willRenderHoverOnly = (0, _surfaceRenderer.willSurfaceRender)(hoverOnlyComponents, _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext);
   var isSticky = placement.height !== undefined;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-editor-block-controls-surface": true,
@@ -46,10 +47,23 @@ var BlockControlsRightSurface = exports.BlockControlsRightSurface = function Blo
     className: (0, _runtime.ax)(["_kqswstnw _1pbyb4wl"])
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)(["_zulpv77o _4cvr1h6o _1e0c1txw", isSticky && "_kqsw1if8 _154iu2gc"])
-  }, /*#__PURE__*/_react.default.createElement(_visibilityContainer.VisibilityContainer, {
+  }, willRenderPersistent && /*#__PURE__*/_react.default.createElement(_visibilityContainer.VisibilityContainer, {
+    api: api,
+    controlSide: "right",
+    isPersistent: true,
+    shouldUseDisplayContents: true
+  }, /*#__PURE__*/_react.default.createElement(_surfaceRenderer.SurfaceRenderer, {
+    components: persistentComponents,
+    surface: _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE,
+    surfaceContext: surfaceContext
+  })), willRenderHoverOnly && /*#__PURE__*/_react.default.createElement(_visibilityContainer.VisibilityContainer, {
     api: api,
     controlSide: "right",
     forceVisibleOnMouseOut: forceVisibleOnMouseOut,
     shouldUseDisplayContents: true
-  }, surface)));
+  }, /*#__PURE__*/_react.default.createElement(_surfaceRenderer.SurfaceRenderer, {
+    components: hoverOnlyComponents,
+    surface: _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE,
+    surfaceContext: surfaceContext
+  }))));
 };

package/dist/cjs/ui/block-controls-surface-context.js

@@ -4,10 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createBlockControlsSurfaceContextForPosition = exports.createBlockControlsSurfaceContext = void 0;
+exports.getBlockControlsSurfaceControlSide = exports.createBlockControlsSurfaceContextForPosition = exports.createBlockControlsSurfaceContext = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 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 getBlockControlsSurfaceControlSide = exports.getBlockControlsSurfaceControlSide = function getBlockControlsSurfaceControlSide(context, reliableAnchorEnabled) {
+  return (context === null || context === void 0 ? void 0 : context.targetNode.type.name) === 'layoutColumn' || Boolean(context) && reliableAnchorEnabled && (context === null || context === void 0 ? void 0 : context.targetNode.parentType) !== 'doc' ? undefined : 'left';
+};
 var getNodeContext = function getNodeContext(state, pos) {
   var node = state.doc.nodeAt(pos);
   if (!node) {

package/dist/cjs/ui/consts.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = exports.STICKY_CONTROLS_TOP_MARGIN = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT = exports.DRAG_HANDLE_SYNCED_BLOCK_GAP = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = exports.BLOCK_CONTROLS_SURFACE_SELECTOR = exports.ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME = exports.ACTIVE_QUICK_INSERT_ATTR = exports.ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME = exports.ACTIVE_DRAG_HANDLE_ATTR = void 0;
+exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = exports.STICKY_CONTROLS_TOP_MARGIN = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT = exports.DRAG_HANDLE_SYNCED_BLOCK_GAP = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = exports.BLOCK_CONTROLS_SURFACE_SELECTOR = exports.ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME = exports.ACTIVE_QUICK_INSERT_ATTR = exports.ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME = exports.ACTIVE_DRAG_HANDLE_ATTR = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _styles = require("@atlaskit/editor-common/styles");
@@ -23,11 +23,19 @@ var ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME = exports.ACTIVE_QUICK_INSERT_FALLB
 var DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_HEIGHT = 24;
 var DRAG_HANDLE_BORDER_RADIUS = exports.DRAG_HANDLE_BORDER_RADIUS = 4;
 var DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_ZINDEX = _editorSharedStyles.akRichMediaResizeZIndex + _editorSharedStyles.akEditorUnitZIndex; //place above legacy resizer
-var DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_DEFAULT_GAP = 8;
+var LEGACY_DRAG_HANDLE_DEFAULT_GAP = 8;
+var MIGRATED_DRAG_HANDLE_DEFAULT_GAP = 12;
 var DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_NARROW_GAP = 4;
 var DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_MAX_GAP = 12;
 var DRAG_HANDLE_SYNCED_BLOCK_GAP = exports.DRAG_HANDLE_SYNCED_BLOCK_GAP = 2.5;
 var DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = _styles.DRAG_HANDLE_WIDTH + DRAG_HANDLE_MAX_GAP;
+
+// Non-resizable/default-sized nodes get the same gap as resizable/breakout nodes
+// (DRAG_HANDLE_MAX_GAP) once the registry-backed surfaces are on; kept at the legacy value
+// otherwise to avoid an unrelated visual change for consumers still on the old decoration path.
+var getDragHandleDefaultGap = function getDragHandleDefaultGap() {
+  return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') ? MIGRATED_DRAG_HANDLE_DEFAULT_GAP : LEGACY_DRAG_HANDLE_DEFAULT_GAP;
+};
 var DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = 4 + 2; // 4px for the divider vertical padding and 2px for the divider height
 var DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = 5;
 var DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = 2;
@@ -78,12 +86,12 @@ var dragHandleGap = exports.dragHandleGap = function dragHandleGap(nodeType, par
     }
   }
   if (nodeType === 'layoutSection') {
-    return DRAG_HANDLE_DEFAULT_GAP + 20;
+    return getDragHandleDefaultGap() + 20;
   }
   if (nodeTypeExcludeList.includes(nodeType)) {
     return DRAG_HANDLE_MAX_GAP;
   }
-  return DRAG_HANDLE_DEFAULT_GAP;
+  return getDragHandleDefaultGap();
 };
 
 // use for returning gap only for root level elements
@@ -104,7 +112,7 @@ var rootElementGap = exports.rootElementGap = function rootElementGap(nodeType)
   if (nodeType === 'layoutSection') {
     return DRAG_HANDLE_MAX_GAP + 12;
   }
-  return DRAG_HANDLE_DEFAULT_GAP;
+  return getDragHandleDefaultGap();
 };
 var getNestedNodeLeftPaddingMargin = exports.getNestedNodeLeftPaddingMargin = function getNestedNodeLeftPaddingMargin(nodeType) {
   switch (nodeType) {

package/dist/cjs/ui/utils/partition-components-by-persistence.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.partitionComponentsByPersistence = void 0;
+var _blockControlUiContext = require("@atlaskit/editor-common/block-controls/block-control-ui-context");
+var _surfaceRenderer = require("@atlaskit/editor-ui-control-model/surface-renderer");
+var _createSurfaceContext = require("@atlaskit/editor-ui-control-model/create-surface-context");
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/**
+ * Split registered components into two groups:
+ * those that should be rendered persistently and those that should only be rendered on hover.
+ */
+var partitionComponentsByPersistence = exports.partitionComponentsByPersistence = function partitionComponentsByPersistence(components, surface, surfaceContext) {
+  var _resolveSurface = (0, _surfaceRenderer.resolveSurface)(components, surface),
+    childrenMap = _resolveSurface.childrenMap,
+    root = _resolveSurface.root,
+    topLevelChildren = _resolveSurface.topLevelChildren;
+  if (!root || !topLevelChildren || topLevelChildren.length === 0) {
+    return {
+      hoverOnlyComponents: [],
+      persistentComponents: components
+    };
+  }
+  var context = surfaceContext === null || surfaceContext === void 0 ? void 0 : surfaceContext.get(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT);
+  var storedSurfaceContext = context ? (0, _createSurfaceContext.createSurfaceContext)(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT, {
+    activeNode: undefined,
+    rootNode: context.targetNode,
+    targetNode: context.targetNode
+  }) : undefined;
+  var isLeaf = function isLeaf(component) {
+    var children = childrenMap.get((0, _surfaceRenderer.getComponentIdentity)(component));
+    return !children || children.length === 0;
+  };
+  var persistentComponents = [];
+  var hoverOnlyComponents = [];
+  var _iterator = _createForOfIteratorHelper(components),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var component = _step.value;
+      if (!isLeaf(component)) {
+        persistentComponents.push(component);
+        hoverOnlyComponents.push(component);
+        continue;
+      }
+      if ((0, _surfaceRenderer.willComponentRender)(component, childrenMap, storedSurfaceContext)) {
+        persistentComponents.push(component);
+      } else {
+        hoverOnlyComponents.push(component);
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return {
+    hoverOnlyComponents: hoverOnlyComponents,
+    persistentComponents: persistentComponents
+  };
+};

package/dist/cjs/ui/visibility-container.js

@@ -62,6 +62,7 @@ var VisibilityContainer = exports.VisibilityContainer = function VisibilityConta
     children = _ref.children,
     controlSide = _ref.controlSide,
     forceVisibleOnMouseOut = _ref.forceVisibleOnMouseOut,
+    isPersistent = _ref.isPersistent,
     shouldUseDisplayContents = _ref.shouldUseDisplayContents;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['typeAhead', 'blockControls', 'editorViewMode', 'userIntent', 'showDiff'], function (states) {
       var _states$typeAheadStat, _states$blockControls, _states$blockControls2, _states$blockControls3, _states$editorViewMod, _states$userIntentSta, _states$showDiffState, _states$blockControls4;
@@ -99,9 +100,12 @@ var VisibilityContainer = exports.VisibilityContainer = function VisibilityConta
   // When forceVisibleOnMouseOut is true (e.g. drag handle focused via keyboard Shift+Ctrl+H),
   // override the mouse-out condition so the control stays visible regardless of mouse position.
   var shouldHideWhenMouseOut = forceVisibleOnMouseOut ? false : hideOnMouseOut;
-  var shouldHideImmediate = isTypeAheadOpen || isEditing || shouldHideWhenMouseOut || userIntent === 'aiStreaming' ||
+  // Persistent controls (e.g. an AI suggestion icon on every qualifying node) aren't hover-driven,
+  // so none of the hover/typing/mouse-out/diff-review reasons below apply to them — they're never
+  // hidden by this container.
+  var shouldHideImmediate = !isPersistent && (isTypeAheadOpen || isEditing || shouldHideWhenMouseOut || userIntent === 'aiStreaming' ||
   // EDITOR-7926: hide the drag handle while a diff is on screen or a suggestion card is open.
-  (isDisplayingDiff || userIntent === 'reviewing') && (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) || sideHidden;
+  (isDisplayingDiff || userIntent === 'reviewing') && (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) || sideHidden);
 
   // Delay hiding the right control in view mode to reduce flickering when moving from block
   // toward the right-edge button (avoids rapid show/hide as mouse crosses boundaries).

package/dist/es2019/blockControlsPlugin.js

@@ -36,7 +36,6 @@ export const blockControlsPlugin = ({
   const rightSideControlsEnabled = (_config$rightSideCont = config === null || config === void 0 ? void 0 : config.rightSideControlsEnabled) !== null && _config$rightSideCont !== void 0 ? _config$rightSideCont : false;
   const quickInsertButtonEnabled = (_config$quickInsertBu = config === null || config === void 0 ? void 0 : config.quickInsertButtonEnabled) !== null && _config$quickInsertBu !== void 0 ? _config$quickInsertBu : true;
   const registryBlockControlsEnabled = isExperimentEnabled('platform_editor_block_control_migration');
-  const surfaceNodePositionsEnabled = registryBlockControlsEnabled && isExperimentEnabled('platform_editor_collapsible_headings');
   const legacyBlockControlsEnabled = !registryBlockControlsEnabled;
   const rightSurfaceEnabled = registryBlockControlsEnabled && isExperimentEnabled('platform_editor_block_control_right_surface');
   if (registryBlockControlsEnabled) {
@@ -144,7 +143,7 @@ export const blockControlsPlugin = ({
         plugin: ({
           getIntl,
           nodeViewPortalProviderAPI
-        }) => createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled, surfaceNodePositionsEnabled, rightSurfaceEnabled)
+        }) => createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled, rightSurfaceEnabled)
       }];
       if (editorExperiment('platform_editor_controls', 'variant1')) {
         pmPlugins.push({
@@ -440,7 +439,7 @@ export const blockControlsPlugin = ({
         isEditing: (_interactionTrackingP = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
         isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState10 = key.getState(editorState)) === null || _key$getState10 === void 0 ? void 0 : _key$getState10.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
       };
-      if (surfaceNodePositionsEnabled) {
+      if (registryBlockControlsEnabled) {
         var _key$getState$surface, _key$getState11;
         sharedState.surfaceNodePositions = (_key$getState$surface = (_key$getState11 = key.getState(editorState)) === null || _key$getState11 === void 0 ? void 0 : _key$getState11.surfaceNodePositions) !== null && _key$getState$surface !== void 0 ? _key$getState$surface : [];
       }

package/dist/es2019/pm-plugins/interaction-tracking/handle-mouse-move.js

@@ -1,3 +1,4 @@
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { handleMouseOver } from '../handle-mouse-over';
 import { clearHoverSide, mouseEnter, mouseLeave, setHoverSide, stopEditing } from './commands';
@@ -22,6 +23,8 @@ const clearPendingHoverSide = view => {
 };
 const BLOCK_SELECTORS = '[data-node-anchor], [data-drag-handler-anchor-name]';
 const RIGHT_EDGE_SELECTOR = '[data-blocks-right-edge-button-container]';
+const LEGACY_LEFT_CONTROL_SELECTOR = '[data-blocks-drag-handle-container], [data-testid="block-ctrl-drag-handle"], [data-testid="block-ctrl-drag-handle-container"], [data-testid="block-ctrl-decorator-widget"], [data-testid="block-ctrl-quick-insert-button"]';
+const getLeftControlSelector = () => isExperimentEnabled('platform_editor_block_control_migration') ? `[data-editor-block-ctrl-drag-handle], ${LEGACY_LEFT_CONTROL_SELECTOR}` : LEGACY_LEFT_CONTROL_SELECTOR;
 
 // Top-level blocks (no block ancestor), matched by anchor attribute so it works under both the
 // legacy and native-anchor schemes.
@@ -109,7 +112,7 @@ const processHoverSide = (view, api) => {
     }
     return;
   }
-  const leftControlElement = target === null || target === void 0 ? void 0 : target.closest('[data-blocks-drag-handle-container], [data-testid="block-ctrl-drag-handle"], [data-testid="block-ctrl-drag-handle-container"], [data-testid="block-ctrl-decorator-widget"], [data-testid="block-ctrl-quick-insert-button"]');
+  const leftControlElement = target === null || target === void 0 ? void 0 : target.closest(getLeftControlSelector());
   if (leftControlElement) {
     if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== 'left') {
       setHoverSide(view, 'left');
@@ -168,7 +171,7 @@ const processHoverSide = (view, api) => {
     setHoverSide(view, nextHoverSide);
   }
 };
-export const handleMouseMove = (view, event, rightSideControlsEnabled = false, api) => {
+export const handleMouseMove = (view, event, rightSideControlsEnabled, api) => {
   const state = getInteractionTrackingState(view.state);
   // if user has stopped editing and moved their mouse, show block controls again
   if (state !== null && state !== void 0 && state.isEditing) {
@@ -190,7 +193,7 @@ export const handleMouseMove = (view, event, rightSideControlsEnabled = false, a
   rafIdByView.set(view, id);
   return false;
 };
-export const handleMouseLeave = (view, rightSideControlsEnabled = false) => {
+export const handleMouseLeave = (view, rightSideControlsEnabled) => {
   if (rightSideControlsEnabled) {
     clearPendingHoverSide(view);
   }

package/dist/es2019/pm-plugins/interaction-tracking/pm-plugin.js

@@ -10,12 +10,13 @@ import { handleKeyDown } from './handle-key-down';
 import { handleMouseEnter, handleMouseLeave, handleMouseMove } from './handle-mouse-move';
 
 /** Elements that extend the editor hover area (block controls, right-edge button, etc.) */
-const BLOCK_CONTROLS_HOVER_AREA_SELECTOR = '[data-blocks-right-edge-button-container], [data-blocks-drag-handle-container], [data-testid="block-ctrl-drag-handle"], [data-testid="block-ctrl-drag-handle-container"], [data-testid="block-ctrl-decorator-widget"], [data-testid="block-ctrl-quick-insert-button"]';
+const LEGACY_BLOCK_CONTROLS_HOVER_AREA_SELECTOR = '[data-blocks-right-edge-button-container], [data-blocks-drag-handle-container], [data-testid="block-ctrl-drag-handle"], [data-testid="block-ctrl-drag-handle-container"], [data-testid="block-ctrl-decorator-widget"], [data-testid="block-ctrl-quick-insert-button"]';
+const getBlockControlsHoverAreaSelector = () => isExperimentEnabled('platform_editor_block_control_migration') ? `[data-editor-block-ctrl-drag-handle], ${LEGACY_BLOCK_CONTROLS_HOVER_AREA_SELECTOR}` : LEGACY_BLOCK_CONTROLS_HOVER_AREA_SELECTOR;
 const MOUSE_LEAVE_DEBOUNCE_MS = 200;
 
 /** ClickAreaBlock overlay that wraps the editor content and covers the right margin. */
 const CLICK_AREA_SELECTOR = '[data-editor-click-wrapper]';
-const isMovingToBlockControlsArea = target => target instanceof Element && !!target.closest(BLOCK_CONTROLS_HOVER_AREA_SELECTOR);
+const isMovingToBlockControlsArea = target => target instanceof Element && !!target.closest(getBlockControlsHoverAreaSelector());
 
 /**
  * The right margin is covered by the ClickAreaBlock overlay, which sits outside .ak-editor-content-area.

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

@@ -784,7 +784,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     isSelectedViaDragHandle: isSelectedViaDragHandleNew
   };
 };
-export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled = false, quickInsertButtonEnabled = true, legacyDragHandleEnabled = true, surfaceNodePositionsEnabled = false, rightSurfaceEnabled = false) => {
+export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled = false, quickInsertButtonEnabled = true, legacyDragHandleEnabled = true, rightSurfaceEnabled = false) => {
   var _api$uiControlRegistr, _api$uiControlRegistr2, _api$uiControlRegistr3, _api$uiControlRegistr4;
   const {
     formatMessage
@@ -793,6 +793,9 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
     exposure: true
   });
   const toolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
+  // Mirrors `registryBlockControlsEnabled` in blockControlsPlugin.tsx: `legacyDragHandleEnabled` is
+  // only false once that gate is on.
+  const surfaceNodePositionsEnabled = !legacyDragHandleEnabled;
   const flags = {
     legacyDragHandleEnabled,
     surfaceNodePositionsEnabled,

package/dist/es2019/ui/block-controls-left-surface.js

@@ -2,8 +2,12 @@
 import "./block-controls-left-surface.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls/block-control-ui-context';
 import { BLOCK_CONTROLS_LEFT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
 import { SurfaceRenderer, willSurfaceRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { getBlockControlsSurfaceControlSide } from './block-controls-surface-context';
+import { partitionComponentsByPersistence } from './utils/partition-components-by-persistence';
 import { VisibilityContainer } from './visibility-container';
 const leftSurfaceOuterStyles = null;
 const leftSurfaceRowStyles = null;
@@ -25,11 +29,12 @@ export const BlockControlsLeftSurface = ({
   if (!placement || !willSurfaceRender(components, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext)) {
     return null;
   }
-  const surface = /*#__PURE__*/React.createElement(SurfaceRenderer, {
-    components: components,
-    surface: BLOCK_CONTROLS_LEFT_SURFACE,
-    surfaceContext: surfaceContext
-  });
+  const {
+    hoverOnlyComponents,
+    persistentComponents
+  } = partitionComponentsByPersistence(components, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext);
+  const willRenderPersistent = willSurfaceRender(persistentComponents, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext);
+  const willRenderHoverOnly = willSurfaceRender(hoverOnlyComponents, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext);
   const isSticky = placement.height !== undefined;
   return /*#__PURE__*/React.createElement("div", {
     "data-editor-block-controls-surface": true,
@@ -40,10 +45,23 @@ export const BlockControlsLeftSurface = ({
     className: ax(["_kqswstnw _1pbyb4wl"])
   }, /*#__PURE__*/React.createElement("div", {
     className: ax(["_zulpv77o _4cvr1h6o _1e0c1txw", isSticky && "_kqsw1if8 _154iu2gc"])
-  }, /*#__PURE__*/React.createElement(VisibilityContainer, {
+  }, willRenderPersistent && /*#__PURE__*/React.createElement(VisibilityContainer, {
     api: api,
-    controlSide: "left",
+    controlSide: getBlockControlsSurfaceControlSide(surfaceContext.get(BLOCK_CONTROL_UI_CONTEXT), isExperimentEnabled('platform_editor_controls_reliable_anchor')),
     forceVisibleOnMouseOut: forceVisibleOnMouseOut,
     shouldUseDisplayContents: true
-  }, surface)));
+  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
+    components: persistentComponents,
+    surface: BLOCK_CONTROLS_LEFT_SURFACE,
+    surfaceContext: surfaceContext
+  })), willRenderHoverOnly && /*#__PURE__*/React.createElement(VisibilityContainer, {
+    api: api,
+    controlSide: getBlockControlsSurfaceControlSide(surfaceContext.get(BLOCK_CONTROL_UI_CONTEXT), isExperimentEnabled('platform_editor_controls_reliable_anchor')),
+    forceVisibleOnMouseOut: forceVisibleOnMouseOut,
+    shouldUseDisplayContents: true
+  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
+    components: hoverOnlyComponents,
+    surface: BLOCK_CONTROLS_LEFT_SURFACE,
+    surfaceContext: surfaceContext
+  }))));
 };