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

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 20.1.0
+
+### Minor Changes
+
+- [`fc26bfc51dd5c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fc26bfc51dd5c) -
+  Add sparse block-control surface anchors, intersection-driven candidates, and explicit visibility
+  invalidation for registry-backed block controls. Expose registration change subscriptions from the
+  UI control registry model, and refresh cached visibility from suggestion and collapse transaction
+  metadata. Under `platform_editor_block_control_migration`, use native node-anchor identity across
+  Editor and Block Controls, and route expand keyboard focus through the shared Block Controls
+  command. Preserve Show Diff visibility checks in both migration cohorts so block controls stay
+  hidden while a diff is displayed. Keep the block menu closed when a migrated layout-column handle
+  opens the layout menu, and close the layout menu when the selection moves away from its selected
+  columns.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 20.0.3
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -23,12 +23,14 @@ var _moveNode = require("./editor-commands/move-node");
 var _moveNodeWithBlockMenu2 = require("./editor-commands/move-node-with-block-menu");
 var _moveToLayout = require("./editor-commands/move-to-layout");
 var _moveNodeUtils = require("./editor-commands/utils/move-node-utils");
+var _decorationsCommon = require("./pm-plugins/decorations-common");
 var _firstNodeDecPlugin = require("./pm-plugins/first-node-dec-plugin");
 var _pmPlugin = require("./pm-plugins/interaction-tracking/pm-plugin");
 var _main = require("./pm-plugins/main");
 var _editorCommands = require("./pm-plugins/selection-preservation/editor-commands");
 var _pluginKey = require("./pm-plugins/selection-preservation/plugin-key");
 var _pmPlugin2 = require("./pm-plugins/selection-preservation/pm-plugin");
+var _sparseSurfaces = require("./pm-plugins/sparse-surfaces");
 var _expandAndUpdateSelection2 = require("./pm-plugins/utils/expand-and-update-selection");
 var _getSelection = require("./pm-plugins/utils/getSelection");
 var _blockControlsLeftSurfaces = require("./ui/block-controls-left-surfaces");
@@ -46,7 +48,6 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
   var rightSideControlsEnabled = (_config$rightSideCont = config === null || config === void 0 ? void 0 : config.rightSideControlsEnabled) !== null && _config$rightSideCont !== void 0 ? _config$rightSideCont : false;
   var quickInsertButtonEnabled = (_config$quickInsertBu = config === null || config === void 0 ? void 0 : config.quickInsertButtonEnabled) !== null && _config$quickInsertBu !== void 0 ? _config$quickInsertBu : true;
   var registryBlockControlsEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration');
-  var legacyBlockControlsEnabled = !registryBlockControlsEnabled;
   if (registryBlockControlsEnabled) {
     var _api$uiControlRegistr, _api$uiControlRegistr2;
     api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register([_surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE, _objectSpread(_objectSpread({}, _surfaceKeys.BLOCK_CONTROLS_LEFT_SECTION), {}, {
@@ -142,9 +143,17 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         plugin: function plugin(_ref2) {
           var getIntl = _ref2.getIntl,
             nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
-          return (0, _main.createPlugin)(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled);
+          return (0, _main.createPlugin)(api, getIntl, nodeViewPortalProviderAPI, registryBlockControlsEnabled ? [] : nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && !registryBlockControlsEnabled);
         }
       }];
+      if (registryBlockControlsEnabled) {
+        pmPlugins.push({
+          name: 'blockControlsSparseSurfaces',
+          plugin: function plugin() {
+            return (0, _sparseSurfaces.createSparseSurfacesPlugin)(api);
+          }
+        });
+      }
       if ((0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1')) {
         pmPlugins.push({
           name: 'blockControlsInteractionTrackingPlugin',
@@ -163,7 +172,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
       // Not registered under the registry migration: the decoration puts an inline
       // `margin-top: 0` on the first document node, which fights features that render their own
       // content above it — a leading show-diff widget is left flush against the node below.
-      if ((0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar)) && legacyBlockControlsEnabled) {
+      if ((0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar)) && !registryBlockControlsEnabled) {
         pmPlugins.push({
           name: 'firstNodeDec',
           plugin: _firstNodeDecPlugin.firstNodeDecPlugin
@@ -210,10 +219,34 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
           return tr;
         };
       },
-      toggleBlockMenu: function toggleBlockMenu(options) {
+      showControlAtPosition: function showControlAtPosition(pos, control, options) {
         return function (_ref6) {
-          var _api$userIntent, _api$blockControls2, _options$anchorName, _api$blockControls3;
           var tr = _ref6.tr;
+          var node = tr.doc.nodeAt(pos);
+          if (!node) {
+            return tr;
+          }
+          var anchorName = api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(node, pos);
+          if (!anchorName) {
+            return tr;
+          }
+          var currMeta = tr.getMeta(_main.key);
+          tr.setMeta(_main.key, _objectSpread(_objectSpread({}, currMeta), {}, {
+            activeNode: {
+              pos: pos,
+              anchorName: anchorName,
+              controlKey: control.key,
+              nodeType: (0, _decorationsCommon.getNodeTypeWithLevel)(node),
+              handleOptions: options
+            }
+          }));
+          return tr;
+        };
+      },
+      toggleBlockMenu: function toggleBlockMenu(options) {
+        return function (_ref7) {
+          var _api$userIntent, _api$blockControls2, _options$triggerByNod, _options$anchorName, _api$blockControls3;
+          var tr = _ref7.tr;
           var currMeta = tr.getMeta(_main.key);
           var currentUserIntent = 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;
           var isMenuCurrentlyOpen = api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.sharedState.currentState()) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.isMenuOpen;
@@ -238,8 +271,9 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
             return tr;
           }
 
-          // Do not open menu on layoutColumn and close opened menu when layoutColumn drag handle is clicked
-          if (options !== null && options !== void 0 && (_options$anchorName = options.anchorName) !== null && _options$anchorName !== void 0 && _options$anchorName.includes('layoutColumn')) {
+          // Do not open the block menu for layout columns. Anchor resolution can lag behind
+          // a migrated surface click, so prefer the explicit node metadata when available.
+          if ((options === null || options === void 0 || (_options$triggerByNod = options.triggerByNode) === null || _options$triggerByNod === void 0 ? void 0 : _options$triggerByNod.nodeType) === 'layoutColumn' || options !== null && options !== void 0 && (_options$anchorName = options.anchorName) !== null && _options$anchorName !== void 0 && _options$anchorName.includes('layoutColumn')) {
             if (currentUserIntent === 'blockMenuOpen') {
               var _api$userIntent3;
               api === null || api === void 0 || (_api$userIntent3 = api.userIntent) === null || _api$userIntent3 === void 0 || _api$userIntent3.commands.setCurrentUserIntent('default')({
@@ -315,9 +349,9 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         };
       },
       setNodeDragged: function setNodeDragged(getPos, anchorName, nodeType) {
-        return function (_ref7) {
+        return function (_ref8) {
           var _api$userIntent6;
-          var tr = _ref7.tr;
+          var tr = _ref8.tr;
           var pos = getPos();
           if (pos === undefined) {
             return tr;
@@ -347,9 +381,9 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         };
       },
       setMultiSelectPositions: function setMultiSelectPositions(anchor, head) {
-        return function (_ref8) {
+        return function (_ref9) {
           var _api$selection, _$to$nodeBefore, _$from$nodeAfter;
-          var tr = _ref8.tr;
+          var tr = _ref9.tr;
           var _tr$selection = tr.selection,
             userAnchor = _tr$selection.anchor,
             userHead = _tr$selection.head;
@@ -401,8 +435,8 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         };
       },
       setSelectedViaDragHandle: function setSelectedViaDragHandle(isSelectedViaDragHandle) {
-        return function (_ref9) {
-          var tr = _ref9.tr;
+        return function (_ref0) {
+          var tr = _ref0.tr;
           var currMeta = tr.getMeta(_main.key);
           return tr.setMeta(_main.key, _objectSpread(_objectSpread({}, currMeta), {}, {
             isSelectedViaDragHandle: isSelectedViaDragHandle
@@ -444,8 +478,10 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState10 = _main.key.getState(editorState)) === null || _key$getState10 === void 0 ? void 0 : _key$getState10.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
       };
       if (registryBlockControlsEnabled) {
-        var _key$getState$surface, _key$getState11;
-        sharedState.surfaceNodePositions = (_key$getState$surface = (_key$getState11 = _main.key.getState(editorState)) === null || _key$getState11 === void 0 ? void 0 : _key$getState11.surfaceNodePositions) !== null && _key$getState$surface !== void 0 ? _key$getState$surface : [];
+        var surfaces = _sparseSurfaces.sparseSurfacesKey.getState(editorState);
+        sharedState.surfaceNodePositions = surfaces === null || surfaces === void 0 ? void 0 : surfaces.candidates.positions;
+        sharedState.surfaceAnchors = surfaces === null || surfaces === void 0 ? void 0 : surfaces.anchors;
+        sharedState.surfaceActiveNodes = surfaces === null || surfaces === void 0 ? void 0 : surfaces.activeNodesByPosition;
       }
       if ((0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1')) {
         var _interactionTrackingP2, _interactionTrackingP3, _interactionTrackingP4;
@@ -457,8 +493,8 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
       sharedState.preservedSelection = (_selectionPreservatio = _pluginKey.selectionPreservationPluginKey.getState(editorState)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection;
       return sharedState;
     },
-    contentComponent: function contentComponent(_ref0) {
-      var editorView = _ref0.editorView;
+    contentComponent: function contentComponent(_ref1) {
+      var editorView = _ref1.editorView;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, {
         api: api
       }), registryBlockControlsEnabled && editorView && api ? /*#__PURE__*/_react.default.createElement(_surfaceEditorViewContext.SurfaceEditorViewContext.Provider, {

package/dist/cjs/editor-commands/show-drag-handle.js

@@ -5,8 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.showDragHandleAtSelection = void 0;
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _decorationsAnchor = require("../pm-plugins/decorations-anchor");
+var _decorationsCommon = require("../pm-plugins/decorations-common");
 var _main = require("../pm-plugins/main");
 var _getNestedNodePosition = require("../pm-plugins/utils/getNestedNodePosition");
 var _domAttrName = require("../ui/utils/dom-attr-name");
@@ -15,7 +17,6 @@ var findParentPosForHandle = function findParentPosForHandle(state) {
   var $from = state.selection.$from;
   var _ref = _main.key.getState(state) || {},
     activeNode = _ref.activeNode;
-
   // if a node handle is already focused, return the parent pos of that node (with focused handle)
   if (activeNode && (_activeNode$handleOpt = activeNode.handleOptions) !== null && _activeNode$handleOpt !== void 0 && _activeNode$handleOpt.isFocused) {
     var $activeNodePos = state.doc.resolve(activeNode.pos);
@@ -39,7 +40,7 @@ var findParentPosForHandle = function findParentPosForHandle(state) {
   }
 
   // else find closest parent node
-  return (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ?
+  return (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') ?
   // With native anchor enabled, all nodes have anchor name attribute despite no drag handle support, e.g. listItem, caption,
   // as opposed to old approach, node decoration is only added to the node that have drag handle,
   // hence, we need to return the exact position of the node that can have drag handle
@@ -113,13 +114,24 @@ var findNextAnchorNode = function findNextAnchorNode(view) {
 };
 var showDragHandleAtSelection = exports.showDragHandleAtSelection = function showDragHandleAtSelection(api) {
   return function (state, _, view) {
+    if (api && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration')) {
+      var pos = findParentPosForHandle(state);
+      var node = pos === undefined ? undefined : state.doc.nodeAt(pos);
+      var anchorName = node && pos !== undefined ? api.core.actions.getAnchorIdForNode(node, pos) : undefined;
+      if (!node || pos === undefined || !anchorName) {
+        return false;
+      }
+      return api.core.actions.execute(api.blockControls.commands.showDragHandleAt(pos, anchorName, (0, _decorationsCommon.getNodeTypeWithLevel)(node), {
+        isFocused: true
+      }));
+    }
     if (view && (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
       var anchorNode = findNextAnchorNode(view);
       if (api && anchorNode) {
-        var pos = anchorNode.pos,
-          anchorName = anchorNode.anchorName,
+        var _pos = anchorNode.pos,
+          _anchorName = anchorNode.anchorName,
           nodeType = anchorNode.nodeType;
-        api.core.actions.execute(api.blockControls.commands.showDragHandleAt(pos, anchorName, nodeType, {
+        api.core.actions.execute(api.blockControls.commands.showDragHandleAt(_pos, _anchorName, nodeType, {
           isFocused: true
         }));
         return true;

package/dist/cjs/pm-plugins/decorations-anchor.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.shouldDescendIntoNode = exports.nodeDecorations = exports.findNodeDecs = exports.IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT = exports.IGNORE_NODES_NEXT = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _decorationsCommon = require("./decorations-common");
@@ -77,7 +78,7 @@ var findNodeDecs = exports.findNodeDecs = function findNodeDecs(state, decoratio
 };
 var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newState, from, to) {
   var decs = [];
-  if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
+  if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration')) {
     return [];
   }
   var docFrom = from === undefined || from < 0 ? 0 : from;

package/dist/cjs/pm-plugins/decorations-drop-target-active.js

@@ -11,6 +11,7 @@ var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
 var _nodeTypeUtils = require("@atlaskit/editor-common/utils/node-type-utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _decorationsCommon = require("./decorations-common");
@@ -257,7 +258,7 @@ var getActiveDropTargetDecorations = exports.getActiveDropTargetDecorations = fu
       }
     }
   }
-  _activeAnchorTracker.defaultActiveAnchorTracker.emit((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? api.core.actions.getAnchorIdForNode(anchorEmitNodeWithPos.node, anchorEmitNodeWithPos.pos) || '' : (0, _decorationsCommon.getNodeAnchor)(anchorEmitNodeWithPos.node));
+  _activeAnchorTracker.defaultActiveAnchorTracker.emit((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') ? api.core.actions.getAnchorIdForNode(anchorEmitNodeWithPos.node, anchorEmitNodeWithPos.pos) || '' : (0, _decorationsCommon.getNodeAnchor)(anchorEmitNodeWithPos.node));
   return {
     decsToAdd: decsToAdd,
     decsToRemove: decsToRemove

package/dist/cjs/pm-plugins/decorations-drop-target.js

@@ -14,6 +14,7 @@ var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
 var _nodeTypeUtils = require("@atlaskit/editor-common/utils/node-type-utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _consts = require("../ui/consts");
@@ -152,7 +153,7 @@ var createLayoutDropTargetDecoration = exports.createLayoutDropTargetDecoration
     element.setAttribute('data-blocks-drop-target-container', 'true');
     element.setAttribute('data-blocks-drop-target-key', key);
     element.style.clear = 'unset';
-    var DropTargetLayoutComponent = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? _dropTargetLayout.DropTargetLayoutNativeAnchorSupport : _dropTargetLayout.DropTargetLayout;
+    var DropTargetLayoutComponent = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') ? _dropTargetLayout.DropTargetLayoutNativeAnchorSupport : _dropTargetLayout.DropTargetLayout;
     nodeViewPortalProviderAPI.render(function () {
       return /*#__PURE__*/(0, _react.createElement)(DropTargetLayoutComponent, _objectSpread(_objectSpread({}, props), {}, {
         getPos: getPos,

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

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createSurfaceAnchorDecorations = exports.TYPE_SURFACE_ANCHOR_DEC = exports.SURFACE_NODE_TYPE_ATTR = exports.SURFACE_ANCHOR_VARIABLE = exports.SURFACE_ANCHOR_ATTR = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _view = require("@atlaskit/editor-prosemirror/view");
+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; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var TYPE_SURFACE_ANCHOR_DEC = exports.TYPE_SURFACE_ANCHOR_DEC = 'block-controls-surface-anchor';
+var SURFACE_ANCHOR_ATTR = exports.SURFACE_ANCHOR_ATTR = 'data-block-controls-surface-anchor';
+var SURFACE_NODE_TYPE_ATTR = exports.SURFACE_NODE_TYPE_ATTR = 'data-block-controls-surface-node-type';
+var SURFACE_ANCHOR_VARIABLE = exports.SURFACE_ANCHOR_VARIABLE = '--block-controls-surface-anchor-name';
+
+/**
+ * These node views expose the box used by the measured placement fallback rather than their
+ * ProseMirror node wrapper. The marker carries the name through a custom property so sparse CSS
+ * can name that inner box without adding a widget or changing the node view.
+ */
+var INNER_CONTENT_NODE_TYPES = new Set(['blockCard', 'bodiedExtension', 'embedCard', 'extension', 'mediaSingle', 'multiBodiedExtension', 'table']);
+var getMarkerStyle = function getMarkerStyle(nodeType, anchorName) {
+  var inheritedName = "".concat(SURFACE_ANCHOR_VARIABLE, ": ").concat(anchorName, ";");
+
+  // Inner boxes get their anchor from the sparse global selector. Naming only the node wrapper
+  // would position media/table/extension controls against the wrapper instead of visible content.
+  return INNER_CONTENT_NODE_TYPES.has(nodeType) ? inheritedName : "".concat(inheritedName, " anchor-name: ").concat(anchorName, ";");
+};
+
+/**
+ * Builds sparse CSS anchor decorations from already-qualified cached positions. Anchor identity is
+ * supplied by the editor's native node-anchor provider so sparse surfaces and consumers share the
+ * same `data-node-anchor`.
+ */
+var createSurfaceAnchorDecorations = exports.createSurfaceAnchorDecorations = function createSurfaceAnchorDecorations(state, positions, resolveAnchorName, previousAnchors) {
+  var anchors = new Map();
+  var decorations = [];
+  var _iterator = _createForOfIteratorHelper(positions),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var position = _step.value;
+      if (anchors.has(position)) {
+        continue;
+      }
+      var node = state.doc.nodeAt(position);
+      if (!(node !== null && node !== void 0 && node.isBlock)) {
+        continue;
+      }
+      var anchorName = resolveAnchorName(node, position, previousAnchors === null || previousAnchors === void 0 ? void 0 : previousAnchors.get(position));
+      if (!anchorName) {
+        continue;
+      }
+      anchors.set(position, anchorName);
+      decorations.push(_view.Decoration.node(position, position + node.nodeSize, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, SURFACE_ANCHOR_ATTR, anchorName), SURFACE_NODE_TYPE_ATTR, node.type.name), "style", getMarkerStyle(node.type.name, anchorName)), {
+        type: TYPE_SURFACE_ANCHOR_DEC,
+        anchorName: anchorName,
+        nodeType: node.type.name
+      }));
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return {
+    anchors: anchors,
+    decorations: _view.DecorationSet.create(state.doc, decorations)
+  };
+};

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.handleMouseDown = void 0;
 var _styles = require("@atlaskit/editor-common/styles");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var handleMouseDown = exports.handleMouseDown = function handleMouseDown(api) {
   return function (view, event) {
@@ -19,7 +20,7 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(api) {
       if (!rootNode) {
         return false;
       }
-      if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
+      if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration')) {
         var _rootNode$type$name, _rootNode$type$name2;
         var anchorName = api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(rootNode, rootPos);
 

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

@@ -9,6 +9,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _selection = require("@atlaskit/editor-common/selection");
 var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
@@ -140,7 +141,7 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
   // Ignored via go/ees005
   // eslint-disable-next-line @atlaskit/editor/no-as-casting
   var target = event.target;
-  var isNativeAnchorSupported = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true);
+  var isNativeAnchorSupported = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration');
   if (target !== null && target !== void 0 && (_target$classList = target.classList) !== null && _target$classList !== void 0 && _target$classList.contains('ProseMirror')) {
     return false;
   }
@@ -212,7 +213,7 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
     // This must happen before anchorName is read so the correct node's handle is shown.
     rootElement = redirectParagraphToWrappedMedia(rootElement, isNativeAnchorSupported);
     var anchorName;
-    if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
+    if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration')) {
       anchorName = rootElement.getAttribute((0, _domAttrName.getAnchorAttrName)());
 
       // don't show handles if we can't find an anchor

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

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleSparseMouseOver = void 0;
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+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 EXCLUDED_BLOCKS = new Set(['listItem', 'tableRow', 'tableCell', 'tableHeader', 'caption']);
+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');
+};
+var redirectParagraphToWrappedMedia = function redirectParagraphToWrappedMedia(view, $target, targetPosition) {
+  var node = view.state.doc.nodeAt(targetPosition);
+  if (!node || node.type.name !== 'paragraph') {
+    return {
+      position: targetPosition,
+      node: node
+    };
+  }
+  var index = $target.index();
+  for (var _i = 0, _arr = [index - 1, index + 1]; _i < _arr.length; _i++) {
+    var siblingIndex = _arr[_i];
+    if (siblingIndex < 0 || siblingIndex >= $target.parent.childCount) {
+      continue;
+    }
+    var sibling = $target.parent.child(siblingIndex);
+    if ((sibling.type.name === 'mediaSingle' || sibling.type.name === 'embedCard') && (sibling.attrs.layout === 'wrap-left' || sibling.attrs.layout === 'wrap-right')) {
+      return {
+        position: siblingIndex < index ? targetPosition - sibling.nodeSize : targetPosition + node.nodeSize,
+        node: sibling
+      };
+    }
+  }
+  return {
+    position: targetPosition,
+    node: node
+  };
+};
+
+/** 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;
+  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;
+  }
+  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;
+  if (editorDisabled && (editorViewMode !== 'view' || !(controls !== null && controls !== void 0 && controls.rightSideControlsEnabled))) {
+    return false;
+  }
+  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') && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    return false;
+  }
+  var position;
+  try {
+    position = view.posAtDOM(event.target, 0);
+  } catch (_unused) {
+    return false;
+  }
+  var $pos = view.state.doc.resolve(position);
+  var targetPosition;
+  var opaque = false;
+  for (var depth = 1; depth <= $pos.depth; depth++) {
+    var _node = $pos.node(depth);
+    if (!_node.isBlock || EXCLUDED_BLOCKS.has(_node.type.name)) {
+      continue;
+    }
+    targetPosition = $pos.before(depth);
+    if (OPAQUE_BLOCKS.has(_node.type.name)) {
+      opaque = true;
+      break;
+    }
+  }
+  if (!opaque && (_$pos$nodeAfter = $pos.nodeAfter) !== null && _$pos$nodeAfter !== void 0 && _$pos$nodeAfter.isBlock && !EXCLUDED_BLOCKS.has($pos.nodeAfter.type.name)) {
+    // Browser positions over non-editable node chrome can resolve to the first editable child.
+    // Keep the ancestor unless that child actually owns the hovered DOM target.
+    var nodeAfterDOM = view.nodeDOM(position);
+    if (nodeAfterDOM instanceof Element && nodeAfterDOM.contains(event.target)) {
+      targetPosition = position;
+    }
+  }
+  if (targetPosition === undefined) {
+    return false;
+  }
+  var initialNode = view.state.doc.nodeAt(targetPosition);
+  if (!initialNode) {
+    return false;
+  }
+  var target = redirectParagraphToWrappedMedia(view, view.state.doc.resolve(targetPosition), targetPosition);
+  targetPosition = target.position;
+  var node = target.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;
+  }
+  var $target = view.state.doc.resolve(targetPosition);
+  if ($target.depth > 0 && (node.type.name === 'paragraph' || node.type.name === 'heading') && node.content.size === 0) {
+    return false;
+  }
+  var parentNode = $target.parent;
+  var parentPosition = $target.depth > 0 ? $target.before($target.depth) : undefined;
+  var parentDOM = parentPosition === undefined ? undefined : view.nodeDOM(parentPosition);
+  if (isPanelNodeTypeName(parentNode.type.name) && !(parentDOM instanceof HTMLElement && parentDOM.classList.contains('ak-editor-panel__no-icon')) && $target.index() === 0) {
+    return false;
+  }
+  if (node.type.name === 'layoutColumn' && parentNode.type.name === 'layoutSection' && parentNode.childCount === 1 && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('advanced_layouts', 'isEnabled', true) && !(0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true)) {
+    return false;
+  }
+  var anchors = controls === null || controls === void 0 ? void 0 : controls.surfaceAnchors;
+  var anchorName = (_anchors$get = anchors === null || anchors === void 0 ? void 0 : anchors.get(targetPosition)) !== null && _anchors$get !== void 0 ? _anchors$get : api.core.actions.getAnchorIdForNode(node, targetPosition);
+  var rootPos = $target.depth > 0 ? $target.before(1) : targetPosition;
+  var rootNode = view.state.doc.nodeAt(rootPos);
+  var rootAnchorName = (_anchors$get2 = anchors === null || anchors === void 0 ? void 0 : anchors.get(rootPos)) !== null && _anchors$get2 !== void 0 ? _anchors$get2 : rootNode ? api.core.actions.getAnchorIdForNode(rootNode, rootPos) : undefined;
+  if (!anchorName || !rootNode) {
+    return false;
+  }
+  api.core.actions.execute(api.blockControls.commands.showDragHandleAt(targetPosition, anchorName, (0, _decorationsCommon.getNodeTypeWithLevel)(node), undefined, rootPos, rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : anchorName, (0, _decorationsCommon.getNodeTypeWithLevel)(rootNode)));
+  return false;
+};