@atlaskit/editor-plugin-block-controls 17.4.1 → 17.4.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 17.4.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 17.4.2
+
+### Patch Changes
+
+- [`3531759a623d1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3531759a623d1) -
+  Move the registry-backed right block-control surface and released Remix button under
+  `platform_editor_block_control_migration`, while keeping AI Suggestions behind
+  `platform_editor_block_control_right_surface`. Avoid legacy widget work and empty-surface
+  measurement in the migrated path, and preserve registry controls across hover transitions.
+
 ## 17.4.1
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -47,9 +47,8 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
   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 legacyBlockControlsEnabled = !registryBlockControlsEnabled;
-  var rightSurfaceEnabled = registryBlockControlsEnabled && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_right_surface');
   if (registryBlockControlsEnabled) {
-    var _api$uiControlRegistr;
+    var _api$uiControlRegistr, _api$uiControlRegistr2;
     api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register([_surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE, _objectSpread(_objectSpread({}, _surfaceKeys.BLOCK_CONTROLS_LEFT_SECTION), {}, {
       parents: [_objectSpread(_objectSpread({}, _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE), {}, {
         rank: 100
@@ -61,21 +60,19 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
     })].concat((0, _toConsumableArray2.default)((0, _blockControlsSurfaceDragHandleRegistration.getBlockControlsSurfaceDragHandleComponents)({
       api: api
     }))));
-    if (rightSurfaceEnabled) {
-      var _api$uiControlRegistr2;
-      // The right surface host stays generic: it only registers the toolbar/section/group
-      // hierarchy. Individual features contribute their own buttons into
-      // BLOCK_CONTROLS_RIGHT_GROUP from their own plugins, same as the left surface.
-      api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 || _api$uiControlRegistr2.actions.register([_surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE, _objectSpread(_objectSpread({}, _surfaceKeys.BLOCK_CONTROLS_RIGHT_SECTION), {}, {
-        parents: [_objectSpread(_objectSpread({}, _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE), {}, {
-          rank: 100
-        })]
-      }), _objectSpread(_objectSpread({}, _surfaceKeys.BLOCK_CONTROLS_RIGHT_GROUP), {}, {
-        parents: [_objectSpread(_objectSpread({}, _surfaceKeys.BLOCK_CONTROLS_RIGHT_SECTION), {}, {
-          rank: 100
-        })]
-      })]);
-    }
+
+    // The right surface host stays generic: it only registers the toolbar/section/group
+    // hierarchy. Individual features contribute their own buttons into
+    // BLOCK_CONTROLS_RIGHT_GROUP from their own plugins, same as the left surface.
+    api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 || _api$uiControlRegistr2.actions.register([_surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE, _objectSpread(_objectSpread({}, _surfaceKeys.BLOCK_CONTROLS_RIGHT_SECTION), {}, {
+      parents: [_objectSpread(_objectSpread({}, _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE), {}, {
+        rank: 100
+      })]
+    }), _objectSpread(_objectSpread({}, _surfaceKeys.BLOCK_CONTROLS_RIGHT_GROUP), {}, {
+      parents: [_objectSpread(_objectSpread({}, _surfaceKeys.BLOCK_CONTROLS_RIGHT_SECTION), {}, {
+        rank: 100
+      })]
+    })]);
   }
   return {
     name: 'blockControls',
@@ -145,7 +142,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, rightSurfaceEnabled);
+          return (0, _main.createPlugin)(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled);
         }
       }];
       if ((0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1')) {
@@ -473,10 +470,10 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
       }, /*#__PURE__*/_react.default.createElement(_blockControlsLeftSurfaces.BlockControlsLeftSurfaces, {
         api: api,
         editorView: editorView
-      }), rightSurfaceEnabled ? /*#__PURE__*/_react.default.createElement(_blockControlsRightSurfaces.BlockControlsRightSurfaces, {
+      }), /*#__PURE__*/_react.default.createElement(_blockControlsRightSurfaces.BlockControlsRightSurfaces, {
         api: api,
         editorView: editorView
-      }) : null) : null);
+      })) : null);
     }
   };
 };

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

@@ -30,7 +30,10 @@ var clearPendingHoverSide = function clearPendingHoverSide(view) {
   cancelScheduledProcessForView(view);
 };
 var BLOCK_SELECTORS = '[data-node-anchor], [data-drag-handler-anchor-name]';
-var RIGHT_EDGE_SELECTOR = '[data-blocks-right-edge-button-container]';
+var LEGACY_RIGHT_EDGE_SELECTOR = '[data-blocks-right-edge-button-container]';
+var getRightControlSelector = function getRightControlSelector() {
+  return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') ? "[data-editor-block-controls-side=\"right\"], ".concat(LEGACY_RIGHT_EDGE_SELECTOR) : LEGACY_RIGHT_EDGE_SELECTOR;
+};
 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;
@@ -122,7 +125,7 @@ var processHoverSide = function processHoverSide(view, api) {
 
   // When hovering over block controls directly, infer side from which control we're over.
   // This is more reliable than bounds when controls are in portals outside the editor DOM.
-  var rightEdgeElement = target === null || target === void 0 ? void 0 : target.closest(RIGHT_EDGE_SELECTOR);
+  var rightEdgeElement = target === null || target === void 0 ? void 0 : target.closest(getRightControlSelector());
   if (rightEdgeElement) {
     if (state !== null && state !== void 0 && state.isMouseOut && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('cc_maui_remix_button_hover_corridor', 'isEnabled', true)) {
       (0, _commands.mouseEnter)(view, 'right');

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

@@ -21,7 +21,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 /** Elements that extend the editor hover area (block controls, right-edge button, etc.) */
 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;
+  return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') ? "[data-editor-block-controls-surface], [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;
 

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.key = exports.getDecorations = exports.getBlockControlsMeta = exports.createPlugin = exports.apply = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _browserApis = require("@atlaskit/browser-apis");
@@ -444,16 +443,18 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
   // In view mode with right-side controls, remove any lingering drag handle decorations
   // (they may carry over from edit mode). Only remove drag handles specifically, not
   // the remix button decorations (those are managed separately via showInViewMode).
-  if (isViewMode && rightSideControlsEnabled) {
+  if (flags.legacyDragHandleEnabled && isViewMode && rightSideControlsEnabled) {
     var allHandleDecs = (0, _decorationsDragHandle.findHandleDec)(decorations, 0, newState.doc.content.size);
     if (allHandleDecs.length > 0) {
       decorations = decorations.remove(allHandleDecs);
     }
   }
   if (shouldRemoveHandle) {
-    var _activeNode5, _activeNode6;
-    var oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.pos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.pos);
-    decorations = decorations.remove(oldHandle);
+    if (flags.legacyDragHandleEnabled) {
+      var _activeNode5, _activeNode6;
+      var oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.pos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.pos);
+      decorations = decorations.remove(oldHandle);
+    }
     // When removing the handle, also remove the anchor-marker node decorations
     // (data-active-drag-handle / data-active-quick-insert) so the DOM attributes
     // don't linger on nodes that are no longer active.
@@ -461,7 +462,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     // after a doc change (e.g. pressing Enter splits a node), DecorationSet.map() can shift the
     // decoration to a different position, so a point-range search would miss it and leave a stale
     // attribute on the wrong DOM node.
-    if ((0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true)) {
+    if ((flags.legacyDragHandleEnabled || nodeDecorationRegistry.length > 0) && (0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true)) {
       var oldActiveNodeDec = (0, _decorationsDragHandle.findActiveDragHandleNodeDec)(decorations, 0, newState.doc.content.size);
       decorations = decorations.remove(oldActiveNodeDec);
       var oldActiveQuickInsertDec = (0, _decorationsQuickInsertButton.findActiveQuickInsertNodeDec)(decorations, 0, newState.doc.content.size);
@@ -592,7 +593,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
         }
       }
     }
-    if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined &&
+    if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined && (quickInsertButtonEnabled || nodeDecorationRegistry.length > 0) &&
     // platform_editor_controls note: enables quick insert
     flags.toolbarFlagsEnabled && (!rightSideControlsEnabled || !isViewMode)) {
       var _latestActiveNode1;
@@ -822,7 +823,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     // remove isEmptyDoc check and let decorations render and determine their own visibility
     // In view mode with right-side controls we render node decorations (right-edge button), not the
     // handle - so findHandleDec is always empty. Don't clear activeNode in that case.
-    var hasHandleOrViewModeControls = (0, _decorationsDragHandle.findHandleDec)(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length > 0 || isViewMode && rightSideControlsEnabled || !flags.legacyDragHandleEnabled;
+    var hasHandleOrViewModeControls = !flags.legacyDragHandleEnabled || isViewMode && rightSideControlsEnabled || (0, _decorationsDragHandle.findHandleDec)(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length > 0;
     // Keep the registry surface mounted while its Block Menu owns focus.
     var keepActiveNodeForOpenBlockMenu = !flags.legacyDragHandleEnabled && isMenuOpen && (0, _editorExperiment.editorExperiment)('platform_editor_block_menu', true);
     newActiveNode = meta !== null && meta !== void 0 && meta.editorBlurred && !keepActiveNodeForOpenBlockMenu || !(meta !== null && meta !== void 0 && meta.activeNode) && !hasHandleOrViewModeControls ? null : latestActiveNode;
@@ -890,7 +891,6 @@ 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 rightSurfaceEnabled = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
   var _getIntl = getIntl(),
     formatMessage = _getIntl.formatMessage;
   var isAdvancedLayoutEnabled = (0, _editorExperiment.editorExperiment)('advanced_layouts', true, {
@@ -905,7 +905,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
     surfaceNodePositionsEnabled: surfaceNodePositionsEnabled,
     toolbarFlagsEnabled: toolbarFlagsEnabled
   };
-  var resolvedSurfaces = surfaceNodePositionsEnabled ? [(0, _surfaceRenderer.resolveSurface)((_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(_surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [], _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE)].concat((0, _toConsumableArray2.default)(rightSurfaceEnabled ? [(0, _surfaceRenderer.resolveSurface)((_api$uiControlRegistr3 = api === null || api === void 0 || (_api$uiControlRegistr4 = api.uiControlRegistry) === null || _api$uiControlRegistr4 === void 0 ? void 0 : _api$uiControlRegistr4.actions.getComponents(_surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE)) !== null && _api$uiControlRegistr3 !== void 0 ? _api$uiControlRegistr3 : [], _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE)] : [])) : [];
+  var resolvedSurfaces = surfaceNodePositionsEnabled ? [(0, _surfaceRenderer.resolveSurface)((_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(_surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [], _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE), (0, _surfaceRenderer.resolveSurface)((_api$uiControlRegistr3 = api === null || api === void 0 || (_api$uiControlRegistr4 = api.uiControlRegistry) === null || _api$uiControlRegistr4 === void 0 ? void 0 : _api$uiControlRegistr4.actions.getComponents(_surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE)) !== null && _api$uiControlRegistr3 !== void 0 ? _api$uiControlRegistr3 : [], _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE)] : [];
   var anchorRectCache;
   if (!(0, _anchorUtils.isAnchorSupported)()) {
     anchorRectCache = new _anchorUtils.AnchorRectCache();
@@ -942,7 +942,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
         var decorationSet = (_key$getState2 = key.getState(state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.decorations;
         // In view mode with right-side controls, remove any lingering drag-handle decorations
         // (created in edit mode) that may not have been cleaned up on mode switch.
-        if (decorationSet && rightSideControlsEnabled && (api === null || api === void 0 || (_api$editorViewMode3 = api.editorViewMode) === null || _api$editorViewMode3 === void 0 || (_api$editorViewMode3 = _api$editorViewMode3.sharedState.currentState()) === null || _api$editorViewMode3 === void 0 ? void 0 : _api$editorViewMode3.mode) === 'view') {
+        if (decorationSet && legacyDragHandleEnabled && rightSideControlsEnabled && (api === null || api === void 0 || (_api$editorViewMode3 = api.editorViewMode) === null || _api$editorViewMode3 === void 0 || (_api$editorViewMode3 = _api$editorViewMode3.sharedState.currentState()) === null || _api$editorViewMode3 === void 0 ? void 0 : _api$editorViewMode3.mode) === 'view') {
           var handleDecs = (0, _decorationsDragHandle.findHandleDec)(decorationSet, 0, state.doc.content.size);
           if (handleDecs.length > 0) {
             decorationSet = decorationSet.remove(handleDecs);
@@ -1184,10 +1184,15 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
         if (!(pluginState !== null && pluginState !== void 0 && pluginState.isDragging)) {
           var isResizerResizing = !!dom.querySelector('.is-resizing');
           var transaction = editorView.state.tr;
+          var shouldDispatch = false;
           if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.isResizerResizing) !== isResizerResizing) {
             transaction.setMeta('is-resizer-resizing', isResizerResizing);
+            shouldDispatch = true;
           }
-          if (!isResizerResizing) {
+
+          // Registry surfaces have their own ResizeObservers and absolute placement.
+          // Width metadata only drives legacy widget recreation.
+          if (legacyDragHandleEnabled && !isResizerResizing) {
             var _editorContentArea = entries[0].target;
             // Ignored via go/ees005
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -1199,8 +1204,11 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
               editorWidthLeft: editorWidthLeft,
               editorWidthRight: editorWidthRight
             }));
+            shouldDispatch = true;
+          }
+          if (shouldDispatch) {
+            editorView.dispatch(transaction);
           }
-          editorView.dispatch(transaction);
         }
       }));
       var shouldObserve = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? !(0, _anchorUtils.isAnchorSupported)() : true;

package/dist/cjs/pm-plugins/utils/surface-node-positions.js

@@ -10,6 +10,7 @@ var _blockControlUiContext = require("@atlaskit/editor-common/block-controls/blo
 var _createSurfaceContext = require("@atlaskit/editor-ui-control-model/create-surface-context");
 var _surfaceRenderer = require("@atlaskit/editor-ui-control-model/surface-renderer");
 var _blockControlsSurfaceContext = require("../../ui/block-controls-surface-context");
+var _hasSurfaceControls = require("../../ui/utils/has-surface-controls");
 var createSurfaceContextAtPosition = function createSurfaceContextAtPosition(state, position, activeNode) {
   var blockControlsContext = (0, _blockControlsSurfaceContext.createBlockControlsSurfaceContextForPosition)(state, position, activeNode);
   return blockControlsContext ? (0, _createSurfaceContext.createSurfaceContext)(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT, blockControlsContext) : undefined;
@@ -33,8 +34,9 @@ var getSurfaceNodePositions = exports.getSurfaceNodePositions = function getSurf
   var to = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : state.doc.content.size;
   var surfaces = resolvedSurfaces.flatMap(function (_ref2) {
     var childrenMap = _ref2.childrenMap,
+      components = _ref2.components,
       root = _ref2.root;
-    return root ? [{
+    return root && (0, _hasSurfaceControls.hasSurfaceControls)(components) ? [{
       childrenMap: childrenMap,
       root: root
     }] : [];
@@ -74,8 +76,9 @@ var updateSurfaceNodePositions = exports.updateSurfaceNodePositions = function u
   }
   var surfaces = resolvedSurfaces.flatMap(function (_ref4) {
     var childrenMap = _ref4.childrenMap,
+      components = _ref4.components,
       root = _ref4.root;
-    return root ? [{
+    return root && (0, _hasSurfaceControls.hasSurfaceControls)(components) ? [{
       childrenMap: childrenMap,
       root: root
     }] : [];

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

@@ -43,6 +43,7 @@ var BlockControlsLeftSurface = exports.BlockControlsLeftSurface = function Block
   var isSticky = placement.height !== undefined;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-editor-block-controls-surface": true,
+    "data-editor-block-controls-side": "left",
     "data-testid": source === 'stored' ? 'block-controls-left-surface-stored' : source === 'active' ? 'block-controls-left-surface-active' : 'block-controls-left-surface'
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Placement is resolved from the target node's runtime DOM geometry.
     ,

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

@@ -17,12 +17,14 @@ var _blockControlUiContext = require("@atlaskit/editor-common/block-controls/blo
 var _surfaceKeys = require("@atlaskit/editor-common/block-controls/surface-keys");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _createSurfaceContext = require("@atlaskit/editor-ui-control-model/create-surface-context");
+var _surfaceRenderer = require("@atlaskit/editor-ui-control-model/surface-renderer");
 var _decorationsCommon = require("../pm-plugins/decorations-common");
 var _blockControlsLeftSurface = require("./block-controls-left-surface");
 var _blockControlsSurfaceContext = require("./block-controls-surface-context");
 var _blockControlsSurfaceTargets = require("./block-controls-surface-targets");
 var _getNodeContentElement = require("./utils/get-node-content-element");
 var _getSurfacePlacement = require("./utils/get-surface-placement");
+var _hasSurfaceControls = require("./utils/has-surface-controls");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; } }
@@ -55,12 +57,15 @@ var BlockControlsLeftSurfaces = exports.BlockControlsLeftSurfaces = function Blo
         return [];
       }
       var surfaceContext = (0, _createSurfaceContext.createSurfaceContext)(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT, context);
+      if (!(0, _hasSurfaceControls.hasSurfaceControls)(components) || !(0, _surfaceRenderer.willSurfaceRender)(components, _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext)) {
+        return [];
+      }
       return [_objectSpread(_objectSpread({}, target), {}, {
         blockControlsContext: context,
         surfaceContext: surfaceContext
       })];
     });
-  }, [activeNode, editorView, targets]);
+  }, [activeNode, components, editorView, targets]);
   var _useState = (0, _react.useState)(new Map()),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     placements = _useState2[0],

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

@@ -40,6 +40,7 @@ var BlockControlsRightSurface = exports.BlockControlsRightSurface = function Blo
   var isSticky = placement.height !== undefined;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-editor-block-controls-surface": true,
+    "data-editor-block-controls-side": "right",
     "data-testid": source === 'stored' ? 'block-controls-right-surface-stored' : source === 'active' ? 'block-controls-right-surface-active' : 'block-controls-right-surface'
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Placement is resolved from the target node's runtime DOM geometry.
     ,

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

@@ -17,12 +17,14 @@ var _blockControlUiContext = require("@atlaskit/editor-common/block-controls/blo
 var _surfaceKeys = require("@atlaskit/editor-common/block-controls/surface-keys");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _createSurfaceContext = require("@atlaskit/editor-ui-control-model/create-surface-context");
+var _surfaceRenderer = require("@atlaskit/editor-ui-control-model/surface-renderer");
 var _decorationsCommon = require("../pm-plugins/decorations-common");
 var _blockControlsRightSurface = require("./block-controls-right-surface");
 var _blockControlsSurfaceContext = require("./block-controls-surface-context");
 var _blockControlsSurfaceTargets = require("./block-controls-surface-targets");
 var _getNodeContentElement = require("./utils/get-node-content-element");
 var _getSurfacePlacement = require("./utils/get-surface-placement");
+var _hasSurfaceControls = require("./utils/has-surface-controls");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; } }
@@ -60,12 +62,15 @@ var BlockControlsRightSurfaces = exports.BlockControlsRightSurfaces = function B
         return [];
       }
       var surfaceContext = (0, _createSurfaceContext.createSurfaceContext)(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT, context);
+      if (!(0, _hasSurfaceControls.hasSurfaceControls)(components) || !(0, _surfaceRenderer.willSurfaceRender)(components, _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext)) {
+        return [];
+      }
       return [_objectSpread(_objectSpread({}, target), {}, {
         blockControlsContext: context,
         surfaceContext: surfaceContext
       })];
     });
-  }, [activeNode, editorView, targets]);
+  }, [activeNode, components, editorView, targets]);
   var _useState = (0, _react.useState)(new Map()),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     placements = _useState2[0],

package/dist/cjs/ui/utils/has-surface-controls.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hasSurfaceControls = void 0;
+/**
+ * Structural toolbar nodes do not render a control by themselves. Treat a surface as populated
+ * only once a contributor has registered an interactive descendant.
+ */
+var hasSurfaceControls = exports.hasSurfaceControls = function hasSurfaceControls(components) {
+  return components.some(function (component) {
+    return Boolean(component.component) || component.type === 'button' || component.type === 'menu' || component.type === 'menu-item' || component.type === 'nested-menu';
+  });
+};

package/dist/es2019/blockControlsPlugin.js

@@ -37,9 +37,8 @@ export const blockControlsPlugin = ({
   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 legacyBlockControlsEnabled = !registryBlockControlsEnabled;
-  const rightSurfaceEnabled = registryBlockControlsEnabled && isExperimentEnabled('platform_editor_block_control_right_surface');
   if (registryBlockControlsEnabled) {
-    var _api$uiControlRegistr;
+    var _api$uiControlRegistr, _api$uiControlRegistr2;
     api === null || api === void 0 ? void 0 : (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.register([BLOCK_CONTROLS_LEFT_SURFACE, {
       ...BLOCK_CONTROLS_LEFT_SECTION,
       parents: [{
@@ -55,25 +54,23 @@ export const blockControlsPlugin = ({
     }, ...getBlockControlsSurfaceDragHandleComponents({
       api
     })]);
-    if (rightSurfaceEnabled) {
-      var _api$uiControlRegistr2;
-      // The right surface host stays generic: it only registers the toolbar/section/group
-      // hierarchy. Individual features contribute their own buttons into
-      // BLOCK_CONTROLS_RIGHT_GROUP from their own plugins, same as the left surface.
-      api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.register([BLOCK_CONTROLS_RIGHT_SURFACE, {
+
+    // The right surface host stays generic: it only registers the toolbar/section/group
+    // hierarchy. Individual features contribute their own buttons into
+    // BLOCK_CONTROLS_RIGHT_GROUP from their own plugins, same as the left surface.
+    api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.register([BLOCK_CONTROLS_RIGHT_SURFACE, {
+      ...BLOCK_CONTROLS_RIGHT_SECTION,
+      parents: [{
+        ...BLOCK_CONTROLS_RIGHT_SURFACE,
+        rank: 100
+      }]
+    }, {
+      ...BLOCK_CONTROLS_RIGHT_GROUP,
+      parents: [{
         ...BLOCK_CONTROLS_RIGHT_SECTION,
-        parents: [{
-          ...BLOCK_CONTROLS_RIGHT_SURFACE,
-          rank: 100
-        }]
-      }, {
-        ...BLOCK_CONTROLS_RIGHT_GROUP,
-        parents: [{
-          ...BLOCK_CONTROLS_RIGHT_SECTION,
-          rank: 100
-        }]
-      }]);
-    }
+        rank: 100
+      }]
+    }]);
   }
   return {
     name: 'blockControls',
@@ -143,7 +140,7 @@ export const blockControlsPlugin = ({
         plugin: ({
           getIntl,
           nodeViewPortalProviderAPI
-        }) => createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled, rightSurfaceEnabled)
+        }) => createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled)
       }];
       if (editorExperiment('platform_editor_controls', 'variant1')) {
         pmPlugins.push({
@@ -466,10 +463,10 @@ export const blockControlsPlugin = ({
       }, /*#__PURE__*/React.createElement(BlockControlsLeftSurfaces, {
         api: api,
         editorView: editorView
-      }), rightSurfaceEnabled ? /*#__PURE__*/React.createElement(BlockControlsRightSurfaces, {
+      }), /*#__PURE__*/React.createElement(BlockControlsRightSurfaces, {
         api: api,
         editorView: editorView
-      }) : null) : null);
+      })) : null);
     }
   };
 };

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

@@ -22,7 +22,8 @@ const clearPendingHoverSide = view => {
   cancelScheduledProcessForView(view);
 };
 const BLOCK_SELECTORS = '[data-node-anchor], [data-drag-handler-anchor-name]';
-const RIGHT_EDGE_SELECTOR = '[data-blocks-right-edge-button-container]';
+const LEGACY_RIGHT_EDGE_SELECTOR = '[data-blocks-right-edge-button-container]';
+const getRightControlSelector = () => isExperimentEnabled('platform_editor_block_control_migration') ? `[data-editor-block-controls-side="right"], ${LEGACY_RIGHT_EDGE_SELECTOR}` : LEGACY_RIGHT_EDGE_SELECTOR;
 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;
 
@@ -101,7 +102,7 @@ const processHoverSide = (view, api) => {
 
   // When hovering over block controls directly, infer side from which control we're over.
   // This is more reliable than bounds when controls are in portals outside the editor DOM.
-  const rightEdgeElement = target === null || target === void 0 ? void 0 : target.closest(RIGHT_EDGE_SELECTOR);
+  const rightEdgeElement = target === null || target === void 0 ? void 0 : target.closest(getRightControlSelector());
   if (rightEdgeElement) {
     if (state !== null && state !== void 0 && state.isMouseOut && expValEqualsNoExposure('cc_maui_remix_button_hover_corridor', 'isEnabled', true)) {
       mouseEnter(view, 'right');

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

@@ -11,7 +11,7 @@ import { handleMouseEnter, handleMouseLeave, handleMouseMove } from './handle-mo
 
 /** Elements that extend the editor hover area (block controls, right-edge button, etc.) */
 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 getBlockControlsHoverAreaSelector = () => isExperimentEnabled('platform_editor_block_control_migration') ? `[data-editor-block-controls-surface], [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. */

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

@@ -432,16 +432,18 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
   // In view mode with right-side controls, remove any lingering drag handle decorations
   // (they may carry over from edit mode). Only remove drag handles specifically, not
   // the remix button decorations (those are managed separately via showInViewMode).
-  if (isViewMode && rightSideControlsEnabled) {
+  if (flags.legacyDragHandleEnabled && isViewMode && rightSideControlsEnabled) {
     const allHandleDecs = findHandleDec(decorations, 0, newState.doc.content.size);
     if (allHandleDecs.length > 0) {
       decorations = decorations.remove(allHandleDecs);
     }
   }
   if (shouldRemoveHandle) {
-    var _activeNode5, _activeNode6;
-    const oldHandle = findHandleDec(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.pos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.pos);
-    decorations = decorations.remove(oldHandle);
+    if (flags.legacyDragHandleEnabled) {
+      var _activeNode5, _activeNode6;
+      const oldHandle = findHandleDec(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.pos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.pos);
+      decorations = decorations.remove(oldHandle);
+    }
     // When removing the handle, also remove the anchor-marker node decorations
     // (data-active-drag-handle / data-active-quick-insert) so the DOM attributes
     // don't linger on nodes that are no longer active.
@@ -449,7 +451,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     // after a doc change (e.g. pressing Enter splits a node), DecorationSet.map() can shift the
     // decoration to a different position, so a point-range search would miss it and leave a stale
     // attribute on the wrong DOM node.
-    if (expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true)) {
+    if ((flags.legacyDragHandleEnabled || nodeDecorationRegistry.length > 0) && expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true)) {
       const oldActiveNodeDec = findActiveDragHandleNodeDec(decorations, 0, newState.doc.content.size);
       decorations = decorations.remove(oldActiveNodeDec);
       const oldActiveQuickInsertDec = findActiveQuickInsertNodeDec(decorations, 0, newState.doc.content.size);
@@ -552,7 +554,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
         }
       }
     }
-    if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined &&
+    if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined && (quickInsertButtonEnabled || nodeDecorationRegistry.length > 0) &&
     // platform_editor_controls note: enables quick insert
     flags.toolbarFlagsEnabled && (!rightSideControlsEnabled || !isViewMode)) {
       var _latestActiveNode1;
@@ -721,7 +723,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     // remove isEmptyDoc check and let decorations render and determine their own visibility
     // In view mode with right-side controls we render node decorations (right-edge button), not the
     // handle - so findHandleDec is always empty. Don't clear activeNode in that case.
-    const hasHandleOrViewModeControls = findHandleDec(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length > 0 || isViewMode && rightSideControlsEnabled || !flags.legacyDragHandleEnabled;
+    const hasHandleOrViewModeControls = !flags.legacyDragHandleEnabled || isViewMode && rightSideControlsEnabled || findHandleDec(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length > 0;
     // Keep the registry surface mounted while its Block Menu owns focus.
     const keepActiveNodeForOpenBlockMenu = !flags.legacyDragHandleEnabled && isMenuOpen && editorExperiment('platform_editor_block_menu', true);
     newActiveNode = meta !== null && meta !== void 0 && meta.editorBlurred && !keepActiveNodeForOpenBlockMenu || !(meta !== null && meta !== void 0 && meta.activeNode) && !hasHandleOrViewModeControls ? null : latestActiveNode;
@@ -784,7 +786,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, rightSurfaceEnabled = false) => {
+export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled = false, quickInsertButtonEnabled = true, legacyDragHandleEnabled = true) => {
   var _api$uiControlRegistr, _api$uiControlRegistr2, _api$uiControlRegistr3, _api$uiControlRegistr4;
   const {
     formatMessage
@@ -801,7 +803,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
     surfaceNodePositionsEnabled,
     toolbarFlagsEnabled
   };
-  const resolvedSurfaces = surfaceNodePositionsEnabled ? [resolveSurface((_api$uiControlRegistr = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(BLOCK_CONTROLS_LEFT_SURFACE)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [], BLOCK_CONTROLS_LEFT_SURFACE), ...(rightSurfaceEnabled ? [resolveSurface((_api$uiControlRegistr3 = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr4 = api.uiControlRegistry) === null || _api$uiControlRegistr4 === void 0 ? void 0 : _api$uiControlRegistr4.actions.getComponents(BLOCK_CONTROLS_RIGHT_SURFACE)) !== null && _api$uiControlRegistr3 !== void 0 ? _api$uiControlRegistr3 : [], BLOCK_CONTROLS_RIGHT_SURFACE)] : [])] : [];
+  const resolvedSurfaces = surfaceNodePositionsEnabled ? [resolveSurface((_api$uiControlRegistr = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(BLOCK_CONTROLS_LEFT_SURFACE)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [], BLOCK_CONTROLS_LEFT_SURFACE), resolveSurface((_api$uiControlRegistr3 = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr4 = api.uiControlRegistry) === null || _api$uiControlRegistr4 === void 0 ? void 0 : _api$uiControlRegistr4.actions.getComponents(BLOCK_CONTROLS_RIGHT_SURFACE)) !== null && _api$uiControlRegistr3 !== void 0 ? _api$uiControlRegistr3 : [], BLOCK_CONTROLS_RIGHT_SURFACE)] : [];
   let anchorRectCache;
   if (!isAnchorSupported()) {
     anchorRectCache = new AnchorRectCache();
@@ -837,7 +839,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
         let decorationSet = (_key$getState2 = key.getState(state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.decorations;
         // In view mode with right-side controls, remove any lingering drag-handle decorations
         // (created in edit mode) that may not have been cleaned up on mode switch.
-        if (decorationSet && rightSideControlsEnabled && (api === null || api === void 0 ? void 0 : (_api$editorViewMode3 = api.editorViewMode) === null || _api$editorViewMode3 === void 0 ? void 0 : (_api$editorViewMode3$ = _api$editorViewMode3.sharedState.currentState()) === null || _api$editorViewMode3$ === void 0 ? void 0 : _api$editorViewMode3$.mode) === 'view') {
+        if (decorationSet && legacyDragHandleEnabled && rightSideControlsEnabled && (api === null || api === void 0 ? void 0 : (_api$editorViewMode3 = api.editorViewMode) === null || _api$editorViewMode3 === void 0 ? void 0 : (_api$editorViewMode3$ = _api$editorViewMode3.sharedState.currentState()) === null || _api$editorViewMode3$ === void 0 ? void 0 : _api$editorViewMode3$.mode) === 'view') {
           const handleDecs = findHandleDec(decorationSet, 0, state.doc.content.size);
           if (handleDecs.length > 0) {
             decorationSet = decorationSet.remove(handleDecs);
@@ -1090,10 +1092,15 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
         if (!(pluginState !== null && pluginState !== void 0 && pluginState.isDragging)) {
           const isResizerResizing = !!dom.querySelector('.is-resizing');
           const transaction = editorView.state.tr;
+          let shouldDispatch = false;
           if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.isResizerResizing) !== isResizerResizing) {
             transaction.setMeta('is-resizer-resizing', isResizerResizing);
+            shouldDispatch = true;
           }
-          if (!isResizerResizing) {
+
+          // Registry surfaces have their own ResizeObservers and absolute placement.
+          // Width metadata only drives legacy widget recreation.
+          if (legacyDragHandleEnabled && !isResizerResizing) {
             const editorContentArea = entries[0].target;
             // Ignored via go/ees005
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -1106,8 +1113,11 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
               editorWidthLeft,
               editorWidthRight
             });
+            shouldDispatch = true;
+          }
+          if (shouldDispatch) {
+            editorView.dispatch(transaction);
           }
-          editorView.dispatch(transaction);
         }
       }));
       const shouldObserve = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? !isAnchorSupported() : true;

package/dist/es2019/pm-plugins/utils/surface-node-positions.js

@@ -2,6 +2,7 @@ import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls
 import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/create-surface-context';
 import { willComponentRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
 import { createBlockControlsSurfaceContextForPosition } from '../../ui/block-controls-surface-context';
+import { hasSurfaceControls } from '../../ui/utils/has-surface-controls';
 const createSurfaceContextAtPosition = (state, position, activeNode) => {
   const blockControlsContext = createBlockControlsSurfaceContextForPosition(state, position, activeNode);
   return blockControlsContext ? createSurfaceContext(BLOCK_CONTROL_UI_CONTEXT, blockControlsContext) : undefined;
@@ -22,8 +23,9 @@ const willAnySurfaceRenderAt = (surfaces, state, position, activeNode) => {
 export const getSurfaceNodePositions = (state, resolvedSurfaces, activeNode, from = 0, to = state.doc.content.size) => {
   const surfaces = resolvedSurfaces.flatMap(({
     childrenMap,
+    components,
     root
-  }) => root ? [{
+  }) => root && hasSurfaceControls(components) ? [{
     childrenMap,
     root
   }] : []);
@@ -61,8 +63,9 @@ export const updateSurfaceNodePositions = ({
   }
   const surfaces = resolvedSurfaces.flatMap(({
     childrenMap,
+    components,
     root
-  }) => root ? [{
+  }) => root && hasSurfaceControls(components) ? [{
     childrenMap,
     root
   }] : []);

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

@@ -38,6 +38,7 @@ export const BlockControlsLeftSurface = ({
   const isSticky = placement.height !== undefined;
   return /*#__PURE__*/React.createElement("div", {
     "data-editor-block-controls-surface": true,
+    "data-editor-block-controls-side": "left",
     "data-testid": source === 'stored' ? 'block-controls-left-surface-stored' : source === 'active' ? 'block-controls-left-surface-active' : 'block-controls-left-surface'
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Placement is resolved from the target node's runtime DOM geometry.
     ,

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

@@ -7,12 +7,14 @@ import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls
 import { BLOCK_CONTROLS_LEFT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/create-surface-context';
+import { willSurfaceRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
 import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
 import { BlockControlsLeftSurface } from './block-controls-left-surface';
 import { createBlockControlsSurfaceContext, createBlockControlsSurfaceContextForPosition } from './block-controls-surface-context';
 import { getBlockControlsSurfaceTargets } from './block-controls-surface-targets';
 import { getNodeContentElement } from './utils/get-node-content-element';
 import { getAbsoluteSurfacePlacement, getSurfacePlacement } from './utils/get-surface-placement';
+import { hasSurfaceControls } from './utils/has-surface-controls';
 const EMPTY_SURFACE_POSITIONS = [];
 const EMPTY_SURFACE_COMPONENTS = [];
 export const BlockControlsLeftSurfaces = ({
@@ -38,12 +40,15 @@ export const BlockControlsLeftSurfaces = ({
       return [];
     }
     const surfaceContext = createSurfaceContext(BLOCK_CONTROL_UI_CONTEXT, context);
+    if (!hasSurfaceControls(components) || !willSurfaceRender(components, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext)) {
+      return [];
+    }
     return [{
       ...target,
       blockControlsContext: context,
       surfaceContext
     }];
-  }), [activeNode, editorView, targets]);
+  }), [activeNode, components, editorView, targets]);
   const [placements, setPlacements] = useState(new Map());
   const animationFrameRef = useRef(undefined);
   useLayoutEffect(() => {

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

@@ -35,6 +35,7 @@ export const BlockControlsRightSurface = ({
   const isSticky = placement.height !== undefined;
   return /*#__PURE__*/React.createElement("div", {
     "data-editor-block-controls-surface": true,
+    "data-editor-block-controls-side": "right",
     "data-testid": source === 'stored' ? 'block-controls-right-surface-stored' : source === 'active' ? 'block-controls-right-surface-active' : 'block-controls-right-surface'
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Placement is resolved from the target node's runtime DOM geometry.
     ,

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

@@ -7,12 +7,14 @@ import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls
 import { BLOCK_CONTROLS_RIGHT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/create-surface-context';
+import { willSurfaceRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
 import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
 import { BlockControlsRightSurface } from './block-controls-right-surface';
 import { createBlockControlsSurfaceContext, createBlockControlsSurfaceContextForPosition } from './block-controls-surface-context';
 import { getBlockControlsSurfaceTargets } from './block-controls-surface-targets';
 import { getNodeContentElement } from './utils/get-node-content-element';
 import { getAbsoluteSurfacePlacement, getSurfacePlacement } from './utils/get-surface-placement';
+import { hasSurfaceControls } from './utils/has-surface-controls';
 const EMPTY_SURFACE_POSITIONS = [];
 const EMPTY_SURFACE_COMPONENTS = [];
 /**
@@ -43,12 +45,15 @@ export const BlockControlsRightSurfaces = ({
       return [];
     }
     const surfaceContext = createSurfaceContext(BLOCK_CONTROL_UI_CONTEXT, context);
+    if (!hasSurfaceControls(components) || !willSurfaceRender(components, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext)) {
+      return [];
+    }
     return [{
       ...target,
       blockControlsContext: context,
       surfaceContext
     }];
-  }), [activeNode, editorView, targets]);
+  }), [activeNode, components, editorView, targets]);
   const [placements, setPlacements] = useState(new Map());
   const animationFrameRef = useRef(undefined);
   useLayoutEffect(() => {

package/dist/es2019/ui/utils/has-surface-controls.js

@@ -0,0 +1,5 @@
+/**
+ * Structural toolbar nodes do not render a control by themselves. Treat a surface as populated
+ * only once a contributor has registered an interactive descendant.
+ */
+export const hasSurfaceControls = components => components.some(component => Boolean(component.component) || component.type === 'button' || component.type === 'menu' || component.type === 'menu-item' || component.type === 'nested-menu');

package/dist/esm/blockControlsPlugin.js

@@ -40,9 +40,8 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
   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 legacyBlockControlsEnabled = !registryBlockControlsEnabled;
-  var rightSurfaceEnabled = registryBlockControlsEnabled && isExperimentEnabled('platform_editor_block_control_right_surface');
   if (registryBlockControlsEnabled) {
-    var _api$uiControlRegistr;
+    var _api$uiControlRegistr, _api$uiControlRegistr2;
     api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register([BLOCK_CONTROLS_LEFT_SURFACE, _objectSpread(_objectSpread({}, BLOCK_CONTROLS_LEFT_SECTION), {}, {
       parents: [_objectSpread(_objectSpread({}, BLOCK_CONTROLS_LEFT_SURFACE), {}, {
         rank: 100
@@ -54,21 +53,19 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
     })].concat(_toConsumableArray(getBlockControlsSurfaceDragHandleComponents({
       api: api
     }))));
-    if (rightSurfaceEnabled) {
-      var _api$uiControlRegistr2;
-      // The right surface host stays generic: it only registers the toolbar/section/group
-      // hierarchy. Individual features contribute their own buttons into
-      // BLOCK_CONTROLS_RIGHT_GROUP from their own plugins, same as the left surface.
-      api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 || _api$uiControlRegistr2.actions.register([BLOCK_CONTROLS_RIGHT_SURFACE, _objectSpread(_objectSpread({}, BLOCK_CONTROLS_RIGHT_SECTION), {}, {
-        parents: [_objectSpread(_objectSpread({}, BLOCK_CONTROLS_RIGHT_SURFACE), {}, {
-          rank: 100
-        })]
-      }), _objectSpread(_objectSpread({}, BLOCK_CONTROLS_RIGHT_GROUP), {}, {
-        parents: [_objectSpread(_objectSpread({}, BLOCK_CONTROLS_RIGHT_SECTION), {}, {
-          rank: 100
-        })]
-      })]);
-    }
+
+    // The right surface host stays generic: it only registers the toolbar/section/group
+    // hierarchy. Individual features contribute their own buttons into
+    // BLOCK_CONTROLS_RIGHT_GROUP from their own plugins, same as the left surface.
+    api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 || _api$uiControlRegistr2.actions.register([BLOCK_CONTROLS_RIGHT_SURFACE, _objectSpread(_objectSpread({}, BLOCK_CONTROLS_RIGHT_SECTION), {}, {
+      parents: [_objectSpread(_objectSpread({}, BLOCK_CONTROLS_RIGHT_SURFACE), {}, {
+        rank: 100
+      })]
+    }), _objectSpread(_objectSpread({}, BLOCK_CONTROLS_RIGHT_GROUP), {}, {
+      parents: [_objectSpread(_objectSpread({}, BLOCK_CONTROLS_RIGHT_SECTION), {}, {
+        rank: 100
+      })]
+    })]);
   }
   return {
     name: 'blockControls',
@@ -138,7 +135,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, rightSurfaceEnabled);
+          return createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled);
         }
       }];
       if (editorExperiment('platform_editor_controls', 'variant1')) {
@@ -466,10 +463,10 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
       }, /*#__PURE__*/React.createElement(BlockControlsLeftSurfaces, {
         api: api,
         editorView: editorView
-      }), rightSurfaceEnabled ? /*#__PURE__*/React.createElement(BlockControlsRightSurfaces, {
+      }), /*#__PURE__*/React.createElement(BlockControlsRightSurfaces, {
         api: api,
         editorView: editorView
-      }) : null) : null);
+      })) : null);
     }
   };
 };

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

@@ -25,7 +25,10 @@ var clearPendingHoverSide = function clearPendingHoverSide(view) {
   cancelScheduledProcessForView(view);
 };
 var BLOCK_SELECTORS = '[data-node-anchor], [data-drag-handler-anchor-name]';
-var RIGHT_EDGE_SELECTOR = '[data-blocks-right-edge-button-container]';
+var LEGACY_RIGHT_EDGE_SELECTOR = '[data-blocks-right-edge-button-container]';
+var getRightControlSelector = function getRightControlSelector() {
+  return isExperimentEnabled('platform_editor_block_control_migration') ? "[data-editor-block-controls-side=\"right\"], ".concat(LEGACY_RIGHT_EDGE_SELECTOR) : LEGACY_RIGHT_EDGE_SELECTOR;
+};
 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;
@@ -117,7 +120,7 @@ var processHoverSide = function processHoverSide(view, api) {
 
   // When hovering over block controls directly, infer side from which control we're over.
   // This is more reliable than bounds when controls are in portals outside the editor DOM.
-  var rightEdgeElement = target === null || target === void 0 ? void 0 : target.closest(RIGHT_EDGE_SELECTOR);
+  var rightEdgeElement = target === null || target === void 0 ? void 0 : target.closest(getRightControlSelector());
   if (rightEdgeElement) {
     if (state !== null && state !== void 0 && state.isMouseOut && expValEqualsNoExposure('cc_maui_remix_button_hover_corridor', 'isEnabled', true)) {
       mouseEnter(view, 'right');

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

@@ -15,7 +15,7 @@ import { handleMouseEnter, handleMouseLeave, handleMouseMove } from './handle-mo
 /** Elements that extend the editor hover area (block controls, right-edge button, etc.) */
 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;
+  return isExperimentEnabled('platform_editor_block_control_migration') ? "[data-editor-block-controls-surface], [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;
 

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

@@ -1,4 +1,3 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; } }
@@ -437,16 +436,18 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
   // In view mode with right-side controls, remove any lingering drag handle decorations
   // (they may carry over from edit mode). Only remove drag handles specifically, not
   // the remix button decorations (those are managed separately via showInViewMode).
-  if (isViewMode && rightSideControlsEnabled) {
+  if (flags.legacyDragHandleEnabled && isViewMode && rightSideControlsEnabled) {
     var allHandleDecs = findHandleDec(decorations, 0, newState.doc.content.size);
     if (allHandleDecs.length > 0) {
       decorations = decorations.remove(allHandleDecs);
     }
   }
   if (shouldRemoveHandle) {
-    var _activeNode5, _activeNode6;
-    var oldHandle = findHandleDec(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.pos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.pos);
-    decorations = decorations.remove(oldHandle);
+    if (flags.legacyDragHandleEnabled) {
+      var _activeNode5, _activeNode6;
+      var oldHandle = findHandleDec(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.pos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.pos);
+      decorations = decorations.remove(oldHandle);
+    }
     // When removing the handle, also remove the anchor-marker node decorations
     // (data-active-drag-handle / data-active-quick-insert) so the DOM attributes
     // don't linger on nodes that are no longer active.
@@ -454,7 +455,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
     // after a doc change (e.g. pressing Enter splits a node), DecorationSet.map() can shift the
     // decoration to a different position, so a point-range search would miss it and leave a stale
     // attribute on the wrong DOM node.
-    if (expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true)) {
+    if ((flags.legacyDragHandleEnabled || nodeDecorationRegistry.length > 0) && expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true)) {
       var oldActiveNodeDec = findActiveDragHandleNodeDec(decorations, 0, newState.doc.content.size);
       decorations = decorations.remove(oldActiveNodeDec);
       var oldActiveQuickInsertDec = findActiveQuickInsertNodeDec(decorations, 0, newState.doc.content.size);
@@ -585,7 +586,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
         }
       }
     }
-    if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined &&
+    if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined && (quickInsertButtonEnabled || nodeDecorationRegistry.length > 0) &&
     // platform_editor_controls note: enables quick insert
     flags.toolbarFlagsEnabled && (!rightSideControlsEnabled || !isViewMode)) {
       var _latestActiveNode1;
@@ -815,7 +816,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
     // remove isEmptyDoc check and let decorations render and determine their own visibility
     // In view mode with right-side controls we render node decorations (right-edge button), not the
     // handle - so findHandleDec is always empty. Don't clear activeNode in that case.
-    var hasHandleOrViewModeControls = findHandleDec(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length > 0 || isViewMode && rightSideControlsEnabled || !flags.legacyDragHandleEnabled;
+    var hasHandleOrViewModeControls = !flags.legacyDragHandleEnabled || isViewMode && rightSideControlsEnabled || findHandleDec(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length > 0;
     // Keep the registry surface mounted while its Block Menu owns focus.
     var keepActiveNodeForOpenBlockMenu = !flags.legacyDragHandleEnabled && isMenuOpen && editorExperiment('platform_editor_block_menu', true);
     newActiveNode = meta !== null && meta !== void 0 && meta.editorBlurred && !keepActiveNodeForOpenBlockMenu || !(meta !== null && meta !== void 0 && meta.activeNode) && !hasHandleOrViewModeControls ? null : latestActiveNode;
@@ -884,7 +885,6 @@ 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 rightSurfaceEnabled = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
   var _getIntl = getIntl(),
     formatMessage = _getIntl.formatMessage;
   var isAdvancedLayoutEnabled = editorExperiment('advanced_layouts', true, {
@@ -899,7 +899,7 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
     surfaceNodePositionsEnabled: surfaceNodePositionsEnabled,
     toolbarFlagsEnabled: toolbarFlagsEnabled
   };
-  var resolvedSurfaces = surfaceNodePositionsEnabled ? [resolveSurface((_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(BLOCK_CONTROLS_LEFT_SURFACE)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [], BLOCK_CONTROLS_LEFT_SURFACE)].concat(_toConsumableArray(rightSurfaceEnabled ? [resolveSurface((_api$uiControlRegistr3 = api === null || api === void 0 || (_api$uiControlRegistr4 = api.uiControlRegistry) === null || _api$uiControlRegistr4 === void 0 ? void 0 : _api$uiControlRegistr4.actions.getComponents(BLOCK_CONTROLS_RIGHT_SURFACE)) !== null && _api$uiControlRegistr3 !== void 0 ? _api$uiControlRegistr3 : [], BLOCK_CONTROLS_RIGHT_SURFACE)] : [])) : [];
+  var resolvedSurfaces = surfaceNodePositionsEnabled ? [resolveSurface((_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(BLOCK_CONTROLS_LEFT_SURFACE)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [], BLOCK_CONTROLS_LEFT_SURFACE), resolveSurface((_api$uiControlRegistr3 = api === null || api === void 0 || (_api$uiControlRegistr4 = api.uiControlRegistry) === null || _api$uiControlRegistr4 === void 0 ? void 0 : _api$uiControlRegistr4.actions.getComponents(BLOCK_CONTROLS_RIGHT_SURFACE)) !== null && _api$uiControlRegistr3 !== void 0 ? _api$uiControlRegistr3 : [], BLOCK_CONTROLS_RIGHT_SURFACE)] : [];
   var anchorRectCache;
   if (!isAnchorSupported()) {
     anchorRectCache = new AnchorRectCache();
@@ -936,7 +936,7 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
         var decorationSet = (_key$getState2 = key.getState(state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.decorations;
         // In view mode with right-side controls, remove any lingering drag-handle decorations
         // (created in edit mode) that may not have been cleaned up on mode switch.
-        if (decorationSet && rightSideControlsEnabled && (api === null || api === void 0 || (_api$editorViewMode3 = api.editorViewMode) === null || _api$editorViewMode3 === void 0 || (_api$editorViewMode3 = _api$editorViewMode3.sharedState.currentState()) === null || _api$editorViewMode3 === void 0 ? void 0 : _api$editorViewMode3.mode) === 'view') {
+        if (decorationSet && legacyDragHandleEnabled && rightSideControlsEnabled && (api === null || api === void 0 || (_api$editorViewMode3 = api.editorViewMode) === null || _api$editorViewMode3 === void 0 || (_api$editorViewMode3 = _api$editorViewMode3.sharedState.currentState()) === null || _api$editorViewMode3 === void 0 ? void 0 : _api$editorViewMode3.mode) === 'view') {
           var handleDecs = findHandleDec(decorationSet, 0, state.doc.content.size);
           if (handleDecs.length > 0) {
             decorationSet = decorationSet.remove(handleDecs);
@@ -1178,10 +1178,15 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
         if (!(pluginState !== null && pluginState !== void 0 && pluginState.isDragging)) {
           var isResizerResizing = !!dom.querySelector('.is-resizing');
           var transaction = editorView.state.tr;
+          var shouldDispatch = false;
           if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.isResizerResizing) !== isResizerResizing) {
             transaction.setMeta('is-resizer-resizing', isResizerResizing);
+            shouldDispatch = true;
           }
-          if (!isResizerResizing) {
+
+          // Registry surfaces have their own ResizeObservers and absolute placement.
+          // Width metadata only drives legacy widget recreation.
+          if (legacyDragHandleEnabled && !isResizerResizing) {
             var _editorContentArea = entries[0].target;
             // Ignored via go/ees005
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -1193,8 +1198,11 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
               editorWidthLeft: editorWidthLeft,
               editorWidthRight: editorWidthRight
             }));
+            shouldDispatch = true;
+          }
+          if (shouldDispatch) {
+            editorView.dispatch(transaction);
           }
-          editorView.dispatch(transaction);
         }
       }));
       var shouldObserve = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? !isAnchorSupported() : true;

package/dist/esm/pm-plugins/utils/surface-node-positions.js

@@ -3,6 +3,7 @@ import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls
 import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/create-surface-context';
 import { willComponentRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
 import { createBlockControlsSurfaceContextForPosition } from '../../ui/block-controls-surface-context';
+import { hasSurfaceControls } from '../../ui/utils/has-surface-controls';
 var createSurfaceContextAtPosition = function createSurfaceContextAtPosition(state, position, activeNode) {
   var blockControlsContext = createBlockControlsSurfaceContextForPosition(state, position, activeNode);
   return blockControlsContext ? createSurfaceContext(BLOCK_CONTROL_UI_CONTEXT, blockControlsContext) : undefined;
@@ -26,8 +27,9 @@ export var getSurfaceNodePositions = function getSurfaceNodePositions(state, res
   var to = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : state.doc.content.size;
   var surfaces = resolvedSurfaces.flatMap(function (_ref2) {
     var childrenMap = _ref2.childrenMap,
+      components = _ref2.components,
       root = _ref2.root;
-    return root ? [{
+    return root && hasSurfaceControls(components) ? [{
       childrenMap: childrenMap,
       root: root
     }] : [];
@@ -67,8 +69,9 @@ export var updateSurfaceNodePositions = function updateSurfaceNodePositions(_ref
   }
   var surfaces = resolvedSurfaces.flatMap(function (_ref4) {
     var childrenMap = _ref4.childrenMap,
+      components = _ref4.components,
       root = _ref4.root;
-    return root ? [{
+    return root && hasSurfaceControls(components) ? [{
       childrenMap: childrenMap,
       root: root
     }] : [];

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

@@ -36,6 +36,7 @@ export var BlockControlsLeftSurface = function BlockControlsLeftSurface(_ref) {
   var isSticky = placement.height !== undefined;
   return /*#__PURE__*/React.createElement("div", {
     "data-editor-block-controls-surface": true,
+    "data-editor-block-controls-side": "left",
     "data-testid": source === 'stored' ? 'block-controls-left-surface-stored' : source === 'active' ? 'block-controls-left-surface-active' : 'block-controls-left-surface'
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Placement is resolved from the target node's runtime DOM geometry.
     ,

package/dist/esm/ui/block-controls-left-surfaces.js

@@ -14,12 +14,14 @@ import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls
 import { BLOCK_CONTROLS_LEFT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/create-surface-context';
+import { willSurfaceRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
 import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
 import { BlockControlsLeftSurface } from './block-controls-left-surface';
 import { createBlockControlsSurfaceContext, createBlockControlsSurfaceContextForPosition } from './block-controls-surface-context';
 import { getBlockControlsSurfaceTargets } from './block-controls-surface-targets';
 import { getNodeContentElement } from './utils/get-node-content-element';
 import { getAbsoluteSurfacePlacement, getSurfacePlacement } from './utils/get-surface-placement';
+import { hasSurfaceControls } from './utils/has-surface-controls';
 var EMPTY_SURFACE_POSITIONS = [];
 var EMPTY_SURFACE_COMPONENTS = [];
 export var BlockControlsLeftSurfaces = function BlockControlsLeftSurfaces(_ref) {
@@ -46,12 +48,15 @@ export var BlockControlsLeftSurfaces = function BlockControlsLeftSurfaces(_ref)
         return [];
       }
       var surfaceContext = createSurfaceContext(BLOCK_CONTROL_UI_CONTEXT, context);
+      if (!hasSurfaceControls(components) || !willSurfaceRender(components, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext)) {
+        return [];
+      }
       return [_objectSpread(_objectSpread({}, target), {}, {
         blockControlsContext: context,
         surfaceContext: surfaceContext
       })];
     });
-  }, [activeNode, editorView, targets]);
+  }, [activeNode, components, editorView, targets]);
   var _useState = useState(new Map()),
     _useState2 = _slicedToArray(_useState, 2),
     placements = _useState2[0],

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

@@ -33,6 +33,7 @@ export var BlockControlsRightSurface = function BlockControlsRightSurface(_ref)
   var isSticky = placement.height !== undefined;
   return /*#__PURE__*/React.createElement("div", {
     "data-editor-block-controls-surface": true,
+    "data-editor-block-controls-side": "right",
     "data-testid": source === 'stored' ? 'block-controls-right-surface-stored' : source === 'active' ? 'block-controls-right-surface-active' : 'block-controls-right-surface'
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Placement is resolved from the target node's runtime DOM geometry.
     ,

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

@@ -14,12 +14,14 @@ import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls
 import { BLOCK_CONTROLS_RIGHT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/create-surface-context';
+import { willSurfaceRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
 import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
 import { BlockControlsRightSurface } from './block-controls-right-surface';
 import { createBlockControlsSurfaceContext, createBlockControlsSurfaceContextForPosition } from './block-controls-surface-context';
 import { getBlockControlsSurfaceTargets } from './block-controls-surface-targets';
 import { getNodeContentElement } from './utils/get-node-content-element';
 import { getAbsoluteSurfacePlacement, getSurfacePlacement } from './utils/get-surface-placement';
+import { hasSurfaceControls } from './utils/has-surface-controls';
 var EMPTY_SURFACE_POSITIONS = [];
 var EMPTY_SURFACE_COMPONENTS = [];
 /**
@@ -51,12 +53,15 @@ export var BlockControlsRightSurfaces = function BlockControlsRightSurfaces(_ref
         return [];
       }
       var surfaceContext = createSurfaceContext(BLOCK_CONTROL_UI_CONTEXT, context);
+      if (!hasSurfaceControls(components) || !willSurfaceRender(components, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext)) {
+        return [];
+      }
       return [_objectSpread(_objectSpread({}, target), {}, {
         blockControlsContext: context,
         surfaceContext: surfaceContext
       })];
     });
-  }, [activeNode, editorView, targets]);
+  }, [activeNode, components, editorView, targets]);
   var _useState = useState(new Map()),
     _useState2 = _slicedToArray(_useState, 2),
     placements = _useState2[0],

package/dist/esm/ui/utils/has-surface-controls.js

@@ -0,0 +1,9 @@
+/**
+ * Structural toolbar nodes do not render a control by themselves. Treat a surface as populated
+ * only once a contributor has registered an interactive descendant.
+ */
+export var hasSurfaceControls = function hasSurfaceControls(components) {
+  return components.some(function (component) {
+    return Boolean(component.component) || component.type === 'button' || component.type === 'menu' || component.type === 'menu-item' || component.type === 'nested-menu';
+  });
+};

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, rightSurfaceEnabled?: boolean) => SafePlugin<PluginState | {
+export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI, nodeDecorationRegistry: NodeDecorationFactory[], rightSideControlsEnabled?: boolean, quickInsertButtonEnabled?: boolean, legacyDragHandleEnabled?: boolean) => SafePlugin<PluginState | {
     activeDropTargetNode: ActiveDropTargetNode | undefined;
     activeNode: any;
     blockMenuOptions: {

package/dist/types/ui/utils/has-surface-controls.d.ts

@@ -0,0 +1,6 @@
+import type { RegisterComponent } from '@atlaskit/editor-ui-control-model/types';
+/**
+ * Structural toolbar nodes do not render a control by themselves. Treat a surface as populated
+ * only once a contributor has registered an interactive descendant.
+ */
+export declare const hasSurfaceControls: (components: readonly RegisterComponent[]) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "17.4.1",
+	"version": "17.4.3",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -55,7 +55,7 @@
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/section-message": "^10.2.0",
 		"@atlaskit/theme": "^28.2.0",
-		"@atlaskit/tmp-editor-statsig": "^176.0.0",
+		"@atlaskit/tmp-editor-statsig": "^177.0.0",
 		"@atlaskit/tokens": "^16.11.0",
 		"@atlaskit/tooltip": "^24.3.0",
 		"@babel/runtime": "^7.0.0",