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

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

@@ -9,7 +9,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _browserApis = require("@atlaskit/browser-apis");
 var _analytics = require("@atlaskit/editor-common/analytics");
-var _surfaceKeys = require("@atlaskit/editor-common/block-controls/surface-keys");
 var _browser = require("@atlaskit/editor-common/browser");
 var _nodeAnchor = require("@atlaskit/editor-common/node-anchor");
 var _performanceMeasures = require("@atlaskit/editor-common/performance-measures");
@@ -20,7 +19,6 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
-var _surfaceRenderer = require("@atlaskit/editor-ui-control-model/surface-renderer");
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
@@ -32,19 +30,20 @@ var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equa
 var _consts = require("../ui/consts");
 var _domAttrName = require("../ui/utils/dom-attr-name");
 var _decorationsAnchor = require("./decorations-anchor");
+var _decorationsCommon = require("./decorations-common");
 var _decorationsDragHandle = require("./decorations-drag-handle");
 var _decorationsDropTarget = require("./decorations-drop-target");
 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");
 var _anchorUtils = require("./utils/anchor-utils");
 var _getSelection = require("./utils/getSelection");
 var _selection = require("./utils/selection");
-var _surfaceNodePositions = require("./utils/surface-node-positions");
 var _transactions = require("./utils/transactions");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -242,20 +241,18 @@ var getDecorationAtPos = function getDecorationAtPos(state, decorations, pos, to
   return nodeDecAtActivePos;
 };
 var _apply = exports.apply = function apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry) {
-  var _meta$multiSelectDnD, _api$editorViewMode, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging2, _meta$isDragging3, _meta$toggleMenu, _meta$toggleMenu2, _meta$toggleMenu3, _meta$toggleMenu4, _meta$toggleMenu5, _meta$toggleMenu6, _meta$toggleMenu7, _meta$toggleMenu8, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
+  var _meta$multiSelectDnD, _api$editorViewMode, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging2, _meta$toggleMenu, _meta$isDragging3, _meta$toggleMenu2, _meta$toggleMenu3, _meta$toggleMenu4, _meta$toggleMenu5, _meta$toggleMenu6, _meta$toggleMenu7, _meta$toggleMenu8, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
   var rightSideControlsEnabled = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
   var quickInsertButtonEnabled = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : true;
   var anchorRectCache = arguments.length > 10 ? arguments[10] : undefined;
   var resizeObserverWidth = arguments.length > 11 ? arguments[11] : undefined;
   var pragmaticCleanup = arguments.length > 12 ? arguments[12] : undefined;
-  var resolvedSurfaces = arguments.length > 13 && arguments[13] !== undefined ? arguments[13] : [];
-  var limitedModeTeardown = arguments.length > 14 ? arguments[14] : undefined;
+  var limitedModeTeardown = arguments.length > 13 ? arguments[13] : undefined;
   var activeNode = currentState.activeNode,
     decorations = currentState.decorations,
     isResizerResizing = currentState.isResizerResizing,
-    multiSelectDnD = currentState.multiSelectDnD,
-    surfaceNodePositions = currentState.surfaceNodePositions;
-  var previousActiveNode = activeNode;
+    multiSelectDnD = currentState.multiSelectDnD;
+  var surfaceNodePositions = currentState.surfaceNodePositions;
   var editorHeight = currentState.editorHeight,
     editorWidthLeft = currentState.editorWidthLeft,
     editorWidthRight = currentState.editorWidthRight,
@@ -400,13 +397,28 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
         if (activeNode.rootPos !== undefined) {
           mappedRootPos = tr.mapping.mapResult(activeNode.rootPos, -1);
         }
+        var mappedNodeType = activeNode.nodeType;
+        var mappedRootNodeType = activeNode.rootNodeType;
+        // Sparse mode does not redraw the old decorations. A block-type transaction may report
+        // a text range that excludes the active block position, so always refresh the already
+        // active node and root from the new document (for example, paragraph → heading-1).
+        if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration')) {
+          var mappedNode = newState.doc.nodeAt(_mappedPos.pos);
+          if (mappedNode !== null && mappedNode !== void 0 && mappedNode.isBlock) {
+            mappedNodeType = (0, _decorationsCommon.getNodeTypeWithLevel)(mappedNode);
+          }
+          var mappedRootNode = mappedRootPos ? mappedRootPos.pos === _mappedPos.pos && mappedNode ? mappedNode : newState.doc.nodeAt(mappedRootPos.pos) : undefined;
+          if (mappedRootNode !== null && mappedRootNode !== void 0 && mappedRootNode.isBlock) {
+            mappedRootNodeType = (0, _decorationsCommon.getNodeTypeWithLevel)(mappedRootNode);
+          }
+        }
         activeNode = {
           pos: _mappedPos.pos,
           anchorName: activeNode.anchorName,
-          nodeType: activeNode.nodeType,
+          nodeType: mappedNodeType,
           rootPos: (_mappedRootPos$pos = (_mappedRootPos = mappedRootPos) === null || _mappedRootPos === void 0 ? void 0 : _mappedRootPos.pos) !== null && _mappedRootPos$pos !== void 0 ? _mappedRootPos$pos : activeNode.rootPos,
           rootAnchorName: activeNode.rootAnchorName,
-          rootNodeType: activeNode.rootNodeType
+          rootNodeType: mappedRootNodeType
         };
       }
     }
