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

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

@@ -4,6 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { BLOCK_CONTROLS_RIGHT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
 import { SurfaceRenderer, willSurfaceRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
+import { partitionComponentsByPersistence } from './utils/partition-components-by-persistence';
 import { VisibilityContainer } from './visibility-container';
 const rightSurfaceOuterStyles = null;
 const rightSurfaceRowStyles = null;
@@ -25,11 +26,12 @@ export const BlockControlsRightSurface = ({
   if (!placement || !willSurfaceRender(components, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext)) {
     return null;
   }
-  const surface = /*#__PURE__*/React.createElement(SurfaceRenderer, {
-    components: components,
-    surface: BLOCK_CONTROLS_RIGHT_SURFACE,
-    surfaceContext: surfaceContext
-  });
+  const {
+    hoverOnlyComponents,
+    persistentComponents
+  } = partitionComponentsByPersistence(components, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext);
+  const willRenderPersistent = willSurfaceRender(persistentComponents, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext);
+  const willRenderHoverOnly = willSurfaceRender(hoverOnlyComponents, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext);
   const isSticky = placement.height !== undefined;
   return /*#__PURE__*/React.createElement("div", {
     "data-editor-block-controls-surface": true,
@@ -40,10 +42,23 @@ export const BlockControlsRightSurface = ({
     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: "right",
+    isPersistent: true,
+    shouldUseDisplayContents: true
+  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
+    components: persistentComponents,
+    surface: BLOCK_CONTROLS_RIGHT_SURFACE,
+    surfaceContext: surfaceContext
+  })), willRenderHoverOnly && /*#__PURE__*/React.createElement(VisibilityContainer, {
     api: api,
     controlSide: "right",
     forceVisibleOnMouseOut: forceVisibleOnMouseOut,
     shouldUseDisplayContents: true
-  }, surface)));
+  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
+    components: hoverOnlyComponents,
+    surface: BLOCK_CONTROLS_RIGHT_SURFACE,
+    surfaceContext: surfaceContext
+  }))));
 };

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

