@atlaskit/editor-plugin-block-controls 17.2.4 → 17.3.0

package/dist/esm/pm-plugins/react-root-registry.js

@@ -1,6 +1,6 @@
 import ReactDOM, { flushSync } from 'react-dom';
 import { createRoot } from 'react-dom/client';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 
 /**
  * Shared registry of React roots created via `createRoot`.
@@ -14,16 +14,16 @@ var reactRoots = new WeakMap();
 /**
  * Mounts `element` into `mountPoint`.
  *
- * When `nike_r19_render_unmount` is **on**, uses the React 18/19 `createRoot`
+ * When `platform_editor_react19_migration` is **on**, uses the React 18/19 `createRoot`
  * API wrapped in `flushSync` so the render is synchronous – matching the
  * legacy `ReactDOM.render` timing that ProseMirror decoration widgets depend
  * on (focus management, anchor positioning, block-menu visibility all read
  * the rendered DOM immediately after the callback returns).
  *
- * When the gate is **off**, falls back to the legacy `ReactDOM.render` path.
+ * Otherwise, falls back to the legacy `ReactDOM.render` path.
  */
 export var renderToMountPoint = function renderToMountPoint(element, mountPoint) {
-  if (fg('nike_r19_render_unmount')) {
+  if (isExperimentEnabled('platform_editor_react19_migration')) {
     var root = reactRoots.get(mountPoint);
     if (!root) {
       root = createRoot(mountPoint);
@@ -44,13 +44,13 @@ export var renderToMountPoint = function renderToMountPoint(element, mountPoint)
 /**
  * Unmounts the React tree at `mountPoint`.
  *
- * When `nike_r19_render_unmount` is **on**, looks up the root in the shared
+ * When `platform_editor_react19_migration` is **on**, looks up the root in the shared
  * registry, calls `root.unmount()`, and removes the entry.
  *
- * When the gate is **off**, falls back to `ReactDOM.unmountComponentAtNode`.
+ * Otherwise, falls back to `ReactDOM.unmountComponentAtNode`.
  */
 export var unmountFromMountPoint = function unmountFromMountPoint(mountPoint) {
-  if (fg('nike_r19_render_unmount')) {
+  if (isExperimentEnabled('platform_editor_react19_migration')) {
     var root = reactRoots.get(mountPoint);
     if (root) {
       root.unmount();

package/dist/esm/pm-plugins/utils/active-anchor-tracker.js

@@ -4,7 +4,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { EventEmitter } from 'events';
 import { useCallback, useEffect, useState } from 'react';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 export var ActiveAnchorTracker = /*#__PURE__*/function () {
   function ActiveAnchorTracker() {
     _classCallCheck(this, ActiveAnchorTracker);

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

@@ -1,4 +1,4 @@
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 export var maxLayoutColumnSupported = function maxLayoutColumnSupported() {
   return editorExperiment('advanced_layouts', true) ? 5 : 3;
 };

package/dist/esm/pm-plugins/utils/drag-handle-positions.js

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import memoizeOne from 'memoize-one';
 import { DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_H1_TOP_ADJUSTMENT, DRAG_HANDLE_H2_TOP_ADJUSTMENT, DRAG_HANDLE_H4_TOP_ADJUSTMENT, DRAG_HANDLE_H5_TOP_ADJUSTMENT, DRAG_HANDLE_H6_TOP_ADJUSTMENT, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT, DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT, dragHandleGap } from '../../ui/consts';
 var STICKY_NODES = ['panel', 'table', 'expand', 'layoutSection', 'bodiedExtension'];
 export var getTopPosition = function getTopPosition(dom, type) {

package/dist/esm/pm-plugins/utils/expand-and-update-selection.js

@@ -4,7 +4,7 @@ import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-che
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { selectTableClosestToPos } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { selectNode } from './getSelection';
 import { adjustSelectionBoundsForEdgePositions } from './selection';
 var isPosWithinRange = function isPosWithinRange(pos, range) {

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

@@ -5,7 +5,7 @@ import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { selectTableClosestToPos } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 export var getInlineNodePos = function getInlineNodePos(doc, start, nodeSize) {
   var $startPos = doc.resolve(start);
   // To trigger the annotation floating toolbar for non-selectable node, we need to select inline nodes

package/dist/esm/pm-plugins/utils/inline-drop-target.js

@@ -1,5 +1,5 @@
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { isWrappedMedia } from './check-media-layout';
 import { maxLayoutColumnSupported } from './consts';
 var syncedBlockTypes = ['syncBlock', 'bodiedSyncBlock'];

package/dist/esm/pm-plugins/utils/remove-from-source.js

@@ -1,6 +1,6 @@
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { isFragmentOfType } from './check-fragment';
 import { MIN_LAYOUT_COLUMN } from './consts';
 import { updateColumnWidths } from './update-column-widths';

package/dist/esm/pm-plugins/utils/surface-node-positions.js

@@ -7,19 +7,39 @@ var createSurfaceContextAtPosition = function createSurfaceContextAtPosition(sta
   var blockControlsContext = createBlockControlsSurfaceContextForPosition(state, position, activeNode);
   return blockControlsContext ? createSurfaceContext(BLOCK_CONTROL_UI_CONTEXT, blockControlsContext) : undefined;
 };
-export var getSurfaceNodePositions = function getSurfaceNodePositions(state, resolvedSurface, activeNode) {
+
+/**
+ * A position qualifies as soon as ANY of the given surfaces would render something for it.
+ * The surface context depends only on state/position/activeNode, not on which surface is being
+ * checked, so it's built once here rather than once per surface inside the `.some()`.
+ */
+var willAnySurfaceRenderAt = function willAnySurfaceRenderAt(surfaces, state, position, activeNode) {
+  var surfaceContext = createSurfaceContextAtPosition(state, position, activeNode);
+  return surfaces.some(function (_ref) {
+    var childrenMap = _ref.childrenMap,
+      root = _ref.root;
+    return willComponentRender(root, childrenMap, surfaceContext);
+  });
+};
+export var getSurfaceNodePositions = function getSurfaceNodePositions(state, resolvedSurfaces, activeNode) {
   var from = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
   var to = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : state.doc.content.size;
-  var root = resolvedSurface.root,
-    childrenMap = resolvedSurface.childrenMap;
-  if (!root) {
+  var surfaces = resolvedSurfaces.flatMap(function (_ref2) {
+    var childrenMap = _ref2.childrenMap,
+      root = _ref2.root;
+    return root ? [{
+      childrenMap: childrenMap,
+      root: root
+    }] : [];
+  });
+  if (surfaces.length === 0) {
     return [];
   }
   var positions = [];
   var start = Math.max(0, from);
   var end = Math.min(state.doc.content.size, Math.max(start, to));
   state.doc.nodesBetween(start, end, function (node, position) {
-    if (node.isBlock && willComponentRender(root, childrenMap, createSurfaceContextAtPosition(state, position, activeNode))) {
+    if (node.isBlock && willAnySurfaceRenderAt(surfaces, state, position, activeNode)) {
       positions.push(position);
     }
   });
@@ -28,25 +48,31 @@ export var getSurfaceNodePositions = function getSurfaceNodePositions(state, res
 var hasActiveNodeChanged = function hasActiveNodeChanged(previousActiveNode, activeNode) {
   return (previousActiveNode === null || previousActiveNode === void 0 ? void 0 : previousActiveNode.pos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) || (previousActiveNode === null || previousActiveNode === void 0 ? void 0 : previousActiveNode.nodeType) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) || (previousActiveNode === null || previousActiveNode === void 0 ? void 0 : previousActiveNode.rootPos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.rootPos);
 };
-export var updateSurfaceNodePositions = function updateSurfaceNodePositions(_ref) {
-  var activeNode = _ref.activeNode,
-    currentPositions = _ref.currentPositions,
-    from = _ref.from,
-    newState = _ref.newState,
-    previousActiveNode = _ref.previousActiveNode,
-    resolvedSurface = _ref.resolvedSurface,
-    to = _ref.to,
-    tr = _ref.tr;
+export var updateSurfaceNodePositions = function updateSurfaceNodePositions(_ref3) {
+  var activeNode = _ref3.activeNode,
+    currentPositions = _ref3.currentPositions,
+    from = _ref3.from,
+    newState = _ref3.newState,
+    previousActiveNode = _ref3.previousActiveNode,
+    resolvedSurfaces = _ref3.resolvedSurfaces,
+    to = _ref3.to,
+    tr = _ref3.tr;
   var activeNodeChanged = hasActiveNodeChanged(previousActiveNode, activeNode);
   if (!tr.docChanged && !activeNodeChanged) {
     return currentPositions;
   }
   var nextActiveNode = activeNode !== null && activeNode !== void 0 ? activeNode : undefined;
   if (activeNodeChanged) {
-    return getSurfaceNodePositions(newState, resolvedSurface, nextActiveNode);
+    return getSurfaceNodePositions(newState, resolvedSurfaces, nextActiveNode);
   }
-  var root = resolvedSurface.root,
-    childrenMap = resolvedSurface.childrenMap;
+  var surfaces = resolvedSurfaces.flatMap(function (_ref4) {
+    var childrenMap = _ref4.childrenMap,
+      root = _ref4.root;
+    return root ? [{
+      childrenMap: childrenMap,
+      root: root
+    }] : [];
+  });
   var mappedPositions = currentPositions.map(function (position) {
     return tr.mapping.mapResult(position, -1);
   }).filter(function (result) {
@@ -55,9 +81,9 @@ export var updateSurfaceNodePositions = function updateSurfaceNodePositions(_ref
     return result.pos;
   }).filter(function (position) {
     var node = newState.doc.nodeAt(position);
-    return Boolean((node === null || node === void 0 ? void 0 : node.isBlock) && root && willComponentRender(root, childrenMap, createSurfaceContextAtPosition(newState, position, nextActiveNode)));
+    return Boolean((node === null || node === void 0 ? void 0 : node.isBlock) && willAnySurfaceRenderAt(surfaces, newState, position, nextActiveNode));
   });
-  var changedPositions = getSurfaceNodePositions(newState, resolvedSurface, nextActiveNode, from - 1, to + 1);
+  var changedPositions = getSurfaceNodePositions(newState, resolvedSurfaces, nextActiveNode, from - 1, to + 1);
   return Array.from(new Set([].concat(_toConsumableArray(mappedPositions), _toConsumableArray(changedPositions)))).sort(function (first, second) {
     return first - second;
   });

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

@@ -4,7 +4,7 @@ import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-uti
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 export var isInsideTable = function isInsideTable(nodeType) {
   var _nodeType$schema$node = nodeType.schema.nodes,
     tableCell = _nodeType$schema$node.tableCell,

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

@@ -15,9 +15,9 @@ import { BLOCK_CONTROLS_LEFT_SURFACE } from '@atlaskit/editor-common/block-contr
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/create-surface-context';
 import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
-import { createBlockControlsSurfaceContext, createBlockControlsSurfaceContextForPosition } from './block-controls-surface-context';
 import { BlockControlsLeftSurface } from './block-controls-left-surface';
-import { getBlockControlsLeftSurfaceTargets } from './block-controls-left-surface-targets';
+import { createBlockControlsSurfaceContext, createBlockControlsSurfaceContextForPosition } from './block-controls-surface-context';
+import { getBlockControlsSurfaceTargets } from './block-controls-surface-targets';
 import { getNodeContentElement } from './utils/get-node-content-element';
 import { getAbsoluteSurfacePlacement, getSurfacePlacement } from './utils/get-surface-placement';
 var EMPTY_SURFACE_POSITIONS = [];
@@ -37,7 +37,7 @@ export var BlockControlsLeftSurfaces = function BlockControlsLeftSurfaces(_ref)
     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 getBlockControlsLeftSurfaceTargets(activeNode, surfaceNodePositions);
+    return getBlockControlsSurfaceTargets(activeNode, surfaceNodePositions);
   }, [activeNode, surfaceNodePositions]);
   var surfaces = useMemo(function () {
     return targets.flatMap(function (target) {
@@ -106,7 +106,8 @@ export var BlockControlsLeftSurfaces = function BlockControlsLeftSurfaces(_ref)
             nodeRect: targetElement.getBoundingClientRect(),
             nodeType: blockControlsContext.targetNode.type.name,
             nodeTypeWithLevel: getNodeTypeWithLevel(blockControlsContext.targetNode.node),
-            parentNodeType: blockControlsContext.targetNode.parentType === 'doc' ? undefined : blockControlsContext.targetNode.parentType
+            parentNodeType: blockControlsContext.targetNode.parentType === 'doc' ? undefined : blockControlsContext.targetNode.parentType,
+            side: 'left'
           });
           nextPlacements.set(position, getAbsoluteSurfacePlacement({
             offsetParentRect: offsetParentRect,

package/dist/esm/ui/block-controls-right-surface.compiled.css

@@ -0,0 +1,4 @@
+._zulpv77o{gap:var(--ds-space-025,2px)}._1e0c1txw{display:flex}
+._1pbyb4wl{z-index:100}
+._4cvr1h6o{align-items:center}
+._kqswstnw{position:absolute}

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

@@ -0,0 +1,38 @@
+/* block-controls-right-surface.tsx generated by @compiled/babel-plugin v2.0.0 */
+import "./block-controls-right-surface.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { BLOCK_CONTROLS_RIGHT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
+import { SurfaceRenderer, willSurfaceRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
+import { VisibilityContainer } from './visibility-container';
+var rightSurfaceStyles = null;
+/** Renders one right block-controls surface at a document position. */
+export var BlockControlsRightSurface = function BlockControlsRightSurface(_ref) {
+  var api = _ref.api,
+    components = _ref.components,
+    forceVisibleOnMouseOut = _ref.forceVisibleOnMouseOut,
+    placement = _ref.placement,
+    source = _ref.source,
+    surfaceContext = _ref.surfaceContext;
+  if (!placement || !willSurfaceRender(components, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext)) {
+    return null;
+  }
+  var surface = /*#__PURE__*/React.createElement(SurfaceRenderer, {
+    components: components,
+    surface: BLOCK_CONTROLS_RIGHT_SURFACE,
+    surfaceContext: surfaceContext
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    "data-editor-block-controls-surface": true,
+    "data-testid": source === 'stored' ? 'block-controls-right-surface-stored' : source === 'active' ? 'block-controls-right-surface-active' : 'block-controls-right-surface'
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Placement is resolved from the target node's runtime DOM geometry.
+    ,
+    style: placement,
+    className: ax(["_zulpv77o _4cvr1h6o _1e0c1txw _kqswstnw _1pbyb4wl"])
+  }, /*#__PURE__*/React.createElement(VisibilityContainer, {
+    api: api,
+    controlSide: "right",
+    forceVisibleOnMouseOut: forceVisibleOnMouseOut,
+    shouldUseDisplayContents: true
+  }, surface));
+};

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

@@ -0,0 +1,213 @@
+/* block-controls-right-surfaces.tsx generated by @compiled/babel-plugin v2.0.0 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { ax, ix } from "@compiled/react/runtime";
+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; }
+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 React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { bind } from 'bind-event-listener';
+import { getDocument } from '@atlaskit/browser-apis';
+import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls/block-control-ui-context';
+import { BLOCK_CONTROLS_RIGHT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/types';
+import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
+import { BlockControlsRightSurface } from './block-controls-right-surface';
+import { createBlockControlsSurfaceContext, createBlockControlsSurfaceContextForPosition } from './block-controls-surface-context';
+import { getBlockControlsSurfaceTargets } from './block-controls-surface-targets';
+import { getNodeContentElement } from './utils/get-node-content-element';
+import { getAbsoluteSurfacePlacement, getSurfacePlacement } from './utils/get-surface-placement';
+var EMPTY_SURFACE_POSITIONS = [];
+var EMPTY_SURFACE_COMPONENTS = [];
+/**
+ * Registry-backed right surface tree. Mirrors the left surface's single-tree, measured-placement
+ * approach, but keeps its own components lookup, targets, placements and measurement lifecycle so
+ * the right surface never depends on the left surface's render pass.
+ */
+export var BlockControlsRightSurfaces = function BlockControlsRightSurfaces(_ref) {
+  var _api$uiControlRegistr, _api$uiControlRegistr2;
+  var api = _ref.api,
+    editorView = _ref.editorView;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls'], function (states) {
+      var _states$blockControls, _states$blockControls2, _states$blockControls3;
+      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
+      };
+    }),
+    activeNode = _useSharedPluginState.activeNode,
+    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);
+  }, [activeNode, surfaceNodePositions]);
+  var surfaces = useMemo(function () {
+    return targets.flatMap(function (target) {
+      var context = target.source === 'stored' ? createBlockControlsSurfaceContextForPosition(editorView.state, target.position, activeNode) : createBlockControlsSurfaceContext(editorView, activeNode, target.source);
+      if (!context) {
+        return [];
+      }
+      var surfaceContext = createSurfaceContext(BLOCK_CONTROL_UI_CONTEXT, context);
+      return [_objectSpread(_objectSpread({}, target), {}, {
+        blockControlsContext: context,
+        surfaceContext: surfaceContext
+      })];
+    });
+  }, [activeNode, editorView, targets]);
+  var _useState = useState(new Map()),
+    _useState2 = _slicedToArray(_useState, 2),
+    placements = _useState2[0],
+    setPlacements = _useState2[1];
+  var animationFrameRef = useRef(undefined);
+  useLayoutEffect(function () {
+    var _getDocument;
+    if (surfaces.length === 0) {
+      setPlacements(new Map());
+      return;
+    }
+    var measurementTargets = surfaces.flatMap(function (_ref2) {
+      var blockControlsContext = _ref2.blockControlsContext,
+        position = _ref2.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) {
+        return [];
+      }
+      return [{
+        blockControlsContext: blockControlsContext,
+        position: position,
+        targetElement: getNodeContentElement(targetElementRoot, blockControlsContext.targetNode.type.name),
+        targetElementRoot: targetElementRoot
+      }];
+    });
+    var offsetParent = editorView.dom.offsetParent;
+    var isDocumentOffsetParent = !offsetParent || offsetParent === ((_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.body);
+    var scrollingOffsetParent = offsetParent instanceof HTMLElement && !isDocumentOffsetParent ? offsetParent : undefined;
+    var updatePositions = function updatePositions() {
+      var _scrollingOffsetParen, _scrollingOffsetParen2;
+      animationFrameRef.current = undefined;
+      var offsetParentRect = offsetParent === null || offsetParent === void 0 ? void 0 : offsetParent.getBoundingClientRect();
+      var offsetParentScrollTop = (_scrollingOffsetParen = scrollingOffsetParent === null || scrollingOffsetParent === void 0 ? void 0 : scrollingOffsetParent.scrollTop) !== null && _scrollingOffsetParen !== void 0 ? _scrollingOffsetParen : window.scrollY;
+      var offsetParentScrollLeft = (_scrollingOffsetParen2 = scrollingOffsetParent === null || scrollingOffsetParent === void 0 ? void 0 : scrollingOffsetParent.scrollLeft) !== null && _scrollingOffsetParen2 !== void 0 ? _scrollingOffsetParen2 : window.scrollX;
+      var nextPlacements = new Map();
+      var _iterator = _createForOfIteratorHelper(measurementTargets),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _targetElementRoot$ge;
+          var _step$value = _step.value,
+            blockControlsContext = _step$value.blockControlsContext,
+            position = _step$value.position,
+            targetElement = _step$value.targetElement,
+            targetElementRoot = _step$value.targetElementRoot;
+          if (!targetElementRoot.isConnected || !targetElement.isConnected) {
+            continue;
+          }
+          var placement = getSurfacePlacement({
+            layout: (_targetElementRoot$ge = targetElementRoot.getAttribute('layout')) !== null && _targetElementRoot$ge !== void 0 ? _targetElementRoot$ge : '',
+            nodeRect: targetElement.getBoundingClientRect(),
+            nodeType: blockControlsContext.targetNode.type.name,
+            nodeTypeWithLevel: getNodeTypeWithLevel(blockControlsContext.targetNode.node),
+            parentNodeType: blockControlsContext.targetNode.parentType === 'doc' ? undefined : blockControlsContext.targetNode.parentType,
+            side: 'right'
+          });
+          nextPlacements.set(position, getAbsoluteSurfacePlacement({
+            offsetParentRect: offsetParentRect,
+            offsetParentScrollLeft: offsetParentScrollLeft,
+            offsetParentScrollTop: offsetParentScrollTop,
+            placement: placement
+          }));
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      setPlacements(nextPlacements);
+    };
+    var schedulePositionUpdate = function schedulePositionUpdate() {
+      if (animationFrameRef.current === undefined) {
+        animationFrameRef.current = requestAnimationFrame(updatePositions);
+      }
+    };
+    updatePositions();
+    var resizeObserver = new ResizeObserver(schedulePositionUpdate);
+    var observedElements = new Set([editorView.dom]);
+    var _iterator2 = _createForOfIteratorHelper(measurementTargets),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var targetElement = _step2.value.targetElement;
+        observedElements.add(targetElement);
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+    if (offsetParent instanceof HTMLElement) {
+      observedElements.add(offsetParent);
+    }
+    observedElements.forEach(function (element) {
+      return resizeObserver.observe(element);
+    });
+    var unbindWindowResize = bind(window, {
+      type: 'resize',
+      listener: schedulePositionUpdate
+    });
+    var unbindWindowScroll = bind(window, {
+      type: 'scroll',
+      listener: schedulePositionUpdate,
+      options: {
+        capture: true,
+        passive: true
+      }
+    });
+    var visualViewport = window.visualViewport;
+    var unbindVisualViewportResize = visualViewport ? bind(visualViewport, {
+      type: 'resize',
+      listener: schedulePositionUpdate
+    }) : undefined;
+    var unbindVisualViewportScroll = visualViewport ? bind(visualViewport, {
+      type: 'scroll',
+      listener: schedulePositionUpdate
+    }) : undefined;
+    var unbindTransitionEnd = bind(editorView.dom, {
+      type: 'transitionend',
+      listener: schedulePositionUpdate,
+      options: {
+        capture: true
+      }
+    });
+    return function () {
+      if (animationFrameRef.current !== undefined) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = undefined;
+      }
+      resizeObserver.disconnect();
+      unbindWindowResize();
+      unbindWindowScroll();
+      unbindVisualViewportResize === null || unbindVisualViewportResize === void 0 || unbindVisualViewportResize();
+      unbindVisualViewportScroll === null || unbindVisualViewportScroll === void 0 || unbindVisualViewportScroll();
+      unbindTransitionEnd();
+    };
+  }, [editorView, surfaces]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, surfaces.map(function (_ref3) {
+    var _activeNode$handleOpt;
+    var position = _ref3.position,
+      source = _ref3.source,
+      surfaceContext = _ref3.surfaceContext;
+    return /*#__PURE__*/React.createElement(BlockControlsRightSurface, {
+      api: api,
+      components: components,
+      forceVisibleOnMouseOut: Boolean(activeNode === null || activeNode === void 0 || (_activeNode$handleOpt = activeNode.handleOptions) === null || _activeNode$handleOpt === void 0 ? void 0 : _activeNode$handleOpt.isFocused),
+      key: position,
+      placement: placements.get(position),
+      source: source,
+      surfaceContext: surfaceContext
+    });
+  }));
+};

package/dist/{cjs/ui/block-controls-left-surface-targets.js → esm/ui/block-controls-surface-targets.js}

@@ -1,14 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getBlockControlsLeftSurfaceTargets = void 0;
 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; }
-/** Combines hover-driven and stored surface positions into one deduplicated list. */
-var getBlockControlsLeftSurfaceTargets = exports.getBlockControlsLeftSurfaceTargets = function getBlockControlsLeftSurfaceTargets(activeNode, storedPositions) {
+/**
+ * Combines hover-driven and stored surface positions into one deduplicated list.
+ * Shared by both the left and right surfaces: this is pure position bookkeeping with no
+ * surface-specific behavior, so there's nothing to keep independent between them. What *is*
+ * kept independent is each surface's own React tree (component lookup, measurement effects,
+ * observers) — see block-controls-left-surfaces.tsx / block-controls-right-surfaces.tsx.
+ */
+export var getBlockControlsSurfaceTargets = function getBlockControlsSurfaceTargets(activeNode, storedPositions) {
   var targetsByPosition = new Map();
   var _iterator = _createForOfIteratorHelper(storedPositions),
     _step;

package/dist/esm/ui/consts.js

@@ -7,7 +7,7 @@ import { akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-sh
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 export var ACTIVE_DRAG_HANDLE_ATTR = 'data-active-drag-handle';
 export var ACTIVE_QUICK_INSERT_ATTR = 'data-active-quick-insert';
 export var BLOCK_CONTROLS_SURFACE_SELECTOR = '[data-editor-block-controls-surface]';

package/dist/esm/ui/drag-handle.js

@@ -23,6 +23,7 @@ import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFullPageNarrowBreakout, akEditorTableToolbarSize, relativeSizeToBaseFontSize } from '@atlaskit/editor-shared-styles/consts';
 import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/utils/set-custom-native-drag-preview';
@@ -30,7 +31,7 @@ import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/ut
 import { Box, xcss } from '@atlaskit/primitives';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import Tooltip from '@atlaskit/tooltip/Tooltip';
 import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
 import { key } from '../pm-plugins/main';
@@ -975,7 +976,7 @@ export var DragHandle = function DragHandle(_ref2) {
   }, [isReliableAnchorEnabled, calculatePositionOld, view.dom, anchorName, nodeType, docDepForReliableAnchor]);
   var isHandleShown = positionStylesOld.display !== 'none';
   useEffect(function () {
-    if (fg('nike_r19_render_unmount')) {
+    if (isExperimentEnabled('platform_editor_react19_migration')) {
       return;
     }
     if (handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && buttonRef.current) {
@@ -990,7 +991,7 @@ export var DragHandle = function DragHandle(_ref2) {
     }
   }, [buttonRef, handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused, view]);
   useEffect(function () {
-    if (!fg('nike_r19_render_unmount')) {
+    if (!isExperimentEnabled('platform_editor_react19_migration')) {
       return;
     }
     if (!(handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && isHandleShown && buttonRef.current)) {

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

@@ -14,7 +14,7 @@ import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indi
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter';
 import { layers } from '@atlaskit/theme/constants';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { getNodeAnchor } from '../pm-plugins/decorations-common';
 import { useActiveAnchorTracker } from '../pm-plugins/utils/active-anchor-tracker';
 import { isAnchorSupported } from '../pm-plugins/utils/anchor-utils';

package/dist/esm/ui/global-styles.js

@@ -11,7 +11,7 @@ import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-che
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced } from '@atlaskit/editor-shared-styles';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME, ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME, DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
 import { NODE_ANCHOR_ATTR_NAME } from './utils/dom-attr-name';