@atlaskit/editor-plugin-block-controls 24.0.0 → 24.0.1

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

@@ -29,7 +29,6 @@ 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';
@@ -1073,6 +1072,11 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
         },
         mouseover: (view, event) => {
           var _api$limitedMode7, _api$limitedMode7$sha, _getNodeIdProvider;
+          // Sparse surfaces handle all hover in bindSparseGutterHover, which also covers the gutters
+          // outside view.dom.
+          if (isExperimentEnabled('platform_editor_block_control_migration')) {
+            return false;
+          }
           if (api !== null && api !== void 0 && (_api$limitedMode7 = api.limitedMode) !== null && _api$limitedMode7 !== void 0 && (_api$limitedMode7$sha = _api$limitedMode7.sharedState.currentState()) !== null && _api$limitedMode7$sha !== void 0 && _api$limitedMode7$sha.enabled) {
             return;
           }
@@ -1080,14 +1084,10 @@ 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) || isExperimentEnabled('platform_editor_block_control_migration'))) {
+          if ((_getNodeIdProvider = getNodeIdProvider(view)) !== null && _getNodeIdProvider !== void 0 && _getNodeIdProvider.isLimitedMode() && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
             return;
           }
-          if (isExperimentEnabled('platform_editor_block_control_migration')) {
-            handleSparseMouseOver(view, event, api);
-          } else {
-            handleMouseOver(view, event, api);
-          }
+          handleMouseOver(view, event, api);
           return false;
         },
         mousedown: (view, event) => {

package/dist/es2019/pm-plugins/sparse-gutter-hover.js

@@ -0,0 +1,305 @@
+import { bind } from 'bind-event-listener';
+import { DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
+import { akEditorFullPageNarrowBreakout, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced } from '@atlaskit/editor-shared-styles/constants';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
+import { BLOCK_CONTROLS_SURFACE_SELECTOR, DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from '../ui/consts';
+import { handleSparseHoverTarget, isSparseHoverSuppressed } from './handle-sparse-hover-target';
+import { mouseEnter, setHoverSide, stopEditing } from './interaction-tracking/commands';
+import { handleMouseLeave } from './interaction-tracking/handle-mouse-move';
+import { getInteractionTrackingState } from './interaction-tracking/pm-plugin';
+import { getVisibleBox } from './utils/visible-box';
+const BLOCK_SELECTOR = '[data-prosemirror-node-block="true"]';
+const TABLE_SELECTOR = '[data-prosemirror-node-name="table"]';
+const LAYOUT_SECTION_SELECTOR = '[data-prosemirror-node-name="layoutSection"]';
+const LAYOUT_COLUMN_SELECTOR = '[data-prosemirror-node-name="layoutColumn"]';
+
+// `layoutColumnExtendedHoverZone` is a DRAG_HANDLE_WIDTH-tall strip centred on the column's top edge.
+const LAYOUT_COLUMN_STRIP_REACH = DRAG_HANDLE_WIDTH / 2;
+const isBlockElement = element => element.getAttribute('data-prosemirror-node-block') === 'true';
+const getVisibleLeft = block => {
+  var _block$getAttribute;
+  return getVisibleBox(block, (_block$getAttribute = block.getAttribute('data-prosemirror-node-name')) !== null && _block$getAttribute !== void 0 ? _block$getAttribute : '').getBoundingClientRect().left;
+};
+
+/**
+ * Whether the element under the pointer can be part of a block's left gutter: a container block's
+ * own padding (panel, layout, list…) or an editor wrapper around the content. Text and leaf blocks
+ * have no gutter inside them, and neither do tables: like the legacy hover zones, anywhere inside a
+ * table, including cell padding, shows the table's controls. Elements rendered beside the editor
+ * (title, popups, toolbars) cover any gutter beneath them.
+ */
+export const isPossibleGutterElement = (view, hoveredElement) => {
+  if (!(hoveredElement instanceof Element)) {
+    return false;
+  }
+  const owner = hoveredElement.closest(`${BLOCK_SELECTOR}, ${BLOCK_CONTROLS_SURFACE_SELECTOR}`);
+  if (owner !== null && owner !== void 0 && owner.matches(BLOCK_CONTROLS_SURFACE_SELECTOR)) {
+    return false;
+  }
+  if (owner && view.dom.contains(owner)) {
+    var _owner$getAttribute;
+    if (owner.closest(TABLE_SELECTOR)) {
+      return false;
+    }
+    const nodeType = view.state.schema.nodes[(_owner$getAttribute = owner.getAttribute('data-prosemirror-node-name')) !== null && _owner$getAttribute !== void 0 ? _owner$getAttribute : ''];
+    return !(nodeType !== null && nodeType !== void 0 && nodeType.isTextblock) && !(nodeType !== null && nodeType !== void 0 && nodeType.isLeaf);
+  }
+  return view.dom.contains(hoveredElement) || hoveredElement.contains(view.dom);
+};
+const getGutterWidths = () => ({
+  topLevel: akEditorGutterPaddingDynamic(),
+  narrowTopLevel: expValEqualsNoExposure('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? akEditorGutterPaddingReduced : undefined
+});
+const getTopLevelGutterWidth = (api, widths) => {
+  var _api$width, _api$width$sharedStat;
+  const editorWidth = api === null || api === void 0 ? void 0 : (_api$width = api.width) === null || _api$width === void 0 ? void 0 : (_api$width$sharedStat = _api$width.sharedState.currentState()) === null || _api$width$sharedStat === void 0 ? void 0 : _api$width$sharedStat.width;
+  return widths.narrowTopLevel !== undefined && editorWidth !== undefined && editorWidth <= akEditorFullPageNarrowBreakout ? widths.narrowTopLevel : widths.topLevel;
+};
+const getEditorElementAt = (view, clientX, clientY) => {
+  const element = view.dom.ownerDocument.elementFromPoint(clientX, clientY);
+  return element && element !== view.dom && view.dom.contains(element) ? element : null;
+};
+
+/** The outermost block around `element` that does not contain the pointer owns that gutter. */
+const findGutterOwner = (view, element, pointerTarget) => {
+  let owner = null;
+  for (let current = element; current && current !== view.dom;) {
+    if (isBlockElement(current) && !current.contains(pointerTarget) &&
+    // Layout columns have a top hover strip instead of a left gutter.
+    current.getAttribute('data-prosemirror-node-name') !== 'layoutColumn') {
+      owner = current;
+    }
+    current = current.parentElement;
+  }
+  return owner;
+};
+const findBlockBesidePointer = (view, api, event, pointerTarget, widths) => {
+  const pointerBlock = pointerTarget.closest(BLOCK_SELECTOR);
+  const gutterWidth = pointerBlock && view.dom.contains(pointerBlock) ? DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : getTopLevelGutterWidth(api, widths);
+  const sample = getEditorElementAt(view, event.clientX + gutterWidth, event.clientY);
+  const owner = sample && findGutterOwner(view, sample, pointerTarget);
+  if (!owner) {
+    return null;
+  }
+  const left = getVisibleLeft(owner);
+  return event.clientX < left && left - event.clientX <= gutterWidth ? owner : null;
+};
+const findColumnBelowPointer = (view, event, pointerTarget) => {
+  if (pointerTarget.closest(LAYOUT_COLUMN_SELECTOR) || pointerTarget !== view.dom && !pointerTarget.closest(LAYOUT_SECTION_SELECTOR)) {
+    return null;
+  }
+  const sample = getEditorElementAt(view, event.clientX, event.clientY + LAYOUT_COLUMN_STRIP_REACH);
+  const column = sample === null || sample === void 0 ? void 0 : sample.closest(LAYOUT_COLUMN_SELECTOR);
+  return column && view.dom.contains(column) && event.clientY < column.getBoundingClientRect().top ? column : null;
+};
+
+/** Returns a function that finds the block whose legacy hover zone contains the pointer. */
+export const createGutterBlockFinder = (view, api) => {
+  const widths = getGutterWidths();
+  return event => {
+    var _findBlockBesidePoint;
+    if (!(event.target instanceof Element)) {
+      return null;
+    }
+    return (_findBlockBesidePoint = findBlockBesidePointer(view, api, event, event.target, widths)) !== null && _findBlockBesidePoint !== void 0 ? _findBlockBesidePoint : view.dom.contains(event.target) ? findColumnBelowPointer(view, event, event.target) : null;
+  };
+};
+
+/** The latest gutter event waiting to be handled after the frame renders. */
+
+/** What gutter hover does with a pointer position. */
+
+/**
+ * Leaving block controls does not count as reaching a new element: a nested block's drag handle
+ * overhangs the block, so leaving the handle can put the pointer on the container with no block
+ * beside it, and that exit must keep the controls on the block.
+ */
+const isLeavingBlockControls = event => event.relatedTarget instanceof Element && Boolean(event.relatedTarget.closest(BLOCK_CONTROLS_SURFACE_SELECTOR));
+const classifyGutterHover = (view, findGutterBlock, {
+  event,
+  reachedNewElement
+}) => {
+  const block = findGutterBlock(event);
+  if (block) {
+    return {
+      kind: 'block',
+      element: block
+    };
+  }
+  const hoveredElement = event.target;
+  if (reachedNewElement && hoveredElement instanceof Element && view.dom.contains(hoveredElement)) {
+    return {
+      kind: 'container',
+      element: hoveredElement
+    };
+  }
+  return {
+    kind: 'none'
+  };
+};
+
+/**
+ * Runs `callback` once after the next frame renders (`requestAnimationFrame`, then `setTimeout`).
+ * Layout is clean then, so reading positions never forces a synchronous layout. Calls made while a
+ * run is already scheduled are ignored.
+ */
+const createAfterRenderScheduler = (win, callback) => {
+  let frame;
+  let timeout;
+  return {
+    schedule: () => {
+      if (frame !== undefined || timeout !== undefined) {
+        return;
+      }
+      frame = win.requestAnimationFrame(() => {
+        frame = undefined;
+        timeout = win.setTimeout(() => {
+          timeout = undefined;
+          callback();
+        }, 0);
+      });
+    },
+    cancel: () => {
+      if (frame !== undefined) {
+        win.cancelAnimationFrame(frame);
+        frame = undefined;
+      }
+      if (timeout !== undefined) {
+        win.clearTimeout(timeout);
+        timeout = undefined;
+      }
+    }
+  };
+};
+
+/**
+ * Keeps interaction tracking in step with gutter hover, as the legacy hover zones did. They sat
+ * inside the block tree, so hovering one cleared the typing state, counted as inside the editor even
+ * where the zone reached past the content area, and put the pointer on the left side of the
+ * right-side controls split.
+ */
+const createInteractionTrackingSync = (view, api, contentArea) => {
+  // Set after gutter hover calls mouseEnter for a gutter outside the content area, so that leaving
+  // that gutter calls mouseLeave.
+  let isHoldingMouseEnter = false;
+  return (event, isOverGutter) => {
+    var _api$blockControls$sh;
+    const state = getInteractionTrackingState(view.state);
+    const rightSideControlsEnabled = api === null || api === void 0 ? void 0 : (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.rightSideControlsEnabled;
+    const side = rightSideControlsEnabled ? 'left' : undefined;
+    if (isOverGutter && state !== null && state !== void 0 && state.isEditing) {
+      stopEditing(view);
+    }
+    if (event.target instanceof Node && contentArea !== null && contentArea !== void 0 && contentArea.contains(event.target)) {
+      isHoldingMouseEnter = false;
+    } else if (isOverGutter && state !== null && state !== void 0 && state.isMouseOut) {
+      isHoldingMouseEnter = true;
+      mouseEnter(view, side);
+      return;
+    } else if (!isOverGutter && isHoldingMouseEnter) {
+      isHoldingMouseEnter = false;
+      handleMouseLeave(view, rightSideControlsEnabled);
+      return;
+    }
+    if (isOverGutter && side && (state === null || state === void 0 ? void 0 : state.hoverSide) !== side) {
+      setHoverSide(view, side);
+    }
+  };
+};
+
+/**
+ * Shows block controls for the block the pointer hovers under sparse surfaces, including the empty
+ * space to a block's left (the gutter). This is the only hover handler for sparse surfaces.
+ *
+ * Reaching text or a leaf block shows its controls straight away. Over an element that can be part
+ * of a gutter, only the latest pointer event is kept, and it is resolved once after the frame
+ * renders so that reading positions never forces a layout.
+ *
+ * Returns an unbind function, or `undefined` when the editor's document has no window.
+ */
+export const bindSparseGutterHover = ({
+  api,
+  view
+}) => {
+  var _ref, _ref2, _view$dom$closest;
+  const win = view.dom.ownerDocument.defaultView;
+  if (!win) {
+    return undefined;
+  }
+  const contentArea = view.dom.closest('.ak-editor-content-area');
+  // A wide block's gutter can sit outside the padded content area. Editors without a scroll
+  // container or content area still get hover, over as much of the gutter as their wrapper covers.
+  const eventArea = (_ref = (_ref2 = (_view$dom$closest = view.dom.closest('[data-editor-scroll-container="true"]')) !== null && _view$dom$closest !== void 0 ? _view$dom$closest : contentArea) !== null && _ref2 !== void 0 ? _ref2 : view.dom.parentElement) !== null && _ref !== void 0 ? _ref : view.dom;
+  const findGutterBlock = createGutterBlockFinder(view, api);
+  const syncInteractionTracking = createInteractionTrackingSync(view, api, contentArea);
+  let pending;
+  const handlePendingPointer = () => {
+    const pointer = pending;
+    pending = undefined;
+    if (!pointer || isSparseHoverSuppressed(view, api)) {
+      return;
+    }
+    const hover = classifyGutterHover(view, findGutterBlock, pointer);
+    if (hover.kind !== 'none') {
+      handleSparseHoverTarget(view, hover.element, api);
+    }
+    syncInteractionTracking(pointer.event, hover.kind === 'block');
+  };
+  const scheduler = createAfterRenderScheduler(win, handlePendingPointer);
+  const queueGutterEvent = (event, reachedNewElement) => {
+    var _pending;
+    pending = {
+      event,
+      reachedNewElement: Boolean((_pending = pending) === null || _pending === void 0 ? void 0 : _pending.reachedNewElement) || reachedNewElement
+    };
+    scheduler.schedule();
+  };
+
+  // Classified on every mouseover and reused while the pointer moves within that element, so
+  // movement over text costs one comparison.
+  let hovered;
+  const classifyHoveredElement = element => {
+    hovered = {
+      element,
+      isPossibleGutter: isPossibleGutterElement(view, element)
+    };
+    return hovered.isPossibleGutter;
+  };
+  const onMouseOver = event => {
+    if (classifyHoveredElement(event.target)) {
+      queueGutterEvent(event, !isLeavingBlockControls(event));
+      return;
+    }
+    pending = undefined;
+    const hoveredElement = event.target;
+    if (hoveredElement instanceof Element && view.dom.contains(hoveredElement) && !isSparseHoverSuppressed(view, api)) {
+      handleSparseHoverTarget(view, hoveredElement, api);
+    }
+  };
+  const onMouseMove = event => {
+    var _hovered;
+    const isPossibleGutter = ((_hovered = hovered) === null || _hovered === void 0 ? void 0 : _hovered.element) === event.target ? hovered.isPossibleGutter : classifyHoveredElement(event.target);
+    if (isPossibleGutter) {
+      queueGutterEvent(event, false);
+    }
+  };
+  const bindMouseListener = (type, listener) => bind(eventArea, {
+    type,
+    listener: event => {
+      if (event instanceof win.MouseEvent) {
+        listener(event);
+      }
+    },
+    options: {
+      passive: true
+    }
+  });
+  const unbindMouseOver = bindMouseListener('mouseover', onMouseOver);
+  const unbindMouseMove = bindMouseListener('mousemove', onMouseMove);
+  return () => {
+    unbindMouseOver();
+    unbindMouseMove();
+    scheduler.cancel();
+    pending = undefined;
+  };
+};

package/dist/es2019/pm-plugins/{utils/sparse-surfaces-view.js → sparse-surfaces-view.js}

@@ -1,10 +1,11 @@
 import { BLOCK_CONTROLS_LEFT_SURFACE, BLOCK_CONTROLS_RIGHT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
 import { getNodeIdProvider } from '@atlaskit/editor-common/node-anchor';
 import { resolveSurface } from '@atlaskit/editor-ui-control-model/surface-renderer';
-import { createSurfaceAnchorDecorations } from '../decorations-surface-anchor';
-import { key as blockControlsKey } from '../main';
-import { reconcileSparseSurfaceCandidates } from './sparse-surface-candidates';
-import { observeSurfaceViewport } from './surface-viewport';
+import { createSurfaceAnchorDecorations } from './decorations-surface-anchor';
+import { key as blockControlsKey } from './main';
+import { bindSparseGutterHover } from './sparse-gutter-hover';
+import { reconcileSparseSurfaceCandidates } from './utils/sparse-surface-candidates';
+import { observeSurfaceViewport } from './utils/surface-viewport';
 const haveAnchorPositionsChanged = (positions, anchors) => positions.length !== anchors.size || positions.some(position => !anchors.has(position));
 export const createSparseSurfacesView = ({
   api,
@@ -95,6 +96,10 @@ export const createSparseSurfacesView = ({
     schedule();
   };
   const unsubscribe = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr3 = api.uiControlRegistry) === null || _api$uiControlRegistr3 === void 0 ? void 0 : _api$uiControlRegistr3.actions.subscribe(invalidate);
+  const unbindGutterHover = bindSparseGutterHover({
+    api,
+    view
+  });
   const unsubscribers = [api === null || api === void 0 ? void 0 : (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 ? void 0 : _api$editorDisabled.sharedState.onChange(invalidate), api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.onChange(invalidate), api === null || api === void 0 ? void 0 : (_api$limitedMode2 = api.limitedMode) === null || _api$limitedMode2 === void 0 ? void 0 : _api$limitedMode2.sharedState.onChange(invalidate), api === null || api === void 0 ? void 0 : (_api$showDiff = api.showDiff) === null || _api$showDiff === void 0 ? void 0 : _api$showDiff.sharedState.onChange(invalidate), api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.sharedState.onChange(invalidate)];
   return {
     update(currentView, previousState) {
@@ -114,6 +119,7 @@ export const createSparseSurfacesView = ({
         win === null || win === void 0 ? void 0 : win.cancelAnimationFrame(frame);
       }
       observer.destroy();
+      unbindGutterHover === null || unbindGutterHover === void 0 ? void 0 : unbindGutterHover();
       unsubscribe === null || unsubscribe === void 0 ? void 0 : unsubscribe();
       unsubscribers.forEach(unsubscribe => unsubscribe === null || unsubscribe === void 0 ? void 0 : unsubscribe());
     }

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

@@ -3,9 +3,9 @@ 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 { createSparseSurfacesView } from './sparse-surfaces-view';
 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. */

package/dist/es2019/pm-plugins/utils/visible-box.js

@@ -0,0 +1,21 @@
+// Matches the anchor selectors in `ui/global-styles.tsx`. A table's `.pm-table-resizer-container`
+// wraps its cells too, so only a direct child `.resizer-item` is the table's own box, not the
+// resizer of media inside a cell.
+const VISIBLE_BOX_SELECTORS = {
+  table: '.pm-table-resizer-container > .resizer-item',
+  mediaSingle: '.resizer-item',
+  embedCard: '.rich-media-item',
+  extension: '.extension-container[data-layout]',
+  bodiedExtension: '.extension-container[data-layout]',
+  multiBodiedExtension: '.extension-container[data-layout]',
+  blockCard: '.datasourceView-content-inner-wrap'
+};
+
+/**
+ * The box a block's controls anchor to under sparse surfaces. For some blocks this is an inner
+ * element, which can be wider than the block itself.
+ */
+export const getVisibleBox = (dom, nodeType) => {
+  const selector = VISIBLE_BOX_SELECTORS[nodeType];
+  return selector && dom.querySelector(selector) || dom;
+};

package/dist/esm/pm-plugins/{handle-sparse-mouse-over.js → handle-sparse-hover-target.js}

@@ -1,3 +1,4 @@
+import { getNodeIdProvider } from '@atlaskit/editor-common/node-anchor';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { getNodeTypeWithLevel } from './decorations-common';
@@ -34,26 +35,38 @@ var redirectParagraphToWrappedMedia = function redirectParagraphToWrappedMedia(v
   };
 };
 
-/** 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;
+/** Whether hovering must not show block controls under sparse surfaces. */
+export var isSparseHoverSuppressed = function isSparseHoverSuppressed(view, api) {
+  var _api$limitedMode, _getNodeIdProvider, _api$typeAhead, _api$editorDisabled$s, _api$editorDisabled, _api$editorViewMode, _api$showDiff$sharedS, _api$showDiff, _api$userIntent;
+  if (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 || (_getNodeIdProvider = getNodeIdProvider(view)) !== null && _getNodeIdProvider !== void 0 && _getNodeIdProvider.isLimitedMode()) {
+    return true;
+  }
   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;
+  if (controls !== null && controls !== void 0 && controls.isDragging || api !== null && api !== void 0 && (_api$typeAhead = api.typeAhead) !== null && _api$typeAhead !== void 0 && (_api$typeAhead = _api$typeAhead.sharedState.currentState()) !== null && _api$typeAhead !== void 0 && _api$typeAhead.isOpen) {
+    return true;
   }
-  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;
+  var editorDisabled = (_api$editorDisabled$s = api === null || api === void 0 || (_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 === null || api === void 0 || (_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;
+    return true;
   }
-  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') {
+  var isDisplayingDiff = (_api$showDiff$sharedS = api === null || api === void 0 || (_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;
+  return isDisplayingDiff || (api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || (_api$userIntent = _api$userIntent.sharedState.currentState()) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.currentUserIntent) === 'reviewing';
+};
+
+/**
+ * Shows controls for the block that owns `target`, resolved from PM structure so the first hover
+ * can create its sparse candidate. Callers check `isSparseHoverSuppressed` first.
+ */
+export var handleSparseHoverTarget = function handleSparseHoverTarget(view, target, api) {
+  var _$pos$nodeAfter, _controls$activeNode, _anchors$get, _anchors$get2;
+  if (!api || target === view.dom) {
     return false;
   }
+  var controls = api.blockControls.sharedState.currentState();
   var position;
   try {
-    position = view.posAtDOM(event.target, 0);
+    position = view.posAtDOM(target, 0);
   } catch (_unused) {
     return false;
   }
@@ -75,7 +88,7 @@ export var handleSparseMouseOver = function handleSparseMouseOver(view, event, a
     // 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)) {
+    if (nodeAfterDOM instanceof Element && nodeAfterDOM.contains(target)) {
       targetPosition = position;
     }
   }
@@ -86,9 +99,9 @@ export var handleSparseMouseOver = function handleSparseMouseOver(view, event, a
   if (!initialNode) {
     return false;
   }
-  var target = redirectParagraphToWrappedMedia(view, view.state.doc.resolve(targetPosition), targetPosition);
-  targetPosition = target.position;
-  var node = target.node;
+  var redirected = redirectParagraphToWrappedMedia(view, view.state.doc.resolve(targetPosition), targetPosition);
+  targetPosition = redirected.position;
+  var node = redirected.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;
   }

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

@@ -35,7 +35,6 @@ 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';
@@ -1159,6 +1158,11 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
         },
         mouseover: function mouseover(view, event) {
           var _api$limitedMode7, _getNodeIdProvider;
+          // Sparse surfaces handle all hover in bindSparseGutterHover, which also covers the gutters
+          // outside view.dom.
+          if (isExperimentEnabled('platform_editor_block_control_migration')) {
+            return false;
+          }
           if (api !== null && api !== void 0 && (_api$limitedMode7 = api.limitedMode) !== null && _api$limitedMode7 !== void 0 && (_api$limitedMode7 = _api$limitedMode7.sharedState.currentState()) !== null && _api$limitedMode7 !== void 0 && _api$limitedMode7.enabled) {
             return;
           }
@@ -1166,14 +1170,10 @@ 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) || isExperimentEnabled('platform_editor_block_control_migration'))) {
+          if ((_getNodeIdProvider = getNodeIdProvider(view)) !== null && _getNodeIdProvider !== void 0 && _getNodeIdProvider.isLimitedMode() && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
             return;
           }
-          if (isExperimentEnabled('platform_editor_block_control_migration')) {
-            handleSparseMouseOver(view, event, api);
-          } else {
-            handleMouseOver(view, event, api);
-          }
+          handleMouseOver(view, event, api);
           return false;
         },
         mousedown: function mousedown(view, event) {