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

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 20.1.4
+
+### Patch Changes
+
+- [`48f6e385c3e64`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/48f6e385c3e64) -
+  Wrap visible left and right block controls in registry order and, under
+  platform_editor_collapsible_headings, hide lower-ranked left controls when a top-level gutter only
+  has room for two.
+- Updated dependencies
+
+## 20.1.3
+
+### Patch Changes
+
+- [`2a3bb6864b8fe`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2a3bb6864b8fe) -
+  Clean up the `platform_editor_fix_selection_text_color_change` experiment.
+- Updated dependencies
+
 ## 20.1.2
 
 ### Patch Changes

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

@@ -10,7 +10,6 @@ var _bindEventListener = require("bind-event-listener");
 var _browserApis = require("@atlaskit/browser-apis");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _styles = require("@atlaskit/editor-common/styles");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _main = require("../main");
 var _selection = require("../utils/selection");
 var _editorCommands = require("./editor-commands");
@@ -54,37 +53,25 @@ var createSelectionPreservationPlugin = exports.createSelectionPreservationPlugi
       key: _pluginKey.selectionPreservationPluginKey,
       state: {
         init: function init() {
-          if ((0, _expValEquals.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 = (0, _utils.getSelectionPreservationMeta)(tr);
           var newState = _objectSpread({}, pluginState);
           if ((meta === null || meta === void 0 ? void 0 : meta.type) === 'startPreserving') {
             newState.preservedSelection = (0, _selection.createPreservedSelection)(tr.doc.resolve(tr.selection.from), tr.doc.resolve(tr.selection.to));
-            if ((0, _expValEquals.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 ((0, _expValEquals.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 = (0, _selection.mapPreservedSelection)(newState.preservedSelection, tr);
             }
-            if ((0, _expValEquals.expValEquals)('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
-              newState.syncDomSelectionForDoc = (0, _utils.hasFormatSelectionSyncMeta)(tr) ? tr.doc : undefined;
-            }
+            newState.syncDomSelectionForDoc = (0, _utils.hasFormatSelectionSyncMeta)(tr) ? tr.doc : undefined;
           }
           if (!(0, _utils.compareSelections)(newState.preservedSelection, pluginState.preservedSelection)) {
             if (newState.preservedSelection) {
@@ -194,23 +181,19 @@ var createSelectionPreservationPlugin = exports.createSelectionPreservationPlugi
             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) || (0, _expValEquals.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 ((0, _expValEquals.expValEquals)('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
-                if (hasFormatSyncRequestForCurrentDoc) {
-                  if (pendingFormatSelectionSyncFrame !== undefined) {
-                    cancelAnimationFrame(pendingFormatSelectionSyncFrame);
-                  }
-                  pendingFormatSelectionSyncFrame = requestAnimationFrame(function () {
-                    pendingFormatSelectionSyncFrame = undefined;
-                    (0, _utils.syncDOMSelection)(syncSelection, view, {
-                      focusEditor: true
-                    });
-                  });
-                } else {
-                  (0, _utils.syncDOMSelection)(syncSelection, view);
+              if (hasFormatSyncRequestForCurrentDoc) {
+                if (pendingFormatSelectionSyncFrame !== undefined) {
+                  cancelAnimationFrame(pendingFormatSelectionSyncFrame);
                 }
+                pendingFormatSelectionSyncFrame = requestAnimationFrame(function () {
+                  pendingFormatSelectionSyncFrame = undefined;
+                  (0, _utils.syncDOMSelection)(syncSelection, view, {
+                    focusEditor: true
+                  });
+                });
               } else {
                 (0, _utils.syncDOMSelection)(syncSelection, view);
               }

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

@@ -13,10 +13,14 @@ var _blockControlUiContext = require("@atlaskit/editor-common/block-controls/blo
 var _surfaceKeys = require("@atlaskit/editor-common/block-controls/surface-keys");
 var _surfaceRenderer = require("@atlaskit/editor-ui-control-model/surface-renderer");
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
+var _blockControlsSurfaceComponents = require("./block-controls-surface-components");
 var _blockControlsSurfaceContext = require("./block-controls-surface-context");
-var _partitionComponentsByPersistence = require("./utils/partition-components-by-persistence");
 var _visibilityContainer = require("./visibility-container");
 var leftSurfaceOuterStyles = null;
+var leftSurfaceGutterStyles = {
+  container: "_1f38ffwv _7cca15wb _lcxvglyw",
+  row: "_1bahesu3 _lcxvglyw _w1y61wug _19vrglyw"
+};
 var leftSurfaceRowStyles = null;
 
 // Applied in addition to leftSurfaceRowStyles when the target node is sticky-eligible (e.g. long
@@ -24,23 +28,24 @@ var 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).
 var leftSurfaceStickyStyles = null;
-/** Renders one left block-controls surface at a document position. */
-var BlockControlsLeftSurface = exports.BlockControlsLeftSurface = function BlockControlsLeftSurface(_ref) {
+var BlockControlsLeftSurfaceContent = function BlockControlsLeftSurfaceContent(_ref) {
   var api = _ref.api,
     components = _ref.components,
     forceVisibleOnMouseOut = _ref.forceVisibleOnMouseOut,
     placement = _ref.placement,
     source = _ref.source,
     surfaceContext = _ref.surfaceContext;
-  if (!placement || !(0, _surfaceRenderer.willSurfaceRender)(components, _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext)) {
-    return null;
-  }
-  var _partitionComponentsB = (0, _partitionComponentsByPersistence.partitionComponentsByPersistence)(components, _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext),
-    hoverOnlyComponents = _partitionComponentsB.hoverOnlyComponents,
-    persistentComponents = _partitionComponentsB.persistentComponents;
-  var willRenderPersistent = (0, _surfaceRenderer.willSurfaceRender)(persistentComponents, _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext);
-  var willRenderHoverOnly = (0, _surfaceRenderer.willSurfaceRender)(hoverOnlyComponents, _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext);
+  var blockControlsContext = surfaceContext.get(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT);
+  var controlSide = (0, _blockControlsSurfaceContext.getBlockControlsSurfaceControlSide)(blockControlsContext, (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_controls_reliable_anchor'));
+  var _useBlockControlsVisi = (0, _visibilityContainer.useBlockControlsVisibility)({
+      api: api,
+      controlSide: controlSide,
+      forceVisibleOnMouseOut: forceVisibleOnMouseOut
+    }),
+    shouldHideHoverControls = _useBlockControlsVisi.shouldHide,
+    useCssStyles = _useBlockControlsVisi.useCssStyles;
   var isSticky = placement.isSticky;
+  var isTopLevel = (blockControlsContext === null || blockControlsContext === void 0 ? void 0 : blockControlsContext.targetNode.parentType) === 'doc';
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-editor-block-controls-surface": true,
     "data-editor-block-controls-side": "left",
@@ -48,27 +53,36 @@ var BlockControlsLeftSurface = exports.BlockControlsLeftSurface = function Block
     // 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: (0, _runtime.ax)(["_kqswstnw _17c61i8t _1pbyb4wl"])
+    className: (0, _runtime.ax)(["_kqswstnw _17c61i8t _1pbyb4wl", isTopLevel && leftSurfaceGutterStyles.container])
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _runtime.ax)(["_zulpv77o _4cvr1h6o _1e0c1txw", isSticky && "_kqsw1if8 _154iu2gc"])
-  }, willRenderHoverOnly && /*#__PURE__*/_react.default.createElement(_visibilityContainer.VisibilityContainer, {
-    api: api,
-    controlSide: (0, _blockControlsSurfaceContext.getBlockControlsSurfaceControlSide)(surfaceContext.get(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT), (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_controls_reliable_anchor')),
-    forceVisibleOnMouseOut: forceVisibleOnMouseOut,
-    shouldUseDisplayContents: true
+    className: (0, _runtime.ax)(["_zulpv77o _4cvr1h6o _1e0c1txw", isTopLevel && leftSurfaceGutterStyles.row, isSticky && "_kqsw1if8 _154iu2gc"])
+  }, /*#__PURE__*/_react.default.createElement(_blockControlsSurfaceComponents.BlockControlsVisibilityProvider, {
+    shouldHideHoverControls: shouldHideHoverControls,
+    useCssStyles: useCssStyles
   }, /*#__PURE__*/_react.default.createElement(_surfaceRenderer.SurfaceRenderer, {
-    components: hoverOnlyComponents,
+    components: components,
     surface: _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE,
     surfaceContext: surfaceContext
-  })), willRenderPersistent && /*#__PURE__*/_react.default.createElement(_visibilityContainer.VisibilityContainer, {
+  }))));
+};
+
+/** Renders one left block-controls surface at a document position. */
+var BlockControlsLeftSurface = exports.BlockControlsLeftSurface = function BlockControlsLeftSurface(_ref2) {
+  var api = _ref2.api,
+    components = _ref2.components,
+    forceVisibleOnMouseOut = _ref2.forceVisibleOnMouseOut,
+    placement = _ref2.placement,
+    source = _ref2.source,
+    surfaceContext = _ref2.surfaceContext;
+  if (!placement) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(BlockControlsLeftSurfaceContent, {
     api: api,
-    controlSide: (0, _blockControlsSurfaceContext.getBlockControlsSurfaceControlSide)(surfaceContext.get(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT), (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_controls_reliable_anchor')),
+    components: components,
     forceVisibleOnMouseOut: forceVisibleOnMouseOut,
-    isPersistent: true,
-    shouldUseDisplayContents: true
-  }, /*#__PURE__*/_react.default.createElement(_surfaceRenderer.SurfaceRenderer, {
-    components: persistentComponents,
-    surface: _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE,
+    placement: placement,
+    source: source,
     surfaceContext: surfaceContext
-  }))));
+  });
 };

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

@@ -18,14 +18,13 @@ var _surfaceKeys = require("@atlaskit/editor-common/block-controls/surface-keys"
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _styles = require("@atlaskit/editor-common/styles");
 var _createSurfaceContext = require("@atlaskit/editor-ui-control-model/create-surface-context");
-var _surfaceRenderer = require("@atlaskit/editor-ui-control-model/surface-renderer");
 var _decorationsCommon = require("../pm-plugins/decorations-common");
 var _blockControlsLeftSurface = require("./block-controls-left-surface");
+var _blockControlsSurfaceComponents = require("./block-controls-surface-components");
 var _blockControlsSurfaceContext = require("./block-controls-surface-context");
 var _blockControlsSurfaceTargets = require("./block-controls-surface-targets");
 var _getNodeContentElement = require("./utils/get-node-content-element");
 var _getSurfacePlacement = require("./utils/get-surface-placement");
-var _hasSurfaceControls = require("./utils/has-surface-controls");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; } }
@@ -69,14 +68,20 @@ var BlockControlsLeftSurfaces = exports.BlockControlsLeftSurfaces = function Blo
         return [];
       }
       var surfaceContext = (0, _createSurfaceContext.createSurfaceContext)(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT, context);
-      if (!(0, _hasSurfaceControls.hasSurfaceControls)(components) || !(0, _surfaceRenderer.willSurfaceRender)(components, _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext)) {
+      var surfaceComponents = (0, _blockControlsSurfaceComponents.getBlockControlsLeftSurfaceComponents)(components, surfaceContext);
+      if (!surfaceComponents) {
         return [];
       }
       // The cache supplies the same anchor names used by ProseMirror decorations.
       var anchorName = (0, _styles.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.
+      var isTopLevel = context.targetNode.parentType === 'doc';
       return [_objectSpread(_objectSpread({}, target), {}, {
         anchorName: anchorName,
         blockControlsContext: context,
+        isTopLevel: isTopLevel,
+        surfaceComponents: surfaceComponents,
         surfaceContext: surfaceContext
       })];
     });
@@ -89,15 +94,22 @@ var BlockControlsLeftSurfaces = exports.BlockControlsLeftSurfaces = function Blo
     return new Map(surfaces.flatMap(function (_ref3) {
       var anchorName = _ref3.anchorName,
         blockControlsContext = _ref3.blockControlsContext,
+        isTopLevel = _ref3.isTopLevel,
         position = _ref3.position;
-      return anchorName ? [[position, (0, _getSurfacePlacement.getAnchoredSurfacePlacement)({
+      if (!anchorName) {
+        return [];
+      }
+      var options = {
         anchorName: anchorName,
+        layout: blockControlsContext.targetNode.node.attrs.layout,
         nodeType: blockControlsContext.targetNode.type.name,
         nodeTypeWithLevel: (0, _decorationsCommon.getNodeTypeWithLevel)(blockControlsContext.targetNode.node),
-        layout: blockControlsContext.targetNode.node.attrs.layout,
-        parentNodeType: blockControlsContext.targetNode.parentType === 'doc' ? undefined : blockControlsContext.targetNode.parentType,
+        parentNodeType: blockControlsContext.targetNode.parentType === 'doc' ? undefined : blockControlsContext.targetNode.parentType
+      };
+      var placement = isTopLevel ? (0, _getSurfacePlacement.getAnchoredLeftGutterSurfacePlacement)(options) : (0, _getSurfacePlacement.getAnchoredSurfacePlacement)(_objectSpread(_objectSpread({}, options), {}, {
         side: 'left'
-      })]] : [];
+      }));
+      return [[position, placement]];
     }));
   }, [surfaces]);
   // Only the surfaces that still need measuring drive the effect below, so a document of anchored
@@ -131,6 +143,7 @@ var BlockControlsLeftSurfaces = exports.BlockControlsLeftSurfaces = function Blo
     }
     var measurementTargets = measuredSurfaces.flatMap(function (_ref5) {
       var blockControlsContext = _ref5.blockControlsContext,
+        isTopLevel = _ref5.isTopLevel,
         position = _ref5.position;
       var targetNodeElement = editorView.nodeDOM(blockControlsContext.targetNode.pos);
       var targetElementRoot = targetNodeElement instanceof HTMLElement ? targetNodeElement : targetNodeElement === null || targetNodeElement === void 0 ? void 0 : targetNodeElement.parentElement;
@@ -139,6 +152,7 @@ var BlockControlsLeftSurfaces = exports.BlockControlsLeftSurfaces = function Blo
       }
       return [{
         blockControlsContext: blockControlsContext,
+        isTopLevel: isTopLevel,
         position: position,
         targetElement: (0, _getNodeContentElement.getNodeContentElement)(targetElementRoot, blockControlsContext.targetNode.type.name),
         targetElementRoot: targetElementRoot
@@ -158,23 +172,28 @@ var BlockControlsLeftSurfaces = exports.BlockControlsLeftSurfaces = function Blo
         _step;
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var _targetElementRoot$ge;
+          var _targetElementRoot$ge, _offsetParentRect$lef;
           var _step$value = _step.value,
             blockControlsContext = _step$value.blockControlsContext,
+            isTopLevel = _step$value.isTopLevel,
             position = _step$value.position,
             targetElement = _step$value.targetElement,
             targetElementRoot = _step$value.targetElementRoot;
           if (!targetElementRoot.isConnected || !targetElement.isConnected) {
             continue;
           }
-          var placement = (0, _getSurfacePlacement.getSurfacePlacement)({
+          var options = {
             layout: (_targetElementRoot$ge = targetElementRoot.getAttribute('layout')) !== null && _targetElementRoot$ge !== void 0 ? _targetElementRoot$ge : '',
             nodeRect: targetElement.getBoundingClientRect(),
             nodeType: blockControlsContext.targetNode.type.name,
             nodeTypeWithLevel: (0, _decorationsCommon.getNodeTypeWithLevel)(blockControlsContext.targetNode.node),
-            parentNodeType: blockControlsContext.targetNode.parentType === 'doc' ? undefined : blockControlsContext.targetNode.parentType,
+            parentNodeType: blockControlsContext.targetNode.parentType === 'doc' ? undefined : blockControlsContext.targetNode.parentType
+          };
+          var placement = isTopLevel ? (0, _getSurfacePlacement.getLeftGutterSurfacePlacement)(_objectSpread(_objectSpread({}, options), {}, {
+            leftGutterBoundary: (_offsetParentRect$lef = offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.left) !== null && _offsetParentRect$lef !== void 0 ? _offsetParentRect$lef : 0
+          })) : (0, _getSurfacePlacement.getSurfacePlacement)(_objectSpread(_objectSpread({}, options), {}, {
             side: 'left'
-          });
+          }));
           nextPlacements.set(position, (0, _getSurfacePlacement.toMeasuredSurfaceWrapperPlacement)((0, _getSurfacePlacement.getAbsoluteSurfacePlacement)({
             offsetParentRect: offsetParentRect,
             offsetParentScrollLeft: offsetParentScrollLeft,
@@ -260,10 +279,11 @@ var BlockControlsLeftSurfaces = exports.BlockControlsLeftSurfaces = function Blo
     var _activeNode$handleOpt, _anchoredPlacements$g;
     var position = _ref6.position,
       source = _ref6.source,
+      surfaceComponents = _ref6.surfaceComponents,
       surfaceContext = _ref6.surfaceContext;
     return /*#__PURE__*/_react.default.createElement(_blockControlsLeftSurface.BlockControlsLeftSurface, {
       api: api,
-      components: components,
+      components: surfaceComponents,
       forceVisibleOnMouseOut: Boolean(activeNode === null || activeNode === 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/cjs/ui/block-controls-right-surface.js

@@ -11,7 +11,7 @@ var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _surfaceKeys = require("@atlaskit/editor-common/block-controls/surface-keys");
 var _surfaceRenderer = require("@atlaskit/editor-ui-control-model/surface-renderer");
-var _partitionComponentsByPersistence = require("./utils/partition-components-by-persistence");
+var _blockControlsSurfaceComponents = require("./block-controls-surface-components");
 var _visibilityContainer = require("./visibility-container");
 var rightSurfaceOuterStyles = null;
 var rightSurfaceRowStyles = null;
@@ -21,22 +21,20 @@ var 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).
 var rightSurfaceStickyStyles = null;
-/** Renders one right block-controls surface at a document position. */
-var BlockControlsRightSurface = exports.BlockControlsRightSurface = function BlockControlsRightSurface(_ref) {
+var BlockControlsRightSurfaceContent = function BlockControlsRightSurfaceContent(_ref) {
   var api = _ref.api,
     components = _ref.components,
     forceVisibleOnMouseOut = _ref.forceVisibleOnMouseOut,
     placement = _ref.placement,
     source = _ref.source,
     surfaceContext = _ref.surfaceContext;
-  if (!placement || !(0, _surfaceRenderer.willSurfaceRender)(components, _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext)) {
-    return null;
-  }
-  var _partitionComponentsB = (0, _partitionComponentsByPersistence.partitionComponentsByPersistence)(components, _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext),
-    hoverOnlyComponents = _partitionComponentsB.hoverOnlyComponents,
-    persistentComponents = _partitionComponentsB.persistentComponents;
-  var willRenderPersistent = (0, _surfaceRenderer.willSurfaceRender)(persistentComponents, _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext);
-  var willRenderHoverOnly = (0, _surfaceRenderer.willSurfaceRender)(hoverOnlyComponents, _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext);
+  var _useBlockControlsVisi = (0, _visibilityContainer.useBlockControlsVisibility)({
+      api: api,
+      controlSide: 'right',
+      forceVisibleOnMouseOut: forceVisibleOnMouseOut
+    }),
+    shouldHideHoverControls = _useBlockControlsVisi.shouldHide,
+    useCssStyles = _useBlockControlsVisi.useCssStyles;
   var isSticky = placement.isSticky;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-editor-block-controls-surface": true,
@@ -48,23 +46,33 @@ var BlockControlsRightSurface = exports.BlockControlsRightSurface = function Blo
     className: (0, _runtime.ax)(["_kqswstnw _17c61i8t _1pbyb4wl"])
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)(["_zulpv77o _4cvr1h6o _1e0c1txw", isSticky && "_kqsw1if8 _154iu2gc"])
-  }, willRenderPersistent && /*#__PURE__*/_react.default.createElement(_visibilityContainer.VisibilityContainer, {
-    api: api,
-    controlSide: "right",
-    isPersistent: true,
-    shouldUseDisplayContents: true
+  }, /*#__PURE__*/_react.default.createElement(_blockControlsSurfaceComponents.BlockControlsVisibilityProvider, {
+    shouldHideHoverControls: shouldHideHoverControls,
+    useCssStyles: useCssStyles
   }, /*#__PURE__*/_react.default.createElement(_surfaceRenderer.SurfaceRenderer, {
-    components: persistentComponents,
+    components: components,
     surface: _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE,
     surfaceContext: surfaceContext
-  })), willRenderHoverOnly && /*#__PURE__*/_react.default.createElement(_visibilityContainer.VisibilityContainer, {
+  }))));
+};
+
+/** Renders one right block-controls surface at a document position. */
+var BlockControlsRightSurface = exports.BlockControlsRightSurface = function BlockControlsRightSurface(_ref2) {
+  var api = _ref2.api,
+    components = _ref2.components,
+    forceVisibleOnMouseOut = _ref2.forceVisibleOnMouseOut,
+    placement = _ref2.placement,
+    source = _ref2.source,
+    surfaceContext = _ref2.surfaceContext;
+  if (!placement) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(BlockControlsRightSurfaceContent, {
     api: api,
-    controlSide: "right",
+    components: components,
     forceVisibleOnMouseOut: forceVisibleOnMouseOut,
-    shouldUseDisplayContents: true
-  }, /*#__PURE__*/_react.default.createElement(_surfaceRenderer.SurfaceRenderer, {
-    components: hoverOnlyComponents,
-    surface: _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE,
+    placement: placement,
+    source: source,
     surfaceContext: surfaceContext
-  }))));
+  });
 };

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

@@ -18,14 +18,13 @@ var _surfaceKeys = require("@atlaskit/editor-common/block-controls/surface-keys"
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _styles = require("@atlaskit/editor-common/styles");
 var _createSurfaceContext = require("@atlaskit/editor-ui-control-model/create-surface-context");
-var _surfaceRenderer = require("@atlaskit/editor-ui-control-model/surface-renderer");
 var _decorationsCommon = require("../pm-plugins/decorations-common");
 var _blockControlsRightSurface = require("./block-controls-right-surface");
+var _blockControlsSurfaceComponents = require("./block-controls-surface-components");
 var _blockControlsSurfaceContext = require("./block-controls-surface-context");
 var _blockControlsSurfaceTargets = require("./block-controls-surface-targets");
 var _getNodeContentElement = require("./utils/get-node-content-element");
 var _getSurfacePlacement = require("./utils/get-surface-placement");
-var _hasSurfaceControls = require("./utils/has-surface-controls");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; } }
@@ -78,7 +77,8 @@ var BlockControlsRightSurfaces = exports.BlockControlsRightSurfaces = function B
         return [];
       }
       var surfaceContext = (0, _createSurfaceContext.createSurfaceContext)(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT, context);
-      if (!(0, _hasSurfaceControls.hasSurfaceControls)(components) || !(0, _surfaceRenderer.willSurfaceRender)(components, _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext)) {
+      var surfaceComponents = (0, _blockControlsSurfaceComponents.getBlockControlsRightSurfaceComponents)(components, surfaceContext);
+      if (!surfaceComponents) {
         return [];
       }
       // The cache supplies the same anchor names used by ProseMirror decorations.
@@ -86,6 +86,7 @@ var BlockControlsRightSurfaces = exports.BlockControlsRightSurfaces = function B
       return [_objectSpread(_objectSpread({}, target), {}, {
         anchorName: anchorName,
         blockControlsContext: context,
+        surfaceComponents: surfaceComponents,
         surfaceContext: surfaceContext
       })];
     });
@@ -269,10 +270,11 @@ var BlockControlsRightSurfaces = exports.BlockControlsRightSurfaces = function B
     var _activeNode$handleOpt, _anchoredPlacements$g;
     var position = _ref6.position,
       source = _ref6.source,
+      surfaceComponents = _ref6.surfaceComponents,
       surfaceContext = _ref6.surfaceContext;
     return /*#__PURE__*/_react.default.createElement(_blockControlsRightSurface.BlockControlsRightSurface, {
       api: api,
-      components: components,
+      components: surfaceComponents,
       forceVisibleOnMouseOut: Boolean(activeNode === null || activeNode === 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),