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

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

@@ -0,0 +1,187 @@
+/* block-controls-right-surfaces.tsx generated by @compiled/babel-plugin v2.0.0 */
+import { ax, ix } from "@compiled/react/runtime";
+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';
+const EMPTY_SURFACE_POSITIONS = [];
+const 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 const BlockControlsRightSurfaces = ({
+  api,
+  editorView
+}) => {
+  var _api$uiControlRegistr, _api$uiControlRegistr2;
+  const {
+    activeNode,
+    surfaceNodePositions
+  } = useSharedPluginStateWithSelector(api, ['blockControls'], 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
+    };
+  });
+  const 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;
+  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) {
+      return [];
+    }
+    const surfaceContext = createSurfaceContext(BLOCK_CONTROL_UI_CONTEXT, context);
+    return [{
+      ...target,
+      blockControlsContext: context,
+      surfaceContext
+    }];
+  }), [activeNode, editorView, targets]);
+  const [placements, setPlacements] = useState(new Map());
+  const animationFrameRef = useRef(undefined);
+  useLayoutEffect(() => {
+    var _getDocument;
+    if (surfaces.length === 0) {
+      setPlacements(new Map());
+      return;
+    }
+    const measurementTargets = surfaces.flatMap(({
+      blockControlsContext,
+      position
+    }) => {
+      const targetNodeElement = editorView.nodeDOM(blockControlsContext.targetNode.pos);
+      const targetElementRoot = targetNodeElement instanceof HTMLElement ? targetNodeElement : targetNodeElement === null || targetNodeElement === void 0 ? void 0 : targetNodeElement.parentElement;
+      if (!targetElementRoot) {
+        return [];
+      }
+      return [{
+        blockControlsContext,
+        position,
+        targetElement: getNodeContentElement(targetElementRoot, blockControlsContext.targetNode.type.name),
+        targetElementRoot
+      }];
+    });
+    const offsetParent = editorView.dom.offsetParent;
+    const isDocumentOffsetParent = !offsetParent || offsetParent === ((_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.body);
+    const scrollingOffsetParent = offsetParent instanceof HTMLElement && !isDocumentOffsetParent ? offsetParent : undefined;
+    const updatePositions = () => {
+      var _scrollingOffsetParen, _scrollingOffsetParen2;
+      animationFrameRef.current = undefined;
+      const offsetParentRect = offsetParent === null || offsetParent === void 0 ? void 0 : offsetParent.getBoundingClientRect();
+      const offsetParentScrollTop = (_scrollingOffsetParen = scrollingOffsetParent === null || scrollingOffsetParent === void 0 ? void 0 : scrollingOffsetParent.scrollTop) !== null && _scrollingOffsetParen !== void 0 ? _scrollingOffsetParen : window.scrollY;
+      const offsetParentScrollLeft = (_scrollingOffsetParen2 = scrollingOffsetParent === null || scrollingOffsetParent === void 0 ? void 0 : scrollingOffsetParent.scrollLeft) !== null && _scrollingOffsetParen2 !== void 0 ? _scrollingOffsetParen2 : window.scrollX;
+      const nextPlacements = new Map();
+      for (const {
+        blockControlsContext,
+        position,
+        targetElement,
+        targetElementRoot
+      } of measurementTargets) {
+        var _targetElementRoot$ge;
+        if (!targetElementRoot.isConnected || !targetElement.isConnected) {
+          continue;
+        }
+        const 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,
+          offsetParentScrollLeft,
+          offsetParentScrollTop,
+          placement
+        }));
+      }
+      setPlacements(nextPlacements);
+    };
+    const schedulePositionUpdate = () => {
+      if (animationFrameRef.current === undefined) {
+        animationFrameRef.current = requestAnimationFrame(updatePositions);
+      }
+    };
+    updatePositions();
+    const resizeObserver = new ResizeObserver(schedulePositionUpdate);
+    const observedElements = new Set([editorView.dom]);
+    for (const {
+      targetElement
+    } of measurementTargets) {
+      observedElements.add(targetElement);
+    }
+    if (offsetParent instanceof HTMLElement) {
+      observedElements.add(offsetParent);
+    }
+    observedElements.forEach(element => resizeObserver.observe(element));
+    const unbindWindowResize = bind(window, {
+      type: 'resize',
+      listener: schedulePositionUpdate
+    });
+    const unbindWindowScroll = bind(window, {
+      type: 'scroll',
+      listener: schedulePositionUpdate,
+      options: {
+        capture: true,
+        passive: true
+      }
+    });
+    const visualViewport = window.visualViewport;
+    const unbindVisualViewportResize = visualViewport ? bind(visualViewport, {
+      type: 'resize',
+      listener: schedulePositionUpdate
+    }) : undefined;
+    const unbindVisualViewportScroll = visualViewport ? bind(visualViewport, {
+      type: 'scroll',
+      listener: schedulePositionUpdate
+    }) : undefined;
+    const unbindTransitionEnd = bind(editorView.dom, {
+      type: 'transitionend',
+      listener: schedulePositionUpdate,
+      options: {
+        capture: true
+      }
+    });
+    return () => {
+      if (animationFrameRef.current !== undefined) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = undefined;
+      }
+      resizeObserver.disconnect();
+      unbindWindowResize();
+      unbindWindowScroll();
+      unbindVisualViewportResize === null || unbindVisualViewportResize === void 0 ? void 0 : unbindVisualViewportResize();
+      unbindVisualViewportScroll === null || unbindVisualViewportScroll === void 0 ? void 0 : unbindVisualViewportScroll();
+      unbindTransitionEnd();
+    };
+  }, [editorView, surfaces]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, surfaces.map(({
+    position,
+    source,
+    surfaceContext
+  }) => {
+    var _activeNode$handleOpt;
+    return /*#__PURE__*/React.createElement(BlockControlsRightSurface, {
+      api: api,
+      components: components,
+      forceVisibleOnMouseOut: Boolean(activeNode === null || activeNode === void 0 ? 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/es2019/ui/{block-controls-left-surface-targets.js → block-controls-surface-targets.js}

@@ -1,5 +1,11 @@
-/** Combines hover-driven and stored surface positions into one deduplicated list. */
-export const 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 const getBlockControlsSurfaceTargets = (activeNode, storedPositions) => {
   const targetsByPosition = new Map();
   for (const position of storedPositions) {
     targetsByPosition.set(position, {

package/dist/es2019/ui/consts.js

@@ -4,7 +4,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 const ACTIVE_DRAG_HANDLE_ATTR = 'data-active-drag-handle';
 export const ACTIVE_QUICK_INSERT_ATTR = 'data-active-quick-insert';
 export const BLOCK_CONTROLS_SURFACE_SELECTOR = '[data-editor-block-controls-surface]';

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

@@ -18,6 +18,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';
@@ -25,7 +26,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';
@@ -960,7 +961,7 @@ export const DragHandle = ({
   }, [isReliableAnchorEnabled, calculatePositionOld, view.dom, anchorName, nodeType, docDepForReliableAnchor]);
   const isHandleShown = positionStylesOld.display !== 'none';
   useEffect(() => {
-    if (fg('nike_r19_render_unmount')) {
+    if (isExperimentEnabled('platform_editor_react19_migration')) {
       return;
     }
     if (handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && buttonRef.current) {
@@ -975,7 +976,7 @@ export const DragHandle = ({
     }
   }, [buttonRef, handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused, view]);
   useEffect(() => {
-    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/es2019/ui/drop-target.js

@@ -12,7 +12,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/es2019/ui/global-styles.js

@@ -10,7 +10,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';
 

package/dist/es2019/ui/utils/get-surface-placement.js

@@ -14,26 +14,40 @@ export const getAbsoluteSurfacePlacement = ({
 };
 
 /**
- * Positions the Task 1 left surface beside the legacy drag-handle slot.
- * The surface's own width is handled by the transform, so later controls do not require measuring it.
+ * Positions the surface beside the legacy drag-handle slot, on either the left or right edge
+ * of the target node. Node-type-specific gap/top-adjustment maths (layouts, tables, media, cards,
+ * extensions, etc.) live in one place so left/right edge cases can't drift out of sync.
+ *
+ * The left side grows away from the node without knowing its own width, so it needs
+ * `translateX(-100%)` to anchor its right edge at `nodeRect.left` and extend backward. The right
+ * side grows in the normal box-flow direction (away from the node, into the margin), so the gap
+ * can be folded straight into `left` with no transform needed.
  */
 export const getSurfacePlacement = ({
   layout,
   nodeRect,
   nodeType,
   nodeTypeWithLevel,
-  parentNodeType
+  parentNodeType,
+  side
 }) => {
   if (nodeType === 'layoutColumn') {
+    // nodeRect.left + width/2 === nodeRect.right - width/2 — side-independent.
     return {
       left: nodeRect.left + nodeRect.width / 2,
       top: nodeRect.top,
       transform: 'translate(-50%, -50%)'
     };
   }
-  return {
+  const gap = dragHandleGap(nodeType, parentNodeType);
+  const top = nodeRect.top + topPositionAdjustment(nodeTypeWithLevel, layout);
+  return side === 'right' ? {
+    left: nodeRect.right + gap,
+    top,
+    transform: ''
+  } : {
     left: nodeRect.left,
-    top: nodeRect.top + topPositionAdjustment(nodeTypeWithLevel, layout),
-    transform: `translateX(calc(-100% - ${dragHandleGap(nodeType, parentNodeType)}px))`
+    top,
+    transform: `translateX(calc(-100% - ${gap}px))`
   };
 };

package/dist/es2019/ui/visibility-container.js

@@ -11,7 +11,7 @@ import { akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
 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';
 const RIGHT_CONTROL_HIDE_DELAY_MS = 150;
 const baseStyles = xcss({
   transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out'

package/dist/esm/blockControlsPlugin.js

@@ -3,7 +3,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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 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';
@@ -11,7 +11,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 as _mapPreservedSelection } from './editor-commands/map-preserved-selection';
 import { moveNode } from './editor-commands/move-node';
@@ -27,6 +27,7 @@ import { createSelectionPreservationPlugin } from './pm-plugins/selection-preser
 import { expandAndUpdateSelection as _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';
@@ -40,6 +41,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
   var registryBlockControlsEnabled = isExperimentEnabled('platform_editor_block_control_migration');
   var surfaceNodePositionsEnabled = registryBlockControlsEnabled && isExperimentEnabled('platform_editor_collapsible_headings');
   var legacyBlockControlsEnabled = !registryBlockControlsEnabled;
+  var rightSurfaceEnabled = registryBlockControlsEnabled && isExperimentEnabled('platform_editor_block_control_right_surface');
   if (registryBlockControlsEnabled) {
     var _api$uiControlRegistr;
     api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register([BLOCK_CONTROLS_LEFT_SURFACE, _objectSpread(_objectSpread({}, BLOCK_CONTROLS_LEFT_SECTION), {}, {
@@ -53,6 +55,21 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
     })].concat(_toConsumableArray(getBlockControlsSurfaceDragHandleComponents({
       api: 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 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 || _api$uiControlRegistr2.actions.register([BLOCK_CONTROLS_RIGHT_SURFACE, _objectSpread(_objectSpread({}, BLOCK_CONTROLS_RIGHT_SECTION), {}, {
+        parents: [_objectSpread(_objectSpread({}, BLOCK_CONTROLS_RIGHT_SURFACE), {}, {
+          rank: 100
+        })]
+      }), _objectSpread(_objectSpread({}, BLOCK_CONTROLS_RIGHT_GROUP), {}, {
+        parents: [_objectSpread(_objectSpread({}, BLOCK_CONTROLS_RIGHT_SECTION), {}, {
+          rank: 100
+        })]
+      })]);
+    }
   }
   return {
     name: 'blockControls',
@@ -122,7 +139,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         plugin: function plugin(_ref2) {
           var getIntl = _ref2.getIntl,
             nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
-          return createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled, surfaceNodePositionsEnabled);
+          return createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled, surfaceNodePositionsEnabled, rightSurfaceEnabled);
         }
       }];
       if (editorExperiment('platform_editor_controls', 'variant1')) {
@@ -450,7 +467,10 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
       }, /*#__PURE__*/React.createElement(BlockControlsLeftSurfaces, {
         api: api,
         editorView: editorView
-      })) : null);
+      }), rightSurfaceEnabled ? /*#__PURE__*/React.createElement(BlockControlsRightSurfaces, {
+        api: api,
+        editorView: editorView
+      }) : null) : null);
     }
   };
 };

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

@@ -3,7 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 { 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/esm/editor-commands/move-node.js

@@ -17,7 +17,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/esm/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/esm/pm-plugins/decorations-anchor.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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';
 var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
 export var IGNORE_NODES_NEXT = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption'];

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

@@ -5,7 +5,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/esm/pm-plugins/decorations-drop-target-active.js

@@ -5,7 +5,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/esm/pm-plugins/decorations-drop-target.js

@@ -11,7 +11,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/esm/pm-plugins/decorations-quick-insert-button.js

@@ -5,7 +5,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/esm/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 var handleMouseDown = function handleMouseDown(api) {
   return function (view, event) {
     if (!(event.target instanceof HTMLElement)) {

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

@@ -5,7 +5,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/esm/pm-plugins/interaction-tracking/pm-plugin.js

@@ -7,7 +7,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/esm/pm-plugins/main.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; } }
@@ -7,7 +8,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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';
@@ -24,7 +25,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';
@@ -239,7 +240,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
   var anchorRectCache = arguments.length > 10 ? arguments[10] : undefined;
   var resizeObserverWidth = arguments.length > 11 ? arguments[11] : undefined;
   var pragmaticCleanup = arguments.length > 12 ? arguments[12] : undefined;
-  var resolvedSurface = arguments.length > 13 ? arguments[13] : undefined;
+  var resolvedSurfaces = arguments.length > 13 && arguments[13] !== undefined ? arguments[13] : [];
   var activeNode = currentState.activeNode,
     decorations = currentState.decorations,
     isResizerResizing = currentState.isResizerResizing,
@@ -810,14 +811,14 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
     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: from,
       newState: newState,
       previousActiveNode: previousActiveNode,
-      resolvedSurface: resolvedSurface,
+      resolvedSurfaces: resolvedSurfaces,
       to: to,
       tr: tr
     });
@@ -867,11 +868,12 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
 };
 export { _apply as apply };
 export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry) {
-  var _api$uiControlRegistr, _api$uiControlRegistr2;
+  var _api$uiControlRegistr, _api$uiControlRegistr2, _api$uiControlRegistr3, _api$uiControlRegistr4;
   var rightSideControlsEnabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   var quickInsertButtonEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;
   var legacyDragHandleEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : true;
   var surfaceNodePositionsEnabled = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
+  var rightSurfaceEnabled = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
   var _getIntl = getIntl(),
     formatMessage = _getIntl.formatMessage;
   var isAdvancedLayoutEnabled = editorExperiment('advanced_layouts', true, {
@@ -883,7 +885,7 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
     surfaceNodePositionsEnabled: surfaceNodePositionsEnabled,
     toolbarFlagsEnabled: toolbarFlagsEnabled
   };
-  var resolvedSurface = surfaceNodePositionsEnabled ? resolveSurface((_api$uiControlRegistr = api === null || api === 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;
+  var resolvedSurfaces = surfaceNodePositionsEnabled ? [resolveSurface((_api$uiControlRegistr = api === null || api === 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)].concat(_toConsumableArray(rightSurfaceEnabled ? [resolveSurface((_api$uiControlRegistr3 = api === null || api === 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)] : [])) : [];
   var anchorRectCache;
   if (!isAnchorSupported()) {
     anchorRectCache = new AnchorRectCache();
@@ -895,11 +897,11 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
     state: {
       init: function init(_config, editorState) {
         return _objectSpread(_objectSpread({}, initialState), {}, {
-          surfaceNodePositions: resolvedSurface ? getSurfaceNodePositions(editorState, resolvedSurface) : []
+          surfaceNodePositions: resolvedSurfaces.length > 0 ? getSurfaceNodePositions(editorState, resolvedSurfaces) : []
         });
       },
       apply: function apply(tr, currentState, _, newState) {
-        return _apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled, anchorRectCache, resizeObserverWidth, pragmaticCleanup, resolvedSurface);
+        return _apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled, anchorRectCache, resizeObserverWidth, pragmaticCleanup, resolvedSurfaces);
       }
     },
     props: {