@atlaskit/editor-plugin-block-controls 17.1.4 → 17.1.5

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 17.1.5
+
+### Patch Changes
+
+- [`0841b102bfe4a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0841b102bfe4a) -
+  Add a PM-state-backed multi-location left block-controls surface and register the display-only
+  heading collapse button behind `platform_editor_block_control_migration` and
+  `platform_editor_collapsible_headings`.
+- Updated dependencies
+
 ## 17.1.4
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -31,7 +31,7 @@ var _pluginKey = require("./pm-plugins/selection-preservation/plugin-key");
 var _pmPlugin2 = require("./pm-plugins/selection-preservation/pm-plugin");
 var _expandAndUpdateSelection2 = require("./pm-plugins/utils/expand-and-update-selection");
 var _getSelection = require("./pm-plugins/utils/getSelection");
-var _blockControlsSurface = require("./ui/block-controls-surface");
+var _blockControlsLeftSurfaces = require("./ui/block-controls-left-surfaces");
 var _blockControlsSurfaceDragHandleRegistration = require("./ui/block-controls-surface-drag-handle-registration");
 var _globalStyles = require("./ui/global-styles");
 var _surfaceEditorViewContext = require("./ui/surface-editor-view-context");
@@ -45,6 +45,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
   var rightSideControlsEnabled = (_config$rightSideCont = config === null || config === void 0 ? void 0 : config.rightSideControlsEnabled) !== null && _config$rightSideCont !== void 0 ? _config$rightSideCont : false;
   var quickInsertButtonEnabled = (_config$quickInsertBu = config === null || config === void 0 ? void 0 : config.quickInsertButtonEnabled) !== null && _config$quickInsertBu !== void 0 ? _config$quickInsertBu : true;
   var registryBlockControlsEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration');
+  var surfaceNodePositionsEnabled = registryBlockControlsEnabled && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_collapsible_headings');
   var legacyBlockControlsEnabled = !registryBlockControlsEnabled;
   if (registryBlockControlsEnabled) {
     var _api$uiControlRegistr;
@@ -128,7 +129,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         plugin: function plugin(_ref2) {
           var getIntl = _ref2.getIntl,
             nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
-          return (0, _main.createPlugin)(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled);
+          return (0, _main.createPlugin)(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled, surfaceNodePositionsEnabled);
         }
       }];
       if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
@@ -430,6 +431,10 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         isEditing: (_interactionTrackingP = _pmPlugin.interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
         isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState10 = _main.key.getState(editorState)) === null || _key$getState10 === void 0 ? void 0 : _key$getState10.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
       };
+      if (surfaceNodePositionsEnabled) {
+        var _key$getState$surface, _key$getState11;
+        sharedState.surfaceNodePositions = (_key$getState$surface = (_key$getState11 = _main.key.getState(editorState)) === null || _key$getState11 === void 0 ? void 0 : _key$getState11.surfaceNodePositions) !== null && _key$getState$surface !== void 0 ? _key$getState$surface : [];
+      }
       if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
         var _interactionTrackingP2, _interactionTrackingP3, _interactionTrackingP4;
         sharedState.isMouseOut = (_interactionTrackingP2 = (_interactionTrackingP3 = _pmPlugin.interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP3 === void 0 ? void 0 : _interactionTrackingP3.isMouseOut) !== null && _interactionTrackingP2 !== void 0 ? _interactionTrackingP2 : false;
@@ -449,7 +454,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         api: api
       }), registryBlockControlsEnabled && editorView && api ? /*#__PURE__*/_react.default.createElement(_surfaceEditorViewContext.SurfaceEditorViewContext.Provider, {
         value: editorView
-      }, /*#__PURE__*/_react.default.createElement(_blockControlsSurface.BlockControlsSurface, {
+      }, /*#__PURE__*/_react.default.createElement(_blockControlsLeftSurfaces.BlockControlsLeftSurfaces, {
         api: api,
         editorView: editorView
       })) : null);

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

@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _browserApis = require("@atlaskit/browser-apis");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _surfaceKeys = require("@atlaskit/editor-common/block-controls/surface-keys");
 var _browser = require("@atlaskit/editor-common/browser");
 var _nodeAnchor = require("@atlaskit/editor-common/node-anchor");
 var _performanceMeasures = require("@atlaskit/editor-common/performance-measures");
@@ -19,6 +20,7 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _surfaceRenderer = require("@atlaskit/editor-ui-control-model/surface-renderer");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/utils/combine");
@@ -40,6 +42,7 @@ var _analytics2 = require("./utils/analytics");
 var _anchorUtils = require("./utils/anchor-utils");
 var _getSelection = require("./utils/getSelection");
 var _selection = require("./utils/selection");
+var _surfaceNodePositions = require("./utils/surface-node-positions");
 var _transactions = require("./utils/transactions");
 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; } }
@@ -205,6 +208,7 @@ var destroyFn = function destroyFn(api, editorView) {
 };
 var initialState = {
   decorations: _view.DecorationSet.empty,
+  surfaceNodePositions: [],
   activeNode: undefined,
   isDragging: false,
   isMenuOpen: false,
@@ -242,10 +246,13 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
   var anchorRectCache = arguments.length > 10 ? arguments[10] : undefined;
   var resizeObserverWidth = arguments.length > 11 ? arguments[11] : undefined;
   var pragmaticCleanup = arguments.length > 12 ? arguments[12] : undefined;
+  var resolvedSurface = arguments.length > 13 ? arguments[13] : undefined;
   var activeNode = currentState.activeNode,
     decorations = currentState.decorations,
     isResizerResizing = currentState.isResizerResizing,
-    multiSelectDnD = currentState.multiSelectDnD;
+    multiSelectDnD = currentState.multiSelectDnD,
+    surfaceNodePositions = currentState.surfaceNodePositions;
+  var previousActiveNode = activeNode;
   var editorHeight = currentState.editorHeight,
     editorWidthLeft = currentState.editorWidthLeft,
     editorWidthRight = currentState.editorWidthRight,
@@ -810,6 +817,18 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     var _latestActiveNode13, _latestActiveNode14;
     newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && flags.legacyDragHandleEnabled && (0, _decorationsDragHandle.findHandleDec)(decorations, (_latestActiveNode13 = latestActiveNode) === null || _latestActiveNode13 === void 0 ? void 0 : _latestActiveNode13.pos, (_latestActiveNode14 = latestActiveNode) === null || _latestActiveNode14 === void 0 ? void 0 : _latestActiveNode14.pos).length === 0 ? null : latestActiveNode;
   }
+  if (flags.surfaceNodePositionsEnabled && resolvedSurface) {
+    surfaceNodePositions = (0, _surfaceNodePositions.updateSurfaceNodePositions)({
+      activeNode: newActiveNode,
+      currentPositions: surfaceNodePositions,
+      from: from,
+      newState: newState,
+      previousActiveNode: previousActiveNode,
+      resolvedSurface: resolvedSurface,
+      to: to,
+      tr: tr
+    });
+  }
   var isMenuOpenNew = isMenuOpen;
   if ((0, _experiments.editorExperiment)('platform_editor_block_menu', true)) {
     if (meta !== null && meta !== void 0 && meta.closeMenu) {
@@ -829,6 +848,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
   }
   return {
     decorations: decorations,
+    surfaceNodePositions: surfaceNodePositions,
     activeNode: newActiveNode,
     activeDropTargetNode: currentActiveDropTargetNode,
     isDragging: (_meta$isDragging3 = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging3 !== void 0 ? _meta$isDragging3 : isDragging,
@@ -853,9 +873,11 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
   };
 };
 var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry) {
+  var _api$uiControlRegistr, _api$uiControlRegistr2;
   var rightSideControlsEnabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   var quickInsertButtonEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;
   var legacyDragHandleEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : true;
+  var surfaceNodePositionsEnabled = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
   var _getIntl = getIntl(),
     formatMessage = _getIntl.formatMessage;
   var isAdvancedLayoutEnabled = (0, _experiments.editorExperiment)('advanced_layouts', true, {
@@ -864,8 +886,10 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
   var toolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
   var flags = {
     legacyDragHandleEnabled: legacyDragHandleEnabled,
+    surfaceNodePositionsEnabled: surfaceNodePositionsEnabled,
     toolbarFlagsEnabled: toolbarFlagsEnabled
   };
+  var resolvedSurface = surfaceNodePositionsEnabled ? (0, _surfaceRenderer.resolveSurface)((_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(_surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [], _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE) : undefined;
   var anchorRectCache;
   if (!(0, _anchorUtils.isAnchorSupported)()) {
     anchorRectCache = new _anchorUtils.AnchorRectCache();
@@ -875,11 +899,13 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
   return new _safePlugin.SafePlugin({
     key: key,
     state: {
-      init: function init() {
-        return initialState;
+      init: function init(_config, editorState) {
+        return _objectSpread(_objectSpread({}, initialState), {}, {
+          surfaceNodePositions: resolvedSurface ? (0, _surfaceNodePositions.getSurfaceNodePositions)(editorState, resolvedSurface) : []
+        });
       },
       apply: function apply(tr, currentState, _, newState) {
-        return _apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled, anchorRectCache, resizeObserverWidth, pragmaticCleanup);
+        return _apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled, anchorRectCache, resizeObserverWidth, pragmaticCleanup, resolvedSurface);
       }
     },
     props: {

package/dist/cjs/pm-plugins/utils/surface-node-positions.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateSurfaceNodePositions = exports.getSurfaceNodePositions = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _blockControlUiContext = require("@atlaskit/editor-common/block-controls/block-control-ui-context");
+var _surfaceRenderer = require("@atlaskit/editor-ui-control-model/surface-renderer");
+var _types = require("@atlaskit/editor-ui-control-model/types");
+var _blockControlsSurfaceContext = require("../../ui/block-controls-surface-context");
+var createSurfaceContextAtPosition = function createSurfaceContextAtPosition(state, position, activeNode) {
+  var blockControlsContext = (0, _blockControlsSurfaceContext.createBlockControlsSurfaceContextForPosition)(state, position, activeNode);
+  return blockControlsContext ? (0, _types.createSurfaceContext)(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT, blockControlsContext) : undefined;
+};
+var getSurfaceNodePositions = exports.getSurfaceNodePositions = function getSurfaceNodePositions(state, resolvedSurface, activeNode) {
+  var from = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  var to = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : state.doc.content.size;
+  var root = resolvedSurface.root,
+    childrenMap = resolvedSurface.childrenMap;
+  if (!root) {
+    return [];
+  }
+  var positions = [];
+  var start = Math.max(0, from);
+  var end = Math.min(state.doc.content.size, Math.max(start, to));
+  state.doc.nodesBetween(start, end, function (node, position) {
+    if (node.isBlock && (0, _surfaceRenderer.willComponentRender)(root, childrenMap, createSurfaceContextAtPosition(state, position, activeNode))) {
+      positions.push(position);
+    }
+  });
+  return positions;
+};
+var hasActiveNodeChanged = function hasActiveNodeChanged(previousActiveNode, activeNode) {
+  return (previousActiveNode === null || previousActiveNode === void 0 ? void 0 : previousActiveNode.pos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) || (previousActiveNode === null || previousActiveNode === void 0 ? void 0 : previousActiveNode.nodeType) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) || (previousActiveNode === null || previousActiveNode === void 0 ? void 0 : previousActiveNode.rootPos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.rootPos);
+};
+var updateSurfaceNodePositions = exports.updateSurfaceNodePositions = function updateSurfaceNodePositions(_ref) {
+  var activeNode = _ref.activeNode,
+    currentPositions = _ref.currentPositions,
+    from = _ref.from,
+    newState = _ref.newState,
+    previousActiveNode = _ref.previousActiveNode,
+    resolvedSurface = _ref.resolvedSurface,
+    to = _ref.to,
+    tr = _ref.tr;
+  var activeNodeChanged = hasActiveNodeChanged(previousActiveNode, activeNode);
+  if (!tr.docChanged && !activeNodeChanged) {
+    return currentPositions;
+  }
+  var nextActiveNode = activeNode !== null && activeNode !== void 0 ? activeNode : undefined;
+  if (activeNodeChanged) {
+    return getSurfaceNodePositions(newState, resolvedSurface, nextActiveNode);
+  }
+  var root = resolvedSurface.root,
+    childrenMap = resolvedSurface.childrenMap;
+  var mappedPositions = currentPositions.map(function (position) {
+    return tr.mapping.mapResult(position, -1);
+  }).filter(function (result) {
+    return !result.deleted;
+  }).map(function (result) {
+    return result.pos;
+  }).filter(function (position) {
+    var node = newState.doc.nodeAt(position);
+    return Boolean((node === null || node === void 0 ? void 0 : node.isBlock) && root && (0, _surfaceRenderer.willComponentRender)(root, childrenMap, createSurfaceContextAtPosition(newState, position, nextActiveNode)));
+  });
+  var changedPositions = getSurfaceNodePositions(newState, resolvedSurface, nextActiveNode, from - 1, to + 1);
+  return Array.from(new Set([].concat((0, _toConsumableArray2.default)(mappedPositions), (0, _toConsumableArray2.default)(changedPositions)))).sort(function (first, second) {
+    return first - second;
+  });
+};

package/dist/cjs/ui/block-controls-left-surface-targets.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBlockControlsLeftSurfaceTargets = void 0;
+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; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/** Combines hover-driven and stored surface positions into one deduplicated list. */
+var getBlockControlsLeftSurfaceTargets = exports.getBlockControlsLeftSurfaceTargets = function getBlockControlsLeftSurfaceTargets(activeNode, storedPositions) {
+  var targetsByPosition = new Map();
+  var _iterator = _createForOfIteratorHelper(storedPositions),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var position = _step.value;
+      targetsByPosition.set(position, {
+        position: position,
+        source: 'stored'
+      });
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  if (activeNode) {
+    var _activeNode$rootPos;
+    var rootPosition = (_activeNode$rootPos = activeNode.rootPos) !== null && _activeNode$rootPos !== void 0 ? _activeNode$rootPos : activeNode.pos;
+    targetsByPosition.set(rootPosition, {
+      position: rootPosition,
+      source: 'root'
+    });
+    if (activeNode.pos !== rootPosition) {
+      targetsByPosition.set(activeNode.pos, {
+        position: activeNode.pos,
+        source: 'active'
+      });
+    }
+  }
+  return Array.from(targetsByPosition.values()).sort(function (first, second) {
+    return first.position - second.position;
+  });
+};

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

@@ -0,0 +1,45 @@
+/* block-controls-left-surface.tsx generated by @compiled/babel-plugin v2.0.0 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlockControlsLeftSurface = void 0;
+require("./block-controls-left-surface.compiled.css");
+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 _visibilityContainer = require("./visibility-container");
+var leftSurfaceStyles = null;
+/** Renders one left block-controls surface at a document position. */
+var BlockControlsLeftSurface = exports.BlockControlsLeftSurface = function BlockControlsLeftSurface(_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 surface = /*#__PURE__*/_react.default.createElement(_surfaceRenderer.SurfaceRenderer, {
+    components: components,
+    surface: _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE,
+    surfaceContext: surfaceContext
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-editor-block-controls-surface": true,
+    "data-testid": source === 'stored' ? 'block-controls-left-surface-stored' : source === 'active' ? 'block-controls-left-surface-active' : 'block-controls-left-surface'
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Placement is resolved from the target node's runtime DOM geometry.
+    ,
+    style: placement,
+    className: (0, _runtime.ax)(["_zulpv77o _4cvr1h6o _1e0c1txw _kqswstnw _1pbyb4wl"])
+  }, /*#__PURE__*/_react.default.createElement(_visibilityContainer.VisibilityContainer, {
+    api: api,
+    controlSide: "left",
+    forceVisibleOnMouseOut: forceVisibleOnMouseOut,
+    shouldUseDisplayContents: true
+  }, surface));
+};

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

@@ -0,0 +1,216 @@
+/* block-controls-left-surfaces.tsx generated by @compiled/babel-plugin v2.0.0 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlockControlsLeftSurfaces = void 0;
+var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _bindEventListener = require("bind-event-listener");
+var _browserApis = require("@atlaskit/browser-apis");
+var _blockControlUiContext = require("@atlaskit/editor-common/block-controls/block-control-ui-context");
+var _surfaceKeys = require("@atlaskit/editor-common/block-controls/surface-keys");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _types = require("@atlaskit/editor-ui-control-model/types");
+var _decorationsCommon = require("../pm-plugins/decorations-common");
+var _blockControlsSurfaceContext = require("./block-controls-surface-context");
+var _blockControlsLeftSurface = require("./block-controls-left-surface");
+var _blockControlsLeftSurfaceTargets = require("./block-controls-left-surface-targets");
+var _getNodeContentElement = require("./utils/get-node-content-element");
+var _getSurfacePlacement = require("./utils/get-surface-placement");
+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; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+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 EMPTY_SURFACE_POSITIONS = [];
+var EMPTY_SURFACE_COMPONENTS = [];
+var BlockControlsLeftSurfaces = exports.BlockControlsLeftSurfaces = function BlockControlsLeftSurfaces(_ref) {
+  var _api$uiControlRegistr, _api$uiControlRegistr2;
+  var api = _ref.api,
+    editorView = _ref.editorView;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (states) {
+      var _states$blockControls, _states$blockControls2, _states$blockControls3;
+      return {
+        activeNode: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.activeNode,
+        surfaceNodePositions: (_states$blockControls2 = (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.surfaceNodePositions) !== null && _states$blockControls2 !== void 0 ? _states$blockControls2 : EMPTY_SURFACE_POSITIONS
+      };
+    }),
+    activeNode = _useSharedPluginState.activeNode,
+    surfaceNodePositions = _useSharedPluginState.surfaceNodePositions;
+  var components = (_api$uiControlRegistr = (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(_surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : EMPTY_SURFACE_COMPONENTS;
+  var targets = (0, _react.useMemo)(function () {
+    return (0, _blockControlsLeftSurfaceTargets.getBlockControlsLeftSurfaceTargets)(activeNode, surfaceNodePositions);
+  }, [activeNode, surfaceNodePositions]);
+  var surfaces = (0, _react.useMemo)(function () {
+    return targets.flatMap(function (target) {
+      var context = target.source === 'stored' ? (0, _blockControlsSurfaceContext.createBlockControlsSurfaceContextForPosition)(editorView.state, target.position, activeNode) : (0, _blockControlsSurfaceContext.createBlockControlsSurfaceContext)(editorView, activeNode, target.source);
+      if (!context) {
+        return [];
+      }
+      var surfaceContext = (0, _types.createSurfaceContext)(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT, context);
+      return [_objectSpread(_objectSpread({}, target), {}, {
+        blockControlsContext: context,
+        surfaceContext: surfaceContext
+      })];
+    });
+  }, [activeNode, editorView, targets]);
+  var _useState = (0, _react.useState)(new Map()),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    placements = _useState2[0],
+    setPlacements = _useState2[1];
+  var animationFrameRef = (0, _react.useRef)(undefined);
+  (0, _react.useLayoutEffect)(function () {
+    var _getDocument;
+    if (surfaces.length === 0) {
+      setPlacements(new Map());
+      return;
+    }
+    var measurementTargets = surfaces.flatMap(function (_ref2) {
+      var blockControlsContext = _ref2.blockControlsContext,
+        position = _ref2.position;
+      var targetNodeElement = editorView.nodeDOM(blockControlsContext.targetNode.pos);
+      var targetElementRoot = targetNodeElement instanceof HTMLElement ? targetNodeElement : targetNodeElement === null || targetNodeElement === void 0 ? void 0 : targetNodeElement.parentElement;
+      if (!targetElementRoot) {
+        return [];
+      }
+      return [{
+        blockControlsContext: blockControlsContext,
+        position: position,
+        targetElement: (0, _getNodeContentElement.getNodeContentElement)(targetElementRoot, blockControlsContext.targetNode.type.name),
+        targetElementRoot: targetElementRoot
+      }];
+    });
+    var offsetParent = editorView.dom.offsetParent;
+    var isDocumentOffsetParent = !offsetParent || offsetParent === ((_getDocument = (0, _browserApis.getDocument)()) === null || _getDocument === void 0 ? void 0 : _getDocument.body);
+    var scrollingOffsetParent = offsetParent instanceof HTMLElement && !isDocumentOffsetParent ? offsetParent : undefined;
+    var updatePositions = function updatePositions() {
+      var _scrollingOffsetParen, _scrollingOffsetParen2;
+      animationFrameRef.current = undefined;
+      var offsetParentRect = offsetParent === null || offsetParent === void 0 ? void 0 : offsetParent.getBoundingClientRect();
+      var offsetParentScrollTop = (_scrollingOffsetParen = scrollingOffsetParent === null || scrollingOffsetParent === void 0 ? void 0 : scrollingOffsetParent.scrollTop) !== null && _scrollingOffsetParen !== void 0 ? _scrollingOffsetParen : window.scrollY;
+      var offsetParentScrollLeft = (_scrollingOffsetParen2 = scrollingOffsetParent === null || scrollingOffsetParent === void 0 ? void 0 : scrollingOffsetParent.scrollLeft) !== null && _scrollingOffsetParen2 !== void 0 ? _scrollingOffsetParen2 : window.scrollX;
+      var nextPlacements = new Map();
+      var _iterator = _createForOfIteratorHelper(measurementTargets),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _targetElementRoot$ge;
+          var _step$value = _step.value,
+            blockControlsContext = _step$value.blockControlsContext,
+            position = _step$value.position,
+            targetElement = _step$value.targetElement,
+            targetElementRoot = _step$value.targetElementRoot;
+          if (!targetElementRoot.isConnected || !targetElement.isConnected) {
+            continue;
+          }
+          var placement = (0, _getSurfacePlacement.getSurfacePlacement)({
+            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
+          });
+          nextPlacements.set(position, (0, _getSurfacePlacement.getAbsoluteSurfacePlacement)({
+            offsetParentRect: offsetParentRect,
+            offsetParentScrollLeft: offsetParentScrollLeft,
+            offsetParentScrollTop: offsetParentScrollTop,
+            placement: placement
+          }));
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      setPlacements(nextPlacements);
+    };
+    var schedulePositionUpdate = function schedulePositionUpdate() {
+      if (animationFrameRef.current === undefined) {
+        animationFrameRef.current = requestAnimationFrame(updatePositions);
+      }
+    };
+    updatePositions();
+    var resizeObserver = new ResizeObserver(schedulePositionUpdate);
+    var observedElements = new Set([editorView.dom]);
+    var _iterator2 = _createForOfIteratorHelper(measurementTargets),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var targetElement = _step2.value.targetElement;
+        observedElements.add(targetElement);
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+    if (offsetParent instanceof HTMLElement) {
+      observedElements.add(offsetParent);
+    }
+    observedElements.forEach(function (element) {
+      return resizeObserver.observe(element);
+    });
+    var unbindWindowResize = (0, _bindEventListener.bind)(window, {
+      type: 'resize',
+      listener: schedulePositionUpdate
+    });
+    var unbindWindowScroll = (0, _bindEventListener.bind)(window, {
+      type: 'scroll',
+      listener: schedulePositionUpdate,
+      options: {
+        capture: true,
+        passive: true
+      }
+    });
+    var visualViewport = window.visualViewport;
+    var unbindVisualViewportResize = visualViewport ? (0, _bindEventListener.bind)(visualViewport, {
+      type: 'resize',
+      listener: schedulePositionUpdate
+    }) : undefined;
+    var unbindVisualViewportScroll = visualViewport ? (0, _bindEventListener.bind)(visualViewport, {
+      type: 'scroll',
+      listener: schedulePositionUpdate
+    }) : undefined;
+    var unbindTransitionEnd = (0, _bindEventListener.bind)(editorView.dom, {
+      type: 'transitionend',
+      listener: schedulePositionUpdate,
+      options: {
+        capture: true
+      }
+    });
+    return function () {
+      if (animationFrameRef.current !== undefined) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = undefined;
+      }
+      resizeObserver.disconnect();
+      unbindWindowResize();
+      unbindWindowScroll();
+      unbindVisualViewportResize === null || unbindVisualViewportResize === void 0 || unbindVisualViewportResize();
+      unbindVisualViewportScroll === null || unbindVisualViewportScroll === void 0 || unbindVisualViewportScroll();
+      unbindTransitionEnd();
+    };
+  }, [editorView, surfaces]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, surfaces.map(function (_ref3) {
+    var _activeNode$handleOpt;
+    var position = _ref3.position,
+      source = _ref3.source,
+      surfaceContext = _ref3.surfaceContext;
+    return /*#__PURE__*/_react.default.createElement(_blockControlsLeftSurface.BlockControlsLeftSurface, {
+      api: api,
+      components: components,
+      forceVisibleOnMouseOut: Boolean(activeNode === null || activeNode === void 0 || (_activeNode$handleOpt = activeNode.handleOptions) === null || _activeNode$handleOpt === void 0 ? void 0 : _activeNode$handleOpt.isFocused),
+      key: position,
+      placement: placements.get(position),
+      source: source,
+      surfaceContext: surfaceContext
+    });
+  }));
+};

package/dist/cjs/ui/block-controls-surface-context.js

@@ -4,16 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createBlockControlsSurfaceContext = void 0;
+exports.createBlockControlsSurfaceContextForPosition = exports.createBlockControlsSurfaceContext = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 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 getNodeContext = function getNodeContext(view, pos) {
-  var node = view.state.doc.nodeAt(pos);
+var getNodeContext = function getNodeContext(state, pos) {
+  var node = state.doc.nodeAt(pos);
   if (!node) {
     return undefined;
   }
-  var $pos = view.state.doc.resolve(pos);
+  var $pos = state.doc.resolve(pos);
   var ancestors = [];
   for (var depth = 0; depth <= $pos.depth; depth++) {
     var ancestor = $pos.node(depth);
@@ -36,26 +36,32 @@ var getNodeContext = function getNodeContext(view, pos) {
     }
   };
 };
-var createBlockControlsSurfaceContext = exports.createBlockControlsSurfaceContext = function createBlockControlsSurfaceContext(view, activeNode) {
-  var _activeNode$rootPos, _activeNode$rootNodeT;
-  var target = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'root';
-  if (!activeNode) {
-    return undefined;
-  }
-  var rootPos = (_activeNode$rootPos = activeNode.rootPos) !== null && _activeNode$rootPos !== void 0 ? _activeNode$rootPos : activeNode.pos;
-  var activeNodeContext = getNodeContext(view, activeNode.pos);
-  var rootNodeContext = getNodeContext(view, rootPos);
-  if (!activeNodeContext || !rootNodeContext) {
+var createBlockControlsSurfaceContextForPosition = exports.createBlockControlsSurfaceContextForPosition = function createBlockControlsSurfaceContextForPosition(state, targetPos, activeNode) {
+  var _activeNode$rootPos, _getNodeContext, _activeNode$rootNodeT;
+  var targetNodeContext = getNodeContext(state, targetPos);
+  if (!targetNodeContext) {
     return undefined;
   }
+  var activeNodeContext = activeNode ? getNodeContext(state, activeNode.pos) : undefined;
+  var rootPos = activeNode ? (_activeNode$rootPos = activeNode.rootPos) !== null && _activeNode$rootPos !== void 0 ? _activeNode$rootPos : activeNode.pos : targetPos;
+  var rootNodeContext = (_getNodeContext = getNodeContext(state, rootPos)) !== null && _getNodeContext !== void 0 ? _getNodeContext : targetNodeContext;
   return {
-    activeNode: _objectSpread(_objectSpread({}, activeNodeContext), {}, {
+    activeNode: activeNode && activeNodeContext ? _objectSpread(_objectSpread({}, activeNodeContext), {}, {
       rootPos: rootPos,
       rootType: {
         name: (_activeNode$rootNodeT = activeNode.rootNodeType) !== null && _activeNode$rootNodeT !== void 0 ? _activeNode$rootNodeT : rootNodeContext.type.name
       }
-    }),
+    }) : undefined,
     rootNode: rootNodeContext,
-    targetNode: target === 'active' ? activeNodeContext : rootNodeContext
+    targetNode: targetNodeContext
   };
+};
+var createBlockControlsSurfaceContext = exports.createBlockControlsSurfaceContext = function createBlockControlsSurfaceContext(view, activeNode) {
+  var _activeNode$rootPos2;
+  var target = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'root';
+  if (!activeNode) {
+    return undefined;
+  }
+  var rootPos = (_activeNode$rootPos2 = activeNode.rootPos) !== null && _activeNode$rootPos2 !== void 0 ? _activeNode$rootPos2 : activeNode.pos;
+  return createBlockControlsSurfaceContextForPosition(view.state, target === 'active' ? activeNode.pos : rootPos, activeNode);
 };