@atlaskit/editor-plugin-block-controls 20.0.3 → 20.1.0

package/dist/es2019/ui/global-styles.js

@@ -12,7 +12,7 @@ import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCal
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { ACTIVE_DRAG_HANDLE_ATTR, ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME, ACTIVE_QUICK_INSERT_ATTR, ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME, DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
+import { ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME, ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME, DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
 import { NODE_ANCHOR_ATTR_NAME } from './utils/dom-attr-name';
 
 /**
@@ -462,18 +462,68 @@ const staticControlsAnchorStyles = css({
     }
   }
 });
+const sparseSurfaceAnchorName = 'var(--block-controls-surface-anchor-name)';
 
-/**
- * Names the CSS anchor on top-level nodes, so the block controls surfaces can anchor to the blocks
- * they render against. Only top-level at the moment as we don't have use cases yet for persistent controls that are nested.
- */
-const surfaceAnchorStyles = css({
+// Inner node-view boxes own the visible geometry for these nodes. The root arm keeps a sparse
+// marker useful when a node view has not mounted its inner box yet.
+const sparseSurfaceAnchorStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-    [`[${NODE_ANCHOR_ATTR_NAME}]:not([${NODE_ANCHOR_ATTR_NAME}] [${NODE_ANCHOR_ATTR_NAME}]):not([${ACTIVE_DRAG_HANDLE_ATTR}], [${ACTIVE_QUICK_INSERT_ATTR}])`]: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-block-controls-surface-anchor][data-block-controls-surface-node-type="blockCard"]:has(.datasourceView-content-inner-wrap) .datasourceView-content-inner-wrap': {
+      anchorName: sparseSurfaceAnchorName
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-block-controls-surface-anchor][data-block-controls-surface-node-type="blockCard"]:not(:has(.datasourceView-content-inner-wrap))': {
+      anchorName: sparseSurfaceAnchorName
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-block-controls-surface-anchor][data-block-controls-surface-node-type="bodiedExtension"]:has(.extension-container[data-layout]) .extension-container[data-layout]': {
+      anchorName: sparseSurfaceAnchorName
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-block-controls-surface-anchor][data-block-controls-surface-node-type="bodiedExtension"]:not(:has(.extension-container[data-layout]))': {
+      anchorName: sparseSurfaceAnchorName
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-block-controls-surface-anchor][data-block-controls-surface-node-type="embedCard"]:has(.rich-media-item) .rich-media-item': {
+      anchorName: sparseSurfaceAnchorName
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-block-controls-surface-anchor][data-block-controls-surface-node-type="embedCard"]:not(:has(.rich-media-item))': {
+      anchorName: sparseSurfaceAnchorName
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-block-controls-surface-anchor][data-block-controls-surface-node-type="extension"]:has(.extension-container[data-layout]) .extension-container[data-layout]': {
+      anchorName: sparseSurfaceAnchorName
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-block-controls-surface-anchor][data-block-controls-surface-node-type="extension"]:not(:has(.extension-container[data-layout]))': {
+      anchorName: sparseSurfaceAnchorName
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-block-controls-surface-anchor][data-block-controls-surface-node-type="mediaSingle"]:has(.resizer-item) .resizer-item': {
+      anchorName: sparseSurfaceAnchorName
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-block-controls-surface-anchor][data-block-controls-surface-node-type="mediaSingle"]:not(:has(.resizer-item))': {
+      anchorName: sparseSurfaceAnchorName
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-block-controls-surface-anchor][data-block-controls-surface-node-type="multiBodiedExtension"]:has(.extension-container[data-layout]) .extension-container[data-layout]': {
+      anchorName: sparseSurfaceAnchorName
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-block-controls-surface-anchor][data-block-controls-surface-node-type="multiBodiedExtension"]:not(:has(.extension-container[data-layout]))': {
+      anchorName: sparseSurfaceAnchorName
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-block-controls-surface-anchor][data-block-controls-surface-node-type="table"]:has(.resizer-item) .resizer-item': {
+      anchorName: sparseSurfaceAnchorName
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-block-controls-surface-anchor][data-block-controls-surface-node-type="table"]:not(:has(.resizer-item))': {
+      anchorName: sparseSurfaceAnchorName
     }
   }
 });
