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

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

@@ -4,10 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toMeasuredSurfaceWrapperPlacement = exports.getSurfacePlacement = exports.getAnchoredSurfacePlacement = exports.getAbsoluteSurfacePlacement = void 0;
+exports.toMeasuredSurfaceWrapperPlacement = exports.getSurfacePlacement = exports.getLeftGutterSurfacePlacement = exports.getAnchoredSurfacePlacement = exports.getAnchoredLeftGutterSurfacePlacement = exports.getAbsoluteSurfacePlacement = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _dragHandlePositions = require("../../pm-plugins/utils/drag-handle-positions");
 var _consts = require("../consts");
+var _excluded = ["leftGutterBoundary"];
 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) { (0, _defineProperty2.default)(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; }
 var getAbsoluteSurfacePlacement = exports.getAbsoluteSurfacePlacement = function getAbsoluteSurfacePlacement(_ref) {
@@ -50,18 +52,40 @@ var getSurfacePlacement = exports.getSurfacePlacement = function getSurfacePlace
   var gap = (0, _consts.dragHandleGap)(nodeType, parentNodeType);
   var top = nodeRect.top + (0, _consts.topPositionAdjustment)(nodeTypeWithLevel, layout);
   var height = (0, _dragHandlePositions.shouldBeSticky)(nodeType) ? nodeRect.height : undefined;
-  return side === 'right' ? {
-    left: nodeRect.right + gap,
-    top: top,
-    transform: '',
-    height: height
-  } : {
+  if (side === 'right') {
+    return {
+      left: nodeRect.right + gap,
+      top: top,
+      transform: '',
+      height: height
+    };
+  }
+  return {
     left: nodeRect.left,
     top: top,
     transform: "translateX(calc(-100% - ".concat(gap, "px))"),
     height: height
   };
 };
+/**
+ * Expands a measured left surface from the available gutter boundary to the target node.
+ */
+var getLeftGutterSurfacePlacement = exports.getLeftGutterSurfacePlacement = function getLeftGutterSurfacePlacement(_ref3) {
+  var leftGutterBoundary = _ref3.leftGutterBoundary,
+    options = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
+  var placement = getSurfacePlacement(_objectSpread(_objectSpread({}, options), {}, {
+    side: 'left'
+  }));
+  if (options.nodeType === 'layoutColumn') {
+    return placement;
+  }
+  var gap = (0, _consts.dragHandleGap)(options.nodeType, options.parentNodeType);
+  return _objectSpread(_objectSpread({}, 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.
@@ -82,12 +106,14 @@ var getSurfacePlacement = exports.getSurfacePlacement = function getSurfacePlace
 var toMeasuredSurfaceWrapperPlacement = exports.toMeasuredSurfaceWrapperPlacement = function toMeasuredSurfaceWrapperPlacement(placement) {
   return {
     isSticky: placement.height !== undefined,
-    style: {
+    style: _objectSpread({
       height: placement.height,
       left: placement.left,
       top: placement.top,
       transform: placement.transform
-    }
+    }, placement.width !== undefined ? {
+      width: placement.width
+    } : {})
   };
 };
 
@@ -103,13 +129,13 @@ var toMeasuredSurfaceWrapperPlacement = exports.toMeasuredSurfaceWrapperPlacemen
 var INVALID_ANCHOR_OFFSCREEN_PX = 9999;
 var INVALID_ANCHOR_FALLBACK_TOP = "-".concat(INVALID_ANCHOR_OFFSCREEN_PX, "px");
 var INVALID_ANCHOR_FALLBACK_BOTTOM = "".concat(INVALID_ANCHOR_OFFSCREEN_PX, "px");
-var getAnchoredSurfacePlacement = exports.getAnchoredSurfacePlacement = function getAnchoredSurfacePlacement(_ref3) {
-  var anchorName = _ref3.anchorName,
-    layout = _ref3.layout,
-    nodeType = _ref3.nodeType,
-    nodeTypeWithLevel = _ref3.nodeTypeWithLevel,
-    parentNodeType = _ref3.parentNodeType,
-    side = _ref3.side;
+var getAnchoredSurfacePlacement = exports.getAnchoredSurfacePlacement = function getAnchoredSurfacePlacement(_ref4) {
+  var anchorName = _ref4.anchorName,
+    layout = _ref4.layout,
+    nodeType = _ref4.nodeType,
+    nodeTypeWithLevel = _ref4.nodeTypeWithLevel,
+    parentNodeType = _ref4.parentNodeType,
+    side = _ref4.side;
   if (nodeType === 'layoutColumn') {
     // The column's horizontal midpoint, matching the measured `nodeRect.left + width / 2` and the
     // legacy drag handle's own layout-column formula. Side-independent.
@@ -139,4 +165,25 @@ var getAnchoredSurfacePlacement = exports.getAnchoredSurfacePlacement = function
       transform: side === 'right' ? '' : "translateX(calc(-100% - ".concat(gap, "px))")
     })
   };
+};
+/**
+ * Expands an anchored left surface across the available gutter without runtime measurement.
+ */
+var getAnchoredLeftGutterSurfacePlacement = exports.getAnchoredLeftGutterSurfacePlacement = function getAnchoredLeftGutterSurfacePlacement(options) {
+  var placement = getAnchoredSurfacePlacement(_objectSpread(_objectSpread({}, options), {}, {
+    side: 'left'
+  }));
+  if (options.nodeType === 'layoutColumn') {
+    return placement;
+  }
+  var gap = (0, _consts.dragHandleGap)(options.nodeType, options.parentNodeType);
+  return _objectSpread(_objectSpread({}, placement), {}, {
+    style: _objectSpread(_objectSpread({}, 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(".concat(options.anchorName, " left) + ").concat(gap, "px)"),
+      transform: ''
+    })
+  });
 };

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VisibilityContainer = void 0;
+exports.useBlockControlsVisibility = exports.VisibilityWrapper = exports.VisibilityContainer = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
@@ -57,13 +57,16 @@ var hiddenStylesCSS = (0, _react2.css)({
 var displayContentsStylesCSS = (0, _react2.css)({
   display: 'contents'
 });
-var VisibilityContainer = exports.VisibilityContainer = function VisibilityContainer(_ref) {
+
+/**
+ * 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.
+ */
+var useBlockControlsVisibility = exports.useBlockControlsVisibility = function useBlockControlsVisibility(_ref) {
   var api = _ref.api,
-    children = _ref.children,
     controlSide = _ref.controlSide,
     forceVisibleOnMouseOut = _ref.forceVisibleOnMouseOut,
-    isPersistent = _ref.isPersistent,
-    shouldUseDisplayContents = _ref.shouldUseDisplayContents;
+    isPersistent = _ref.isPersistent;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['typeAhead', 'blockControls', 'editorViewMode', 'userIntent', 'showDiff'], function (states) {
       var _states$typeAheadStat, _states$blockControls, _states$blockControls2, _states$blockControls3, _states$editorViewMod, _states$userIntentSta, _states$showDiffState, _states$blockControls4;
       return {
@@ -139,9 +142,20 @@ var VisibilityContainer = exports.VisibilityContainer = function VisibilityConta
     };
   }, [shouldHideImmediate, isRightControlViewMode]);
   var shouldHide = isRightControlViewMode ? delayedShouldHide : shouldHideImmediate;
-  if ((0, _editorExperiment.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
+  var useCssStyles = (0, _editorExperiment.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
     exposure: true
-  })) {
+  });
+  return {
+    shouldHide: shouldHide,
+    useCssStyles: useCssStyles
+  };
+};
+var VisibilityWrapper = exports.VisibilityWrapper = function VisibilityWrapper(_ref2) {
+  var children = _ref2.children,
+    shouldHide = _ref2.shouldHide,
+    shouldUseDisplayContents = _ref2.shouldUseDisplayContents,
+    useCssStyles = _ref2.useCssStyles;
+  if (useCssStyles) {
     return (0, _react2.jsx)("div", {
       css: [baseStylesCSS, shouldHide ? hiddenStylesCSS : visibleStylesCSS, shouldUseDisplayContents && displayContentsStylesCSS]
     }, children);
@@ -151,4 +165,25 @@ var VisibilityContainer = exports.VisibilityContainer = function VisibilityConta
   , {
     xcss: [baseStyles, shouldHide ? hiddenStyles : visibleStyles, shouldUseDisplayContents && displayContentsStyles]
   }, children);
+};
+var VisibilityContainer = exports.VisibilityContainer = function VisibilityContainer(_ref3) {
+  var api = _ref3.api,
+    children = _ref3.children,
+    controlSide = _ref3.controlSide,
+    forceVisibleOnMouseOut = _ref3.forceVisibleOnMouseOut,
+    isPersistent = _ref3.isPersistent,
+    shouldUseDisplayContents = _ref3.shouldUseDisplayContents;
+  var _useBlockControlsVisi = useBlockControlsVisibility({
+      api: api,
+      controlSide: controlSide,
+      forceVisibleOnMouseOut: forceVisibleOnMouseOut,
+      isPersistent: isPersistent
+    }),
+    shouldHide = _useBlockControlsVisi.shouldHide,
+    useCssStyles = _useBlockControlsVisi.useCssStyles;
+  return (0, _react2.jsx)(VisibilityWrapper, {
+    shouldHide: shouldHide,
+    shouldUseDisplayContents: shouldUseDisplayContents,
+    useCssStyles: useCssStyles
+  }, children);
 };

package/dist/es2019/ui/block-controls-left-surface.compiled.css

@@ -1,7 +1,13 @@
 ._zulpv77o{gap:var(--ds-space-025,2px)}._154iu2gc{top:var(--ds-space-100,8px)}
 ._17c61i8t{position-visibility:anchors-valid}
+._1bahesu3{justify-content:flex-end}
 ._1e0c1txw{display:flex}
+._1f38ffwv{container-name:block-controls-left-gutter}
 ._1pbyb4wl{z-index:100}
 ._4cvr1h6o{align-items:center}
+._7cca15wb{container-type:inline-size}
 ._kqsw1if8{position:sticky}
-._kqswstnw{position:absolute}
+._kqswstnw{position:absolute}
+._lcxvglyw{pointer-events:none}
+._w1y61wug>*{pointer-events:auto}
+@container block-controls-left-gutter (max-width: 67px){._19vrglyw>[data-editor-block-control-item]:nth-last-child(n+3){display:none}}

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

@@ -4,12 +4,16 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls/block-control-ui-context';
 import { BLOCK_CONTROLS_LEFT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
-import { SurfaceRenderer, willSurfaceRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
+import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model/surface-renderer';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { BlockControlsVisibilityProvider } from './block-controls-surface-components';
 import { getBlockControlsSurfaceControlSide } from './block-controls-surface-context';
-import { partitionComponentsByPersistence } from './utils/partition-components-by-persistence';
-import { VisibilityContainer } from './visibility-container';
+import { useBlockControlsVisibility } from './visibility-container';
 const leftSurfaceOuterStyles = null;
+const leftSurfaceGutterStyles = {
+  container: "_1f38ffwv _7cca15wb _lcxvglyw",
+  row: "_1bahesu3 _lcxvglyw _w1y61wug _19vrglyw"
+};
 const leftSurfaceRowStyles = null;
 
 // Applied in addition to leftSurfaceRowStyles when the target node is sticky-eligible (e.g. long
@@ -17,8 +21,7 @@ const leftSurfaceRowStyles = 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 leftSurfaceStickyStyles = null;
-/** Renders one left block-controls surface at a document position. */
-export const BlockControlsLeftSurface = ({
+const BlockControlsLeftSurfaceContent = ({
   api,
   components,
   forceVisibleOnMouseOut,
@@ -26,16 +29,18 @@ export const BlockControlsLeftSurface = ({
   source,
   surfaceContext
 }) => {
-  if (!placement || !willSurfaceRender(components, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext)) {
-    return null;
-  }
+  const blockControlsContext = surfaceContext.get(BLOCK_CONTROL_UI_CONTEXT);
+  const controlSide = getBlockControlsSurfaceControlSide(blockControlsContext, isExperimentEnabled('platform_editor_controls_reliable_anchor'));
   const {
-    hoverOnlyComponents,
-    persistentComponents
-  } = partitionComponentsByPersistence(components, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext);
-  const willRenderPersistent = willSurfaceRender(persistentComponents, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext);
-  const willRenderHoverOnly = willSurfaceRender(hoverOnlyComponents, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext);
+    shouldHide: shouldHideHoverControls,
+    useCssStyles
+  } = useBlockControlsVisibility({
+    api,
+    controlSide,
+    forceVisibleOnMouseOut
+  });
   const isSticky = placement.isSticky;
+  const isTopLevel = (blockControlsContext === null || blockControlsContext === void 0 ? void 0 : blockControlsContext.targetNode.parentType) === 'doc';
   return /*#__PURE__*/React.createElement("div", {
     "data-editor-block-controls-surface": true,
     "data-editor-block-controls-side": "left",
@@ -43,27 +48,37 @@ export const BlockControlsLeftSurface = ({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Placement is resolved per target node, from its runtime DOM geometry or from its CSS anchor.
     ,
     style: placement.style,
-    className: ax(["_kqswstnw _17c61i8t _1pbyb4wl"])
+    className: ax(["_kqswstnw _17c61i8t _1pbyb4wl", isTopLevel && leftSurfaceGutterStyles.container])
   }, /*#__PURE__*/React.createElement("div", {
-    className: ax(["_zulpv77o _4cvr1h6o _1e0c1txw", isSticky && "_kqsw1if8 _154iu2gc"])
-  }, willRenderHoverOnly && /*#__PURE__*/React.createElement(VisibilityContainer, {
-    api: api,
-    controlSide: getBlockControlsSurfaceControlSide(surfaceContext.get(BLOCK_CONTROL_UI_CONTEXT), isExperimentEnabled('platform_editor_controls_reliable_anchor')),
-    forceVisibleOnMouseOut: forceVisibleOnMouseOut,
-    shouldUseDisplayContents: true
+    className: ax(["_zulpv77o _4cvr1h6o _1e0c1txw", isTopLevel && leftSurfaceGutterStyles.row, isSticky && "_kqsw1if8 _154iu2gc"])
+  }, /*#__PURE__*/React.createElement(BlockControlsVisibilityProvider, {
+    shouldHideHoverControls: shouldHideHoverControls,
+    useCssStyles: useCssStyles
   }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
-    components: hoverOnlyComponents,
+    components: components,
     surface: BLOCK_CONTROLS_LEFT_SURFACE,
     surfaceContext: surfaceContext
-  })), willRenderPersistent && /*#__PURE__*/React.createElement(VisibilityContainer, {
+  }))));
+};
+
+/** Renders one left block-controls surface at a document position. */
+export const BlockControlsLeftSurface = ({
+  api,
+  components,
+  forceVisibleOnMouseOut,
+  placement,
+  source,
+  surfaceContext
+}) => {
+  if (!placement) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(BlockControlsLeftSurfaceContent, {
     api: api,
-    controlSide: getBlockControlsSurfaceControlSide(surfaceContext.get(BLOCK_CONTROL_UI_CONTEXT), isExperimentEnabled('platform_editor_controls_reliable_anchor')),
+    components: components,
     forceVisibleOnMouseOut: forceVisibleOnMouseOut,
-    isPersistent: true,
-    shouldUseDisplayContents: true
-  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
-    components: persistentComponents,
-    surface: BLOCK_CONTROLS_LEFT_SURFACE,
+    placement: placement,
+    source: source,
     surfaceContext: surfaceContext
-  }))));
+  });
 };

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),