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

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

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

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

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

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

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

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

@@ -0,0 +1,116 @@
+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';
+const OPAQUE_BLOCKS = new Set(['table', 'bulletList', 'orderedList', 'taskList', 'decisionList', 'mediaSingle']);
+const EXCLUDED_BLOCKS = new Set(['listItem', 'tableRow', 'tableCell', 'tableHeader', 'caption']);
+const isPanelNodeTypeName = nodeTypeName => nodeTypeName === 'panel' || nodeTypeName === 'panel_c1' && expValEqualsNoExposure('platform_editor_controls_reliable_anchor', 'isEnabled', true) && fg('platform_editor_controls_reliable_anchor_patch_1');
+const redirectParagraphToWrappedMedia = (view, $target, targetPosition) => {
+  const node = view.state.doc.nodeAt(targetPosition);
+  if (!node || node.type.name !== 'paragraph') {
+    return {
+      position: targetPosition,
+      node
+    };
+  }
+  const index = $target.index();
+  for (const siblingIndex of [index - 1, index + 1]) {
+    if (siblingIndex < 0 || siblingIndex >= $target.parent.childCount) {
+      continue;
+    }
+    const 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
+  };
+};
+
+/** Resolves hover from PM structure so the first hover can create its sparse candidate. */
+export const handleSparseMouseOver = (view, event, api) => {
+  var _api$editorDisabled$s, _api$editorDisabled, _api$editorDisabled$s2, _api$editorViewMode, _api$editorViewMode$s, _api$showDiff$sharedS, _api$showDiff, _api$showDiff$sharedS2, _api$userIntent, _api$userIntent$share, _$pos$nodeAfter, _controls$activeNode, _anchors$get, _anchors$get2;
+  const 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;
+  }
+  const editorDisabled = (_api$editorDisabled$s = (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 ? void 0 : (_api$editorDisabled$s2 = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled$s2 === void 0 ? void 0 : _api$editorDisabled$s2.editorDisabled) !== null && _api$editorDisabled$s !== void 0 ? _api$editorDisabled$s : false;
+  const editorViewMode = (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode;
+  if (editorDisabled && (editorViewMode !== 'view' || !(controls !== null && controls !== void 0 && controls.rightSideControlsEnabled))) {
+    return false;
+  }
+  const isDisplayingDiff = (_api$showDiff$sharedS = (_api$showDiff = api.showDiff) === null || _api$showDiff === void 0 ? void 0 : (_api$showDiff$sharedS2 = _api$showDiff.sharedState.currentState()) === null || _api$showDiff$sharedS2 === void 0 ? void 0 : _api$showDiff$sharedS2.isDisplayingChanges) !== null && _api$showDiff$sharedS !== void 0 ? _api$showDiff$sharedS : false;
+  const currentUserIntent = (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : (_api$userIntent$share = _api$userIntent.sharedState.currentState()) === null || _api$userIntent$share === void 0 ? void 0 : _api$userIntent$share.currentUserIntent;
+  if ((isDisplayingDiff || currentUserIntent === 'reviewing') && expValEqualsNoExposure('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    return false;
+  }
+  let position;
+  try {
+    position = view.posAtDOM(event.target, 0);
+  } catch {
+    return false;
+  }
+  const $pos = view.state.doc.resolve(position);
+  let targetPosition;
+  let opaque = false;
+  for (let depth = 1; depth <= $pos.depth; depth++) {
+    const 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.
+    const nodeAfterDOM = view.nodeDOM(position);
+    if (nodeAfterDOM instanceof Element && nodeAfterDOM.contains(event.target)) {
+      targetPosition = position;
+    }
+  }
+  if (targetPosition === undefined) {
+    return false;
+  }
+  const initialNode = view.state.doc.nodeAt(targetPosition);
+  if (!initialNode) {
+    return false;
+  }
+  const target = redirectParagraphToWrappedMedia(view, view.state.doc.resolve(targetPosition), targetPosition);
+  targetPosition = target.position;
+  const node = target.node;
+  if (!node || (controls === null || controls === void 0 ? void 0 : (_controls$activeNode = controls.activeNode) === null || _controls$activeNode === void 0 ? void 0 : _controls$activeNode.pos) === targetPosition) {
+    return false;
+  }
+  const $target = view.state.doc.resolve(targetPosition);
+  if ($target.depth > 0 && (node.type.name === 'paragraph' || node.type.name === 'heading') && node.content.size === 0) {
+    return false;
+  }
+  const parentNode = $target.parent;
+  const parentPosition = $target.depth > 0 ? $target.before($target.depth) : undefined;
+  const 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;
+  }
+  const anchors = controls === null || controls === void 0 ? void 0 : controls.surfaceAnchors;
+  const 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);
+  const rootPos = $target.depth > 0 ? $target.before(1) : targetPosition;
+  const rootNode = view.state.doc.nodeAt(rootPos);
+  const 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/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,7 +11,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';
@@ -24,19 +22,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 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
+  })
+});