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

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

@@ -0,0 +1,119 @@
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
+import { getNodeTypeWithLevel } from './decorations-common';
+var OPAQUE_BLOCKS = new Set(['table', 'bulletList', 'orderedList', 'taskList', 'decisionList', 'mediaSingle']);
+var EXCLUDED_BLOCKS = new Set(['listItem', 'tableRow', 'tableCell', 'tableHeader', 'caption']);
+var isPanelNodeTypeName = function isPanelNodeTypeName(nodeTypeName) {
+  return nodeTypeName === 'panel' || nodeTypeName === 'panel_c1' && expValEqualsNoExposure('platform_editor_controls_reliable_anchor', 'isEnabled', true) && fg('platform_editor_controls_reliable_anchor_patch_1');
+};
+var redirectParagraphToWrappedMedia = function redirectParagraphToWrappedMedia(view, $target, targetPosition) {
+  var node = view.state.doc.nodeAt(targetPosition);
+  if (!node || node.type.name !== 'paragraph') {
+    return {
+      position: targetPosition,
+      node: node
+    };
+  }
+  var index = $target.index();
+  for (var _i = 0, _arr = [index - 1, index + 1]; _i < _arr.length; _i++) {
+    var siblingIndex = _arr[_i];
+    if (siblingIndex < 0 || siblingIndex >= $target.parent.childCount) {
+      continue;
+    }
+    var sibling = $target.parent.child(siblingIndex);
+    if ((sibling.type.name === 'mediaSingle' || sibling.type.name === 'embedCard') && (sibling.attrs.layout === 'wrap-left' || sibling.attrs.layout === 'wrap-right')) {
+      return {
+        position: siblingIndex < index ? targetPosition - sibling.nodeSize : targetPosition + node.nodeSize,
+        node: sibling
+      };
+    }
+  }
+  return {
+    position: targetPosition,
+    node: node
+  };
+};
+
+/** Resolves hover from PM structure so the first hover can create its sparse candidate. */
+export var handleSparseMouseOver = function handleSparseMouseOver(view, event, api) {
+  var _api$editorDisabled$s, _api$editorDisabled, _api$editorViewMode, _api$showDiff$sharedS, _api$showDiff, _api$userIntent, _$pos$nodeAfter, _controls$activeNode, _anchors$get, _anchors$get2;
+  var controls = api === null || api === void 0 ? void 0 : api.blockControls.sharedState.currentState();
+  if (!api || controls !== null && controls !== void 0 && controls.isDragging || !(event.target instanceof Element) || event.target === view.dom) {
+    return false;
+  }
+  var editorDisabled = (_api$editorDisabled$s = (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 || (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled === void 0 ? void 0 : _api$editorDisabled.editorDisabled) !== null && _api$editorDisabled$s !== void 0 ? _api$editorDisabled$s : false;
+  var editorViewMode = (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode;
+  if (editorDisabled && (editorViewMode !== 'view' || !(controls !== null && controls !== void 0 && controls.rightSideControlsEnabled))) {
+    return false;
+  }
+  var isDisplayingDiff = (_api$showDiff$sharedS = (_api$showDiff = api.showDiff) === null || _api$showDiff === void 0 || (_api$showDiff = _api$showDiff.sharedState.currentState()) === null || _api$showDiff === void 0 ? void 0 : _api$showDiff.isDisplayingChanges) !== null && _api$showDiff$sharedS !== void 0 ? _api$showDiff$sharedS : false;
+  var currentUserIntent = (_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;
+  if ((isDisplayingDiff || currentUserIntent === 'reviewing') && expValEqualsNoExposure('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    return false;
+  }
+  var position;
+  try {
+    position = view.posAtDOM(event.target, 0);
+  } catch (_unused) {
+    return false;
+  }
+  var $pos = view.state.doc.resolve(position);
+  var targetPosition;
+  var opaque = false;
+  for (var depth = 1; depth <= $pos.depth; depth++) {
+    var _node = $pos.node(depth);
+    if (!_node.isBlock || EXCLUDED_BLOCKS.has(_node.type.name)) {
+      continue;
+    }
+    targetPosition = $pos.before(depth);
+    if (OPAQUE_BLOCKS.has(_node.type.name)) {
+      opaque = true;
+      break;
+    }
+  }
+  if (!opaque && (_$pos$nodeAfter = $pos.nodeAfter) !== null && _$pos$nodeAfter !== void 0 && _$pos$nodeAfter.isBlock && !EXCLUDED_BLOCKS.has($pos.nodeAfter.type.name)) {
+    // Browser positions over non-editable node chrome can resolve to the first editable child.
+    // Keep the ancestor unless that child actually owns the hovered DOM target.
+    var nodeAfterDOM = view.nodeDOM(position);
+    if (nodeAfterDOM instanceof Element && nodeAfterDOM.contains(event.target)) {
+      targetPosition = position;
+    }
+  }
+  if (targetPosition === undefined) {
+    return false;
+  }
+  var initialNode = view.state.doc.nodeAt(targetPosition);
+  if (!initialNode) {
+    return false;
+  }
+  var target = redirectParagraphToWrappedMedia(view, view.state.doc.resolve(targetPosition), targetPosition);
+  targetPosition = target.position;
+  var node = target.node;
+  if (!node || (controls === null || controls === void 0 || (_controls$activeNode = controls.activeNode) === null || _controls$activeNode === void 0 ? void 0 : _controls$activeNode.pos) === targetPosition) {
+    return false;
+  }
+  var $target = view.state.doc.resolve(targetPosition);
+  if ($target.depth > 0 && (node.type.name === 'paragraph' || node.type.name === 'heading') && node.content.size === 0) {
+    return false;
+  }
+  var parentNode = $target.parent;
+  var parentPosition = $target.depth > 0 ? $target.before($target.depth) : undefined;
+  var parentDOM = parentPosition === undefined ? undefined : view.nodeDOM(parentPosition);
+  if (isPanelNodeTypeName(parentNode.type.name) && !(parentDOM instanceof HTMLElement && parentDOM.classList.contains('ak-editor-panel__no-icon')) && $target.index() === 0) {
+    return false;
+  }
+  if (node.type.name === 'layoutColumn' && parentNode.type.name === 'layoutSection' && parentNode.childCount === 1 && expValEqualsNoExposure('advanced_layouts', 'isEnabled', true) && !expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
+    return false;
+  }
+  var anchors = controls === null || controls === void 0 ? void 0 : controls.surfaceAnchors;
+  var anchorName = (_anchors$get = anchors === null || anchors === void 0 ? void 0 : anchors.get(targetPosition)) !== null && _anchors$get !== void 0 ? _anchors$get : api.core.actions.getAnchorIdForNode(node, targetPosition);
+  var rootPos = $target.depth > 0 ? $target.before(1) : targetPosition;
+  var rootNode = view.state.doc.nodeAt(rootPos);
+  var rootAnchorName = (_anchors$get2 = anchors === null || anchors === void 0 ? void 0 : anchors.get(rootPos)) !== null && _anchors$get2 !== void 0 ? _anchors$get2 : rootNode ? api.core.actions.getAnchorIdForNode(rootNode, rootPos) : undefined;
+  if (!anchorName || !rootNode) {
+    return false;
+  }
+  api.core.actions.execute(api.blockControls.commands.showDragHandleAt(targetPosition, anchorName, getNodeTypeWithLevel(node), undefined, rootPos, rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : anchorName, getNodeTypeWithLevel(rootNode)));
+  return false;
+};

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

@@ -7,7 +7,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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';
@@ -18,7 +17,6 @@ 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';
@@ -30,19 +28,20 @@ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equ
 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 var key = new PluginKey('blockControls');
 var EDITOR_BLOCKS_DRAG_INIT = 'Editor Blocks Drag Initialization Time';
@@ -235,20 +234,18 @@ var getDecorationAtPos = function getDecorationAtPos(state, decorations, pos, to
   return nodeDecAtActivePos;
 };
 var _apply = function apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry) {
-  var _meta$multiSelectDnD, _api$editorViewMode, _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;
+  var _meta$multiSelectDnD, _api$editorViewMode, _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;
   var rightSideControlsEnabled = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
   var quickInsertButtonEnabled = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : true;
   var anchorRectCache = arguments.length > 10 ? arguments[10] : undefined;
   var resizeObserverWidth = arguments.length > 11 ? arguments[11] : undefined;
   var pragmaticCleanup = arguments.length > 12 ? arguments[12] : undefined;
-  var resolvedSurfaces = arguments.length > 13 && arguments[13] !== undefined ? arguments[13] : [];
-  var limitedModeTeardown = arguments.length > 14 ? arguments[14] : undefined;
+  var limitedModeTeardown = arguments.length > 13 ? arguments[13] : undefined;
   var activeNode = currentState.activeNode,
     decorations = currentState.decorations,
     isResizerResizing = currentState.isResizerResizing,
-    multiSelectDnD = currentState.multiSelectDnD,
-    surfaceNodePositions = currentState.surfaceNodePositions;
-  var previousActiveNode = activeNode;
+    multiSelectDnD = currentState.multiSelectDnD;
+  var surfaceNodePositions = currentState.surfaceNodePositions;
   var editorHeight = currentState.editorHeight,
     editorWidthLeft = currentState.editorWidthLeft,
     editorWidthRight = currentState.editorWidthRight,
@@ -393,13 +390,28 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
         if (activeNode.rootPos !== undefined) {
           mappedRootPos = tr.mapping.mapResult(activeNode.rootPos, -1);
         }
+        var mappedNodeType = activeNode.nodeType;
+        var 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')) {
+          var mappedNode = newState.doc.nodeAt(_mappedPos.pos);
+          if (mappedNode !== null && mappedNode !== void 0 && mappedNode.isBlock) {
+            mappedNodeType = getNodeTypeWithLevel(mappedNode);
+          }
+          var 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
         };
       }
     }
@@ -435,7 +447,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
   var isNodeDecsMissing = isDecSetEmpty || maybeNodeCountChanged || editorExperiment('platform_editor_breakout_resizing', true) && hasJustFinishedResizing;
   var 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'));
   var isActiveNodeModified = false;
   if (api && shouldRedrawNodeDecs) {
     var oldNodeDecs = findNodeDecs(newState, decorations, from, to);
@@ -511,14 +523,14 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
   // In view mode with right-side controls, remove any lingering drag handle decorations
   // (they may carry over from edit mode). Only remove drag handles specifically, not
   // the remix button decorations (those are managed separately via showInViewMode).
-  if (flags.legacyDragHandleEnabled && isViewMode && rightSideControlsEnabled) {
+  if (!isExperimentEnabled('platform_editor_block_control_migration') && isViewMode && rightSideControlsEnabled) {
     var 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;
       var oldHandle = findHandleDec(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.pos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.pos);
       decorations = decorations.remove(oldHandle);
@@ -530,7 +542,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
     // after a doc change (e.g. pressing Enter splits a node), DecorationSet.map() can shift the
     // decoration to a different position, so a point-range search would miss it and leave a stale
     // attribute on the wrong DOM node.
-    if ((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)) {
       var oldActiveNodeDec = findActiveDragHandleNodeDec(decorations, 0, newState.doc.content.size);
       decorations = decorations.remove(oldActiveNodeDec);
       var oldActiveQuickInsertDec = findActiveQuickInsertNodeDec(decorations, 0, newState.doc.content.size);
@@ -592,7 +604,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
   } 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;
       var _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);
@@ -609,7 +621,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
       });
       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.
@@ -881,7 +893,10 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
     }
   }
   var 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'))) {
     var hasNodeDecoration = !!findNodeDecs(newState, decorations).length;
     if (!hasNodeDecoration) {
       decorations = decorations.add(newState.doc, [emptyParagraphNodeDecorations()]);
@@ -894,27 +909,30 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
     // remove isEmptyDoc check and let decorations render and determine their own visibility
     // In view mode with right-side controls we render node decorations (right-edge button), not the
     // handle - so findHandleDec is always empty. Don't clear activeNode in that case.
-    var hasHandleOrViewModeControls = !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;
+    var 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.
-    var keepActiveNodeForOpenBlockMenu = !flags.legacyDragHandleEnabled && isMenuOpen;
+    var 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: from,
-      newState: newState,
-      previousActiveNode: previousActiveNode,
-      resolvedSurfaces: resolvedSurfaces,
-      to: to,
-      tr: 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;
   }
   var isMenuOpenNew = isMenuOpen;
