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

package/dist/es2019/blockControlsPlugin.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BLOCK_CONTROLS_LEFT_GROUP, BLOCK_CONTROLS_LEFT_SECTION, BLOCK_CONTROLS_LEFT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
+import { BLOCK_CONTROLS_LEFT_GROUP, BLOCK_CONTROLS_LEFT_SECTION, BLOCK_CONTROLS_LEFT_SURFACE, BLOCK_CONTROLS_RIGHT_GROUP, BLOCK_CONTROLS_RIGHT_SECTION, BLOCK_CONTROLS_RIGHT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
 import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -7,7 +7,7 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 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 { handleKeyDownWithPreservedSelection } from './editor-commands/handle-key-down-with-preserved-selection';
 import { mapPreservedSelection } from './editor-commands/map-preserved-selection';
 import { moveNode } from './editor-commands/move-node';
@@ -23,6 +23,7 @@ import { createSelectionPreservationPlugin } from './pm-plugins/selection-preser
 import { expandAndUpdateSelection } from './pm-plugins/utils/expand-and-update-selection';
 import { selectNode } from './pm-plugins/utils/getSelection';
 import { BlockControlsLeftSurfaces } from './ui/block-controls-left-surfaces';
+import { BlockControlsRightSurfaces } from './ui/block-controls-right-surfaces';
 import { getBlockControlsSurfaceDragHandleComponents } from './ui/block-controls-surface-drag-handle-registration';
 import { GlobalStylesWrapper } from './ui/global-styles';
 import { SurfaceEditorViewContext } from './ui/surface-editor-view-context';
@@ -37,6 +38,7 @@ export const blockControlsPlugin = ({
   const registryBlockControlsEnabled = isExperimentEnabled('platform_editor_block_control_migration');
   const surfaceNodePositionsEnabled = registryBlockControlsEnabled && isExperimentEnabled('platform_editor_collapsible_headings');
   const legacyBlockControlsEnabled = !registryBlockControlsEnabled;
+  const rightSurfaceEnabled = registryBlockControlsEnabled && isExperimentEnabled('platform_editor_block_control_right_surface');
   if (registryBlockControlsEnabled) {
     var _api$uiControlRegistr;
     api === null || api === void 0 ? void 0 : (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.register([BLOCK_CONTROLS_LEFT_SURFACE, {
@@ -54,6 +56,25 @@ export const blockControlsPlugin = ({
     }, ...getBlockControlsSurfaceDragHandleComponents({
       api
     })]);
+    if (rightSurfaceEnabled) {
+      var _api$uiControlRegistr2;
+      // The right surface host stays generic: it only registers the toolbar/section/group
+      // hierarchy. Individual features contribute their own buttons into
+      // BLOCK_CONTROLS_RIGHT_GROUP from their own plugins, same as the left surface.
+      api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.register([BLOCK_CONTROLS_RIGHT_SURFACE, {
+        ...BLOCK_CONTROLS_RIGHT_SECTION,
+        parents: [{
+          ...BLOCK_CONTROLS_RIGHT_SURFACE,
+          rank: 100
+        }]
+      }, {
+        ...BLOCK_CONTROLS_RIGHT_GROUP,
+        parents: [{
+          ...BLOCK_CONTROLS_RIGHT_SECTION,
+          rank: 100
+        }]
+      }]);
+    }
   }
   return {
     name: 'blockControls',
@@ -123,7 +144,7 @@ export const blockControlsPlugin = ({
         plugin: ({
           getIntl,
           nodeViewPortalProviderAPI
-        }) => createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled, surfaceNodePositionsEnabled)
+        }) => createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled, surfaceNodePositionsEnabled, rightSurfaceEnabled)
       }];
       if (editorExperiment('platform_editor_controls', 'variant1')) {
         pmPlugins.push({
@@ -446,7 +467,10 @@ export const blockControlsPlugin = ({
       }, /*#__PURE__*/React.createElement(BlockControlsLeftSurfaces, {
         api: api,
         editorView: editorView
-      })) : null);
+      }), rightSurfaceEnabled ? /*#__PURE__*/React.createElement(BlockControlsRightSurfaces, {
+        api: api,
+        editorView: editorView
+      }) : null) : null);
     }
   };
 };

