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

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 24.0.2
+
+### Patch Changes
+
+- [`834a52c0cc828`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/834a52c0cc828) -
+  Allow sparse gutter hover to target blocks nested inside table cells, matching legacy hover zone
+  behaviour
+- Updated dependencies
+
+## 24.0.1
+
+### Patch Changes
+
+- [`6b9023d88752e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6b9023d88752e) -
+  Restore left-gutter hover for top-level blocks, nested blocks, layout columns, and tables or media
+  wider than the line length under platform_editor_block_control_migration, matching the legacy
+  hover zone sizes.
+- Updated dependencies
+
 ## 24.0.0
 
 ### Patch Changes

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

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.handleSparseMouseOver = void 0;
+exports.isSparseHoverSuppressed = exports.handleSparseHoverTarget = void 0;
+var _nodeAnchor = require("@atlaskit/editor-common/node-anchor");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _decorationsCommon = require("./decorations-common");
-var OPAQUE_BLOCKS = new Set(['table', 'bulletList', 'orderedList', 'taskList', 'decisionList', 'mediaSingle']);
+var OPAQUE_BLOCKS = new Set(['bulletList', 'orderedList', 'taskList', 'decisionList', 'mediaSingle']);
 var EXCLUDED_BLOCKS = new Set(['listItem', 'tableRow', 'tableCell', 'tableHeader', 'caption']);
+var TABLE_CELLS = new Set(['tableCell', 'tableHeader']);
 var isPanelNodeTypeName = function isPanelNodeTypeName(nodeTypeName) {
   return nodeTypeName === 'panel' || nodeTypeName === 'panel_c1' && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_controls_reliable_anchor', 'isEnabled', true) && (0, _fg.fg)('platform_editor_controls_reliable_anchor_patch_1');
 };
@@ -40,26 +42,38 @@ var redirectParagraphToWrappedMedia = function redirectParagraphToWrappedMedia(v
   };
 };
 
-/** Resolves hover from PM structure so the first hover can create its sparse candidate. */
-var handleSparseMouseOver = exports.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. */
+var isSparseHoverSuppressed = exports.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 = (0, _nodeAnchor.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.
+ */
+var handleSparseHoverTarget = exports.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;
   }
@@ -71,17 +85,20 @@ var handleSparseMouseOver = exports.handleSparseMouseOver = function handleSpars
     if (!_node.isBlock || EXCLUDED_BLOCKS.has(_node.type.name)) {
       continue;
     }
-    targetPosition = $pos.before(depth);
+    // Legacy hover excludes direct cell children, but can target deeper blocks inside them.
+    if (!TABLE_CELLS.has($pos.node(depth - 1).type.name)) {
+      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)) {
+  if (!opaque && (_$pos$nodeAfter = $pos.nodeAfter) !== null && _$pos$nodeAfter !== void 0 && _$pos$nodeAfter.isBlock && !EXCLUDED_BLOCKS.has($pos.nodeAfter.type.name) && !TABLE_CELLS.has($pos.parent.type.name)) {
     // Browser positions over non-editable node chrome can resolve to the first editable child.
     // Keep the ancestor unless that child actually owns the hovered DOM target.
     var nodeAfterDOM = view.nodeDOM(position);
-    if (nodeAfterDOM instanceof Element && nodeAfterDOM.contains(event.target)) {
+    if (nodeAfterDOM instanceof Element && nodeAfterDOM.contains(target)) {
       targetPosition = position;
     }
   }
@@ -92,9 +109,9 @@ var handleSparseMouseOver = exports.handleSparseMouseOver = function handleSpars
   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/cjs/pm-plugins/main.js

@@ -37,7 +37,6 @@ var _decorationsDropTargetActive = require("./decorations-drop-target-active");
 var _decorationsQuickInsertButton = require("./decorations-quick-insert-button");
 var _handleMouseDown = require("./handle-mouse-down");
 var _handleMouseOver = require("./handle-mouse-over");
-var _handleSparseMouseOver = require("./handle-sparse-mouse-over");
 var _keymap = require("./keymap");
 var _activeAnchorTracker = require("./utils/active-anchor-tracker");
 var _analytics2 = require("./utils/analytics");
@@ -1165,6 +1164,11 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
         },
         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 ((0, _isExperimentEnabled.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;
           }
@@ -1172,14 +1176,10 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
           // 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 = (0, _nodeAnchor.getNodeIdProvider)(view)) !== null && _getNodeIdProvider !== void 0 && _getNodeIdProvider.isLimitedMode() && ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration'))) {
+          if ((_getNodeIdProvider = (0, _nodeAnchor.getNodeIdProvider)(view)) !== null && _getNodeIdProvider !== void 0 && _getNodeIdProvider.isLimitedMode() && (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
             return;
           }
-          if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration')) {
-            (0, _handleSparseMouseOver.handleSparseMouseOver)(view, event, api);
-          } else {
-            (0, _handleMouseOver.handleMouseOver)(view, event, api);
-          }
+          (0, _handleMouseOver.handleMouseOver)(view, event, api);
           return false;
         },
         mousedown: function mousedown(view, event) {

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

@@ -0,0 +1,317 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isPossibleGutterElement = exports.createGutterBlockFinder = exports.bindSparseGutterHover = void 0;
+var _bindEventListener = require("bind-event-listener");
+var _styles = require("@atlaskit/editor-common/styles");
+var _constants = require("@atlaskit/editor-shared-styles/constants");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
+var _consts = require("../ui/consts");
+var _handleSparseHoverTarget = require("./handle-sparse-hover-target");
+var _commands = require("./interaction-tracking/commands");
+var _handleMouseMove = require("./interaction-tracking/handle-mouse-move");
+var _pmPlugin = require("./interaction-tracking/pm-plugin");
+var _visibleBox = require("./utils/visible-box");
+var BLOCK_SELECTOR = '[data-prosemirror-node-block="true"]';
+var TABLE_STRUCTURE_NODES = new Set(['table', 'tableRow', 'tableCell', 'tableHeader']);
+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 = _styles.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 (0, _visibleBox.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. Table and cell padding shows the table's controls, but containers
+ * nested inside cells can own gutters for their children, as in the legacy hover zones. Elements
+ * rendered beside the editor (title, popups, toolbars) cover any gutter beneath them.
+ */
+var isPossibleGutterElement = exports.isPossibleGutterElement = function isPossibleGutterElement(view, hoveredElement) {
+  if (!(hoveredElement instanceof Element)) {
+    return false;
+  }
+  var owner = hoveredElement.closest("".concat(BLOCK_SELECTOR, ", ").concat(_consts.BLOCK_CONTROLS_SURFACE_SELECTOR));
+  if (owner !== null && owner !== void 0 && owner.matches(_consts.BLOCK_CONTROLS_SURFACE_SELECTOR)) {
+    return false;
+  }
+  if (owner && view.dom.contains(owner)) {
+    var _owner$getAttribute, _owner$getAttribute2;
+    if (TABLE_STRUCTURE_NODES.has((_owner$getAttribute = owner.getAttribute('data-prosemirror-node-name')) !== null && _owner$getAttribute !== void 0 ? _owner$getAttribute : '')) {
+      return false;
+    }
+    var nodeType = view.state.schema.nodes[(_owner$getAttribute2 = owner.getAttribute('data-prosemirror-node-name')) !== null && _owner$getAttribute2 !== void 0 ? _owner$getAttribute2 : ''];
+    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: (0, _constants.akEditorGutterPaddingDynamic)(),
+    narrowTopLevel: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? _constants.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 <= _constants.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) ? _consts.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. */
+var createGutterBlockFinder = exports.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(_consts.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 = (0, _pmPlugin.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) {
+      (0, _commands.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;
+      (0, _commands.mouseEnter)(view, side);
+      return;
+    } else if (!isOverGutter && isHoldingMouseEnter) {
+      isHoldingMouseEnter = false;
+      (0, _handleMouseMove.handleMouseLeave)(view, rightSideControlsEnabled);
+      return;
+    }
+    if (isOverGutter && side && (state === null || state === void 0 ? void 0 : state.hoverSide) !== side) {
+      (0, _commands.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.
+ */
+var bindSparseGutterHover = exports.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 || (0, _handleSparseHoverTarget.isSparseHoverSuppressed)(view, api)) {
+      return;
+    }
+    var hover = classifyGutterHover(view, findGutterBlock, pointer);
+    if (hover.kind !== 'none') {
+      (0, _handleSparseHoverTarget.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) && !(0, _handleSparseHoverTarget.isSparseHoverSuppressed)(view, api)) {
+      (0, _handleSparseHoverTarget.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 (0, _bindEventListener.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/cjs/pm-plugins/{utils/sparse-surfaces-view.js → sparse-surfaces-view.js}

@@ -10,10 +10,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _surfaceKeys = require("@atlaskit/editor-common/block-controls/surface-keys");
 var _nodeAnchor = require("@atlaskit/editor-common/node-anchor");
 var _surfaceRenderer = require("@atlaskit/editor-ui-control-model/surface-renderer");
-var _decorationsSurfaceAnchor = require("../decorations-surface-anchor");
-var _main = require("../main");
-var _sparseSurfaceCandidates = require("./sparse-surface-candidates");
-var _surfaceViewport = require("./surface-viewport");
+var _decorationsSurfaceAnchor = require("./decorations-surface-anchor");
+var _main = require("./main");
+var _sparseGutterHover = require("./sparse-gutter-hover");
+var _sparseSurfaceCandidates = require("./utils/sparse-surface-candidates");
+var _surfaceViewport = require("./utils/surface-viewport");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var haveAnchorPositionsChanged = function haveAnchorPositionsChanged(positions, anchors) {
@@ -106,6 +107,10 @@ var createSparseSurfacesView = exports.createSparseSurfacesView = function creat
     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 = (0, _sparseGutterHover.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) {
@@ -125,6 +130,7 @@ var createSparseSurfacesView = exports.createSparseSurfacesView = function creat
         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/cjs/pm-plugins/sparse-surfaces.js

@@ -9,9 +9,9 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _view2 = require("@atlaskit/editor-prosemirror/view");
 var _main = require("./main");
+var _sparseSurfacesView = require("./sparse-surfaces-view");
 var _sparseSurfaceCandidates = require("./utils/sparse-surface-candidates");
 var _sparseSurfacesState = require("./utils/sparse-surfaces-state");
-var _sparseSurfacesView = require("./utils/sparse-surfaces-view");
 var sparseSurfacesKey = exports.sparseSurfacesKey = new _state.PluginKey('blockControlsSparseSurfaces');
 
 /** Owns sparse anchors independently of drag/drop decorations and their lifecycle. */

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getVisibleBox = void 0;
+// 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.
+ */
+var getVisibleBox = exports.getVisibleBox = function getVisibleBox(dom, nodeType) {
+  var selector = VISIBLE_BOX_SELECTORS[nodeType];
+  return selector && dom.querySelector(selector) || dom;
+};