@@ -1,3 +1,4 @@
+export const getBlockControlsSurfaceControlSide = (context, reliableAnchorEnabled) => (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';
 const getNodeContext = (state, pos) => {
   const node = state.doc.nodeAt(pos);
   if (!node) {

package/dist/es2019/ui/consts.js

@@ -13,11 +13,17 @@ export const ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME = '--editor-block-controls
 export const DRAG_HANDLE_HEIGHT = 24;
 export const DRAG_HANDLE_BORDER_RADIUS = 4;
 export const DRAG_HANDLE_ZINDEX = akRichMediaResizeZIndex + akEditorUnitZIndex; //place above legacy resizer
-export const DRAG_HANDLE_DEFAULT_GAP = 8;
+const LEGACY_DRAG_HANDLE_DEFAULT_GAP = 8;
+const MIGRATED_DRAG_HANDLE_DEFAULT_GAP = 12;
 export const DRAG_HANDLE_NARROW_GAP = 4;
 export const DRAG_HANDLE_MAX_GAP = 12;
 export const DRAG_HANDLE_SYNCED_BLOCK_GAP = 2.5;
 export const DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = 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.
+const getDragHandleDefaultGap = () => isExperimentEnabled('platform_editor_block_control_migration') ? MIGRATED_DRAG_HANDLE_DEFAULT_GAP : LEGACY_DRAG_HANDLE_DEFAULT_GAP;
 export const DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = 4 + 2; // 4px for the divider vertical padding and 2px for the divider height
 export const DRAG_HANDLE_H1_TOP_ADJUSTMENT = 5;
 export const DRAG_HANDLE_H2_TOP_ADJUSTMENT = 2;
@@ -68,12 +74,12 @@ export const dragHandleGap = (nodeType, parentNodeType) => {
     }
   }
   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
@@ -94,7 +100,7 @@ export const rootElementGap = nodeType => {
   if (nodeType === 'layoutSection') {
     return DRAG_HANDLE_MAX_GAP + 12;
   }
-  return DRAG_HANDLE_DEFAULT_GAP;
+  return getDragHandleDefaultGap();
 };
 export const getNestedNodeLeftPaddingMargin = nodeType => {
   switch (nodeType) {

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

@@ -0,0 +1,48 @@
+import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls/block-control-ui-context';
+import { getComponentIdentity, resolveSurface, willComponentRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
+import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/create-surface-context';
+/**
+ * Split registered components into two groups:
+ * those that should be rendered persistently and those that should only be rendered on hover.
+ */
+export const partitionComponentsByPersistence = (components, surface, surfaceContext) => {
+  const {
+    childrenMap,
+    root,
+    topLevelChildren
+  } = resolveSurface(components, surface);
+  if (!root || !topLevelChildren || topLevelChildren.length === 0) {
+    return {
+      hoverOnlyComponents: [],
+      persistentComponents: components
+    };
+  }
+  const context = surfaceContext === null || surfaceContext === void 0 ? void 0 : surfaceContext.get(BLOCK_CONTROL_UI_CONTEXT);
+  const storedSurfaceContext = context ? createSurfaceContext(BLOCK_CONTROL_UI_CONTEXT, {
+    activeNode: undefined,
+    rootNode: context.targetNode,
+    targetNode: context.targetNode
+  }) : undefined;
+  const isLeaf = component => {
+    const children = childrenMap.get(getComponentIdentity(component));
+    return !children || children.length === 0;
+  };
+  const persistentComponents = [];
+  const hoverOnlyComponents = [];
+  for (const component of components) {
+    if (!isLeaf(component)) {
+      persistentComponents.push(component);
+      hoverOnlyComponents.push(component);
+      continue;
+    }
+    if (willComponentRender(component, childrenMap, storedSurfaceContext)) {
+      persistentComponents.push(component);
+    } else {
+      hoverOnlyComponents.push(component);
+    }
+  }
+  return {
+    hoverOnlyComponents,
+    persistentComponents
+  };
+};

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

@@ -51,6 +51,7 @@ export const VisibilityContainer = ({
   children,
   controlSide,
   forceVisibleOnMouseOut,
+  isPersistent,
   shouldUseDisplayContents
 }) => {
   const {
@@ -90,9 +91,12 @@ export const VisibilityContainer = ({
   // 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.
   const shouldHideWhenMouseOut = forceVisibleOnMouseOut ? false : hideOnMouseOut;
-  const 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.
+  const 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') && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) || sideHidden;
+  (isDisplayingDiff || userIntent === 'reviewing') && 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/esm/blockControlsPlugin.js

@@ -39,7 +39,6 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
   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 = isExperimentEnabled('platform_editor_block_control_migration');
-  var surfaceNodePositionsEnabled = registryBlockControlsEnabled && isExperimentEnabled('platform_editor_collapsible_headings');
   var legacyBlockControlsEnabled = !registryBlockControlsEnabled;
   var rightSurfaceEnabled = registryBlockControlsEnabled && isExperimentEnabled('platform_editor_block_control_right_surface');
   if (registryBlockControlsEnabled) {
@@ -139,7 +138,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         plugin: function plugin(_ref2) {
           var getIntl = _ref2.getIntl,
             nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
-          return createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled, surfaceNodePositionsEnabled, rightSurfaceEnabled);
+          return createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled, rightSurfaceEnabled);
         }
       }];
       if (editorExperiment('platform_editor_controls', 'variant1')) {
@@ -441,7 +440,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         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/esm/pm-plugins/interaction-tracking/handle-mouse-move.js

@@ -1,6 +1,7 @@
 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; }
+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';
@@ -25,6 +26,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 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.
@@ -123,7 +128,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') {
       setHoverSide(view, 'left');
@@ -181,9 +186,7 @@ var processHoverSide = function processHoverSide(view, api) {
     setHoverSide(view, nextHoverSide);
   }
 };
-export var handleMouseMove = function handleMouseMove(view, event) {
-  var rightSideControlsEnabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  var api = arguments.length > 3 ? arguments[3] : undefined;
+export var handleMouseMove = function handleMouseMove(view, event, rightSideControlsEnabled, api) {
   var 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) {
@@ -205,8 +208,7 @@ export var handleMouseMove = function handleMouseMove(view, event) {
   rafIdByView.set(view, id);
   return false;
 };
-export var handleMouseLeave = function handleMouseLeave(view) {
-  var rightSideControlsEnabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+export var handleMouseLeave = function handleMouseLeave(view, rightSideControlsEnabled) {
   if (rightSideControlsEnabled) {
     clearPendingHoverSide(view);
   }

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

@@ -13,13 +13,16 @@ 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.) */
-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 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/esm/pm-plugins/main.js

@@ -884,14 +884,16 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
   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 = editorExperiment('advanced_layouts', true, {
     exposure: true
   });
   var 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.
+  var surfaceNodePositionsEnabled = !legacyDragHandleEnabled;
   var flags = {
     legacyDragHandleEnabled: legacyDragHandleEnabled,
     surfaceNodePositionsEnabled: surfaceNodePositionsEnabled,

package/dist/esm/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';
 var leftSurfaceOuterStyles = null;
 var leftSurfaceRowStyles = null;
@@ -24,11 +28,11 @@ export var BlockControlsLeftSurface = function BlockControlsLeftSurface(_ref) {
   if (!placement || !willSurfaceRender(components, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext)) {
     return null;
   }
-  var surface = /*#__PURE__*/React.createElement(SurfaceRenderer, {
-    components: components,
-    surface: BLOCK_CONTROLS_LEFT_SURFACE,
-    surfaceContext: surfaceContext
-  });
+  var _partitionComponentsB = partitionComponentsByPersistence(components, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext),
+    hoverOnlyComponents = _partitionComponentsB.hoverOnlyComponents,
+    persistentComponents = _partitionComponentsB.persistentComponents;
+  var willRenderPersistent = willSurfaceRender(persistentComponents, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext);
+  var willRenderHoverOnly = willSurfaceRender(hoverOnlyComponents, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext);
   var isSticky = placement.height !== undefined;
   return /*#__PURE__*/React.createElement("div", {
     "data-editor-block-controls-surface": true,
@@ -39,10 +43,23 @@ export var BlockControlsLeftSurface = function BlockControlsLeftSurface(_ref) {
     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
+  }))));
 };

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

@@ -4,6 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { BLOCK_CONTROLS_RIGHT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
 import { SurfaceRenderer, willSurfaceRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
+import { partitionComponentsByPersistence } from './utils/partition-components-by-persistence';
 import { VisibilityContainer } from './visibility-container';
 var rightSurfaceOuterStyles = null;
 var rightSurfaceRowStyles = null;
@@ -24,11 +25,11 @@ export var BlockControlsRightSurface = function BlockControlsRightSurface(_ref)
   if (!placement || !willSurfaceRender(components, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext)) {
     return null;
   }
-  var surface = /*#__PURE__*/React.createElement(SurfaceRenderer, {
-    components: components,
-    surface: BLOCK_CONTROLS_RIGHT_SURFACE,
-    surfaceContext: surfaceContext
-  });
+  var _partitionComponentsB = partitionComponentsByPersistence(components, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext),
+    hoverOnlyComponents = _partitionComponentsB.hoverOnlyComponents,
+    persistentComponents = _partitionComponentsB.persistentComponents;
+  var willRenderPersistent = willSurfaceRender(persistentComponents, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext);
+  var willRenderHoverOnly = willSurfaceRender(hoverOnlyComponents, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext);
   var isSticky = placement.height !== undefined;
   return /*#__PURE__*/React.createElement("div", {
     "data-editor-block-controls-surface": true,
@@ -39,10 +40,23 @@ export var BlockControlsRightSurface = function BlockControlsRightSurface(_ref)
     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: "right",
+    isPersistent: true,
+    shouldUseDisplayContents: true
+  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
+    components: persistentComponents,
+    surface: BLOCK_CONTROLS_RIGHT_SURFACE,
+    surfaceContext: surfaceContext
+  })), willRenderHoverOnly && /*#__PURE__*/React.createElement(VisibilityContainer, {
     api: api,
     controlSide: "right",
     forceVisibleOnMouseOut: forceVisibleOnMouseOut,
     shouldUseDisplayContents: true
-  }, surface)));
+  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
+    components: hoverOnlyComponents,
+    surface: BLOCK_CONTROLS_RIGHT_SURFACE,
+    surfaceContext: surfaceContext
+  }))));
 };

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