@@ -517,33 +567,22 @@ export const GlobalStylesWrapper = ({
       isDragging: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.isDragging
     };
   });
-  const isDragging = expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true) ? isDraggingFromState : false;
+  const sparseSurfacesEnabled = isExperimentEnabled('platform_editor_block_control_migration');
+  const isDragging = sparseSurfacesEnabled || expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true) ? isDraggingFromState : false;
   const shouldRenderAnchors = isCSSAnchorSupported() && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true);
-
-  // The surfaces anchor to blocks they render against rather than only to the hovered one, so they
-  // need a name on every node. Added alongside whichever conditional rule applies rather than
-  // replacing it: this one matches only non-active nodes, so the two sets are disjoint.
-  //
-  // The migration check is what scopes this. Unlike the surfaces, this component renders for every
-  // editor, so without it the rule would name anchors on documents that have no surface to anchor.
-  const shouldRenderSurfaceAnchors =
-  // eslint-disable-next-line @atlaskit/platform/no-preconditioning -- browser capability, not a flag: an anchor name is meaningless where `anchor()` cannot resolve
-  Boolean(isCSSAnchorSupported()) && isExperimentEnabled('platform_editor_block_control_migration');
+  const sparseSurfaceAnchorsEnabled = Boolean(isCSSAnchorSupported()) && sparseSurfacesEnabled;
   const toolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
   return jsx(Global
   // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
   , {
-    styles: [globalStyles(), globalDnDStyle, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), editorExperiment('platform_editor_preview_panel_responsiveness', true, {
+    styles: [globalStyles(), globalDnDStyle, (!sparseSurfacesEnabled || isDragging) && (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration') ? extendedHoverZoneNext() : extendedHoverZone()), isDragging && (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration') ? extendedDragZoneNext : extendedDragZone), (!sparseSurfacesEnabled || isDragging) && editorExperiment('platform_editor_preview_panel_responsiveness', true, {
       exposure: true
-    }) ? expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined,
+    }) ? expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration') ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined,
     // platform_editor_controls note: this allows drag handles to render on empty lines
-    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true) ?
+    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (!sparseSurfacesEnabled || isDragging) && (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration') ? withRelativePosStyleNext : withRelativePosStyle), (!sparseSurfacesEnabled || isDragging) && (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration') ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle), (!sparseSurfacesEnabled || isDragging) && ((expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration')) && expValEquals('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone), sparseSurfaceAnchorsEnabled ? isDragging ? dragAnchorStyles : false : expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true) ?
     // dragAnchorStyles sets anchor-name on ALL nodes during drag (needed for drop target positioning).
     // staticControlsAnchorStyles handles anchor-name via node decorations for non-drag state.
     // shouldRenderAnchors guards both: only apply anchor styles on browsers that support CSS anchor positioning.
-    shouldRenderAnchors ? isDragging ? dragAnchorStyles : staticControlsAnchorStyles : false : shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles),
-    // Last so that, at equal specificity, the surfaces' own anchor names are the ones that
-    // stand. It cannot overlap the active-node rules above, which this selector excludes.
-    shouldRenderSurfaceAnchors && surfaceAnchorStyles]
+    shouldRenderAnchors ? isDragging ? dragAnchorStyles : staticControlsAnchorStyles : false : shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles), sparseSurfaceAnchorsEnabled && sparseSurfaceAnchorStyles]
   });
 };

package/dist/es2019/ui/inline-drop-target.js

