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

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

@@ -0,0 +1,127 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import { BLOCK_CONTROLS_LEFT_SURFACE, BLOCK_CONTROLS_RIGHT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
+import { getNodeIdProvider } from '@atlaskit/editor-common/node-anchor';
+import { resolveSurface } from '@atlaskit/editor-ui-control-model/surface-renderer';
+import { createSurfaceAnchorDecorations } from '../decorations-surface-anchor';
+import { key as blockControlsKey } from '../main';
+import { reconcileSparseSurfaceCandidates } from './sparse-surface-candidates';
+import { observeSurfaceViewport } from './surface-viewport';
+var haveAnchorPositionsChanged = function haveAnchorPositionsChanged(positions, anchors) {
+  return positions.length !== anchors.size || positions.some(function (position) {
+    return !anchors.has(position);
+  });
+};
+export var createSparseSurfacesView = function createSparseSurfacesView(_ref) {
+  var _api$uiControlRegistr3, _api$editorDisabled, _api$editorViewMode, _api$limitedMode2, _api$showDiff, _api$userIntent;
+  var api = _ref.api,
+    pluginKey = _ref.pluginKey,
+    view = _ref.view;
+  var win = view.dom.ownerDocument.defaultView;
+  var frame;
+  var visiblePositions = [];
+  var registryChanged = true;
+  var reconcile = function reconcile() {
+    var _api$limitedMode;
+    frame = undefined;
+    var previous = pluginKey.getState(view.state);
+    if (!previous || 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) {
+      return;
+    }
+    var controls = blockControlsKey.getState(view.state);
+    var activeNode = controls === null || controls === void 0 ? void 0 : controls.activeNode;
+    var activeNodesByPosition = new Map();
+    var menu = controls !== null && controls !== void 0 && controls.isMenuOpen ? controls.menuTriggerByNode : undefined;
+    if (menu && controls !== null && controls !== void 0 && controls.menuTriggerBy && view.state.doc.nodeAt(menu.pos)) {
+      var _menu$rootPos;
+      var menuNode = _objectSpread(_objectSpread({}, menu), {}, {
+        anchorName: controls.menuTriggerBy
+      });
+      activeNodesByPosition.set(menu.pos, menuNode);
+      activeNodesByPosition.set((_menu$rootPos = menu.rootPos) !== null && _menu$rootPos !== void 0 ? _menu$rootPos : menu.pos, menuNode);
+    }
+    var resolvedSurfaces = [BLOCK_CONTROLS_LEFT_SURFACE, BLOCK_CONTROLS_RIGHT_SURFACE].map(function (surface) {
+      var _api$uiControlRegistr, _api$uiControlRegistr2;
+      return resolveSurface((_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(surface)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [], surface);
+    });
+    var candidates = reconcileSparseSurfaceCandidates({
+      activeNode: activeNode,
+      activeNodesByPosition: activeNodesByPosition,
+      newState: view.state,
+      state: previous.candidates,
+      visiblePositions: visiblePositions,
+      protectedPositions: _toConsumableArray(activeNodesByPosition.keys()),
+      resolvedSurfaces: resolvedSurfaces,
+      documentChanged: previous.documentChanged,
+      invalidation: _objectSpread(_objectSpread({}, previous.invalidation), {}, {
+        all: registryChanged
+      })
+    });
+    var visibilityChanged = registryChanged;
+    registryChanged = false;
+    var anchorPositions = candidates.positions;
+    if (!visibilityChanged && !haveAnchorPositionsChanged(anchorPositions, previous.anchors) && candidates === previous.candidates && !previous.documentChanged && !previous.invalidation) {
+      return;
+    }
+    var nodeIdProvider = getNodeIdProvider(view);
+    var _createSurfaceAnchorD = createSurfaceAnchorDecorations(view.state, anchorPositions, function (node, position, previousAnchorName) {
+        if (previousAnchorName) {
+          nodeIdProvider.setIdForNode(node, previousAnchorName);
+          return previousAnchorName;
+        }
+        return nodeIdProvider.getOrGenerateId(node, position);
+      }, previous.anchors),
+      anchors = _createSurfaceAnchorD.anchors,
+      decorations = _createSurfaceAnchorD.decorations;
+    view.dispatch(view.state.tr.setMeta(pluginKey, {
+      reconciliation: {
+        activeNodesByPosition: activeNodesByPosition,
+        anchors: anchors,
+        candidates: candidates,
+        decorations: decorations
+      },
+      type: 'commitReconciliation'
+    }));
+  };
+  var schedule = function schedule() {
+    if (frame === undefined && win) {
+      frame = win.requestAnimationFrame(reconcile);
+    }
+  };
+  var observer = observeSurfaceViewport(view, function (positions) {
+    visiblePositions = positions;
+    schedule();
+  });
+  var invalidate = function invalidate() {
+    registryChanged = true;
+    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 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) {
+      observer.update();
+      var sparse = pluginKey.getState(currentView.state);
+      var controls = blockControlsKey.getState(currentView.state);
+      var previousControls = blockControlsKey.getState(previousState);
+      if ((controls === null || controls === void 0 ? void 0 : controls.isDragging) !== (previousControls === null || previousControls === void 0 ? void 0 : previousControls.isDragging) || (controls === null || controls === void 0 ? void 0 : controls.isResizerResizing) !== (previousControls === null || previousControls === void 0 ? void 0 : previousControls.isResizerResizing)) {
+        invalidate();
+      }
+      if (sparse !== null && sparse !== void 0 && sparse.documentChanged || sparse !== null && sparse !== void 0 && sparse.invalidation || (controls === null || controls === void 0 ? void 0 : controls.activeNode) !== (previousControls === null || previousControls === void 0 ? void 0 : previousControls.activeNode) || (controls === null || controls === void 0 ? void 0 : controls.isMenuOpen) !== (previousControls === null || previousControls === void 0 ? void 0 : previousControls.isMenuOpen) || (controls === null || controls === void 0 ? void 0 : controls.menuTriggerByNode) !== (previousControls === null || previousControls === void 0 ? void 0 : previousControls.menuTriggerByNode)) {
+        schedule();
+      }
+    },
+    destroy: function destroy() {
+      if (frame !== undefined) {
+        win === null || win === void 0 || win.cancelAnimationFrame(frame);
+      }
+      observer.destroy();
+      unsubscribe === null || unsubscribe === void 0 || unsubscribe();
+      unsubscribers.forEach(function (unsubscribe) {
+        return unsubscribe === null || unsubscribe === void 0 ? void 0 : unsubscribe();
+      });
+    }
+  };
+};

package/dist/esm/pm-plugins/utils/surface-viewport.js

@@ -0,0 +1,217 @@
+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 NODE_NAME_ATTRIBUTE = 'data-prosemirror-node-name';
+/**
+ * Tracks block DOM nodes that intersect the browser viewport. The browser owns clipping and
+ * visibility decisions; this helper only translates observer targets back to PM positions.
+ */
+export var observeSurfaceViewport = function observeSurfaceViewport(view, onChange) {
+  var win = view.dom.ownerDocument.defaultView;
+  if (!win || typeof win.IntersectionObserver === 'undefined') {
+    return {
+      update: function update() {},
+      destroy: function destroy() {}
+    };
+  }
+  var targets = new Map();
+  var visibleTargets = new Set();
+  var previousPositions = [];
+  var previousDoc = view.state.doc;
+  var destroyed = false;
+  var resolvePosition = function resolvePosition(element) {
+    try {
+      var domPosition = view.posAtDOM(element, 0);
+      var nodeName = element.getAttribute(NODE_NAME_ATTRIBUTE);
+      var directNode = view.state.doc.nodeAt(domPosition);
+      if (directNode !== null && directNode !== void 0 && directNode.isBlock && directNode.type.name === nodeName && view.nodeDOM(domPosition) === element) {
+        return domPosition;
+      }
+      var $position = view.state.doc.resolve(domPosition);
+      for (var depth = $position.depth; depth > 0; depth--) {
+        var node = $position.node(depth);
+        if (!node.isBlock || node.type.name !== nodeName) {
+          continue;
+        }
+        var position = $position.before(depth);
+        var nodeDOM = view.nodeDOM(position);
+        if (nodeDOM === element || nodeDOM instanceof Node && (nodeDOM.contains(element) || element.contains(nodeDOM))) {
+          return position;
+        }
+      }
+      return undefined;
+    } catch (_unused) {
+      return undefined;
+    }
+  };
+  var getVisiblePositions = function getVisiblePositions() {
+    var positions = new Set();
+    visibleTargets.forEach(function (element) {
+      var _targets$get;
+      var position = (_targets$get = targets.get(element)) === null || _targets$get === void 0 ? void 0 : _targets$get.position;
+      if (position !== undefined) {
+        positions.add(position);
+      }
+    });
+    return Array.from(positions).sort(function (first, second) {
+      return first - second;
+    });
+  };
+  var emit = function emit() {
+    if (destroyed) {
+      return;
+    }
+    var positions = getVisiblePositions();
+    if (positions.length !== previousPositions.length || positions.some(function (position, index) {
+      return position !== previousPositions[index];
+    })) {
+      previousPositions = positions;
+      onChange(positions);
+    }
+  };
+  var intersectionObserver = new win.IntersectionObserver(function (entries) {
+    var changed = false;
+    var _iterator = _createForOfIteratorHelper(entries),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var entry = _step.value;
+        var element = entry.target;
+        var target = targets.get(element);
+        if (!target || !view.dom.contains(element)) {
+          continue;
+        }
+        var isIntersecting = entry.isIntersecting;
+        if (target.isIntersecting !== isIntersecting) {
+          target.isIntersecting = isIntersecting;
+          if (isIntersecting) {
+            target.position = resolvePosition(element);
+            if (target.position !== undefined) {
+              visibleTargets.add(element);
+            } else {
+              target.isIntersecting = false;
+            }
+          } else {
+            visibleTargets.delete(element);
+          }
+          changed = true;
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    if (changed) {
+      emit();
+    }
+  }, {
+    root: null,
+    threshold: 0
+  });
+  var removeTarget = function removeTarget(element) {
+    var target = targets.get(element);
+    if (!target) {
+      return;
+    }
+    targets.delete(element);
+    visibleTargets.delete(element);
+    intersectionObserver.unobserve(element);
+  };
+  var observeElement = function observeElement(element) {
+    var _view$state$schema$no;
+    var nodeName = element.getAttribute(NODE_NAME_ATTRIBUTE);
+    if (element === view.dom || !nodeName || !((_view$state$schema$no = view.state.schema.nodes[nodeName]) !== null && _view$state$schema$no !== void 0 && _view$state$schema$no.isBlock) || !view.dom.contains(element)) {
+      return;
+    }
+    if (targets.has(element)) {
+      return;
+    }
+    targets.set(element, {
+      isIntersecting: false
+    });
+    intersectionObserver.observe(element);
+  };
+  var observeSubtree = function observeSubtree(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return;
+    }
+    var element = node;
+    observeElement(element);
+    var descendants = element.querySelectorAll("[".concat(NODE_NAME_ATTRIBUTE, "]"));
+    for (var index = 0; index < descendants.length; index++) {
+      observeElement(descendants[index]);
+    }
+  };
+  var unobserveSubtree = function unobserveSubtree(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return;
+    }
+    var element = node;
+    removeTarget(element);
+    var descendants = element.querySelectorAll("[".concat(NODE_NAME_ATTRIBUTE, "]"));
+    for (var index = 0; index < descendants.length; index++) {
+      removeTarget(descendants[index]);
+    }
+  };
+  var mutationObserver = new win.MutationObserver(function (records) {
+    var removedVisibleTarget = false;
+    var _iterator2 = _createForOfIteratorHelper(records),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var record = _step2.value;
+        for (var index = 0; index < record.removedNodes.length; index++) {
+          var node = record.removedNodes[index];
+          if (node.nodeType === Node.ELEMENT_NODE) {
+            if (view.dom.contains(node)) {
+              continue;
+            }
+            var before = visibleTargets.size;
+            unobserveSubtree(node);
+            removedVisibleTarget || (removedVisibleTarget = before !== visibleTargets.size);
+          }
+        }
+        for (var _index = 0; _index < record.addedNodes.length; _index++) {
+          observeSubtree(record.addedNodes[_index]);
+        }
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+    if (removedVisibleTarget) {
+      emit();
+    }
+  });
+  var initialTargets = view.dom.querySelectorAll("[".concat(NODE_NAME_ATTRIBUTE, "]"));
+  for (var index = 0; index < initialTargets.length; index++) {
+    observeElement(initialTargets[index]);
+  }
+  mutationObserver.observe(view.dom, {
+    childList: true,
+    subtree: true
+  });
+  return {
+    update: function update() {
+      if (previousDoc !== view.state.doc) {
+        previousDoc = view.state.doc;
+        visibleTargets.forEach(function (element) {
+          var target = targets.get(element);
+          if (target) {
+            target.position = resolvePosition(element);
+          }
+        });
+        emit();
+      }
+    },
+    destroy: function destroy() {
+      destroyed = true;
+      mutationObserver.disconnect();
+      intersectionObserver.disconnect();
+      targets.clear();
+      visibleTargets.clear();
+    }
+  };
+};