@@ -1,6 +1,9 @@
 import _defineProperty from "@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) { _defineProperty(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; }
+export var 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/esm/ui/consts.js

@@ -16,11 +16,19 @@ export var ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME = '--editor-block-controls-a
 export var DRAG_HANDLE_HEIGHT = 24;
 export var DRAG_HANDLE_BORDER_RADIUS = 4;
 export var DRAG_HANDLE_ZINDEX = akRichMediaResizeZIndex + akEditorUnitZIndex; //place above legacy resizer
-export var DRAG_HANDLE_DEFAULT_GAP = 8;
+var LEGACY_DRAG_HANDLE_DEFAULT_GAP = 8;
+var MIGRATED_DRAG_HANDLE_DEFAULT_GAP = 12;
 export var DRAG_HANDLE_NARROW_GAP = 4;
 export var DRAG_HANDLE_MAX_GAP = 12;
 export var DRAG_HANDLE_SYNCED_BLOCK_GAP = 2.5;
 export var DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = 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 isExperimentEnabled('platform_editor_block_control_migration') ? MIGRATED_DRAG_HANDLE_DEFAULT_GAP : LEGACY_DRAG_HANDLE_DEFAULT_GAP;
+};
 export var DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = 4 + 2; // 4px for the divider vertical padding and 2px for the divider height
 export var DRAG_HANDLE_H1_TOP_ADJUSTMENT = 5;
 export var DRAG_HANDLE_H2_TOP_ADJUSTMENT = 2;
