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

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

@@ -1,7 +1,6 @@
 import rafSchedule from 'raf-schd';
 import { getDocument } from '@atlaskit/browser-apis';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { BLOCK_CONTROLS_LEFT_SURFACE, BLOCK_CONTROLS_RIGHT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { getNodeIdProvider } from '@atlaskit/editor-common/node-anchor';
 import { isMeasuring, startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
@@ -12,31 +11,31 @@ import { EDIT_AREA_ID } from '@atlaskit/editor-common/ui';
 import { isEmptyDocument } from '@atlaskit/editor-common/utils';
 import { PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { resolveSurface } from '@atlaskit/editor-ui-control-model/surface-renderer';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
-import { combine } from '@atlaskit/pragmatic-drag-and-drop/utils/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/utils/combine';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { BLOCK_CONTROLS_SURFACE_SELECTOR } from '../ui/consts';
 import { getAnchorAttrName } from '../ui/utils/dom-attr-name';
 import { findNodeDecs, nodeDecorations } from './decorations-anchor';
+import { getNodeTypeWithLevel } from './decorations-common';
 import { createActiveDragHandleNodeDecoration, dragHandleDecoration, emptyParagraphNodeDecorations, findActiveDragHandleNodeDec, findHandleDec, TYPE_ACTIVE_HANDLE_DEC } from './decorations-drag-handle';
 import { dropTargetDecorations, findDropTargetDecs } from './decorations-drop-target';
 import { getActiveDropTargetDecorations } from './decorations-drop-target-active';
 import { createActiveQuickInsertNodeDecoration, findActiveQuickInsertNodeDec, findQuickInsertInsertButtonDecoration, quickInsertButtonDecoration, TYPE_ACTIVE_QUICK_INSERT_NODE } from './decorations-quick-insert-button';
 import { handleMouseDown } from './handle-mouse-down';
 import { handleMouseOver } from './handle-mouse-over';
+import { handleSparseMouseOver } from './handle-sparse-mouse-over';
 import { boundKeydownHandler } from './keymap';
 import { defaultActiveAnchorTracker } from './utils/active-anchor-tracker';
 import { getMultiSelectAnalyticsAttributes } from './utils/analytics';
 import { AnchorRectCache, isAnchorSupported } from './utils/anchor-utils';
 import { selectNode } from './utils/getSelection';
 import { getSelectedSlicePosition } from './utils/selection';
-import { getSurfaceNodePositions, updateSurfaceNodePositions } from './utils/surface-node-positions';
 import { getTrMetadata } from './utils/transactions';
 export const key = new PluginKey('blockControls');
 const EDITOR_BLOCKS_DRAG_INIT = 'Editor Blocks Drag Initialization Time';
@@ -233,16 +232,17 @@ const getDecorationAtPos = (state, decorations, pos, to) => {
   const nodeDecAtActivePos = nodeDecsAtActivePos.pop();
   return nodeDecAtActivePos;
 };
-export const apply = (api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled = false, quickInsertButtonEnabled = true, anchorRectCache, resizeObserverWidth, pragmaticCleanup, resolvedSurfaces = [], limitedModeTeardown) => {
-  var _meta$multiSelectDnD, _api$editorViewMode, _api$editorViewMode$s, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging2, _meta$isDragging3, _meta$toggleMenu, _meta$toggleMenu2, _meta$toggleMenu3, _meta$toggleMenu4, _meta$toggleMenu5, _meta$toggleMenu6, _meta$toggleMenu7, _meta$toggleMenu8, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
+export const apply = (api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled = false, quickInsertButtonEnabled = true, anchorRectCache, resizeObserverWidth, pragmaticCleanup, limitedModeTeardown) => {
+  var _meta$multiSelectDnD, _api$editorViewMode, _api$editorViewMode$s, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging2, _meta$toggleMenu, _meta$isDragging3, _meta$toggleMenu2, _meta$toggleMenu3, _meta$toggleMenu4, _meta$toggleMenu5, _meta$toggleMenu6, _meta$toggleMenu7, _meta$toggleMenu8, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
   let {
     activeNode,
     decorations,
     isResizerResizing,
-    multiSelectDnD,
+    multiSelectDnD
+  } = currentState;
+  const {
     surfaceNodePositions
   } = currentState;
-  const previousActiveNode = activeNode;
   const {
     editorHeight,
     editorWidthLeft,
@@ -391,13 +391,28 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
         if (activeNode.rootPos !== undefined) {
           mappedRootPos = tr.mapping.mapResult(activeNode.rootPos, -1);
         }
+        let mappedNodeType = activeNode.nodeType;
+        let mappedRootNodeType = activeNode.rootNodeType;
+        // Sparse mode does not redraw the old decorations. A block-type transaction may report
+        // a text range that excludes the active block position, so always refresh the already
+        // active node and root from the new document (for example, paragraph → heading-1).
+        if (isExperimentEnabled('platform_editor_block_control_migration')) {
+          const mappedNode = newState.doc.nodeAt(mappedPos.pos);
+          if (mappedNode !== null && mappedNode !== void 0 && mappedNode.isBlock) {
+            mappedNodeType = getNodeTypeWithLevel(mappedNode);
+          }
+          const mappedRootNode = mappedRootPos ? mappedRootPos.pos === mappedPos.pos && mappedNode ? mappedNode : newState.doc.nodeAt(mappedRootPos.pos) : undefined;
+          if (mappedRootNode !== null && mappedRootNode !== void 0 && mappedRootNode.isBlock) {
+            mappedRootNodeType = getNodeTypeWithLevel(mappedRootNode);
+          }
+        }
         activeNode = {
           pos: mappedPos.pos,
           anchorName: activeNode.anchorName,
-          nodeType: activeNode.nodeType,
+          nodeType: mappedNodeType,
           rootPos: (_mappedRootPos$pos = (_mappedRootPos = mappedRootPos) === null || _mappedRootPos === void 0 ? void 0 : _mappedRootPos.pos) !== null && _mappedRootPos$pos !== void 0 ? _mappedRootPos$pos : activeNode.rootPos,
           rootAnchorName: activeNode.rootAnchorName,
-          rootNodeType: activeNode.rootNodeType
+          rootNodeType: mappedRootNodeType
         };
       }
     }
@@ -433,7 +448,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
   const isNodeDecsMissing = isDecSetEmpty || maybeNodeCountChanged || editorExperiment('platform_editor_breakout_resizing', true) && hasJustFinishedResizing;
   const shouldRedrawNodeDecs = !isResizerResizing && (isNodeDecsMissing || (meta === null || meta === void 0 ? void 0 : meta.isDragging)) &&
   // Skip expensive anchor node decoration recalculations when native anchor support is enabled
-  !expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true);
+  !(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration'));
   let isActiveNodeModified = false;
   if (api && shouldRedrawNodeDecs) {
     const oldNodeDecs = findNodeDecs(newState, decorations, from, to);
@@ -507,14 +522,14 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
   // In view mode with right-side controls, remove any lingering drag handle decorations
   // (they may carry over from edit mode). Only remove drag handles specifically, not
   // the remix button decorations (those are managed separately via showInViewMode).
-  if (flags.legacyDragHandleEnabled && isViewMode && rightSideControlsEnabled) {
+  if (!isExperimentEnabled('platform_editor_block_control_migration') && isViewMode && rightSideControlsEnabled) {
     const allHandleDecs = findHandleDec(decorations, 0, newState.doc.content.size);
     if (allHandleDecs.length > 0) {
       decorations = decorations.remove(allHandleDecs);
     }
   }
   if (shouldRemoveHandle) {
-    if (flags.legacyDragHandleEnabled) {
+    if (!isExperimentEnabled('platform_editor_block_control_migration')) {
       var _activeNode5, _activeNode6;
       const oldHandle = findHandleDec(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.pos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.pos);
       decorations = decorations.remove(oldHandle);
@@ -526,7 +541,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     // after a doc change (e.g. pressing Enter splits a node), DecorationSet.map() can shift the
     // decoration to a different position, so a point-range search would miss it and leave a stale
     // attribute on the wrong DOM node.
-    if ((flags.legacyDragHandleEnabled || nodeDecorationRegistry.length > 0) && expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true)) {
+    if ((!isExperimentEnabled('platform_editor_block_control_migration') || nodeDecorationRegistry.length > 0) && expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true)) {
       const oldActiveNodeDec = findActiveDragHandleNodeDec(decorations, 0, newState.doc.content.size);
       decorations = decorations.remove(oldActiveNodeDec);
       const oldActiveQuickInsertDec = findActiveQuickInsertNodeDec(decorations, 0, newState.doc.content.size);
@@ -560,7 +575,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
   } else if (api) {
     var _latestActiveNode5, _latestActiveNode10;
     // The registry surface replaces the legacy drag-handle decorations during migration.
-    if (flags.legacyDragHandleEnabled && shouldRecreateHandle && (!rightSideControlsEnabled || !isViewMode)) {
+    if (!isExperimentEnabled('platform_editor_block_control_migration') && shouldRecreateHandle && (!rightSideControlsEnabled || !isViewMode)) {
       var _activeNode11, _activeNode12, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
       const oldHandle = findHandleDec(decorations, (_activeNode11 = activeNode) === null || _activeNode11 === void 0 ? void 0 : _activeNode11.pos, (_activeNode12 = activeNode) === null || _activeNode12 === void 0 ? void 0 : _activeNode12.pos);
       decorations = decorations.remove(oldHandle);
@@ -577,7 +592,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
       });
       decorations = decorations.add(newState.doc, [handleDec]);
     }
-    if ((flags.legacyDragHandleEnabled ||
+    if ((!isExperimentEnabled('platform_editor_block_control_migration') ||
     // nodeDecorationRegistry consumers (e.g. the legacy Remix button) rely
     // on that same anchor-name for their own CSS anchor() positioning, so this must still run
     // when such a consumer exists even if the legacy drag handle itself is disabled.
@@ -788,7 +803,10 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     }
   }
   const isEmptyDoc = isEmptyDocument(newState.doc);
-  if (isEmptyDoc && !expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
+  if (isExperimentEnabled('platform_editor_block_control_migration') && (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false) {
+    decorations = decorations.remove(findNodeDecs(newState, decorations));
+  }
+  if (isEmptyDoc && !(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration'))) {
     const hasNodeDecoration = !!findNodeDecs(newState, decorations).length;
     if (!hasNodeDecoration) {
       decorations = decorations.add(newState.doc, [emptyParagraphNodeDecorations()]);
@@ -801,27 +819,31 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     // remove isEmptyDoc check and let decorations render and determine their own visibility
     // In view mode with right-side controls we render node decorations (right-edge button), not the
     // handle - so findHandleDec is always empty. Don't clear activeNode in that case.
-    const hasHandleOrViewModeControls = !flags.legacyDragHandleEnabled || isViewMode && rightSideControlsEnabled || findHandleDec(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length > 0;
+    const hasHandleOrViewModeControls = isExperimentEnabled('platform_editor_block_control_migration') || isViewMode && rightSideControlsEnabled || findHandleDec(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length > 0;
     // Keep the registry surface mounted while its Block Menu owns focus.
-    const keepActiveNodeForOpenBlockMenu = !flags.legacyDragHandleEnabled && isMenuOpen;
+    const keepActiveNodeForOpenBlockMenu = isExperimentEnabled('platform_editor_block_control_migration') && isMenuOpen;
     newActiveNode = meta !== null && meta !== void 0 && meta.editorBlurred && !keepActiveNodeForOpenBlockMenu || !(meta !== null && meta !== void 0 && meta.activeNode) && !hasHandleOrViewModeControls ? null : latestActiveNode;
   } else {
     var _latestActiveNode13, _latestActiveNode14;
-    newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && flags.legacyDragHandleEnabled && findHandleDec(decorations, (_latestActiveNode13 = latestActiveNode) === null || _latestActiveNode13 === void 0 ? void 0 : _latestActiveNode13.pos, (_latestActiveNode14 = latestActiveNode) === null || _latestActiveNode14 === void 0 ? void 0 : _latestActiveNode14.pos).length === 0 ? null : latestActiveNode;
-  }
-  if (flags.surfaceNodePositionsEnabled && resolvedSurfaces.length > 0) {
-    surfaceNodePositions = updateSurfaceNodePositions({
-      activeNode: newActiveNode,
-      currentPositions: surfaceNodePositions,
-      from,
-      newState,
-      previousActiveNode,
-      resolvedSurfaces,
-      to,
-      tr
-    });
+    newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && !isExperimentEnabled('platform_editor_block_control_migration') && findHandleDec(decorations, (_latestActiveNode13 = latestActiveNode) === null || _latestActiveNode13 === void 0 ? void 0 : _latestActiveNode13.pos, (_latestActiveNode14 = latestActiveNode) === null || _latestActiveNode14 === void 0 ? void 0 : _latestActiveNode14.pos).length === 0 ? null : latestActiveNode;
   }
   let isMenuOpenNew = isMenuOpen;
+  let nextMenuTriggerByNode = (meta === null || meta === void 0 ? void 0 : (_meta$toggleMenu = meta.toggleMenu) === null || _meta$toggleMenu === void 0 ? void 0 : _meta$toggleMenu.triggerByNode) || menuTriggerByNode;
+  if (isExperimentEnabled('platform_editor_block_control_migration') && tr.docChanged && menuTriggerByNode && !(meta !== null && meta !== void 0 && meta.toggleMenu)) {
+    var _menuTriggerByNode$ro, _newState$doc$nodeAt4;
+    const mapped = tr.mapping.mapResult(menuTriggerByNode.pos, 1);
+    const mappedRoot = tr.mapping.mapResult((_menuTriggerByNode$ro = menuTriggerByNode.rootPos) !== null && _menuTriggerByNode$ro !== void 0 ? _menuTriggerByNode$ro : menuTriggerByNode.pos, 1);
+    if (mapped.deleted || mappedRoot.deleted || !((_newState$doc$nodeAt4 = newState.doc.nodeAt(mapped.pos)) !== null && _newState$doc$nodeAt4 !== void 0 && _newState$doc$nodeAt4.isBlock)) {
+      nextMenuTriggerByNode = undefined;
+      isMenuOpenNew = false;
+    } else {
+      nextMenuTriggerByNode = {
+        ...menuTriggerByNode,
+        pos: mapped.pos,
+        rootPos: mappedRoot.pos
+      };
+    }
+  }
   if (meta !== null && meta !== void 0 && meta.closeMenu) {
     isMenuOpenNew = false;
   } else if (meta !== null && meta !== void 0 && meta.toggleMenu) {
@@ -841,8 +863,8 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     activeDropTargetNode: currentActiveDropTargetNode,
     isDragging: (_meta$isDragging3 = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging3 !== void 0 ? _meta$isDragging3 : isDragging,
     isMenuOpen: isMenuOpenNew,
-    menuTriggerBy: (meta === null || meta === void 0 ? void 0 : (_meta$toggleMenu = meta.toggleMenu) === null || _meta$toggleMenu === void 0 ? void 0 : _meta$toggleMenu.anchorName) || menuTriggerBy,
-    menuTriggerByNode: (meta === null || meta === void 0 ? void 0 : (_meta$toggleMenu2 = meta.toggleMenu) === null || _meta$toggleMenu2 === void 0 ? void 0 : _meta$toggleMenu2.triggerByNode) || menuTriggerByNode,
+    menuTriggerBy: (meta === null || meta === void 0 ? void 0 : (_meta$toggleMenu2 = meta.toggleMenu) === null || _meta$toggleMenu2 === void 0 ? void 0 : _meta$toggleMenu2.anchorName) || menuTriggerBy,
+    menuTriggerByNode: nextMenuTriggerByNode,
     blockMenuOptions: {
       canMoveUp: (meta === null || meta === void 0 ? void 0 : (_meta$toggleMenu3 = meta.toggleMenu) === null || _meta$toggleMenu3 === void 0 ? void 0 : _meta$toggleMenu3.moveUp) !== undefined ? meta === null || meta === void 0 ? void 0 : (_meta$toggleMenu4 = meta.toggleMenu) === null || _meta$toggleMenu4 === void 0 ? void 0 : _meta$toggleMenu4.moveUp : blockMenuOptions === null || blockMenuOptions === void 0 ? void 0 : blockMenuOptions.canMoveUp,
       canMoveDown: (meta === null || meta === void 0 ? void 0 : (_meta$toggleMenu5 = meta.toggleMenu) === null || _meta$toggleMenu5 === void 0 ? void 0 : _meta$toggleMenu5.moveDown) !== undefined ? meta === null || meta === void 0 ? void 0 : (_meta$toggleMenu6 = meta.toggleMenu) === null || _meta$toggleMenu6 === void 0 ? void 0 : _meta$toggleMenu6.moveDown : blockMenuOptions === null || blockMenuOptions === void 0 ? void 0 : blockMenuOptions.canMoveDown,
@@ -860,8 +882,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     isSelectedViaDragHandle: isSelectedViaDragHandleNew
   };
 };
-export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled = false, quickInsertButtonEnabled = true, legacyDragHandleEnabled = true) => {
-  var _api$uiControlRegistr, _api$uiControlRegistr2, _api$uiControlRegistr3, _api$uiControlRegistr4;
+export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled = false, quickInsertButtonEnabled = true) => {
   const {
     formatMessage
   } = getIntl();
@@ -869,15 +890,9 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
     exposure: true
   });
   const toolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
-  // Mirrors `registryBlockControlsEnabled` in blockControlsPlugin.tsx: `legacyDragHandleEnabled` is
-  // only false once that gate is on.
-  const surfaceNodePositionsEnabled = !legacyDragHandleEnabled;
   const flags = {
-    legacyDragHandleEnabled,
-    surfaceNodePositionsEnabled,
     toolbarFlagsEnabled
   };
-  const resolvedSurfaces = surfaceNodePositionsEnabled ? [resolveSurface((_api$uiControlRegistr = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(BLOCK_CONTROLS_LEFT_SURFACE)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [], BLOCK_CONTROLS_LEFT_SURFACE), resolveSurface((_api$uiControlRegistr3 = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr4 = api.uiControlRegistry) === null || _api$uiControlRegistr4 === void 0 ? void 0 : _api$uiControlRegistr4.actions.getComponents(BLOCK_CONTROLS_RIGHT_SURFACE)) !== null && _api$uiControlRegistr3 !== void 0 ? _api$uiControlRegistr3 : [], BLOCK_CONTROLS_RIGHT_SURFACE)] : [];
   let anchorRectCache;
   if (!isAnchorSupported()) {
     anchorRectCache = new AnchorRectCache();
@@ -891,13 +906,10 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
   return new SafePlugin({
     key,
     state: {
-      init(_config, editorState) {
-        return {
-          ...initialState,
-          surfaceNodePositions: resolvedSurfaces.length > 0 ? getSurfaceNodePositions(editorState, resolvedSurfaces) : []
-        };
-      },
-      apply: (tr, currentState, _, newState) => apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled, anchorRectCache, resizeObserverWidth, pragmaticCleanup, resolvedSurfaces, limitedModeTeardown)
+      init: () => ({
+        ...initialState
+      }),
+      apply: (tr, currentState, _, newState) => apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled, anchorRectCache, resizeObserverWidth, pragmaticCleanup, limitedModeTeardown)
     },
     props: {
       decorations: state => {
@@ -917,7 +929,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
         let decorationSet = (_key$getState2 = key.getState(state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.decorations;
         // In view mode with right-side controls, remove any lingering drag-handle decorations
         // (created in edit mode) that may not have been cleaned up on mode switch.
-        if (decorationSet && legacyDragHandleEnabled && rightSideControlsEnabled && (api === null || api === void 0 ? void 0 : (_api$editorViewMode3 = api.editorViewMode) === null || _api$editorViewMode3 === void 0 ? void 0 : (_api$editorViewMode3$ = _api$editorViewMode3.sharedState.currentState()) === null || _api$editorViewMode3$ === void 0 ? void 0 : _api$editorViewMode3$.mode) === 'view') {
+        if (decorationSet && !isExperimentEnabled('platform_editor_block_control_migration') && rightSideControlsEnabled && (api === null || api === void 0 ? void 0 : (_api$editorViewMode3 = api.editorViewMode) === null || _api$editorViewMode3 === void 0 ? void 0 : (_api$editorViewMode3$ = _api$editorViewMode3.sharedState.currentState()) === null || _api$editorViewMode3$ === void 0 ? void 0 : _api$editorViewMode3$.mode) === 'view') {
           const handleDecs = findHandleDec(decorationSet, 0, state.doc.content.size);
           if (handleDecs.length > 0) {
             decorationSet = decorationSet.remove(handleDecs);
@@ -1070,10 +1082,14 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
           // another layer of protection to prevent handling mouseover
           // when native anchor with dnd is enabled in limited mode
           // in case there are descripancies between getNodeIdProvider limited mode state
-          if ((_getNodeIdProvider = getNodeIdProvider(view)) !== null && _getNodeIdProvider !== void 0 && _getNodeIdProvider.isLimitedMode() && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
+          if ((_getNodeIdProvider = getNodeIdProvider(view)) !== null && _getNodeIdProvider !== void 0 && _getNodeIdProvider.isLimitedMode() && (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration'))) {
             return;
           }
-          handleMouseOver(view, event, api);
+          if (isExperimentEnabled('platform_editor_block_control_migration')) {
+            handleSparseMouseOver(view, event, api);
+          } else {
+            handleMouseOver(view, event, api);
+          }
           return false;
         },
         mousedown: (view, event) => {
@@ -1136,7 +1152,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
           if (editorExperiment('platform_editor_controls', 'variant1')) {
             var _api$core2;
             // Focus moving into the registry surface remains inside the editor experience.
-            const isChildOfSurface = !flags.legacyDragHandleEnabled && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest(BLOCK_CONTROLS_SURFACE_SELECTOR) !== null;
+            const isChildOfSurface = isExperimentEnabled('platform_editor_block_control_migration') && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest(BLOCK_CONTROLS_SURFACE_SELECTOR) !== null;
             const shouldPreserveRemixInlineDropdownFocus = event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('[data-editor-remix-inline-dropdown-preserve-focus]') !== null;
             const isChildOfEditor = event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest(`#${EDIT_AREA_ID}`) !== null;
 
@@ -1178,7 +1194,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
 
           // Registry surfaces have their own ResizeObservers and absolute placement.
           // Width metadata only drives legacy widget recreation.
-          if (legacyDragHandleEnabled && !isResizerResizing) {
+          if (!isExperimentEnabled('platform_editor_block_control_migration') && !isResizerResizing) {
             const editorContentArea = entries[0].target;
             // Ignored via go/ees005
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -1198,7 +1214,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
           }
         }
       }));
-      const shouldObserve = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? !isAnchorSupported() : true;
+      const shouldObserve = !(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || isExperimentEnabled('platform_editor_block_control_migration')) || !isAnchorSupported();
       if (editorContentArea && shouldObserve) {
         resizeObserverWidth.observe(editorContentArea);
       }

package/dist/es2019/pm-plugins/sparse-surfaces.js

@@ -0,0 +1,37 @@
+import { BLOCK_CONTROLS_SURFACE_INVALIDATION } from '@atlaskit/editor-common/block-controls/surface-candidate-invalidation';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { key as blockControlsKey } from './main';
+import { emptySparseSurfaceCandidateState } from './utils/sparse-surface-candidates';
+import { applySparseSurfacesTransaction, createInitialSparseSurfacesState } from './utils/sparse-surfaces-state';
+import { createSparseSurfacesView } from './utils/sparse-surfaces-view';
+export const sparseSurfacesKey = new PluginKey('blockControlsSparseSurfaces');
+
+/** Owns sparse anchors independently of drag/drop decorations and their lifecycle. */
+export const createSparseSurfacesPlugin = api => new SafePlugin({
+  key: sparseSurfacesKey,
+  state: {
+    init: () => createInitialSparseSurfacesState(emptySparseSurfaceCandidateState),
+    apply(tr, previous, _oldState, newState) {
+      return applySparseSurfacesTransaction({
+        invalidation: tr.getMeta(BLOCK_CONTROLS_SURFACE_INVALIDATION),
+        meta: tr.getMeta(sparseSurfacesKey),
+        newState,
+        previous,
+        tr
+      });
+    }
+  },
+  props: {
+    decorations(state) {
+      var _api$limitedMode, _api$limitedMode$shar, _blockControlsKey$get, _sparseSurfacesKey$ge;
+      return api !== null && api !== void 0 && (_api$limitedMode = api.limitedMode) !== null && _api$limitedMode !== void 0 && (_api$limitedMode$shar = _api$limitedMode.sharedState.currentState()) !== null && _api$limitedMode$shar !== void 0 && _api$limitedMode$shar.enabled || (_blockControlsKey$get = blockControlsKey.getState(state)) !== null && _blockControlsKey$get !== void 0 && _blockControlsKey$get.isDragging ? DecorationSet.empty : (_sparseSurfacesKey$ge = sparseSurfacesKey.getState(state)) === null || _sparseSurfacesKey$ge === void 0 ? void 0 : _sparseSurfacesKey$ge.decorations;
+    }
+  },
+  view: view => createSparseSurfacesView({
+    api,
+    pluginKey: sparseSurfacesKey,
+    view
+  })
+});

package/dist/es2019/pm-plugins/utils/drag-handle-positions.js

@@ -1,7 +1,7 @@
 import memoizeOne from 'memoize-one';
 import { DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
-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 { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_H1_TOP_ADJUSTMENT, DRAG_HANDLE_H2_TOP_ADJUSTMENT, DRAG_HANDLE_H4_TOP_ADJUSTMENT, DRAG_HANDLE_H5_TOP_ADJUSTMENT, DRAG_HANDLE_H6_TOP_ADJUSTMENT, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT, DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT, dragHandleGap } from '../../ui/consts';
 const STICKY_NODES = ['panel', 'table', 'expand', 'layoutSection', 'bodiedExtension'];
 export const getTopPosition = (dom, type) => {