@@ -442,7 +454,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
   var isNodeDecsMissing = isDecSetEmpty || maybeNodeCountChanged || (0, _editorExperiment.editorExperiment)('platform_editor_breakout_resizing', true) && hasJustFinishedResizing;
   var shouldRedrawNodeDecs = !isResizerResizing && (isNodeDecsMissing || (meta === null || meta === void 0 ? void 0 : meta.isDragging)) &&
   // Skip expensive anchor node decoration recalculations when native anchor support is enabled
-  !(0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true);
+  !((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration'));
   var isActiveNodeModified = false;
   if (api && shouldRedrawNodeDecs) {
     var oldNodeDecs = (0, _decorationsAnchor.findNodeDecs)(newState, decorations, from, to);
@@ -518,14 +530,14 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
   // In view mode with right-side controls, remove any lingering drag handle decorations
   // (they may carry over from edit mode). Only remove drag handles specifically, not
   // the remix button decorations (those are managed separately via showInViewMode).
-  if (flags.legacyDragHandleEnabled && isViewMode && rightSideControlsEnabled) {
+  if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') && isViewMode && rightSideControlsEnabled) {
     var allHandleDecs = (0, _decorationsDragHandle.findHandleDec)(decorations, 0, newState.doc.content.size);
     if (allHandleDecs.length > 0) {
       decorations = decorations.remove(allHandleDecs);
     }
   }
   if (shouldRemoveHandle) {
-    if (flags.legacyDragHandleEnabled) {
+    if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration')) {
       var _activeNode5, _activeNode6;
       var oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.pos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.pos);
       decorations = decorations.remove(oldHandle);
@@ -537,7 +549,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     // after a doc change (e.g. pressing Enter splits a node), DecorationSet.map() can shift the
     // decoration to a different position, so a point-range search would miss it and leave a stale
     // attribute on the wrong DOM node.
-    if ((flags.legacyDragHandleEnabled || nodeDecorationRegistry.length > 0) && (0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true)) {
+    if ((!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') || nodeDecorationRegistry.length > 0) && (0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true)) {
       var oldActiveNodeDec = (0, _decorationsDragHandle.findActiveDragHandleNodeDec)(decorations, 0, newState.doc.content.size);
       decorations = decorations.remove(oldActiveNodeDec);
       var oldActiveQuickInsertDec = (0, _decorationsQuickInsertButton.findActiveQuickInsertNodeDec)(decorations, 0, newState.doc.content.size);
@@ -599,7 +611,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
   } else if (api) {
     var _latestActiveNode5, _latestActiveNode10;
     // The registry surface replaces the legacy drag-handle decorations during migration.
-    if (flags.legacyDragHandleEnabled && shouldRecreateHandle && (!rightSideControlsEnabled || !isViewMode)) {
+    if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') && shouldRecreateHandle && (!rightSideControlsEnabled || !isViewMode)) {
       var _activeNode11, _activeNode12, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
       var _oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (_activeNode11 = activeNode) === null || _activeNode11 === void 0 ? void 0 : _activeNode11.pos, (_activeNode12 = activeNode) === null || _activeNode12 === void 0 ? void 0 : _activeNode12.pos);
       decorations = decorations.remove(_oldHandle);
@@ -616,7 +628,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
       });
       decorations = decorations.add(newState.doc, [handleDec]);
     }
-    if ((flags.legacyDragHandleEnabled ||
+    if ((!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') ||
     // nodeDecorationRegistry consumers (e.g. the legacy Remix button) rely
     // on that same anchor-name for their own CSS anchor() positioning, so this must still run
     // when such a consumer exists even if the legacy drag handle itself is disabled.
@@ -888,7 +900,10 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     }
   }
   var isEmptyDoc = (0, _utils.isEmptyDocument)(newState.doc);
-  if (isEmptyDoc && !(0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
+  if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') && (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false) {
+    decorations = decorations.remove((0, _decorationsAnchor.findNodeDecs)(newState, decorations));
+  }
+  if (isEmptyDoc && !((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration'))) {
     var hasNodeDecoration = !!(0, _decorationsAnchor.findNodeDecs)(newState, decorations).length;
     if (!hasNodeDecoration) {
       decorations = decorations.add(newState.doc, [(0, _decorationsDragHandle.emptyParagraphNodeDecorations)()]);
@@ -901,27 +916,30 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     // remove isEmptyDoc check and let decorations render and determine their own visibility
     // In view mode with right-side controls we render node decorations (right-edge button), not the
     // handle - so findHandleDec is always empty. Don't clear activeNode in that case.
-    var hasHandleOrViewModeControls = !flags.legacyDragHandleEnabled || isViewMode && rightSideControlsEnabled || (0, _decorationsDragHandle.findHandleDec)(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length > 0;
+    var hasHandleOrViewModeControls = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') || isViewMode && rightSideControlsEnabled || (0, _decorationsDragHandle.findHandleDec)(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length > 0;
     // Keep the registry surface mounted while its Block Menu owns focus.
-    var keepActiveNodeForOpenBlockMenu = !flags.legacyDragHandleEnabled && isMenuOpen;
+    var keepActiveNodeForOpenBlockMenu = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') && isMenuOpen;
     newActiveNode = meta !== null && meta !== void 0 && meta.editorBlurred && !keepActiveNodeForOpenBlockMenu || !(meta !== null && meta !== void 0 && meta.activeNode) && !hasHandleOrViewModeControls ? null : latestActiveNode;
   } else {
     var _latestActiveNode13, _latestActiveNode14;
-    newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && flags.legacyDragHandleEnabled && (0, _decorationsDragHandle.findHandleDec)(decorations, (_latestActiveNode13 = latestActiveNode) === null || _latestActiveNode13 === void 0 ? void 0 : _latestActiveNode13.pos, (_latestActiveNode14 = latestActiveNode) === null || _latestActiveNode14 === void 0 ? void 0 : _latestActiveNode14.pos).length === 0 ? null : latestActiveNode;
-  }
-  if (flags.surfaceNodePositionsEnabled && resolvedSurfaces.length > 0) {
-    surfaceNodePositions = (0, _surfaceNodePositions.updateSurfaceNodePositions)({
-      activeNode: newActiveNode,
-      currentPositions: surfaceNodePositions,
-      from: from,
-      newState: newState,
-      previousActiveNode: previousActiveNode,
-      resolvedSurfaces: resolvedSurfaces,
-      to: to,
-      tr: tr
-    });
+    newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && !(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') && (0, _decorationsDragHandle.findHandleDec)(decorations, (_latestActiveNode13 = latestActiveNode) === null || _latestActiveNode13 === void 0 ? void 0 : _latestActiveNode13.pos, (_latestActiveNode14 = latestActiveNode) === null || _latestActiveNode14 === void 0 ? void 0 : _latestActiveNode14.pos).length === 0 ? null : latestActiveNode;
   }
   var isMenuOpenNew = isMenuOpen;
+  var nextMenuTriggerByNode = (meta === null || meta === void 0 || (_meta$toggleMenu = meta.toggleMenu) === null || _meta$toggleMenu === void 0 ? void 0 : _meta$toggleMenu.triggerByNode) || menuTriggerByNode;
+  if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') && tr.docChanged && menuTriggerByNode && !(meta !== null && meta !== void 0 && meta.toggleMenu)) {
+    var _menuTriggerByNode$ro, _newState$doc$nodeAt4;
+    var mapped = tr.mapping.mapResult(menuTriggerByNode.pos, 1);
+    var mappedRoot = tr.mapping.mapResult((_menuTriggerByNode$ro = menuTriggerByNode.rootPos) !== null && _menuTriggerByNode$ro !== void 0 ? _menuTriggerByNode$ro : menuTriggerByNode.pos, 1);
+    if (mapped.deleted || mappedRoot.deleted || !((_newState$doc$nodeAt4 = newState.doc.nodeAt(mapped.pos)) !== null && _newState$doc$nodeAt4 !== void 0 && _newState$doc$nodeAt4.isBlock)) {
+      nextMenuTriggerByNode = undefined;
+      isMenuOpenNew = false;
+    } else {
+      nextMenuTriggerByNode = _objectSpread(_objectSpread({}, menuTriggerByNode), {}, {
+        pos: mapped.pos,
+        rootPos: mappedRoot.pos
+      });
+    }
+  }
   if (meta !== null && meta !== void 0 && meta.closeMenu) {
     isMenuOpenNew = false;
   } else if (meta !== null && meta !== void 0 && meta.toggleMenu) {
@@ -941,8 +959,8 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     activeDropTargetNode: currentActiveDropTargetNode,
     isDragging: (_meta$isDragging3 = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging3 !== void 0 ? _meta$isDragging3 : isDragging,
     isMenuOpen: isMenuOpenNew,
-    menuTriggerBy: (meta === null || meta === void 0 || (_meta$toggleMenu = meta.toggleMenu) === null || _meta$toggleMenu === void 0 ? void 0 : _meta$toggleMenu.anchorName) || menuTriggerBy,
-    menuTriggerByNode: (meta === null || meta === void 0 || (_meta$toggleMenu2 = meta.toggleMenu) === null || _meta$toggleMenu2 === void 0 ? void 0 : _meta$toggleMenu2.triggerByNode) || menuTriggerByNode,
+    menuTriggerBy: (meta === null || meta === void 0 || (_meta$toggleMenu2 = meta.toggleMenu) === null || _meta$toggleMenu2 === void 0 ? void 0 : _meta$toggleMenu2.anchorName) || menuTriggerBy,
+    menuTriggerByNode: nextMenuTriggerByNode,
     blockMenuOptions: {
       canMoveUp: (meta === null || meta === void 0 || (_meta$toggleMenu3 = meta.toggleMenu) === null || _meta$toggleMenu3 === void 0 ? void 0 : _meta$toggleMenu3.moveUp) !== undefined ? meta === null || meta === void 0 || (_meta$toggleMenu4 = meta.toggleMenu) === null || _meta$toggleMenu4 === void 0 ? void 0 : _meta$toggleMenu4.moveUp : blockMenuOptions === null || blockMenuOptions === void 0 ? void 0 : blockMenuOptions.canMoveUp,
       canMoveDown: (meta === null || meta === void 0 || (_meta$toggleMenu5 = meta.toggleMenu) === null || _meta$toggleMenu5 === void 0 ? void 0 : _meta$toggleMenu5.moveDown) !== undefined ? meta === null || meta === void 0 || (_meta$toggleMenu6 = meta.toggleMenu) === null || _meta$toggleMenu6 === void 0 ? void 0 : _meta$toggleMenu6.moveDown : blockMenuOptions === null || blockMenuOptions === void 0 ? void 0 : blockMenuOptions.canMoveDown,
@@ -961,25 +979,17 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
   };
 };
 var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry) {
-  var _api$uiControlRegistr, _api$uiControlRegistr2, _api$uiControlRegistr3, _api$uiControlRegistr4;
   var rightSideControlsEnabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   var quickInsertButtonEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;
-  var legacyDragHandleEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : true;
   var _getIntl = getIntl(),
     formatMessage = _getIntl.formatMessage;
   var isAdvancedLayoutEnabled = (0, _editorExperiment.editorExperiment)('advanced_layouts', true, {
     exposure: true
   });
   var toolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
-  // Mirrors `registryBlockControlsEnabled` in blockControlsPlugin.tsx: `legacyDragHandleEnabled` is
-  // only false once that gate is on.
-  var surfaceNodePositionsEnabled = !legacyDragHandleEnabled;
   var flags = {
-    legacyDragHandleEnabled: legacyDragHandleEnabled,
-    surfaceNodePositionsEnabled: surfaceNodePositionsEnabled,
     toolbarFlagsEnabled: toolbarFlagsEnabled
   };
-  var resolvedSurfaces = surfaceNodePositionsEnabled ? [(0, _surfaceRenderer.resolveSurface)((_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(_surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [], _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE), (0, _surfaceRenderer.resolveSurface)((_api$uiControlRegistr3 = api === null || api === void 0 || (_api$uiControlRegistr4 = api.uiControlRegistry) === null || _api$uiControlRegistr4 === void 0 ? void 0 : _api$uiControlRegistr4.actions.getComponents(_surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE)) !== null && _api$uiControlRegistr3 !== void 0 ? _api$uiControlRegistr3 : [], _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE)] : [];
   var anchorRectCache;
   if (!(0, _anchorUtils.isAnchorSupported)()) {
     anchorRectCache = new _anchorUtils.AnchorRectCache();
@@ -993,13 +1003,11 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
   return new _safePlugin.SafePlugin({
     key: key,
     state: {
-      init: function init(_config, editorState) {
-        return _objectSpread(_objectSpread({}, initialState), {}, {
-          surfaceNodePositions: resolvedSurfaces.length > 0 ? (0, _surfaceNodePositions.getSurfaceNodePositions)(editorState, resolvedSurfaces) : []
-        });
+      init: function init() {
+        return _objectSpread({}, initialState);
       },
       apply: function apply(tr, currentState, _, newState) {
-        return _apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled, anchorRectCache, resizeObserverWidth, pragmaticCleanup, resolvedSurfaces, limitedModeTeardown);
+        return _apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled, anchorRectCache, resizeObserverWidth, pragmaticCleanup, limitedModeTeardown);
       }
     },
     props: {
@@ -1020,7 +1028,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
         var decorationSet = (_key$getState2 = key.getState(state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.decorations;
         // In view mode with right-side controls, remove any lingering drag-handle decorations
         // (created in edit mode) that may not have been cleaned up on mode switch.
-        if (decorationSet && legacyDragHandleEnabled && rightSideControlsEnabled && (api === null || api === void 0 || (_api$editorViewMode3 = api.editorViewMode) === null || _api$editorViewMode3 === void 0 || (_api$editorViewMode3 = _api$editorViewMode3.sharedState.currentState()) === null || _api$editorViewMode3 === void 0 ? void 0 : _api$editorViewMode3.mode) === 'view') {
+        if (decorationSet && !(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') && rightSideControlsEnabled && (api === null || api === void 0 || (_api$editorViewMode3 = api.editorViewMode) === null || _api$editorViewMode3 === void 0 || (_api$editorViewMode3 = _api$editorViewMode3.sharedState.currentState()) === null || _api$editorViewMode3 === void 0 ? void 0 : _api$editorViewMode3.mode) === 'view') {
           var handleDecs = (0, _decorationsDragHandle.findHandleDec)(decorationSet, 0, state.doc.content.size);
           if (handleDecs.length > 0) {
             decorationSet = decorationSet.remove(handleDecs);
@@ -1166,10 +1174,14 @@ 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)) {
+          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'))) {
             return;
           }
-          (0, _handleMouseOver.handleMouseOver)(view, event, api);
+          if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration')) {
+            (0, _handleSparseMouseOver.handleSparseMouseOver)(view, event, api);
+          } else {
+            (0, _handleMouseOver.handleMouseOver)(view, event, api);
+          }
           return false;
         },
         mousedown: function mousedown(view, event) {
@@ -1230,7 +1242,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
           if ((0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1')) {
             var _api$core2;
             // Focus moving into the registry surface remains inside the editor experience.
-            var isChildOfSurface = !flags.legacyDragHandleEnabled && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest(_consts.BLOCK_CONTROLS_SURFACE_SELECTOR) !== null;
+            var isChildOfSurface = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest(_consts.BLOCK_CONTROLS_SURFACE_SELECTOR) !== null;
             var shouldPreserveRemixInlineDropdownFocus = event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('[data-editor-remix-inline-dropdown-preserve-focus]') !== null;
             var isChildOfEditor = event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest("#".concat(_ui.EDIT_AREA_ID)) !== null;
 
@@ -1270,7 +1282,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
 
           // Registry surfaces have their own ResizeObservers and absolute placement.
           // Width metadata only drives legacy widget recreation.
-          if (legacyDragHandleEnabled && !isResizerResizing) {
+          if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') && !isResizerResizing) {
             var _editorContentArea2 = entries[0].target;
             // Ignored via go/ees005
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -1289,7 +1301,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
           }
         }
       }));
-      var shouldObserve = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? !(0, _anchorUtils.isAnchorSupported)() : true;
+      var shouldObserve = !((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration')) || !(0, _anchorUtils.isAnchorSupported)();
       if (editorContentArea && shouldObserve) {
         resizeObserverWidth.observe(editorContentArea);
       }

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

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sparseSurfacesKey = exports.createSparseSurfacesPlugin = void 0;
+var _surfaceCandidateInvalidation = require("@atlaskit/editor-common/block-controls/surface-candidate-invalidation");
+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 _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. */
+var createSparseSurfacesPlugin = exports.createSparseSurfacesPlugin = function createSparseSurfacesPlugin(api) {
+  return new _safePlugin.SafePlugin({
+    key: sparseSurfacesKey,
+    state: {
+      init: function init() {
+        return (0, _sparseSurfacesState.createInitialSparseSurfacesState)(_sparseSurfaceCandidates.emptySparseSurfaceCandidateState);
+      },
+      apply: function apply(tr, previous, _oldState, newState) {
+        return (0, _sparseSurfacesState.applySparseSurfacesTransaction)({
+          invalidation: tr.getMeta(_surfaceCandidateInvalidation.BLOCK_CONTROLS_SURFACE_INVALIDATION),
+          meta: tr.getMeta(sparseSurfacesKey),
+          newState: newState,
+          previous: previous,
+          tr: tr
+        });
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        var _api$limitedMode, _blockControlsKey$get, _sparseSurfacesKey$ge;
+        return api !== null && api !== void 0 && (_api$limitedMode = api.limitedMode) !== null && _api$limitedMode !== void 0 && (_api$limitedMode = _api$limitedMode.sharedState.currentState()) !== null && _api$limitedMode !== void 0 && _api$limitedMode.enabled || (_blockControlsKey$get = _main.key.getState(state)) !== null && _blockControlsKey$get !== void 0 && _blockControlsKey$get.isDragging ? _view2.DecorationSet.empty : (_sparseSurfacesKey$ge = sparseSurfacesKey.getState(state)) === null || _sparseSurfacesKey$ge === void 0 ? void 0 : _sparseSurfacesKey$ge.decorations;
+      }
+    },
+    view: function view(_view) {
+      return (0, _sparseSurfacesView.createSparseSurfacesView)({
+        api: api,
+        pluginKey: sparseSurfacesKey,
+        view: _view
+      });
+    }
+  });
+};