@atlaskit/editor-plugin-block-controls 20.1.2 → 20.1.4

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

@@ -8,14 +8,13 @@ import { BLOCK_CONTROLS_LEFT_SURFACE } from '@atlaskit/editor-common/block-contr
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { isCSSAnchorSupported } from '@atlaskit/editor-common/styles';
 import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/create-surface-context';
-import { willSurfaceRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
 import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
 import { BlockControlsLeftSurface } from './block-controls-left-surface';
+import { getBlockControlsLeftSurfaceComponents } from './block-controls-surface-components';
 import { createBlockControlsSurfaceContextForPosition } from './block-controls-surface-context';
 import { getBlockControlsSurfaceTargets } from './block-controls-surface-targets';
 import { getNodeContentElement } from './utils/get-node-content-element';
-import { getAbsoluteSurfacePlacement, getAnchoredSurfacePlacement, getSurfacePlacement, toMeasuredSurfaceWrapperPlacement } from './utils/get-surface-placement';
-import { hasSurfaceControls } from './utils/has-surface-controls';
+import { getAbsoluteSurfacePlacement, getAnchoredLeftGutterSurfacePlacement, getAnchoredSurfacePlacement, getLeftGutterSurfacePlacement, getSurfacePlacement, toMeasuredSurfaceWrapperPlacement } from './utils/get-surface-placement';
 const EMPTY_SURFACE_POSITIONS = [];
 const EMPTY_SURFACE_ANCHORS = new Map();
 const EMPTY_SURFACE_COMPONENTS = [];
@@ -53,15 +52,21 @@ export const BlockControlsLeftSurfaces = ({
       return [];
     }
     const surfaceContext = createSurfaceContext(BLOCK_CONTROL_UI_CONTEXT, context);
-    if (!hasSurfaceControls(components) || !willSurfaceRender(components, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext)) {
+    const surfaceComponents = getBlockControlsLeftSurfaceComponents(components, surfaceContext);
+    if (!surfaceComponents) {
       return [];
     }
     // The cache supplies the same anchor names used by ProseMirror decorations.
     const anchorName = isCSSAnchorSupported() ? surfaceAnchors.get(target.position) : undefined;
+    // Top-level controls can respond to the available left gutter without the surface
+    // host knowing which controls are registered or how they adapt.
+    const isTopLevel = context.targetNode.parentType === 'doc';
     return [{
       ...target,
       anchorName,
       blockControlsContext: context,
+      isTopLevel,
+      surfaceComponents,
       surfaceContext
     }];
   }), [activeNode, components, editorView, targets, surfaceAnchors, surfaceActiveNodes]);
@@ -72,15 +77,25 @@ export const BlockControlsLeftSurfaces = ({
   const anchoredPlacements = useMemo(() => new Map(surfaces.flatMap(({
     anchorName,
     blockControlsContext,
+    isTopLevel,
     position
-  }) => anchorName ? [[position, getAnchoredSurfacePlacement({
-    anchorName,
-    nodeType: blockControlsContext.targetNode.type.name,
-    nodeTypeWithLevel: getNodeTypeWithLevel(blockControlsContext.targetNode.node),
-    layout: blockControlsContext.targetNode.node.attrs.layout,
-    parentNodeType: blockControlsContext.targetNode.parentType === 'doc' ? undefined : blockControlsContext.targetNode.parentType,
-    side: 'left'
-  })]] : [])), [surfaces]);
+  }) => {
+    if (!anchorName) {
+      return [];
+    }
+    const options = {
+      anchorName,
+      layout: blockControlsContext.targetNode.node.attrs.layout,
+      nodeType: blockControlsContext.targetNode.type.name,
+      nodeTypeWithLevel: getNodeTypeWithLevel(blockControlsContext.targetNode.node),
+      parentNodeType: blockControlsContext.targetNode.parentType === 'doc' ? undefined : blockControlsContext.targetNode.parentType
+    };
+    const placement = isTopLevel ? getAnchoredLeftGutterSurfacePlacement(options) : getAnchoredSurfacePlacement({
+      ...options,
+      side: 'left'
+    });
+    return [[position, placement]];
+  })), [surfaces]);
   // Only the surfaces that still need measuring drive the effect below, so a document of anchored
   // blocks binds no scroll or resize listeners at all.
   //