package/dist/esm/pm-plugins/utils/transactions.js

@@ -1,4 +1,5 @@
 import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 /**
  * Checks if step adds inline char
  * @param s
@@ -28,6 +29,10 @@ export var isStepDelete = function isStepDelete(s) {
 var isStepContentReplacedWithAnotherOfSameSize = function isStepContentReplacedWithAnotherOfSameSize(s) {
   if (s instanceof ReplaceAroundStep) {
     var replacedContentSize = s.to - s.from;
+    if (isExperimentEnabled('platform_editor_block_control_migration')) {
+      var insertedContentSize = s.slice.size + (s.gapTo - s.gapFrom);
+      return insertedContentSize === replacedContentSize;
+    }
     return s.slice.content.size === replacedContentSize;
   }
   return false;

package/dist/esm/ui/block-controls-left-surfaces.js

@@ -18,12 +18,13 @@ import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/create-s
 import { willSurfaceRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
 import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
 import { BlockControlsLeftSurface } from './block-controls-left-surface';
-import { createBlockControlsSurfaceContext, createBlockControlsSurfaceContextForPosition } from './block-controls-surface-context';
+import { createBlockControlsSurfaceContextForPosition } from './block-controls-surface-context';
 import { getBlockControlsSurfaceTargets } from './block-controls-surface-targets';
-import { getNodeContentElement, hasInnerContentContainer } from './utils/get-node-content-element';
+import { getNodeContentElement } from './utils/get-node-content-element';
 import { getAbsoluteSurfacePlacement, getAnchoredSurfacePlacement, getSurfacePlacement, toMeasuredSurfaceWrapperPlacement } from './utils/get-surface-placement';
 import { hasSurfaceControls } from './utils/has-surface-controls';
 var EMPTY_SURFACE_POSITIONS = [];
+var EMPTY_SURFACE_ANCHORS = new Map();
 var EMPTY_SURFACE_COMPONENTS = [];
 var EMPTY_MEASURED_SURFACES = [];
 export var BlockControlsLeftSurfaces = function BlockControlsLeftSurfaces(_ref) {
@@ -31,22 +32,30 @@ export var BlockControlsLeftSurfaces = function BlockControlsLeftSurfaces(_ref)
   var api = _ref.api,
     editorView = _ref.editorView;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls'], function (states) {
-      var _states$blockControls, _states$blockControls2, _states$blockControls3;
+      var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$blockControls4, _states$blockControls5, _states$blockControls6;
       return {
         activeNode: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.activeNode,
-        surfaceNodePositions: (_states$blockControls2 = (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.surfaceNodePositions) !== null && _states$blockControls2 !== void 0 ? _states$blockControls2 : EMPTY_SURFACE_POSITIONS
+        surfaceActiveNodes: (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.surfaceActiveNodes,
+        surfaceAnchors: (_states$blockControls3 = (_states$blockControls4 = states.blockControlsState) === null || _states$blockControls4 === void 0 ? void 0 : _states$blockControls4.surfaceAnchors) !== null && _states$blockControls3 !== void 0 ? _states$blockControls3 : EMPTY_SURFACE_ANCHORS,
+        surfaceNodePositions: (_states$blockControls5 = (_states$blockControls6 = states.blockControlsState) === null || _states$blockControls6 === void 0 ? void 0 : _states$blockControls6.surfaceNodePositions) !== null && _states$blockControls5 !== void 0 ? _states$blockControls5 : EMPTY_SURFACE_POSITIONS
       };
     }),
     activeNode = _useSharedPluginState.activeNode,
+    surfaceAnchors = _useSharedPluginState.surfaceAnchors,
+    surfaceActiveNodes = _useSharedPluginState.surfaceActiveNodes,
     surfaceNodePositions = _useSharedPluginState.surfaceNodePositions;
   var components = (_api$uiControlRegistr = (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(BLOCK_CONTROLS_LEFT_SURFACE)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : EMPTY_SURFACE_COMPONENTS;
   var targets = useMemo(function () {
-    return getBlockControlsSurfaceTargets(activeNode, surfaceNodePositions);
+    var candidates = new Set(surfaceNodePositions);
+    return getBlockControlsSurfaceTargets(activeNode, surfaceNodePositions).filter(function (_ref2) {
+      var position = _ref2.position;
+      return candidates.has(position);
+    });
   }, [activeNode, surfaceNodePositions]);
   var surfaces = useMemo(function () {
     return targets.flatMap(function (target) {
-      var _api$core;
-      var context = target.source === 'stored' ? createBlockControlsSurfaceContextForPosition(editorView.state, target.position, activeNode) : createBlockControlsSurfaceContext(editorView, activeNode, target.source);
+      var _surfaceActiveNodes$g;
+      var context = createBlockControlsSurfaceContextForPosition(editorView.state, target.position, (_surfaceActiveNodes$g = surfaceActiveNodes === null || surfaceActiveNodes === void 0 ? void 0 : surfaceActiveNodes.get(target.position)) !== null && _surfaceActiveNodes$g !== void 0 ? _surfaceActiveNodes$g : activeNode);
       if (!context) {
         return [];
       }
@@ -54,32 +63,29 @@ export var BlockControlsLeftSurfaces = function BlockControlsLeftSurfaces(_ref)
       if (!hasSurfaceControls(components) || !willSurfaceRender(components, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext)) {
         return [];
       }
-      // Resolved here rather than in the measurement effect so an anchored surface is placed
-      // in the same render that creates it — it never needs a second pass to find its node.
-      //
-      // At the moment, we only expect top-level nodes to have persistent controls.
-      // See surfaceAnchorStyles in global-styles
-      var anchorName = isCSSAnchorSupported() && context.targetNode.parentType === 'doc' && !hasInnerContentContainer(context.targetNode.type.name) ? (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.getAnchorIdForNode(context.targetNode.node, context.targetNode.pos) : undefined;
+      // The cache supplies the same anchor names used by ProseMirror decorations.
+      var anchorName = isCSSAnchorSupported() ? surfaceAnchors.get(target.position) : undefined;
       return [_objectSpread(_objectSpread({}, target), {}, {
         anchorName: anchorName,
         blockControlsContext: context,
         surfaceContext: surfaceContext
       })];
     });
-  }, [activeNode, api, components, editorView, targets]);
+  }, [activeNode, components, editorView, targets, surfaceAnchors, surfaceActiveNodes]);
   /**
    * Placements that need no measuring, so they are derived rather than stored: every inset is an
    * `anchor()` the browser re-resolves on every layout change.
    */
   var anchoredPlacements = useMemo(function () {
-    return new Map(surfaces.flatMap(function (_ref2) {
-      var anchorName = _ref2.anchorName,
-        blockControlsContext = _ref2.blockControlsContext,
-        position = _ref2.position;
+    return new Map(surfaces.flatMap(function (_ref3) {
+      var anchorName = _ref3.anchorName,
+        blockControlsContext = _ref3.blockControlsContext,
+        position = _ref3.position;
       return anchorName ? [[position, getAnchoredSurfacePlacement({
         anchorName: anchorName,
         nodeType: blockControlsContext.targetNode.type.name,
         nodeTypeWithLevel: getNodeTypeWithLevel(blockControlsContext.targetNode.node),
+        layout: blockControlsContext.targetNode.node.attrs.layout,
         parentNodeType: blockControlsContext.targetNode.parentType === 'doc' ? undefined : blockControlsContext.targetNode.parentType,
         side: 'left'
       })]] : [];
@@ -93,8 +99,8 @@ export var BlockControlsLeftSurfaces = function BlockControlsLeftSurfaces(_ref)
   // changed dependency each time and re-run it for nothing, which is the cost the anchored path
   // exists to avoid.
   var measuredSurfaces = useMemo(function () {
-    var measured = surfaces.filter(function (_ref3) {
-      var anchorName = _ref3.anchorName;
+    var measured = surfaces.filter(function (_ref4) {
+      var anchorName = _ref4.anchorName;
       return !anchorName;
     });
     return measured.length === 0 ? EMPTY_MEASURED_SURFACES : measured;
@@ -114,9 +120,9 @@ export var BlockControlsLeftSurfaces = function BlockControlsLeftSurfaces(_ref)
       });
       return;
     }
-    var measurementTargets = measuredSurfaces.flatMap(function (_ref4) {
-      var blockControlsContext = _ref4.blockControlsContext,
-        position = _ref4.position;
+    var measurementTargets = measuredSurfaces.flatMap(function (_ref5) {
+      var blockControlsContext = _ref5.blockControlsContext,
+        position = _ref5.position;
       var targetNodeElement = editorView.nodeDOM(blockControlsContext.targetNode.pos);
       var targetElementRoot = targetNodeElement instanceof HTMLElement ? targetNodeElement : targetNodeElement === null || targetNodeElement === void 0 ? void 0 : targetNodeElement.parentElement;
       if (!targetElementRoot) {
@@ -241,11 +247,11 @@ export var BlockControlsLeftSurfaces = function BlockControlsLeftSurfaces(_ref)
       unbindTransitionEnd();
     };
   }, [editorView, measuredSurfaces]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, surfaces.map(function (_ref5) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, surfaces.map(function (_ref6) {
     var _activeNode$handleOpt, _anchoredPlacements$g;
-    var position = _ref5.position,
-      source = _ref5.source,
-      surfaceContext = _ref5.surfaceContext;
+    var position = _ref6.position,
+      source = _ref6.source,
+      surfaceContext = _ref6.surfaceContext;
     return /*#__PURE__*/React.createElement(BlockControlsLeftSurface, {
       api: api,
       components: components,

package/dist/esm/ui/block-controls-right-surfaces.js

@@ -18,12 +18,13 @@ import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/create-s
 import { willSurfaceRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
 import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
 import { BlockControlsRightSurface } from './block-controls-right-surface';
-import { createBlockControlsSurfaceContext, createBlockControlsSurfaceContextForPosition } from './block-controls-surface-context';
+import { createBlockControlsSurfaceContextForPosition } from './block-controls-surface-context';
 import { getBlockControlsSurfaceTargets } from './block-controls-surface-targets';
-import { getNodeContentElement, hasInnerContentContainer } from './utils/get-node-content-element';
+import { getNodeContentElement } from './utils/get-node-content-element';
 import { getAbsoluteSurfacePlacement, getAnchoredSurfacePlacement, getSurfacePlacement, toMeasuredSurfaceWrapperPlacement } from './utils/get-surface-placement';
 import { hasSurfaceControls } from './utils/has-surface-controls';
 var EMPTY_SURFACE_POSITIONS = [];
+var EMPTY_SURFACE_ANCHORS = new Map();
 var EMPTY_SURFACE_COMPONENTS = [];
 var EMPTY_MEASURED_SURFACES = [];
 /**
@@ -40,22 +41,30 @@ export var BlockControlsRightSurfaces = function BlockControlsRightSurfaces(_ref
   var api = _ref.api,
     editorView = _ref.editorView;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls'], function (states) {
-      var _states$blockControls, _states$blockControls2, _states$blockControls3;
+      var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$blockControls4, _states$blockControls5, _states$blockControls6;
       return {
         activeNode: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.activeNode,
-        surfaceNodePositions: (_states$blockControls2 = (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.surfaceNodePositions) !== null && _states$blockControls2 !== void 0 ? _states$blockControls2 : EMPTY_SURFACE_POSITIONS
+        surfaceActiveNodes: (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.surfaceActiveNodes,
+        surfaceAnchors: (_states$blockControls3 = (_states$blockControls4 = states.blockControlsState) === null || _states$blockControls4 === void 0 ? void 0 : _states$blockControls4.surfaceAnchors) !== null && _states$blockControls3 !== void 0 ? _states$blockControls3 : EMPTY_SURFACE_ANCHORS,
+        surfaceNodePositions: (_states$blockControls5 = (_states$blockControls6 = states.blockControlsState) === null || _states$blockControls6 === void 0 ? void 0 : _states$blockControls6.surfaceNodePositions) !== null && _states$blockControls5 !== void 0 ? _states$blockControls5 : EMPTY_SURFACE_POSITIONS
       };
     }),
     activeNode = _useSharedPluginState.activeNode,
+    surfaceAnchors = _useSharedPluginState.surfaceAnchors,
+    surfaceActiveNodes = _useSharedPluginState.surfaceActiveNodes,
     surfaceNodePositions = _useSharedPluginState.surfaceNodePositions;
   var components = (_api$uiControlRegistr = (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(BLOCK_CONTROLS_RIGHT_SURFACE)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : EMPTY_SURFACE_COMPONENTS;
   var targets = useMemo(function () {
-    return getBlockControlsSurfaceTargets(activeNode, surfaceNodePositions);
+    var candidates = new Set(surfaceNodePositions);
+    return getBlockControlsSurfaceTargets(activeNode, surfaceNodePositions).filter(function (_ref2) {
+      var position = _ref2.position;
+      return candidates.has(position);
+    });
   }, [activeNode, surfaceNodePositions]);
   var surfaces = useMemo(function () {
     return targets.flatMap(function (target) {
-      var _api$core;
-      var context = target.source === 'stored' ? createBlockControlsSurfaceContextForPosition(editorView.state, target.position, activeNode) : createBlockControlsSurfaceContext(editorView, activeNode, target.source);
+      var _surfaceActiveNodes$g;
+      var context = createBlockControlsSurfaceContextForPosition(editorView.state, target.position, (_surfaceActiveNodes$g = surfaceActiveNodes === null || surfaceActiveNodes === void 0 ? void 0 : surfaceActiveNodes.get(target.position)) !== null && _surfaceActiveNodes$g !== void 0 ? _surfaceActiveNodes$g : activeNode);
       if (!context) {
         return [];
       }
@@ -63,32 +72,29 @@ export var BlockControlsRightSurfaces = function BlockControlsRightSurfaces(_ref
       if (!hasSurfaceControls(components) || !willSurfaceRender(components, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext)) {
         return [];
       }
-      // Resolved here rather than in the measurement effect so an anchored surface is placed
-      // in the same render that creates it — it never needs a second pass to find its node.
-      //
-      // At the moment, we only expect top-level nodes to have persistent controls.
-      // See surfaceAnchorStyles in global-styles
-      var anchorName = isCSSAnchorSupported() && context.targetNode.parentType === 'doc' && !hasInnerContentContainer(context.targetNode.type.name) ? (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.getAnchorIdForNode(context.targetNode.node, context.targetNode.pos) : undefined;
+      // The cache supplies the same anchor names used by ProseMirror decorations.
+      var anchorName = isCSSAnchorSupported() ? surfaceAnchors.get(target.position) : undefined;
       return [_objectSpread(_objectSpread({}, target), {}, {
         anchorName: anchorName,
         blockControlsContext: context,
         surfaceContext: surfaceContext
       })];
     });
-  }, [activeNode, api, components, editorView, targets]);
+  }, [activeNode, components, editorView, targets, surfaceAnchors, surfaceActiveNodes]);
   /**
    * Placements that need no measuring, so they are derived rather than stored: every inset is an
    * `anchor()` the browser re-resolves on every layout change.
    */
   var anchoredPlacements = useMemo(function () {
-    return new Map(surfaces.flatMap(function (_ref2) {
-      var anchorName = _ref2.anchorName,
-        blockControlsContext = _ref2.blockControlsContext,
-        position = _ref2.position;
+    return new Map(surfaces.flatMap(function (_ref3) {
+      var anchorName = _ref3.anchorName,
+        blockControlsContext = _ref3.blockControlsContext,
+        position = _ref3.position;
       return anchorName ? [[position, getAnchoredSurfacePlacement({
         anchorName: anchorName,
         nodeType: blockControlsContext.targetNode.type.name,
         nodeTypeWithLevel: getNodeTypeWithLevel(blockControlsContext.targetNode.node),
+        layout: blockControlsContext.targetNode.node.attrs.layout,
         parentNodeType: blockControlsContext.targetNode.parentType === 'doc' ? undefined : blockControlsContext.targetNode.parentType,
         side: 'right'
       })]] : [];
@@ -102,8 +108,8 @@ export var BlockControlsRightSurfaces = function BlockControlsRightSurfaces(_ref
   // changed dependency each time and re-run it for nothing, which is the cost the anchored path
   // exists to avoid.
   var measuredSurfaces = useMemo(function () {
-    var measured = surfaces.filter(function (_ref3) {
-      var anchorName = _ref3.anchorName;
+    var measured = surfaces.filter(function (_ref4) {
+      var anchorName = _ref4.anchorName;
       return !anchorName;
     });
     return measured.length === 0 ? EMPTY_MEASURED_SURFACES : measured;
@@ -123,9 +129,9 @@ export var BlockControlsRightSurfaces = function BlockControlsRightSurfaces(_ref
       });
       return;
     }
-    var measurementTargets = measuredSurfaces.flatMap(function (_ref4) {
-      var blockControlsContext = _ref4.blockControlsContext,
-        position = _ref4.position;
+    var measurementTargets = measuredSurfaces.flatMap(function (_ref5) {
+      var blockControlsContext = _ref5.blockControlsContext,
+        position = _ref5.position;
       var targetNodeElement = editorView.nodeDOM(blockControlsContext.targetNode.pos);
       var targetElementRoot = targetNodeElement instanceof HTMLElement ? targetNodeElement : targetNodeElement === null || targetNodeElement === void 0 ? void 0 : targetNodeElement.parentElement;
       if (!targetElementRoot) {
@@ -250,11 +256,11 @@ export var BlockControlsRightSurfaces = function BlockControlsRightSurfaces(_ref
       unbindTransitionEnd();
     };
   }, [editorView, measuredSurfaces]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, surfaces.map(function (_ref5) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, surfaces.map(function (_ref6) {
     var _activeNode$handleOpt, _anchoredPlacements$g;
-    var position = _ref5.position,
-      source = _ref5.source,
-      surfaceContext = _ref5.surfaceContext;
+    var position = _ref6.position,
+      source = _ref6.source,
+      surfaceContext = _ref6.surfaceContext;
     return /*#__PURE__*/React.createElement(BlockControlsRightSurface, {
       api: api,
       components: components,

package/dist/esm/ui/block-controls-surface-context.js

@@ -42,6 +42,7 @@ export var createBlockControlsSurfaceContextForPosition = function createBlockCo
   var rootPos = activeNode ? (_activeNode$rootPos = activeNode.rootPos) !== null && _activeNode$rootPos !== void 0 ? _activeNode$rootPos : activeNode.pos : targetPos;
   var rootNodeContext = (_getNodeContext = getNodeContext(state, rootPos)) !== null && _getNodeContext !== void 0 ? _getNodeContext : targetNodeContext;
   return {
+    activeControlKey: activeNode === null || activeNode === void 0 ? void 0 : activeNode.controlKey,
     activeNode: activeNode && activeNodeContext ? _objectSpread(_objectSpread({}, activeNodeContext), {}, {
       rootPos: rootPos,
       rootType: {