+  var nextMenuTriggerByNode = (meta === null || meta === 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;
+    var mapped = tr.mapping.mapResult(menuTriggerByNode.pos, 1);
+    var 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 = _objectSpread(_objectSpread({}, 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) {
@@ -934,8 +952,8 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
     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 || (_meta$toggleMenu = meta.toggleMenu) === null || _meta$toggleMenu === void 0 ? void 0 : _meta$toggleMenu.anchorName) || menuTriggerBy,
-    menuTriggerByNode: (meta === null || meta === void 0 || (_meta$toggleMenu2 = meta.toggleMenu) === null || _meta$toggleMenu2 === void 0 ? void 0 : _meta$toggleMenu2.triggerByNode) || menuTriggerByNode,
+    menuTriggerBy: (meta === null || meta === 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 || (_meta$toggleMenu3 = meta.toggleMenu) === null || _meta$toggleMenu3 === void 0 ? void 0 : _meta$toggleMenu3.moveUp) !== undefined ? meta === null || meta === 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 || (_meta$toggleMenu5 = meta.toggleMenu) === null || _meta$toggleMenu5 === void 0 ? void 0 : _meta$toggleMenu5.moveDown) !== undefined ? meta === null || meta === 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,
@@ -955,25 +973,17 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
 };
 export { _apply as apply };
 export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry) {
-  var _api$uiControlRegistr, _api$uiControlRegistr2, _api$uiControlRegistr3, _api$uiControlRegistr4;
   var rightSideControlsEnabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   var quickInsertButtonEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;
-  var legacyDragHandleEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : true;
   var _getIntl = getIntl(),
     formatMessage = _getIntl.formatMessage;
   var isAdvancedLayoutEnabled = editorExperiment('advanced_layouts', true, {
     exposure: true
   });
   var toolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
-  // Mirrors `registryBlockControlsEnabled` in blockControlsPlugin.tsx: `legacyDragHandleEnabled` is
-  // only false once that gate is on.
-  var surfaceNodePositionsEnabled = !legacyDragHandleEnabled;
   var flags = {
-    legacyDragHandleEnabled: legacyDragHandleEnabled,
-    surfaceNodePositionsEnabled: surfaceNodePositionsEnabled,
     toolbarFlagsEnabled: toolbarFlagsEnabled
   };
-  var resolvedSurfaces = surfaceNodePositionsEnabled ? [resolveSurface((_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(BLOCK_CONTROLS_LEFT_SURFACE)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [], BLOCK_CONTROLS_LEFT_SURFACE), resolveSurface((_api$uiControlRegistr3 = api === null || api === void 0 || (_api$uiControlRegistr4 = api.uiControlRegistry) === null || _api$uiControlRegistr4 === void 0 ? void 0 : _api$uiControlRegistr4.actions.getComponents(BLOCK_CONTROLS_RIGHT_SURFACE)) !== null && _api$uiControlRegistr3 !== void 0 ? _api$uiControlRegistr3 : [], BLOCK_CONTROLS_RIGHT_SURFACE)] : [];
   var anchorRectCache;
   if (!isAnchorSupported()) {
     anchorRectCache = new AnchorRectCache();
@@ -987,13 +997,11 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
   return new SafePlugin({
     key: key,
     state: {
-      init: function init(_config, editorState) {
-        return _objectSpread(_objectSpread({}, initialState), {}, {
-          surfaceNodePositions: resolvedSurfaces.length > 0 ? getSurfaceNodePositions(editorState, resolvedSurfaces) : []
-        });
+      init: function init() {
+        return _objectSpread({}, initialState);
       },
       apply: function apply(tr, currentState, _, newState) {
-        return _apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled, anchorRectCache, resizeObserverWidth, pragmaticCleanup, resolvedSurfaces, limitedModeTeardown);
+        return _apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled, anchorRectCache, resizeObserverWidth, pragmaticCleanup, limitedModeTeardown);
       }
     },
     props: {
@@ -1014,7 +1022,7 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
         var decorationSet = (_key$getState2 = key.getState(state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.decorations;
         // In view mode with right-side controls, remove any lingering drag-handle decorations
         // (created in edit mode) that may not have been cleaned up on mode switch.
-        if (decorationSet && legacyDragHandleEnabled && rightSideControlsEnabled && (api === null || api === void 0 || (_api$editorViewMode3 = api.editorViewMode) === null || _api$editorViewMode3 === void 0 || (_api$editorViewMode3 = _api$editorViewMode3.sharedState.currentState()) === null || _api$editorViewMode3 === void 0 ? void 0 : _api$editorViewMode3.mode) === 'view') {
+        if (decorationSet && !isExperimentEnabled('platform_editor_block_control_migration') && rightSideControlsEnabled && (api === null || api === void 0 || (_api$editorViewMode3 = api.editorViewMode) === null || _api$editorViewMode3 === void 0 || (_api$editorViewMode3 = _api$editorViewMode3.sharedState.currentState()) === null || _api$editorViewMode3 === void 0 ? void 0 : _api$editorViewMode3.mode) === 'view') {
           var handleDecs = findHandleDec(decorationSet, 0, state.doc.content.size);
           if (handleDecs.length > 0) {
             decorationSet = decorationSet.remove(handleDecs);
@@ -1160,10 +1168,14 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
           // 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: function mousedown(view, event) {
@@ -1224,7 +1236,7 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
           if (editorExperiment('platform_editor_controls', 'variant1')) {
             var _api$core2;
             // Focus moving into the registry surface remains inside the editor experience.
-            var isChildOfSurface = !flags.legacyDragHandleEnabled && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest(BLOCK_CONTROLS_SURFACE_SELECTOR) !== null;
+            var isChildOfSurface = isExperimentEnabled('platform_editor_block_control_migration') && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest(BLOCK_CONTROLS_SURFACE_SELECTOR) !== null;
             var shouldPreserveRemixInlineDropdownFocus = event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('[data-editor-remix-inline-dropdown-preserve-focus]') !== null;
             var isChildOfEditor = event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest("#".concat(EDIT_AREA_ID)) !== null;
 
@@ -1264,7 +1276,7 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
 
           // 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) {
             var _editorContentArea2 = entries[0].target;
             // Ignored via go/ees005
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -1283,7 +1295,7 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
           }
         }
       }));
-      var shouldObserve = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? !isAnchorSupported() : true;
+      var 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/esm/pm-plugins/sparse-surfaces.js

@@ -0,0 +1,43 @@
+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 var sparseSurfacesKey = new PluginKey('blockControlsSparseSurfaces');
+
+/** Owns sparse anchors independently of drag/drop decorations and their lifecycle. */
+export var createSparseSurfacesPlugin = function createSparseSurfacesPlugin(api) {
+  return new SafePlugin({
+    key: sparseSurfacesKey,
+    state: {
+      init: function init() {
+        return createInitialSparseSurfacesState(emptySparseSurfaceCandidateState);
+      },
+      apply: function apply(tr, previous, _oldState, newState) {
+        return applySparseSurfacesTransaction({
+          invalidation: tr.getMeta(BLOCK_CONTROLS_SURFACE_INVALIDATION),
+          meta: tr.getMeta(sparseSurfacesKey),
+          newState: newState,
+          previous: previous,
+          tr: tr
+        });
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        var _api$limitedMode, _blockControlsKey$get, _sparseSurfacesKey$ge;
+        return api !== null && api !== void 0 && (_api$limitedMode = api.limitedMode) !== null && _api$limitedMode !== void 0 && (_api$limitedMode = _api$limitedMode.sharedState.currentState()) !== null && _api$limitedMode !== void 0 && _api$limitedMode.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: function view(_view) {
+      return createSparseSurfacesView({
+        api: api,
+        pluginKey: sparseSurfacesKey,
+        view: _view
+      });
+    }
+  });
+};