@@ -71,12 +79,12 @@ export var dragHandleGap = function dragHandleGap(nodeType, parentNodeType) {
     }
   }
   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
@@ -97,7 +105,7 @@ export var rootElementGap = function rootElementGap(nodeType) {
   if (nodeType === 'layoutSection') {
     return DRAG_HANDLE_MAX_GAP + 12;
   }
-  return DRAG_HANDLE_DEFAULT_GAP;
+  return getDragHandleDefaultGap();
 };
 export var getNestedNodeLeftPaddingMargin = function getNestedNodeLeftPaddingMargin(nodeType) {
   switch (nodeType) {

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

@@ -0,0 +1,59 @@
+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; }
+import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls/block-control-ui-context';
+import { getComponentIdentity, resolveSurface, willComponentRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
+import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/create-surface-context';
+/**
+ * Split registered components into two groups:
+ * those that should be rendered persistently and those that should only be rendered on hover.
+ */
+export var partitionComponentsByPersistence = function partitionComponentsByPersistence(components, surface, surfaceContext) {
+  var _resolveSurface = 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(BLOCK_CONTROL_UI_CONTEXT);
+  var storedSurfaceContext = context ? createSurfaceContext(BLOCK_CONTROL_UI_CONTEXT, {
+    activeNode: undefined,
+    rootNode: context.targetNode,
+    targetNode: context.targetNode
+  }) : undefined;
+  var isLeaf = function isLeaf(component) {
+    var children = childrenMap.get(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 (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/esm/ui/visibility-container.js

@@ -51,6 +51,7 @@ export var VisibilityContainer = function VisibilityContainer(_ref) {
     children = _ref.children,
     controlSide = _ref.controlSide,
     forceVisibleOnMouseOut = _ref.forceVisibleOnMouseOut,
+    isPersistent = _ref.isPersistent,
     shouldUseDisplayContents = _ref.shouldUseDisplayContents;
   var _useSharedPluginState = 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;
@@ -88,9 +89,12 @@ export var VisibilityContainer = function VisibilityContainer(_ref) {
   // 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') && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) || sideHidden;
+  (isDisplayingDiff || userIntent === 'reviewing') && 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/types/pm-plugins/main.d.ts

@@ -44,7 +44,7 @@ export declare const apply: (api: ExtractInjectionAPI<BlockControlsPlugin> | und
     multiSelectDnD: MultiSelectDnD | undefined;
     surfaceNodePositions: number[];
 };
-export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI, nodeDecorationRegistry: NodeDecorationFactory[], rightSideControlsEnabled?: boolean, quickInsertButtonEnabled?: boolean, legacyDragHandleEnabled?: boolean, surfaceNodePositionsEnabled?: boolean, rightSurfaceEnabled?: boolean) => SafePlugin<PluginState | {
+export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI, nodeDecorationRegistry: NodeDecorationFactory[], rightSideControlsEnabled?: boolean, quickInsertButtonEnabled?: boolean, legacyDragHandleEnabled?: boolean, rightSurfaceEnabled?: boolean) => SafePlugin<PluginState | {
     activeDropTargetNode: ActiveDropTargetNode | undefined;
     activeNode: any;
     blockMenuOptions: {

package/dist/types/ui/block-controls-surface-context.d.ts

@@ -2,5 +2,6 @@ import type { BlockControlUIContext } from '@atlaskit/editor-common/block-contro
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ActiveNode } from '../blockControlsPluginType';
+export declare const getBlockControlsSurfaceControlSide: (context: BlockControlUIContext | undefined, reliableAnchorEnabled: boolean) => 'left' | undefined;
 export declare const createBlockControlsSurfaceContextForPosition: (state: EditorState, targetPos: number, activeNode?: ActiveNode) => BlockControlUIContext | undefined;
 export declare const createBlockControlsSurfaceContext: (view: EditorView, activeNode: ActiveNode | undefined, target?: 'active' | 'root') => BlockControlUIContext | undefined;

package/dist/types/ui/consts.d.ts

@@ -6,7 +6,6 @@ export declare const ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME = "--editor-block-
 export declare const DRAG_HANDLE_HEIGHT = 24;
 export declare const DRAG_HANDLE_BORDER_RADIUS = 4;
 export declare const DRAG_HANDLE_ZINDEX: number;
-export declare const DRAG_HANDLE_DEFAULT_GAP = 8;
 export declare const DRAG_HANDLE_NARROW_GAP = 4;
 export declare const DRAG_HANDLE_MAX_GAP = 12;
 export declare const DRAG_HANDLE_SYNCED_BLOCK_GAP = 2.5;

package/dist/types/ui/utils/partition-components-by-persistence.d.ts

@@ -0,0 +1,15 @@
+import type { RegisterComponent, SurfaceContext } from '@atlaskit/editor-ui-control-model/types';
+type SurfaceIdentifier = {
+    key: string;
+    type: 'toolbar' | 'menu';
+};
+type PartitionedComponents = {
+    hoverOnlyComponents: RegisterComponent[];
+    persistentComponents: RegisterComponent[];
+};
+/**
+ * Split registered components into two groups:
+ * those that should be rendered persistently and those that should only be rendered on hover.
+ */
+export declare const partitionComponentsByPersistence: (components: RegisterComponent[], surface: SurfaceIdentifier, surfaceContext: SurfaceContext | undefined) => PartitionedComponents;
+export {};

package/dist/types/ui/visibility-container.d.ts

@@ -11,10 +11,11 @@ interface VisibilityContainerProps {
     children: React.ReactNode;
     controlSide?: 'left' | 'right';
     forceVisibleOnMouseOut?: boolean;
+    isPersistent?: boolean;
     /**
      * Set when the container should not create its own layout box while its descendants retain theirs.
      */
     shouldUseDisplayContents?: boolean;
 }
-export declare const VisibilityContainer: ({ api, children, controlSide, forceVisibleOnMouseOut, shouldUseDisplayContents, }: VisibilityContainerProps) => jsx.JSX.Element;
+export declare const VisibilityContainer: ({ api, children, controlSide, forceVisibleOnMouseOut, isPersistent, shouldUseDisplayContents, }: VisibilityContainerProps) => jsx.JSX.Element;
 export {};