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

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

@@ -10,9 +10,9 @@ import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-che
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced } from '@atlaskit/editor-shared-styles';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
-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 { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+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

@@ -4,10 +4,12 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
+
 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';
@@ -87,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)) || '' : '';
     }
@@ -118,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)`;
@@ -131,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') {
@@ -146,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 {
@@ -156,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/use-block-controls-surface-drag-source.js

@@ -9,8 +9,8 @@ import { defaultActiveAnchorTracker } from '../pm-plugins/utils/active-anchor-tr
 import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
 import { isCollapsedHeading, prepareCollapsedHeadingSelection } from '../pm-plugins/utils/collapsed-heading';
 import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
-import { dragPreview } from './drag-preview';
 import { getNodeMarginsForDragPreview, getNodeSpacingForDragPreview } from './block-controls-surface-drag-handle-utils';
+import { dragPreview } from './drag-preview';
 const EDITOR_BLOCKS_DRAG_INIT = 'Editor Blocks Drag Initialization Time';
 /**
  * Registry surface drag source. This intentionally duplicates the stable widget handle's drag

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/es2019/ui/utils/partition-components-by-persistence.js

@@ -1,6 +1,6 @@
 import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls/block-control-ui-context';
-import { getComponentIdentity, resolveSurface, willComponentRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
 import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/create-surface-context';
+import { getComponentIdentity, resolveSurface, willComponentRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
 /**
  * Split registered components into two groups:
  * those that should be rendered persistently and those that should only be rendered on hover.

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

@@ -10,8 +10,8 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const RIGHT_CONTROL_HIDE_DELAY_MS = 150;
 const baseStyles = xcss({
   transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out'

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/move-node.js

@@ -16,8 +16,8 @@ import { findChildrenByType, findParentNodeOfType, findParentNodeOfTypeClosestTo
 import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { key } from '../pm-plugins/main';
 import { attachMoveNodeAnalytics, getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
 import { isCollapsedHeading, updateCollapsedHeadingAfterMove } from '../pm-plugins/utils/collapsed-heading';

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/entry-points/block-decoration-utils-anchor-name.js

@@ -1,2 +1,3 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
+
 export { refreshAnchorName } from '../ui/utils/anchor-name';

package/dist/esm/entry-points/block-decoration-utils-consts.js

@@ -1,2 +1,3 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
+
 export { rootElementGap, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from '../ui/consts';

package/dist/esm/entry-points/block-decoration-utils-dom-attr-name.js

@@ -1,2 +1,3 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
+
 export { getAnchorAttrName } from '../ui/utils/dom-attr-name';

package/dist/esm/entry-points/block-decoration-utils-drag-handle-positions.js

@@ -1,2 +1,3 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
+
 export { getControlBottomCSSValue, getControlHeightCSSValue, getNodeHeight, getTopPosition, shouldBeSticky } from '../pm-plugins/utils/drag-handle-positions';

package/dist/esm/entry-points/block-decoration-utils-visibility-container.js

@@ -1,2 +1,3 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
+
 export { VisibilityContainer } from '../ui/visibility-container';

package/dist/esm/entry-points/block-decoration-utils-widget-positions.js

@@ -1,2 +1,3 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
+
 export { getRightPositionForRootElement } from '../pm-plugins/utils/widget-positions';

package/dist/esm/entry-points/blockControlsPlugin.js

@@ -1,2 +1,3 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
+
 export { blockControlsPlugin } from '../blockControlsPlugin';

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

@@ -1,7 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+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';
 var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
 export var IGNORE_NODES_NEXT = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption'];
@@ -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,8 +4,9 @@ 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 { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+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';
 import { createDropTargetDecoration, createLayoutDropTargetDecoration } from './decorations-drop-target';
 import { findSurroundingNodes } from './decorations-find-surrounding-nodes';
@@ -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,8 +10,9 @@ 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 { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+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';
 import { DropTarget, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET } from '../ui/drop-target';
 import { DropTargetLayout, DropTargetLayoutNativeAnchorSupport } from '../ui/drop-target-layout';
@@ -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,