@@ -106,6 +121,7 @@ export const BlockControlsLeftSurfaces = ({
     }
     const measurementTargets = measuredSurfaces.flatMap(({
       blockControlsContext,
+      isTopLevel,
       position
     }) => {
       const targetNodeElement = editorView.nodeDOM(blockControlsContext.targetNode.pos);
@@ -115,6 +131,7 @@ export const BlockControlsLeftSurfaces = ({
       }
       return [{
         blockControlsContext,
+        isTopLevel,
         position,
         targetElement: getNodeContentElement(targetElementRoot, blockControlsContext.targetNode.type.name),
         targetElementRoot
@@ -132,20 +149,27 @@ export const BlockControlsLeftSurfaces = ({
       const nextPlacements = new Map();
       for (const {
         blockControlsContext,
+        isTopLevel,
         position,
         targetElement,
         targetElementRoot
       } of measurementTargets) {
-        var _targetElementRoot$ge;
+        var _targetElementRoot$ge, _offsetParentRect$lef;
         if (!targetElementRoot.isConnected || !targetElement.isConnected) {
           continue;
         }
-        const placement = getSurfacePlacement({
+        const options = {
           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,
+          parentNodeType: blockControlsContext.targetNode.parentType === 'doc' ? undefined : blockControlsContext.targetNode.parentType
+        };
+        const placement = isTopLevel ? getLeftGutterSurfacePlacement({
+          ...options,
+          leftGutterBoundary: (_offsetParentRect$lef = offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.left) !== null && _offsetParentRect$lef !== void 0 ? _offsetParentRect$lef : 0
+        }) : getSurfacePlacement({
+          ...options,
           side: 'left'
         });
         nextPlacements.set(position, toMeasuredSurfaceWrapperPlacement(getAbsoluteSurfacePlacement({
@@ -218,12 +242,13 @@ export const BlockControlsLeftSurfaces = ({
   return /*#__PURE__*/React.createElement(React.Fragment, null, surfaces.map(({
     position,
     source,
+    surfaceComponents,
     surfaceContext
   }) => {
     var _activeNode$handleOpt, _anchoredPlacements$g;
     return /*#__PURE__*/React.createElement(BlockControlsLeftSurface, {
       api: api,
-      components: components,
+      components: surfaceComponents,
       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: (_anchoredPlacements$g = anchoredPlacements.get(position)) !== null && _anchoredPlacements$g !== void 0 ? _anchoredPlacements$g : placements.get(position),

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

@@ -3,9 +3,9 @@ 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 { partitionComponentsByPersistence } from './utils/partition-components-by-persistence';
-import { VisibilityContainer } from './visibility-container';
+import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model/surface-renderer';
+import { BlockControlsVisibilityProvider } from './block-controls-surface-components';
+import { useBlockControlsVisibility } from './visibility-container';
 const rightSurfaceOuterStyles = null;
 const rightSurfaceRowStyles = null;
 
@@ -14,8 +14,7 @@ const rightSurfaceRowStyles = null;
 // can stick near the top of the viewport instead of scrolling off with the node's top edge.
 // Keep in sync with STICKY_CONTROLS_TOP_MARGIN in ./consts (must be a static literal here).
 const rightSurfaceStickyStyles = null;
-/** Renders one right block-controls surface at a document position. */
-export const BlockControlsRightSurface = ({
+const BlockControlsRightSurfaceContent = ({
   api,
   components,
   forceVisibleOnMouseOut,
@@ -23,15 +22,14 @@ export const BlockControlsRightSurface = ({
   source,
   surfaceContext
 }) => {
-  if (!placement || !willSurfaceRender(components, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext)) {
-    return null;
-  }
   const {
-    hoverOnlyComponents,
-    persistentComponents
-  } = partitionComponentsByPersistence(components, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext);
-  const willRenderPersistent = willSurfaceRender(persistentComponents, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext);
-  const willRenderHoverOnly = willSurfaceRender(hoverOnlyComponents, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext);
+    shouldHide: shouldHideHoverControls,
+    useCssStyles
+  } = useBlockControlsVisibility({
+    api,
+    controlSide: 'right',
+    forceVisibleOnMouseOut
+  });
   const isSticky = placement.isSticky;
   return /*#__PURE__*/React.createElement("div", {
     "data-editor-block-controls-surface": true,
@@ -43,23 +41,34 @@ export const BlockControlsRightSurface = ({
     className: ax(["_kqswstnw _17c61i8t _1pbyb4wl"])
   }, /*#__PURE__*/React.createElement("div", {
     className: ax(["_zulpv77o _4cvr1h6o _1e0c1txw", isSticky && "_kqsw1if8 _154iu2gc"])
-  }, willRenderPersistent && /*#__PURE__*/React.createElement(VisibilityContainer, {
-    api: api,
-    controlSide: "right",
-    isPersistent: true,
-    shouldUseDisplayContents: true
+  }, /*#__PURE__*/React.createElement(BlockControlsVisibilityProvider, {
+    shouldHideHoverControls: shouldHideHoverControls,
+    useCssStyles: useCssStyles
   }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
-    components: persistentComponents,
+    components: components,
     surface: BLOCK_CONTROLS_RIGHT_SURFACE,
     surfaceContext: surfaceContext
-  })), willRenderHoverOnly && /*#__PURE__*/React.createElement(VisibilityContainer, {
+  }))));
+};
+
+/** Renders one right block-controls surface at a document position. */
+export const BlockControlsRightSurface = ({
+  api,
+  components,
+  forceVisibleOnMouseOut,
+  placement,
+  source,
+  surfaceContext
+}) => {
+  if (!placement) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(BlockControlsRightSurfaceContent, {
     api: api,
-    controlSide: "right",
+    components: components,
     forceVisibleOnMouseOut: forceVisibleOnMouseOut,
-    shouldUseDisplayContents: true
-  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
-    components: hoverOnlyComponents,
-    surface: BLOCK_CONTROLS_RIGHT_SURFACE,
+    placement: placement,
+    source: source,
     surfaceContext: surfaceContext
-  }))));
+  });
 };

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

@@ -8,14 +8,13 @@ import { BLOCK_CONTROLS_RIGHT_SURFACE } from '@atlaskit/editor-common/block-cont
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { isCSSAnchorSupported } from '@atlaskit/editor-common/styles';
 import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/create-surface-context';
-import { willSurfaceRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
 import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
 import { BlockControlsRightSurface } from './block-controls-right-surface';
+import { getBlockControlsRightSurfaceComponents } from './block-controls-surface-components';
 import { createBlockControlsSurfaceContextForPosition } from './block-controls-surface-context';
 import { getBlockControlsSurfaceTargets } from './block-controls-surface-targets';
 import { getNodeContentElement } from './utils/get-node-content-element';
 import { getAbsoluteSurfacePlacement, getAnchoredSurfacePlacement, getSurfacePlacement, toMeasuredSurfaceWrapperPlacement } from './utils/get-surface-placement';
-import { hasSurfaceControls } from './utils/has-surface-controls';
 const EMPTY_SURFACE_POSITIONS = [];
 const EMPTY_SURFACE_ANCHORS = new Map();
 const EMPTY_SURFACE_COMPONENTS = [];
@@ -62,7 +61,8 @@ export const BlockControlsRightSurfaces = ({
       return [];
     }
     const surfaceContext = createSurfaceContext(BLOCK_CONTROL_UI_CONTEXT, context);
-    if (!hasSurfaceControls(components) || !willSurfaceRender(components, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext)) {
+    const surfaceComponents = getBlockControlsRightSurfaceComponents(components, surfaceContext);
+    if (!surfaceComponents) {
       return [];
     }
     // The cache supplies the same anchor names used by ProseMirror decorations.
@@ -71,6 +71,7 @@ export const BlockControlsRightSurfaces = ({
       ...target,
       anchorName,
       blockControlsContext: context,
+      surfaceComponents,
       surfaceContext
     }];
   }), [activeNode, components, editorView, targets, surfaceAnchors, surfaceActiveNodes]);
@@ -227,12 +228,13 @@ export const BlockControlsRightSurfaces = ({
   return /*#__PURE__*/React.createElement(React.Fragment, null, surfaces.map(({
     position,
     source,
+    surfaceComponents,
     surfaceContext
   }) => {
     var _activeNode$handleOpt, _anchoredPlacements$g;
     return /*#__PURE__*/React.createElement(BlockControlsRightSurface, {
       api: api,
-      components: components,
+      components: surfaceComponents,
       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: (_anchoredPlacements$g = anchoredPlacements.get(position)) !== null && _anchoredPlacements$g !== void 0 ? _anchoredPlacements$g : placements.get(position),

package/dist/es2019/ui/block-controls-surface-components.js

@@ -0,0 +1,129 @@
+import React, { createContext, useContext, useMemo } from 'react';
+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 { getComponentIdentity, resolveSurface } from '@atlaskit/editor-ui-control-model/surface-renderer';
+import { partitionComponentsByPersistence } from './utils/partition-components-by-persistence';
+import { VisibilityWrapper } from './visibility-container';
+const BlockControlsVisibilityContext = /*#__PURE__*/createContext({
+  shouldHideHoverControls: false,
+  useCssStyles: false
+});
+const BlockControlItem = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  "data-editor-block-control-item": true
+}, children);
+const HoverBlockControlItem = ({
+  children
+}) => {
+  const {
+    shouldHideHoverControls,
+    useCssStyles
+  } = useContext(BlockControlsVisibilityContext);
+  return /*#__PURE__*/React.createElement(BlockControlItem, null, /*#__PURE__*/React.createElement(VisibilityWrapper, {
+    shouldHide: shouldHideHoverControls,
+    useCssStyles: useCssStyles
+  }, children));
+};
+const PersistentBlockControlItem = ({
+  children
+}) => {
+  const {
+    useCssStyles
+  } = useContext(BlockControlsVisibilityContext);
+  return /*#__PURE__*/React.createElement(BlockControlItem, null, /*#__PURE__*/React.createElement(VisibilityWrapper, {
+    shouldHide: false,
+    useCssStyles: useCssStyles
+  }, children));
+};
+export const BlockControlsVisibilityProvider = ({
+  children,
+  shouldHideHoverControls,
+  useCssStyles
+}) => {
+  const value = useMemo(() => ({
+    shouldHideHoverControls,
+    useCssStyles
+  }), [shouldHideHoverControls, useCssStyles]);
+  return /*#__PURE__*/React.createElement(BlockControlsVisibilityContext.Provider, {
+    value: value
+  }, children);
+};
+const withoutVisibilityPredicate = component => {
+  const {
+    isHidden: _isHidden,
+    ...visibleComponent
+  } = component;
+  return visibleComponent;
+};
+
+/**
+ * Replaces the shared surface group with one stable wrapper group per visible control. The wrappers
+ * inherit each control's rank, so SurfaceRenderer keeps the registry order without re-evaluating
+ * the controls' visibility predicates.
+ */
+const getBlockControlsSurfaceComponents = (components, {
+  group,
+  section,
+  surface
+}, surfaceContext) => {
+  var _resolvedSurface$chil;
+  const resolvedSurface = resolveSurface(components, surface);
+  const groupIdentity = getComponentIdentity(group);
+  const controls = (_resolvedSurface$chil = resolvedSurface.childrenMap.get(groupIdentity)) !== null && _resolvedSurface$chil !== void 0 ? _resolvedSurface$chil : [];
+  const visibleControls = controls.filter(control => {
+    var _control$isHidden, _control$isHidden2;
+    return !((_control$isHidden = (_control$isHidden2 = control.isHidden) === null || _control$isHidden2 === void 0 ? void 0 : _control$isHidden2.call(control, {
+      surfaceContext
+    })) !== null && _control$isHidden !== void 0 ? _control$isHidden : false);
+  });
+  if (!resolvedSurface.root || visibleControls.length === 0) {
+    return undefined;
+  }
+  const controlIdentities = new Set(controls.map(getComponentIdentity));
+  const visibleControlIdentities = new Set(visibleControls.map(getComponentIdentity));
+  const {
+    persistentComponents
+  } = partitionComponentsByPersistence(resolvedSurface.components.filter(component => {
+    const identity = getComponentIdentity(component);
+    return !controlIdentities.has(identity) || visibleControlIdentities.has(identity);
+  }), surface, surfaceContext);
+  const persistentIdentities = new Set(persistentComponents.map(getComponentIdentity));
+  const structuralComponents = resolvedSurface.components.filter(component => {
+    const identity = getComponentIdentity(component);
+    return identity !== groupIdentity && !controlIdentities.has(identity);
+  }).map(withoutVisibilityPredicate);
+  const wrappedControls = visibleControls.flatMap(control => {
+    var _control$parents$find, _control$parents, _control$parents$find2;
+    const identity = getComponentIdentity(control);
+    const rank = (_control$parents$find = (_control$parents = control.parents) === null || _control$parents === void 0 ? void 0 : (_control$parents$find2 = _control$parents.find(parent => getComponentIdentity(parent) === groupIdentity)) === null || _control$parents$find2 === void 0 ? void 0 : _control$parents$find2.rank) !== null && _control$parents$find !== void 0 ? _control$parents$find : 0;
+    const wrapper = {
+      component: persistentIdentities.has(identity) ? PersistentBlockControlItem : HoverBlockControlItem,
+      key: `block-control-item:${identity}`,
+      parents: [{
+        ...section,
+        rank
+      }],
+      type: 'group'
+    };
+    const visibleControl = {
+      ...withoutVisibilityPredicate(control),
+      parents: [{
+        key: wrapper.key,
+        rank: 0,
+        type: wrapper.type
+      }]
+    };
+    return [wrapper, visibleControl];
+  });
+  return [...structuralComponents, ...wrappedControls];
+};
+export const getBlockControlsLeftSurfaceComponents = (components, surfaceContext) => getBlockControlsSurfaceComponents(components, {
+  group: BLOCK_CONTROLS_LEFT_GROUP,
+  section: BLOCK_CONTROLS_LEFT_SECTION,
+  surface: BLOCK_CONTROLS_LEFT_SURFACE
+}, surfaceContext);
+export const getBlockControlsRightSurfaceComponents = (components, surfaceContext) => getBlockControlsSurfaceComponents(components, {
+  group: BLOCK_CONTROLS_RIGHT_GROUP,
+  section: BLOCK_CONTROLS_RIGHT_SECTION,
+  surface: BLOCK_CONTROLS_RIGHT_SURFACE
+}, surfaceContext);

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

@@ -43,18 +43,43 @@ export const getSurfacePlacement = ({
   const gap = dragHandleGap(nodeType, parentNodeType);
   const top = nodeRect.top + topPositionAdjustment(nodeTypeWithLevel, layout);
   const height = shouldBeSticky(nodeType) ? nodeRect.height : undefined;
-  return side === 'right' ? {
-    left: nodeRect.right + gap,
-    top,
-    transform: '',
-    height
-  } : {
+  if (side === 'right') {
+    return {
+      left: nodeRect.right + gap,
+      top,
+      transform: '',
+      height
+    };
+  }
+  return {
     left: nodeRect.left,
     top,
     transform: `translateX(calc(-100% - ${gap}px))`,
     height
   };
 };
+/**
+ * Expands a measured left surface from the available gutter boundary to the target node.
+ */
+export const getLeftGutterSurfacePlacement = ({
+  leftGutterBoundary,
+  ...options
+}) => {
+  const placement = getSurfacePlacement({
+    ...options,
+    side: 'left'
+  });
+  if (options.nodeType === 'layoutColumn') {
+    return placement;
+  }
+  const gap = dragHandleGap(options.nodeType, options.parentNodeType);
+  return {
+    ...placement,
+    left: leftGutterBoundary,
+    transform: '',
+    width: Math.max(0, options.nodeRect.left - leftGutterBoundary - gap)
+  };
+};
 
 /**
  * The insets to apply to a surface wrapper, plus whether that wrapper spans its target node.
@@ -78,7 +103,10 @@ export const toMeasuredSurfaceWrapperPlacement = placement => ({
     height: placement.height,
     left: placement.left,
     top: placement.top,
-    transform: placement.transform
+    transform: placement.transform,
+    ...(placement.width !== undefined ? {
+      width: placement.width
+    } : {})
   }
 });
 
@@ -135,4 +163,28 @@ export const getAnchoredSurfacePlacement = ({
       transform: side === 'right' ? '' : `translateX(calc(-100% - ${gap}px))`
     }
   };
+};
+/**
+ * Expands an anchored left surface across the available gutter without runtime measurement.
+ */
+export const getAnchoredLeftGutterSurfacePlacement = options => {
+  const placement = getAnchoredSurfacePlacement({
+    ...options,
+    side: 'left'
+  });
+  if (options.nodeType === 'layoutColumn') {
+    return placement;
+  }
+  const gap = dragHandleGap(options.nodeType, options.parentNodeType);
+  return {
+    ...placement,
+    style: {
+      ...placement.style,
+      left: 0,
+      // In a `right` inset, `anchor(... left)` resolves from the containing block's right edge
+      // to the anchor's left edge. Adding the gap ends this wrapper just before the node.
+      right: `calc(anchor(${options.anchorName} left) + ${gap}px)`,
+      transform: ''
+    }
+  };
 };

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

@@ -46,13 +46,16 @@ const hiddenStylesCSS = css({
 const displayContentsStylesCSS = css({
   display: 'contents'
 });
-export const VisibilityContainer = ({
+
+/**
+ * Resolves visibility once so a surface can apply the same state to each rendered control without
+ * creating a plugin-state subscription and hide-delay timer for every control wrapper.
+ */
+export const useBlockControlsVisibility = ({
   api,
-  children,
   controlSide,
   forceVisibleOnMouseOut,
-  isPersistent,
-  shouldUseDisplayContents
+  isPersistent
 }) => {
   const {
     isTypeAheadOpen,
@@ -127,9 +130,21 @@ export const VisibilityContainer = ({
     };
   }, [shouldHideImmediate, isRightControlViewMode]);
   const shouldHide = isRightControlViewMode ? delayedShouldHide : shouldHideImmediate;
-  if (editorExperiment('platform_editor_preview_panel_responsiveness', true, {
+  const useCssStyles = editorExperiment('platform_editor_preview_panel_responsiveness', true, {
     exposure: true
-  })) {
+  });
+  return {
+    shouldHide,
+    useCssStyles
+  };
+};
+export const VisibilityWrapper = ({
+  children,
+  shouldHide,
+  shouldUseDisplayContents,
+  useCssStyles
+}) => {
+  if (useCssStyles) {
     return jsx("div", {
       css: [baseStylesCSS, shouldHide ? hiddenStylesCSS : visibleStylesCSS, shouldUseDisplayContents && displayContentsStylesCSS]
     }, children);
@@ -139,4 +154,27 @@ export const VisibilityContainer = ({
   , {
     xcss: [baseStyles, shouldHide ? hiddenStyles : visibleStyles, shouldUseDisplayContents && displayContentsStyles]
   }, children);
+};
+export const VisibilityContainer = ({
+  api,
+  children,
+  controlSide,
+  forceVisibleOnMouseOut,
+  isPersistent,
+  shouldUseDisplayContents
+}) => {
+  const {
+    shouldHide,
+    useCssStyles
+  } = useBlockControlsVisibility({
+    api,
+    controlSide,
+    forceVisibleOnMouseOut,
+    isPersistent
+  });
+  return jsx(VisibilityWrapper, {
+    shouldHide: shouldHide,
+    shouldUseDisplayContents: shouldUseDisplayContents,
+    useCssStyles: useCssStyles
+  }, children);
 };

package/dist/esm/pm-plugins/selection-preservation/pm-plugin.js

@@ -5,7 +5,6 @@ import { bind } from 'bind-event-listener';
 import { getDocument } from '@atlaskit/browser-apis';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { key } from '../main';
 import { createPreservedSelection, mapPreservedSelection } from '../utils/selection';
 import { stopPreservingSelection } from './editor-commands';
@@ -48,37 +47,25 @@ export var createSelectionPreservationPlugin = function createSelectionPreservat
       key: selectionPreservationPluginKey,
       state: {
         init: function init() {
-          if (expValEquals('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
-            return {
-              preservedSelection: undefined,
-              syncDomSelectionForDoc: undefined
-            };
-          } else {
-            return {
-              preservedSelection: undefined
-            };
-          }
+          return {
+            preservedSelection: undefined,
+            syncDomSelectionForDoc: undefined
+          };
         },
         apply: function apply(tr, pluginState) {
           var meta = getSelectionPreservationMeta(tr);
           var newState = _objectSpread({}, pluginState);
           if ((meta === null || meta === void 0 ? void 0 : meta.type) === 'startPreserving') {
             newState.preservedSelection = createPreservedSelection(tr.doc.resolve(tr.selection.from), tr.doc.resolve(tr.selection.to));
-            if (expValEquals('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
-              newState.syncDomSelectionForDoc = undefined;
-            }
+            newState.syncDomSelectionForDoc = undefined;
           } else if ((meta === null || meta === void 0 ? void 0 : meta.type) === 'stopPreserving') {
             newState.preservedSelection = undefined;
-            if (expValEquals('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
-              newState.syncDomSelectionForDoc = undefined;
-            }
+            newState.syncDomSelectionForDoc = undefined;
           } else if (tr.docChanged) {
             if (newState.preservedSelection) {
               newState.preservedSelection = mapPreservedSelection(newState.preservedSelection, tr);
             }
-            if (expValEquals('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
-              newState.syncDomSelectionForDoc = hasFormatSelectionSyncMeta(tr) ? tr.doc : undefined;
-            }
+            newState.syncDomSelectionForDoc = hasFormatSelectionSyncMeta(tr) ? tr.doc : undefined;
           }
           if (!compareSelections(newState.preservedSelection, pluginState.preservedSelection)) {
             if (newState.preservedSelection) {
@@ -188,23 +175,19 @@ export var createSelectionPreservationPlugin = function createSelectionPreservat
             var activeNodeChanged = prevActiveNode !== currActiveNode;
             var docChanged = prevState.doc !== view.state.doc;
             var hasFormatSyncRequestForCurrentDoc = (currPluginState === null || currPluginState === void 0 ? void 0 : currPluginState.syncDomSelectionForDoc) === view.state.doc;
-            var shouldSyncDOMSelection = (hasPreservedSelection && (preservedSelectionChanged || activeNodeChanged) || expValEquals('platform_editor_fix_selection_text_color_change', 'isEnabled', true) && hasFormatSyncRequestForCurrentDoc) && docChanged;
+            var shouldSyncDOMSelection = (hasPreservedSelection && (preservedSelectionChanged || activeNodeChanged) || hasFormatSyncRequestForCurrentDoc) && docChanged;
             if (shouldSyncDOMSelection) {
               var syncSelection = view.state.selection;
-              if (expValEquals('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
-                if (hasFormatSyncRequestForCurrentDoc) {
-                  if (pendingFormatSelectionSyncFrame !== undefined) {
-                    cancelAnimationFrame(pendingFormatSelectionSyncFrame);
-                  }
-                  pendingFormatSelectionSyncFrame = requestAnimationFrame(function () {
-                    pendingFormatSelectionSyncFrame = undefined;
-                    syncDOMSelection(syncSelection, view, {
-                      focusEditor: true
-                    });
-                  });
-                } else {
-                  syncDOMSelection(syncSelection, view);
+              if (hasFormatSyncRequestForCurrentDoc) {
+                if (pendingFormatSelectionSyncFrame !== undefined) {
+                  cancelAnimationFrame(pendingFormatSelectionSyncFrame);
                 }
+                pendingFormatSelectionSyncFrame = requestAnimationFrame(function () {
+                  pendingFormatSelectionSyncFrame = undefined;
+                  syncDOMSelection(syncSelection, view, {
+                    focusEditor: true
+                  });
+                });
               } else {
                 syncDOMSelection(syncSelection, view);
               }