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

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

@@ -0,0 +1,311 @@
+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';
+var BLOCK_SELECTOR = '[data-prosemirror-node-block="true"]';
+var TABLE_SELECTOR = '[data-prosemirror-node-name="table"]';
+var LAYOUT_SECTION_SELECTOR = '[data-prosemirror-node-name="layoutSection"]';
+var LAYOUT_COLUMN_SELECTOR = '[data-prosemirror-node-name="layoutColumn"]';
+
+// `layoutColumnExtendedHoverZone` is a DRAG_HANDLE_WIDTH-tall strip centred on the column's top edge.
+var LAYOUT_COLUMN_STRIP_REACH = DRAG_HANDLE_WIDTH / 2;
+var isBlockElement = function isBlockElement(element) {
+  return element.getAttribute('data-prosemirror-node-block') === 'true';
+};
+var getVisibleLeft = function 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 var isPossibleGutterElement = function isPossibleGutterElement(view, hoveredElement) {
+  if (!(hoveredElement instanceof Element)) {
+    return false;
+  }
+  var owner = hoveredElement.closest("".concat(BLOCK_SELECTOR, ", ").concat(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;
+    }
+    var 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);
+};
+var getGutterWidths = function getGutterWidths() {
+  return {
+    topLevel: akEditorGutterPaddingDynamic(),
+    narrowTopLevel: expValEqualsNoExposure('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? akEditorGutterPaddingReduced : undefined
+  };
+};
+var getTopLevelGutterWidth = function getTopLevelGutterWidth(api, widths) {
+  var _api$width;
+  var editorWidth = api === null || api === void 0 || (_api$width = api.width) === null || _api$width === void 0 || (_api$width = _api$width.sharedState.currentState()) === null || _api$width === void 0 ? void 0 : _api$width.width;
+  return widths.narrowTopLevel !== undefined && editorWidth !== undefined && editorWidth <= akEditorFullPageNarrowBreakout ? widths.narrowTopLevel : widths.topLevel;
+};
+var getEditorElementAt = function getEditorElementAt(view, clientX, clientY) {
+  var 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. */
+var findGutterOwner = function findGutterOwner(view, element, pointerTarget) {
+  var owner = null;
+  for (var 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;
+};
+var findBlockBesidePointer = function findBlockBesidePointer(view, api, event, pointerTarget, widths) {
+  var pointerBlock = pointerTarget.closest(BLOCK_SELECTOR);
+  var gutterWidth = pointerBlock && view.dom.contains(pointerBlock) ? DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : getTopLevelGutterWidth(api, widths);
+  var sample = getEditorElementAt(view, event.clientX + gutterWidth, event.clientY);
+  var owner = sample && findGutterOwner(view, sample, pointerTarget);
+  if (!owner) {
+    return null;
+  }
+  var left = getVisibleLeft(owner);
+  return event.clientX < left && left - event.clientX <= gutterWidth ? owner : null;
+};
+var findColumnBelowPointer = function findColumnBelowPointer(view, event, pointerTarget) {
+  if (pointerTarget.closest(LAYOUT_COLUMN_SELECTOR) || pointerTarget !== view.dom && !pointerTarget.closest(LAYOUT_SECTION_SELECTOR)) {
+    return null;
+  }
+  var sample = getEditorElementAt(view, event.clientX, event.clientY + LAYOUT_COLUMN_STRIP_REACH);
+  var 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 var createGutterBlockFinder = function createGutterBlockFinder(view, api) {
+  var widths = getGutterWidths();
+  return function (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.
+ */
+var isLeavingBlockControls = function isLeavingBlockControls(event) {
+  return event.relatedTarget instanceof Element && Boolean(event.relatedTarget.closest(BLOCK_CONTROLS_SURFACE_SELECTOR));
+};
+var classifyGutterHover = function classifyGutterHover(view, findGutterBlock, _ref) {
+  var event = _ref.event,
+    reachedNewElement = _ref.reachedNewElement;
+  var block = findGutterBlock(event);
+  if (block) {
+    return {
+      kind: 'block',
+      element: block
+    };
+  }
+  var 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.
+ */
+var createAfterRenderScheduler = function createAfterRenderScheduler(win, callback) {
+  var frame;
+  var timeout;
+  return {
+    schedule: function schedule() {
+      if (frame !== undefined || timeout !== undefined) {
+        return;
+      }
+      frame = win.requestAnimationFrame(function () {
+        frame = undefined;
+        timeout = win.setTimeout(function () {
+          timeout = undefined;
+          callback();
+        }, 0);
+      });
+    },
+    cancel: function 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.
+ */
+var createInteractionTrackingSync = function createInteractionTrackingSync(view, api, contentArea) {
+  // Set after gutter hover calls mouseEnter for a gutter outside the content area, so that leaving
+  // that gutter calls mouseLeave.
+  var isHoldingMouseEnter = false;
+  return function (event, isOverGutter) {
+    var _api$blockControls$sh;
+    var state = getInteractionTrackingState(view.state);
+    var rightSideControlsEnabled = api === null || api === void 0 || (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.rightSideControlsEnabled;
+    var 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 var bindSparseGutterHover = function bindSparseGutterHover(_ref2) {
+  var _ref3, _ref4, _view$dom$closest;
+  var api = _ref2.api,
+    view = _ref2.view;
+  var win = view.dom.ownerDocument.defaultView;
+  if (!win) {
+    return undefined;
+  }
+  var 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.
+  var eventArea = (_ref3 = (_ref4 = (_view$dom$closest = view.dom.closest('[data-editor-scroll-container="true"]')) !== null && _view$dom$closest !== void 0 ? _view$dom$closest : contentArea) !== null && _ref4 !== void 0 ? _ref4 : view.dom.parentElement) !== null && _ref3 !== void 0 ? _ref3 : view.dom;
+  var findGutterBlock = createGutterBlockFinder(view, api);
+  var syncInteractionTracking = createInteractionTrackingSync(view, api, contentArea);
+  var pending;
+  var handlePendingPointer = function handlePendingPointer() {
+    var pointer = pending;
+    pending = undefined;
+    if (!pointer || isSparseHoverSuppressed(view, api)) {
+      return;
+    }
+    var hover = classifyGutterHover(view, findGutterBlock, pointer);
+    if (hover.kind !== 'none') {
+      handleSparseHoverTarget(view, hover.element, api);
+    }
+    syncInteractionTracking(pointer.event, hover.kind === 'block');
+  };
+  var scheduler = createAfterRenderScheduler(win, handlePendingPointer);
+  var queueGutterEvent = function queueGutterEvent(event, reachedNewElement) {
+    var _pending;
+    pending = {
+      event: 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.
+  var hovered;
+  var classifyHoveredElement = function classifyHoveredElement(element) {
+    hovered = {
+      element: element,
+      isPossibleGutter: isPossibleGutterElement(view, element)
+    };
+    return hovered.isPossibleGutter;
+  };
+  var onMouseOver = function onMouseOver(event) {
+    if (classifyHoveredElement(event.target)) {
+      queueGutterEvent(event, !isLeavingBlockControls(event));
+      return;
+    }
+    pending = undefined;
+    var hoveredElement = event.target;
+    if (hoveredElement instanceof Element && view.dom.contains(hoveredElement) && !isSparseHoverSuppressed(view, api)) {
+      handleSparseHoverTarget(view, hoveredElement, api);
+    }
+  };
+  var onMouseMove = function onMouseMove(event) {
+    var _hovered;
+    var isPossibleGutter = ((_hovered = hovered) === null || _hovered === void 0 ? void 0 : _hovered.element) === event.target ? hovered.isPossibleGutter : classifyHoveredElement(event.target);
+    if (isPossibleGutter) {
+      queueGutterEvent(event, false);
+    }
+  };
+  var bindMouseListener = function bindMouseListener(type, _listener) {
+    return bind(eventArea, {
+      type: type,
+      listener: function listener(event) {
+        if (event instanceof win.MouseEvent) {
+          _listener(event);
+        }
+      },
+      options: {
+        passive: true
+      }
+    });
+  };
+  var unbindMouseOver = bindMouseListener('mouseover', onMouseOver);
+  var unbindMouseMove = bindMouseListener('mousemove', onMouseMove);
+  return function () {
+    unbindMouseOver();
+    unbindMouseMove();
+    scheduler.cancel();
+    pending = undefined;
+  };
+};

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

@@ -5,10 +5,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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';
 var haveAnchorPositionsChanged = function haveAnchorPositionsChanged(positions, anchors) {
   return positions.length !== anchors.size || positions.some(function (position) {
     return !anchors.has(position);
@@ -99,6 +100,10 @@ export var createSparseSurfacesView = function createSparseSurfacesView(_ref) {
     schedule();
   };
   var unsubscribe = api === null || api === void 0 || (_api$uiControlRegistr3 = api.uiControlRegistry) === null || _api$uiControlRegistr3 === void 0 ? void 0 : _api$uiControlRegistr3.actions.subscribe(invalidate);
+  var unbindGutterHover = bindSparseGutterHover({
+    api: api,
+    view: view
+  });
   var unsubscribers = [api === null || api === void 0 || (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 ? void 0 : _api$editorDisabled.sharedState.onChange(invalidate), api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.onChange(invalidate), api === null || api === void 0 || (_api$limitedMode2 = api.limitedMode) === null || _api$limitedMode2 === void 0 ? void 0 : _api$limitedMode2.sharedState.onChange(invalidate), api === null || api === void 0 || (_api$showDiff = api.showDiff) === null || _api$showDiff === void 0 ? void 0 : _api$showDiff.sharedState.onChange(invalidate), api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.sharedState.onChange(invalidate)];
   return {
     update: function update(currentView, previousState) {
@@ -118,6 +123,7 @@ export var createSparseSurfacesView = function createSparseSurfacesView(_ref) {
         win === null || win === void 0 || win.cancelAnimationFrame(frame);
       }
       observer.destroy();
+      unbindGutterHover === null || unbindGutterHover === void 0 || unbindGutterHover();
       unsubscribe === null || unsubscribe === void 0 || unsubscribe();
       unsubscribers.forEach(function (unsubscribe) {
         return unsubscribe === null || unsubscribe === void 0 ? void 0 : unsubscribe();

package/dist/esm/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 var sparseSurfacesKey = new PluginKey('blockControlsSparseSurfaces');
 
 /** Owns sparse anchors independently of drag/drop decorations and their lifecycle. */

package/dist/esm/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.
+var 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 var getVisibleBox = function getVisibleBox(dom, nodeType) {
+  var selector = VISIBLE_BOX_SELECTORS[nodeType];
+  return selector && dom.querySelector(selector) || dom;
+};

package/dist/esm/ui/drop-target.js

@@ -13,6 +13,7 @@ import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-uti
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-atlaskit-theme
 import { layers } from '@atlaskit/theme/constants';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';

package/dist/types/pm-plugins/handle-sparse-hover-target.d.ts

@@ -0,0 +1,10 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+/** Whether hovering must not show block controls under sparse surfaces. */
+export declare const isSparseHoverSuppressed: (view: EditorView, api: ExtractInjectionAPI<BlockControlsPlugin> | undefined) => boolean;
+/**
+ * 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 declare const handleSparseHoverTarget: (view: EditorView, target: Element, api: ExtractInjectionAPI<BlockControlsPlugin> | undefined) => boolean;

package/dist/types/pm-plugins/sparse-gutter-hover.d.ts

@@ -0,0 +1,27 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+/**
+ * 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 declare const isPossibleGutterElement: (view: EditorView, hoveredElement: EventTarget | null) => hoveredElement is Element;
+/** Returns a function that finds the block whose legacy hover zone contains the pointer. */
+export declare const createGutterBlockFinder: (view: EditorView, api: ExtractInjectionAPI<BlockControlsPlugin> | undefined) => ((event: MouseEvent) => Element | null);
+/**
+ * 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 declare const bindSparseGutterHover: ({ api, view, }: {
+    api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
+    view: EditorView;
+}) => (() => void) | undefined;

package/dist/types/pm-plugins/{utils/sparse-surfaces-view.d.ts → sparse-surfaces-view.d.ts}

@@ -1,8 +1,8 @@
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorState, PluginKey } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { BlockControlsPlugin } from '../../blockControlsPluginType';
-import type { SparseSurfacesState } from './sparse-surfaces-state';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+import type { SparseSurfacesState } from './utils/sparse-surfaces-state';
 type SparseSurfacesPluginView = {
     destroy: () => void;
     update: (view: EditorView, previousState: EditorState) => void;

package/dist/types/pm-plugins/utils/visible-box.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 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 declare const getVisibleBox: (dom: Element, nodeType: string) => Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "23.0.9",
+	"version": "24.0.1",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,23 +29,23 @@
 		"@atlaskit/button": "^25.4.0",
 		"@atlaskit/css": "^1.1.0",
 		"@atlaskit/docs": "^12.3.0",
-		"@atlaskit/editor-plugin-accessibility-utils": "^22.0.0",
-		"@atlaskit/editor-plugin-analytics": "^22.0.0",
-		"@atlaskit/editor-plugin-block-collapse": "^8.0.0",
-		"@atlaskit/editor-plugin-editor-disabled": "^22.0.0",
-		"@atlaskit/editor-plugin-editor-viewmode": "^24.0.0",
-		"@atlaskit/editor-plugin-feature-flags": "^21.0.0",
-		"@atlaskit/editor-plugin-interaction": "^36.0.0",
-		"@atlaskit/editor-plugin-limited-mode": "^19.0.0",
-		"@atlaskit/editor-plugin-metrics": "^23.0.0",
-		"@atlaskit/editor-plugin-quick-insert": "^22.0.0",
-		"@atlaskit/editor-plugin-selection": "^22.0.0",
-		"@atlaskit/editor-plugin-show-diff": "^20.0.0",
-		"@atlaskit/editor-plugin-toolbar": "^19.0.0",
-		"@atlaskit/editor-plugin-type-ahead": "^23.0.0",
-		"@atlaskit/editor-plugin-ui-control-registry": "^16.0.0",
-		"@atlaskit/editor-plugin-user-intent": "^20.0.0",
-		"@atlaskit/editor-plugin-width": "^23.0.0",
+		"@atlaskit/editor-plugin-accessibility-utils": "^23.0.0",
+		"@atlaskit/editor-plugin-analytics": "^23.0.0",
+		"@atlaskit/editor-plugin-block-collapse": "^9.0.0",
+		"@atlaskit/editor-plugin-editor-disabled": "^23.0.0",
+		"@atlaskit/editor-plugin-editor-viewmode": "^25.0.0",
+		"@atlaskit/editor-plugin-feature-flags": "^22.0.0",
+		"@atlaskit/editor-plugin-interaction": "^37.0.0",
+		"@atlaskit/editor-plugin-limited-mode": "^20.0.0",
+		"@atlaskit/editor-plugin-metrics": "^24.0.0",
+		"@atlaskit/editor-plugin-quick-insert": "^23.0.0",
+		"@atlaskit/editor-plugin-selection": "^23.0.0",
+		"@atlaskit/editor-plugin-show-diff": "^21.0.0",
+		"@atlaskit/editor-plugin-toolbar": "^20.0.0",
+		"@atlaskit/editor-plugin-type-ahead": "^24.0.0",
+		"@atlaskit/editor-plugin-ui-control-registry": "^17.0.0",
+		"@atlaskit/editor-plugin-user-intent": "^21.0.0",
+		"@atlaskit/editor-plugin-width": "^24.1.0",
 		"@atlaskit/editor-prosemirror": "^9.0.0",
 		"@atlaskit/editor-shared-styles": "^4.3.0",
 		"@atlaskit/editor-tables": "^3.2.0",
@@ -61,9 +61,9 @@
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/section-message": "^10.2.0",
 		"@atlaskit/theme": "^28.2.0",
-		"@atlaskit/tmp-editor-statsig": "^218.0.0",
+		"@atlaskit/tmp-editor-statsig": "^219.0.0",
 		"@atlaskit/tokens": "^20.1.0",
-		"@atlaskit/tooltip": "^24.3.0",
+		"@atlaskit/tooltip": "^24.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"@emotion/react": "^11.7.1",
@@ -73,7 +73,7 @@
 		"uuid": "^11.1.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^126.4.0",
+		"@atlaskit/editor-common": "^127.1.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"

package/dist/types/pm-plugins/handle-sparse-mouse-over.d.ts

@@ -1,5 +0,0 @@
-import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { BlockControlsPlugin } from '../blockControlsPluginType';
-/** Resolves hover from PM structure so the first hover can create its sparse candidate. */
-export declare const handleSparseMouseOver: (view: EditorView, event: Event, api: ExtractInjectionAPI<BlockControlsPlugin> | undefined) => boolean;