package/dist/es2019/editor-commands/move-node-with-block-menu.js

@@ -1,6 +1,6 @@
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { DIRECTION } from '@atlaskit/editor-common/types';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { key } from '../pm-plugins/main';
 import { mapPreservedSelection } from '../pm-plugins/utils/selection';
 import { moveNode } from './move-node';

package/dist/es2019/editor-commands/move-node.js

@@ -14,7 +14,7 @@ import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/u
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 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 { key } from '../pm-plugins/main';
 import { attachMoveNodeAnalytics, getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
 import { getNestedNodePosition } from '../pm-plugins/utils/getNestedNodePosition';

package/dist/es2019/editor-commands/utils/move-node-utils.js

@@ -1,6 +1,6 @@
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { createPreservedSelection } from '../../pm-plugins/utils/selection';
 
 /**

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

@@ -1,6 +1,6 @@
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 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, getNodeTypeWithLevel, NESTED_DEPTH, TYPE_NODE_DEC } from './decorations-common';
 const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
 export const IGNORE_NODES_NEXT = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption'];

package/dist/es2019/pm-plugins/decorations-drag-handle.js

@@ -4,7 +4,7 @@ import uuid from 'uuid';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 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_ATTR } from '../ui/consts';
 import { DragHandle, DragHandleWithVisibility } from '../ui/drag-handle';
 import { TYPE_HANDLE_DEC, TYPE_NODE_DEC, unmountDecorations } from './decorations-common';

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

@@ -4,7 +4,7 @@ import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
 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';
 import { getNodeAnchor } from './decorations-common';
 import { createDropTargetDecoration, createLayoutDropTargetDecoration } from './decorations-drop-target';
 import { findSurroundingNodes } from './decorations-find-surrounding-nodes';

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

@@ -7,7 +7,7 @@ import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 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 { nodeMargins } from '../ui/consts';
 import { DropTarget, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET } from '../ui/drop-target';
 import { DropTargetLayout, DropTargetLayoutNativeAnchorSupport } from '../ui/drop-target-layout';

package/dist/es2019/pm-plugins/decorations-quick-insert-button.js

@@ -4,7 +4,7 @@ import uuid from 'uuid';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 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_QUICK_INSERT_ATTR } from '../ui/consts';
 import { QuickInsertWithVisibility } from '../ui/quick-insert-button';
 import { getMatchingBlockMarks } from './utils/marks';

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

@@ -1,6 +1,6 @@
 import { DRAG_HANDLE_SELECTOR } 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';
 export const handleMouseDown = api => (view, event) => {
   if (!(event.target instanceof HTMLElement)) {
     return false;

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

@@ -4,7 +4,7 @@ import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-che
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 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 { getAnchorAttrName, getTypeNameAttrName, getTypeNameFromDom, NODE_ANCHOR_ATTR_NAME } from '../ui/utils/dom-attr-name';
 import { IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT, IGNORE_NODES_NEXT } from './decorations-anchor';
 import { selectionPreservationPluginKey } from './selection-preservation/plugin-key';

package/dist/es2019/pm-plugins/interaction-tracking/pm-plugin.js

@@ -4,7 +4,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { UNSAFE_expValNoExposure } from '@atlaskit/platform-feature-experiments/unsafe-exp-val-no-exposure';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { RIGHT_MARGIN_ROVO_GAP_PX } from './constants';
 import { handleKeyDown } from './handle-key-down';
 import { handleMouseEnter, handleMouseLeave, handleMouseMove } from './handle-mouse-move';

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

@@ -1,7 +1,7 @@
 import rafSchedule from 'raf-schd';
 import { getDocument } from '@atlaskit/browser-apis';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { BLOCK_CONTROLS_LEFT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
+import { BLOCK_CONTROLS_LEFT_SURFACE, BLOCK_CONTROLS_RIGHT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { getNodeIdProvider } from '@atlaskit/editor-common/node-anchor';
 import { isMeasuring, startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
@@ -18,7 +18,7 @@ import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-sc
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/utils/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter';
 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 { BLOCK_CONTROLS_SURFACE_SELECTOR } from '../ui/consts';
 import { getAnchorAttrName } from '../ui/utils/dom-attr-name';
 import { findNodeDecs, nodeDecorations } from './decorations-anchor';
@@ -231,7 +231,7 @@ const getDecorationAtPos = (state, decorations, pos, to) => {
   const nodeDecAtActivePos = nodeDecsAtActivePos.pop();
   return nodeDecAtActivePos;
 };
-export const apply = (api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled = false, quickInsertButtonEnabled = true, anchorRectCache, resizeObserverWidth, pragmaticCleanup, resolvedSurface) => {
+export const apply = (api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled = false, quickInsertButtonEnabled = true, anchorRectCache, resizeObserverWidth, pragmaticCleanup, resolvedSurfaces = []) => {
   var _api$limitedMode, _api$limitedMode$shar, _api$limitedMode$shar2, _meta$multiSelectDnD, _api$editorViewMode, _api$editorViewMode$s, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging2, _meta$isDragging3, _meta$toggleMenu, _meta$toggleMenu2, _meta$toggleMenu3, _meta$toggleMenu4, _meta$toggleMenu5, _meta$toggleMenu6, _meta$toggleMenu7, _meta$toggleMenu8, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
   let {
     activeNode,
@@ -717,14 +717,14 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     var _latestActiveNode13, _latestActiveNode14;
     newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && flags.legacyDragHandleEnabled && findHandleDec(decorations, (_latestActiveNode13 = latestActiveNode) === null || _latestActiveNode13 === void 0 ? void 0 : _latestActiveNode13.pos, (_latestActiveNode14 = latestActiveNode) === null || _latestActiveNode14 === void 0 ? void 0 : _latestActiveNode14.pos).length === 0 ? null : latestActiveNode;
   }
-  if (flags.surfaceNodePositionsEnabled && resolvedSurface) {
+  if (flags.surfaceNodePositionsEnabled && resolvedSurfaces.length > 0) {
     surfaceNodePositions = updateSurfaceNodePositions({
       activeNode: newActiveNode,
       currentPositions: surfaceNodePositions,
       from,
       newState,
       previousActiveNode,
-      resolvedSurface,
+      resolvedSurfaces,
       to,
       tr
     });
@@ -772,8 +772,8 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     isSelectedViaDragHandle: isSelectedViaDragHandleNew
   };
 };
-export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled = false, quickInsertButtonEnabled = true, legacyDragHandleEnabled = true, surfaceNodePositionsEnabled = false) => {
-  var _api$uiControlRegistr, _api$uiControlRegistr2;
+export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled = false, quickInsertButtonEnabled = true, legacyDragHandleEnabled = true, surfaceNodePositionsEnabled = false, rightSurfaceEnabled = false) => {
+  var _api$uiControlRegistr, _api$uiControlRegistr2, _api$uiControlRegistr3, _api$uiControlRegistr4;
   const {
     formatMessage
   } = getIntl();
@@ -786,7 +786,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
     surfaceNodePositionsEnabled,
     toolbarFlagsEnabled
   };
-  const resolvedSurface = surfaceNodePositionsEnabled ? resolveSurface((_api$uiControlRegistr = api === null || api === void 0 ? void 0 : (_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 : [], BLOCK_CONTROLS_LEFT_SURFACE) : undefined;
+  const resolvedSurfaces = surfaceNodePositionsEnabled ? [resolveSurface((_api$uiControlRegistr = api === null || api === void 0 ? void 0 : (_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 : [], BLOCK_CONTROLS_LEFT_SURFACE), ...(rightSurfaceEnabled ? [resolveSurface((_api$uiControlRegistr3 = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr4 = api.uiControlRegistry) === null || _api$uiControlRegistr4 === void 0 ? void 0 : _api$uiControlRegistr4.actions.getComponents(BLOCK_CONTROLS_RIGHT_SURFACE)) !== null && _api$uiControlRegistr3 !== void 0 ? _api$uiControlRegistr3 : [], BLOCK_CONTROLS_RIGHT_SURFACE)] : [])] : [];
   let anchorRectCache;
   if (!isAnchorSupported()) {
     anchorRectCache = new AnchorRectCache();
@@ -799,10 +799,10 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
       init(_config, editorState) {
         return {
           ...initialState,
-          surfaceNodePositions: resolvedSurface ? getSurfaceNodePositions(editorState, resolvedSurface) : []
+          surfaceNodePositions: resolvedSurfaces.length > 0 ? getSurfaceNodePositions(editorState, resolvedSurfaces) : []
         };
       },
-      apply: (tr, currentState, _, newState) => apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled, anchorRectCache, resizeObserverWidth, pragmaticCleanup, resolvedSurface)
+      apply: (tr, currentState, _, newState) => apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled, anchorRectCache, resizeObserverWidth, pragmaticCleanup, resolvedSurfaces)
     },
     props: {
       decorations: state => {

package/dist/es2019/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 @@ const 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 const renderToMountPoint = (element, mountPoint) => {
-  if (fg('nike_r19_render_unmount')) {
+  if (isExperimentEnabled('platform_editor_react19_migration')) {
     let root = reactRoots.get(mountPoint);
     if (!root) {
       root = createRoot(mountPoint);
@@ -42,13 +42,13 @@ export const 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 const unmountFromMountPoint = mountPoint => {
-  if (fg('nike_r19_render_unmount')) {
+  if (isExperimentEnabled('platform_editor_react19_migration')) {
     const root = reactRoots.get(mountPoint);
     if (root) {
       root.unmount();

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

@@ -1,7 +1,7 @@
 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 class ActiveAnchorTracker {
   constructor() {
     _defineProperty(this, "lastActiveAnchor", '');

package/dist/es2019/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 const maxLayoutColumnSupported = () => {
   return editorExperiment('advanced_layouts', true) ? 5 : 3;
 };

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

@@ -1,7 +1,7 @@
 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';
 const STICKY_NODES = ['panel', 'table', 'expand', 'layoutSection', 'bodiedExtension'];
 export const getTopPosition = (dom, type) => {

package/dist/es2019/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';
 const isPosWithinRange = (pos, range) => {

package/dist/es2019/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 const getInlineNodePos = (doc, start, nodeSize) => {
   const $startPos = doc.resolve(start);
   // To trigger the annotation floating toolbar for non-selectable node, we need to select inline nodes

package/dist/es2019/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';
 const syncedBlockTypes = ['syncBlock', 'bodiedSyncBlock'];

package/dist/es2019/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/es2019/pm-plugins/utils/surface-node-positions.js

@@ -6,19 +6,35 @@ const createSurfaceContextAtPosition = (state, position, activeNode) => {
   const blockControlsContext = createBlockControlsSurfaceContextForPosition(state, position, activeNode);
   return blockControlsContext ? createSurfaceContext(BLOCK_CONTROL_UI_CONTEXT, blockControlsContext) : undefined;
 };
-export const getSurfaceNodePositions = (state, resolvedSurface, activeNode, from = 0, to = state.doc.content.size) => {
-  const {
-    root,
-    childrenMap
-  } = resolvedSurface;
-  if (!root) {
+
+/**
+ * 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()`.
+ */
+const willAnySurfaceRenderAt = (surfaces, state, position, activeNode) => {
+  const surfaceContext = createSurfaceContextAtPosition(state, position, activeNode);
+  return surfaces.some(({
+    childrenMap,
+    root
+  }) => willComponentRender(root, childrenMap, surfaceContext));
+};
+export const getSurfaceNodePositions = (state, resolvedSurfaces, activeNode, from = 0, to = state.doc.content.size) => {
+  const surfaces = resolvedSurfaces.flatMap(({
+    childrenMap,
+    root
+  }) => root ? [{
+    childrenMap,
+    root
+  }] : []);
+  if (surfaces.length === 0) {
     return [];
   }
   const positions = [];
   const start = Math.max(0, from);
   const end = Math.min(state.doc.content.size, Math.max(start, to));
   state.doc.nodesBetween(start, end, (node, position) => {
-    if (node.isBlock && willComponentRender(root, childrenMap, createSurfaceContextAtPosition(state, position, activeNode))) {
+    if (node.isBlock && willAnySurfaceRenderAt(surfaces, state, position, activeNode)) {
       positions.push(position);
     }
   });
@@ -31,7 +47,7 @@ export const updateSurfaceNodePositions = ({
   from,
   newState,
   previousActiveNode,
-  resolvedSurface,
+  resolvedSurfaces,
   to,
   tr
 }) => {
@@ -41,16 +57,19 @@ export const updateSurfaceNodePositions = ({
   }
   const nextActiveNode = activeNode !== null && activeNode !== void 0 ? activeNode : undefined;
   if (activeNodeChanged) {
-    return getSurfaceNodePositions(newState, resolvedSurface, nextActiveNode);
+    return getSurfaceNodePositions(newState, resolvedSurfaces, nextActiveNode);
   }
-  const {
-    root,
-    childrenMap
-  } = resolvedSurface;
+  const surfaces = resolvedSurfaces.flatMap(({
+    childrenMap,
+    root
+  }) => root ? [{
+    childrenMap,
+    root
+  }] : []);
   const mappedPositions = currentPositions.map(position => tr.mapping.mapResult(position, -1)).filter(result => !result.deleted).map(result => result.pos).filter(position => {
     const 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));
   });
-  const changedPositions = getSurfaceNodePositions(newState, resolvedSurface, nextActiveNode, from - 1, to + 1);
+  const changedPositions = getSurfaceNodePositions(newState, resolvedSurfaces, nextActiveNode, from - 1, to + 1);
   return Array.from(new Set([...mappedPositions, ...changedPositions])).sort((first, second) => first - second);
 };

package/dist/es2019/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 const isInsideTable = nodeType => {
   const {
     tableCell,

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

@@ -8,9 +8,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';
 const EMPTY_SURFACE_POSITIONS = [];
@@ -31,7 +31,7 @@ export const BlockControlsLeftSurfaces = ({
     };
   });
   const 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;
-  const targets = useMemo(() => getBlockControlsLeftSurfaceTargets(activeNode, surfaceNodePositions), [activeNode, surfaceNodePositions]);
+  const targets = useMemo(() => getBlockControlsSurfaceTargets(activeNode, surfaceNodePositions), [activeNode, surfaceNodePositions]);
   const surfaces = useMemo(() => targets.flatMap(target => {
     const context = target.source === 'stored' ? createBlockControlsSurfaceContextForPosition(editorView.state, target.position, activeNode) : createBlockControlsSurfaceContext(editorView, activeNode, target.source);
     if (!context) {
@@ -93,7 +93,8 @@ export const BlockControlsLeftSurfaces = ({
           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,

package/dist/es2019/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/es2019/ui/block-controls-right-surface.js

@@ -0,0 +1,39 @@
+/* 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';
+const rightSurfaceStyles = null;
+/** Renders one right block-controls surface at a document position. */
+export const BlockControlsRightSurface = ({
+  api,
+  components,
+  forceVisibleOnMouseOut,
+  placement,
+  source,
+  surfaceContext
+}) => {
+  if (!placement || !willSurfaceRender(components, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext)) {
+    return null;
+  }
+  const 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));
+};