@@ -9,6 +9,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
 import { akEditorBreakoutPadding } from '@atlaskit/editor-shared-styles';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -88,7 +89,7 @@ export const InlineDropTarget = ({
   const ref = useRef(null);
   const [isDraggedOver, setIsDraggedOver] = useState(false);
   const anchorName = useMemo(() => {
-    if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
+    if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration')) {
       var _getPos;
       return nextNode ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode, (_getPos = getPos()) !== null && _getPos !== void 0 ? _getPos : -1)) || '' : '';
     }
@@ -119,7 +120,7 @@ export const InlineDropTarget = ({
         innerContainerWidth = `calc(var(--ak-editor--line-length) * ${percentageWidth})`;
       }
     } else if (nextNode.type.name === 'table' && nextNode.firstChild) {
-      const tableWidthAnchor = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? typeof nextNodePos === 'number' ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode.firstChild, nextNodePos + 1)) || '' : '' : getNodeAnchor(nextNode.firstChild);
+      const tableWidthAnchor = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration') ? typeof nextNodePos === 'number' ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode.firstChild, nextNodePos + 1)) || '' : '' : getNodeAnchor(nextNode.firstChild);
       const isNumberColumnEnabled = Boolean(nextNode.attrs.isNumberColumnEnabled);
       if (isAnchorSupported()) {
         innerContainerWidth = isNumberColumnEnabled ? `calc(anchor-size(${tableWidthAnchor} width) + ${TABLE_NUMBERED_COLUMN_WIDTH}px)` : `anchor-size(${tableWidthAnchor} width)`;
@@ -132,7 +133,7 @@ export const InlineDropTarget = ({
         innerContainerWidth = `min(${nextNode.attrs.width}px, ${innerContainerWidth})`;
       }
     } else if (nextNode.type.name === 'mediaSingle' && nextNode.firstChild) {
-      if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
+      if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration')) {
         var _nextNode$firstChild;
         // check pos is a number
         if (typeof nextNodePos === 'number' && ((_nextNode$firstChild = nextNode.firstChild) === null || _nextNode$firstChild === void 0 ? void 0 : _nextNode$firstChild.type.name) === 'media') {
@@ -147,7 +148,7 @@ export const InlineDropTarget = ({
     let heightTargetAnchorName = targetAnchorName;
     if (nextNode.type.name === 'layoutSection' && nextNode.firstChild && nextNode.lastChild) {
       if (isLeftPosition) {
-        if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
+        if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration')) {
           if (typeof nextNodePos === 'number') {
             heightTargetAnchorName = (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode.firstChild, nextNodePos + 1)) || '';
           } else {
@@ -157,7 +158,7 @@ export const InlineDropTarget = ({
           heightTargetAnchorName = getNodeAnchor(nextNode.firstChild);
         }
       } else {
-        if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
+        if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration')) {
           if (typeof nextNodePos === 'number') {
             const lastNodeStartPos = nextNode.content.size - nextNode.lastChild.nodeSize;
             heightTargetAnchorName = (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode.lastChild, lastNodeStartPos + 1)) || '';

package/dist/es2019/ui/utils/anchor-name.js

@@ -1,3 +1,4 @@
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { findNodeDecs } from '../../pm-plugins/decorations-anchor';
 import { key } from '../../pm-plugins/main';
@@ -11,7 +12,7 @@ export const refreshAnchorName = ({
   anchorName
 }) => {
   let newAnchorName = anchorName || '';
-  if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
+  if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration')) {
     return newAnchorName;
   }
   const pos = getPos();

package/dist/es2019/ui/utils/dom-attr-name.js

@@ -1,14 +1,15 @@
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 export const NODE_ANCHOR_ATTR_NAME = 'data-node-anchor';
 export const NODE_NODE_TYPE_ATTR_NAME = 'data-prosemirror-node-name';
 export const getAnchorAttrName = () => {
-  if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
+  if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration')) {
     return NODE_ANCHOR_ATTR_NAME;
   }
   return 'data-drag-handler-anchor-name';
 };
 export const getTypeNameAttrName = () => {
-  if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
+  if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration')) {
     return NODE_NODE_TYPE_ATTR_NAME;
   }
   return 'data-drag-handler-node-type';

package/dist/es2019/ui/utils/get-surface-placement.js

@@ -96,6 +96,7 @@ const INVALID_ANCHOR_FALLBACK_TOP = `-${INVALID_ANCHOR_OFFSCREEN_PX}px`;
 const INVALID_ANCHOR_FALLBACK_BOTTOM = `${INVALID_ANCHOR_OFFSCREEN_PX}px`;
 export const getAnchoredSurfacePlacement = ({
   anchorName,
+  layout,
   nodeType,
   nodeTypeWithLevel,
   parentNodeType,
@@ -127,7 +128,7 @@ export const getAnchoredSurfacePlacement = ({
       } : {}),
       left: side === 'right' ? `calc(anchor(${anchorName} right) + ${gap}px)` : `anchor(${anchorName} left)`,
       positionAnchor: anchorName,
-      top: `calc(anchor(${anchorName} top, ${INVALID_ANCHOR_FALLBACK_TOP}) + ${topPositionAdjustment(nodeTypeWithLevel)}px)`,
+      top: `calc(anchor(${anchorName} top, ${INVALID_ANCHOR_FALLBACK_TOP}) + ${topPositionAdjustment(nodeTypeWithLevel, layout)}px)`,
       // The left side grows away from the node without knowing its own width, so it pulls itself
       // back past its own box and the gap. The right side grows into the margin, so the gap is
       // already folded into `left` above.

package/dist/esm/blockControlsPlugin.js

@@ -18,12 +18,14 @@ import { moveNode } from './editor-commands/move-node';
 import { moveNodeWithBlockMenu as _moveNodeWithBlockMenu } from './editor-commands/move-node-with-block-menu';
 import { moveToLayout } from './editor-commands/move-to-layout';
 import { canMoveNodeUpOrDown } from './editor-commands/utils/move-node-utils';
+import { getNodeTypeWithLevel } from './pm-plugins/decorations-common';
 import { firstNodeDecPlugin } from './pm-plugins/first-node-dec-plugin';
 import { createInteractionTrackingPlugin, interactionTrackingPluginKey } from './pm-plugins/interaction-tracking/pm-plugin';
 import { createPlugin, key } from './pm-plugins/main';
 import { startPreservingSelection as _startPreservingSelection, stopPreservingSelection as _stopPreservingSelection } from './pm-plugins/selection-preservation/editor-commands';
 import { selectionPreservationPluginKey } from './pm-plugins/selection-preservation/plugin-key';
 import { createSelectionPreservationPlugin } from './pm-plugins/selection-preservation/pm-plugin';
+import { createSparseSurfacesPlugin, sparseSurfacesKey } from './pm-plugins/sparse-surfaces';
 import { expandAndUpdateSelection as _expandAndUpdateSelection } from './pm-plugins/utils/expand-and-update-selection';
 import { selectNode } from './pm-plugins/utils/getSelection';
 import { BlockControlsLeftSurfaces } from './ui/block-controls-left-surfaces';
@@ -39,7 +41,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 legacyBlockControlsEnabled = !registryBlockControlsEnabled;
   if (registryBlockControlsEnabled) {
     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), {}, {
@@ -135,9 +136,17 @@ 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);
+          return createPlugin(api, getIntl, nodeViewPortalProviderAPI, registryBlockControlsEnabled ? [] : nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && !registryBlockControlsEnabled);
         }
       }];
+      if (registryBlockControlsEnabled) {
+        pmPlugins.push({
+          name: 'blockControlsSparseSurfaces',
+          plugin: function plugin() {
+            return createSparseSurfacesPlugin(api);
+          }
+        });
+      }
       if (editorExperiment('platform_editor_controls', 'variant1')) {
         pmPlugins.push({
           name: 'blockControlsInteractionTrackingPlugin',
@@ -156,7 +165,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
       // Not registered under the registry migration: the decoration puts an inline
       // `margin-top: 0` on the first document node, which fights features that render their own
       // content above it — a leading show-diff widget is left flush against the node below.
-      if (areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar)) && legacyBlockControlsEnabled) {
+      if (areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar)) && !registryBlockControlsEnabled) {
         pmPlugins.push({
           name: 'firstNodeDec',
           plugin: firstNodeDecPlugin
@@ -203,10 +212,34 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
           return tr;
         };
       },
-      toggleBlockMenu: function toggleBlockMenu(options) {
+      showControlAtPosition: function showControlAtPosition(pos, control, options) {
         return function (_ref6) {
-          var _api$userIntent, _api$blockControls2, _options$anchorName, _api$blockControls3;
           var tr = _ref6.tr;
+          var node = tr.doc.nodeAt(pos);
+          if (!node) {
+            return tr;
+          }
+          var anchorName = api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(node, pos);
+          if (!anchorName) {
+            return tr;
+          }
+          var currMeta = tr.getMeta(key);
+          tr.setMeta(key, _objectSpread(_objectSpread({}, currMeta), {}, {
+            activeNode: {
+              pos: pos,
+              anchorName: anchorName,
+              controlKey: control.key,
+              nodeType: getNodeTypeWithLevel(node),
+              handleOptions: options
+            }
+          }));
+          return tr;
+        };
+      },
+      toggleBlockMenu: function toggleBlockMenu(options) {
+        return function (_ref7) {
+          var _api$userIntent, _api$blockControls2, _options$triggerByNod, _options$anchorName, _api$blockControls3;
+          var tr = _ref7.tr;
           var currMeta = tr.getMeta(key);
           var currentUserIntent = api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || (_api$userIntent = _api$userIntent.sharedState.currentState()) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.currentUserIntent;
           var isMenuCurrentlyOpen = api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.sharedState.currentState()) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.isMenuOpen;
@@ -231,8 +264,9 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
             return tr;
           }
 
-          // Do not open menu on layoutColumn and close opened menu when layoutColumn drag handle is clicked
-          if (options !== null && options !== void 0 && (_options$anchorName = options.anchorName) !== null && _options$anchorName !== void 0 && _options$anchorName.includes('layoutColumn')) {
+          // Do not open the block menu for layout columns. Anchor resolution can lag behind
+          // a migrated surface click, so prefer the explicit node metadata when available.
+          if ((options === null || options === void 0 || (_options$triggerByNod = options.triggerByNode) === null || _options$triggerByNod === void 0 ? void 0 : _options$triggerByNod.nodeType) === 'layoutColumn' || options !== null && options !== void 0 && (_options$anchorName = options.anchorName) !== null && _options$anchorName !== void 0 && _options$anchorName.includes('layoutColumn')) {
             if (currentUserIntent === 'blockMenuOpen') {
               var _api$userIntent3;
               api === null || api === void 0 || (_api$userIntent3 = api.userIntent) === null || _api$userIntent3 === void 0 || _api$userIntent3.commands.setCurrentUserIntent('default')({
@@ -308,9 +342,9 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         };
       },
       setNodeDragged: function setNodeDragged(getPos, anchorName, nodeType) {
-        return function (_ref7) {
+        return function (_ref8) {
           var _api$userIntent6;
-          var tr = _ref7.tr;
+          var tr = _ref8.tr;
           var pos = getPos();
           if (pos === undefined) {
             return tr;
@@ -340,9 +374,9 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         };
       },
       setMultiSelectPositions: function setMultiSelectPositions(anchor, head) {
-        return function (_ref8) {
+        return function (_ref9) {
           var _api$selection, _$to$nodeBefore, _$from$nodeAfter;
-          var tr = _ref8.tr;
+          var tr = _ref9.tr;
           var _tr$selection = tr.selection,
             userAnchor = _tr$selection.anchor,
             userHead = _tr$selection.head;
@@ -394,8 +428,8 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         };
       },
       setSelectedViaDragHandle: function setSelectedViaDragHandle(isSelectedViaDragHandle) {
-        return function (_ref9) {
-          var tr = _ref9.tr;
+        return function (_ref0) {
+          var tr = _ref0.tr;
           var currMeta = tr.getMeta(key);
           return tr.setMeta(key, _objectSpread(_objectSpread({}, currMeta), {}, {
             isSelectedViaDragHandle: isSelectedViaDragHandle
@@ -437,8 +471,10 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         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 (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 : [];
+        var surfaces = sparseSurfacesKey.getState(editorState);
+        sharedState.surfaceNodePositions = surfaces === null || surfaces === void 0 ? void 0 : surfaces.candidates.positions;
+        sharedState.surfaceAnchors = surfaces === null || surfaces === void 0 ? void 0 : surfaces.anchors;
+        sharedState.surfaceActiveNodes = surfaces === null || surfaces === void 0 ? void 0 : surfaces.activeNodesByPosition;
       }
       if (editorExperiment('platform_editor_controls', 'variant1')) {
         var _interactionTrackingP2, _interactionTrackingP3, _interactionTrackingP4;
@@ -450,8 +486,8 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
       sharedState.preservedSelection = (_selectionPreservatio = selectionPreservationPluginKey.getState(editorState)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection;
       return sharedState;
     },
-    contentComponent: function contentComponent(_ref0) {
-      var editorView = _ref0.editorView;
+    contentComponent: function contentComponent(_ref1) {
+      var editorView = _ref1.editorView;
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GlobalStylesWrapper, {
         api: api
       }), registryBlockControlsEnabled && editorView && api ? /*#__PURE__*/React.createElement(SurfaceEditorViewContext.Provider, {

package/dist/esm/editor-commands/show-drag-handle.js

@@ -1,6 +1,8 @@
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { findNodeDecs } from '../pm-plugins/decorations-anchor';
+import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
 import { getDecorations, key } from '../pm-plugins/main';
 import { getNestedNodePosition, getNestedNodeStartingPosition } from '../pm-plugins/utils/getNestedNodePosition';
 import { NODE_ANCHOR_ATTR_NAME, NODE_NODE_TYPE_ATTR_NAME } from '../ui/utils/dom-attr-name';
@@ -9,7 +11,6 @@ var findParentPosForHandle = function findParentPosForHandle(state) {
   var $from = state.selection.$from;
   var _ref = key.getState(state) || {},
     activeNode = _ref.activeNode;
-
   // if a node handle is already focused, return the parent pos of that node (with focused handle)
   if (activeNode && (_activeNode$handleOpt = activeNode.handleOptions) !== null && _activeNode$handleOpt !== void 0 && _activeNode$handleOpt.isFocused) {
     var $activeNodePos = state.doc.resolve(activeNode.pos);
@@ -33,7 +34,7 @@ var findParentPosForHandle = function findParentPosForHandle(state) {
   }
 
   // else find closest parent node
-  return expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ?
+  return expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration') ?
   // With native anchor enabled, all nodes have anchor name attribute despite no drag handle support, e.g. listItem, caption,
   // as opposed to old approach, node decoration is only added to the node that have drag handle,
   // hence, we need to return the exact position of the node that can have drag handle
@@ -107,13 +108,24 @@ var findNextAnchorNode = function findNextAnchorNode(view) {
 };
 export var showDragHandleAtSelection = function showDragHandleAtSelection(api) {
   return function (state, _, view) {
+    if (api && isExperimentEnabled('platform_editor_block_control_migration')) {
+      var pos = findParentPosForHandle(state);
+      var node = pos === undefined ? undefined : state.doc.nodeAt(pos);
+      var anchorName = node && pos !== undefined ? api.core.actions.getAnchorIdForNode(node, pos) : undefined;
+      if (!node || pos === undefined || !anchorName) {
+        return false;
+      }
+      return api.core.actions.execute(api.blockControls.commands.showDragHandleAt(pos, anchorName, getNodeTypeWithLevel(node), {
+        isFocused: true
+      }));
+    }
     if (view && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
       var anchorNode = findNextAnchorNode(view);
       if (api && anchorNode) {
-        var pos = anchorNode.pos,
-          anchorName = anchorNode.anchorName,
+        var _pos = anchorNode.pos,
+          _anchorName = anchorNode.anchorName,
           nodeType = anchorNode.nodeType;
-        api.core.actions.execute(api.blockControls.commands.showDragHandleAt(pos, anchorName, nodeType, {
+        api.core.actions.execute(api.blockControls.commands.showDragHandleAt(_pos, _anchorName, nodeType, {
           isFocused: true
         }));
         return true;

package/dist/esm/pm-plugins/decorations-anchor.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getNodeAnchor, getNodeTypeWithLevel, NESTED_DEPTH, TYPE_NODE_DEC } from './decorations-common';
@@ -70,7 +71,7 @@ export var findNodeDecs = function findNodeDecs(state, decorations, from, to) {
 };
 export var nodeDecorations = function nodeDecorations(newState, from, to) {
   var decs = [];
-  if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
+  if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration')) {
     return [];
   }
   var docFrom = from === undefined || from < 0 ? 0 : from;

package/dist/esm/pm-plugins/decorations-drop-target-active.js

@@ -4,6 +4,7 @@ import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
 import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getNodeAnchor } from './decorations-common';
@@ -251,7 +252,7 @@ export var getActiveDropTargetDecorations = function getActiveDropTargetDecorati
       }
     }
   }
-  defaultActiveAnchorTracker.emit(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? api.core.actions.getAnchorIdForNode(anchorEmitNodeWithPos.node, anchorEmitNodeWithPos.pos) || '' : getNodeAnchor(anchorEmitNodeWithPos.node));
+  defaultActiveAnchorTracker.emit(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration') ? api.core.actions.getAnchorIdForNode(anchorEmitNodeWithPos.node, anchorEmitNodeWithPos.pos) || '' : getNodeAnchor(anchorEmitNodeWithPos.node));
   return {
     decsToAdd: decsToAdd,
     decsToRemove: decsToRemove

package/dist/esm/pm-plugins/decorations-drop-target.js

@@ -10,6 +10,7 @@ import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { nodeMargins } from '../ui/consts';
@@ -146,7 +147,7 @@ export var createLayoutDropTargetDecoration = function createLayoutDropTargetDec
     element.setAttribute('data-blocks-drop-target-container', 'true');
     element.setAttribute('data-blocks-drop-target-key', key);
     element.style.clear = 'unset';
-    var DropTargetLayoutComponent = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? DropTargetLayoutNativeAnchorSupport : DropTargetLayout;
+    var DropTargetLayoutComponent = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration') ? DropTargetLayoutNativeAnchorSupport : DropTargetLayout;
     nodeViewPortalProviderAPI.render(function () {
       return /*#__PURE__*/createElement(DropTargetLayoutComponent, _objectSpread(_objectSpread({}, props), {}, {
         getPos: getPos,

package/dist/esm/pm-plugins/decorations-surface-anchor.js

@@ -0,0 +1,65 @@
+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; } }
+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 { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export var TYPE_SURFACE_ANCHOR_DEC = 'block-controls-surface-anchor';
+export var SURFACE_ANCHOR_ATTR = 'data-block-controls-surface-anchor';
+export var SURFACE_NODE_TYPE_ATTR = 'data-block-controls-surface-node-type';
+export var SURFACE_ANCHOR_VARIABLE = '--block-controls-surface-anchor-name';
+
+/**
+ * These node views expose the box used by the measured placement fallback rather than their
+ * ProseMirror node wrapper. The marker carries the name through a custom property so sparse CSS
+ * can name that inner box without adding a widget or changing the node view.
+ */
+var INNER_CONTENT_NODE_TYPES = new Set(['blockCard', 'bodiedExtension', 'embedCard', 'extension', 'mediaSingle', 'multiBodiedExtension', 'table']);
+var getMarkerStyle = function getMarkerStyle(nodeType, anchorName) {
+  var inheritedName = "".concat(SURFACE_ANCHOR_VARIABLE, ": ").concat(anchorName, ";");
+
+  // Inner boxes get their anchor from the sparse global selector. Naming only the node wrapper
+  // would position media/table/extension controls against the wrapper instead of visible content.
+  return INNER_CONTENT_NODE_TYPES.has(nodeType) ? inheritedName : "".concat(inheritedName, " anchor-name: ").concat(anchorName, ";");
+};
+
+/**
+ * Builds sparse CSS anchor decorations from already-qualified cached positions. Anchor identity is
+ * supplied by the editor's native node-anchor provider so sparse surfaces and consumers share the
+ * same `data-node-anchor`.
+ */
+export var createSurfaceAnchorDecorations = function createSurfaceAnchorDecorations(state, positions, resolveAnchorName, previousAnchors) {
+  var anchors = new Map();
+  var decorations = [];
+  var _iterator = _createForOfIteratorHelper(positions),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var position = _step.value;
+      if (anchors.has(position)) {
+        continue;
+      }
+      var node = state.doc.nodeAt(position);
+      if (!(node !== null && node !== void 0 && node.isBlock)) {
+        continue;
+      }
+      var anchorName = resolveAnchorName(node, position, previousAnchors === null || previousAnchors === void 0 ? void 0 : previousAnchors.get(position));
+      if (!anchorName) {
+        continue;
+      }
+      anchors.set(position, anchorName);
+      decorations.push(Decoration.node(position, position + node.nodeSize, _defineProperty(_defineProperty(_defineProperty({}, SURFACE_ANCHOR_ATTR, anchorName), SURFACE_NODE_TYPE_ATTR, node.type.name), "style", getMarkerStyle(node.type.name, anchorName)), {
+        type: TYPE_SURFACE_ANCHOR_DEC,
+        anchorName: anchorName,
+        nodeType: node.type.name
+      }));
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return {
+    anchors: anchors,
+    decorations: DecorationSet.create(state.doc, decorations)
+  };
+};

package/dist/esm/pm-plugins/handle-mouse-down.js

@@ -1,4 +1,5 @@
 import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 export var handleMouseDown = function handleMouseDown(api) {
   return function (view, event) {
@@ -13,7 +14,7 @@ export var handleMouseDown = function handleMouseDown(api) {
       if (!rootNode) {
         return false;
       }
-      if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
+      if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration')) {
         var _rootNode$type$name, _rootNode$type$name2;
         var anchorName = api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(rootNode, rootPos);
 

package/dist/esm/pm-plugins/handle-mouse-over.js

@@ -2,6 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import memoizeOne from 'memoize-one';
 import { isMultiBlockSelection } from '@atlaskit/editor-common/selection';
 import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -133,7 +134,7 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
   // Ignored via go/ees005
   // eslint-disable-next-line @atlaskit/editor/no-as-casting
   var target = event.target;
-  var isNativeAnchorSupported = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true);
+  var isNativeAnchorSupported = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration');
   if (target !== null && target !== void 0 && (_target$classList = target.classList) !== null && _target$classList !== void 0 && _target$classList.contains('ProseMirror')) {
     return false;
   }
@@ -205,7 +206,7 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
     // This must happen before anchorName is read so the correct node's handle is shown.
     rootElement = redirectParagraphToWrappedMedia(rootElement, isNativeAnchorSupported);
     var anchorName;
-    if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
+    if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration')) {
       anchorName = rootElement.getAttribute(getAnchorAttrName());
 
       // don't show handles if we can't find an anchor