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

package/dist/es2019/blockControlsPlugin.js

@@ -22,7 +22,7 @@ import { selectionPreservationPluginKey } from './pm-plugins/selection-preservat
 import { createSelectionPreservationPlugin } from './pm-plugins/selection-preservation/pm-plugin';
 import { expandAndUpdateSelection } from './pm-plugins/utils/expand-and-update-selection';
 import { selectNode } from './pm-plugins/utils/getSelection';
-import { BlockControlsSurface } from './ui/block-controls-surface';
+import { BlockControlsLeftSurfaces } from './ui/block-controls-left-surfaces';
 import { getBlockControlsSurfaceDragHandleComponents } from './ui/block-controls-surface-drag-handle-registration';
 import { GlobalStylesWrapper } from './ui/global-styles';
 import { SurfaceEditorViewContext } from './ui/surface-editor-view-context';
@@ -35,6 +35,7 @@ export const blockControlsPlugin = ({
   const rightSideControlsEnabled = (_config$rightSideCont = config === null || config === void 0 ? void 0 : config.rightSideControlsEnabled) !== null && _config$rightSideCont !== void 0 ? _config$rightSideCont : false;
   const quickInsertButtonEnabled = (_config$quickInsertBu = config === null || config === void 0 ? void 0 : config.quickInsertButtonEnabled) !== null && _config$quickInsertBu !== void 0 ? _config$quickInsertBu : true;
   const registryBlockControlsEnabled = isExperimentEnabled('platform_editor_block_control_migration');
+  const surfaceNodePositionsEnabled = registryBlockControlsEnabled && isExperimentEnabled('platform_editor_collapsible_headings');
   const legacyBlockControlsEnabled = !registryBlockControlsEnabled;
   if (registryBlockControlsEnabled) {
     var _api$uiControlRegistr;
@@ -122,7 +123,7 @@ export const blockControlsPlugin = ({
         plugin: ({
           getIntl,
           nodeViewPortalProviderAPI
-        }) => createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled)
+        }) => createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled, surfaceNodePositionsEnabled)
       }];
       if (editorExperiment('platform_editor_controls', 'variant1')) {
         pmPlugins.push({
@@ -418,6 +419,10 @@ export const blockControlsPlugin = ({
         isEditing: (_interactionTrackingP = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
         isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState10 = 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 = key.getState(editorState)) === null || _key$getState11 === void 0 ? void 0 : _key$getState11.surfaceNodePositions) !== null && _key$getState$surface !== void 0 ? _key$getState$surface : [];
+      }
       if (editorExperiment('platform_editor_controls', 'variant1')) {
         var _interactionTrackingP2, _interactionTrackingP3, _interactionTrackingP4;
         sharedState.isMouseOut = (_interactionTrackingP2 = (_interactionTrackingP3 = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP3 === void 0 ? void 0 : _interactionTrackingP3.isMouseOut) !== null && _interactionTrackingP2 !== void 0 ? _interactionTrackingP2 : false;
@@ -438,7 +443,7 @@ export const blockControlsPlugin = ({
         api: api
       }), registryBlockControlsEnabled && editorView && api ? /*#__PURE__*/React.createElement(SurfaceEditorViewContext.Provider, {
         value: editorView
-      }, /*#__PURE__*/React.createElement(BlockControlsSurface, {
+      }, /*#__PURE__*/React.createElement(BlockControlsLeftSurfaces, {
         api: api,
         editorView: editorView
       })) : null);

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

@@ -1,6 +1,7 @@
 import rafSchedule from 'raf-schd';
 import { getDocument } from '@atlaskit/browser-apis';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { BLOCK_CONTROLS_LEFT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { getNodeIdProvider } from '@atlaskit/editor-common/node-anchor';
 import { isMeasuring, startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
@@ -11,6 +12,7 @@ import { EDIT_AREA_ID } from '@atlaskit/editor-common/ui';
 import { isEmptyDocument } from '@atlaskit/editor-common/utils';
 import { PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { resolveSurface } from '@atlaskit/editor-ui-control-model/surface-renderer';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/utils/combine';
@@ -32,6 +34,7 @@ import { getMultiSelectAnalyticsAttributes } from './utils/analytics';
 import { AnchorRectCache, isAnchorSupported } from './utils/anchor-utils';
 import { selectNode } from './utils/getSelection';
 import { getSelectedSlicePosition } from './utils/selection';
+import { getSurfaceNodePositions, updateSurfaceNodePositions } from './utils/surface-node-positions';
 import { getTrMetadata } from './utils/transactions';
 export const key = new PluginKey('blockControls');
 const EDITOR_BLOCKS_DRAG_INIT = 'Editor Blocks Drag Initialization Time';
@@ -199,6 +202,7 @@ const destroyFn = (api, editorView) => {
 };
 const initialState = {
   decorations: DecorationSet.empty,
+  surfaceNodePositions: [],
   activeNode: undefined,
   isDragging: false,
   isMenuOpen: false,
@@ -227,14 +231,16 @@ const getDecorationAtPos = (state, decorations, pos, to) => {
   const nodeDecAtActivePos = nodeDecsAtActivePos.pop();
   return nodeDecAtActivePos;
 };
-export const apply = (api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled = false, quickInsertButtonEnabled = true, anchorRectCache, resizeObserverWidth, pragmaticCleanup) => {
+export const apply = (api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled = false, quickInsertButtonEnabled = true, anchorRectCache, resizeObserverWidth, pragmaticCleanup, resolvedSurface) => {
   var _api$limitedMode, _api$limitedMode$shar, _api$limitedMode$shar2, _meta$multiSelectDnD, _api$editorViewMode, _api$editorViewMode$s, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging2, _meta$isDragging3, _meta$toggleMenu, _meta$toggleMenu2, _meta$toggleMenu3, _meta$toggleMenu4, _meta$toggleMenu5, _meta$toggleMenu6, _meta$toggleMenu7, _meta$toggleMenu8, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
   let {
     activeNode,
     decorations,
     isResizerResizing,
-    multiSelectDnD
+    multiSelectDnD,
+    surfaceNodePositions
   } = currentState;
+  const previousActiveNode = activeNode;
   const {
     editorHeight,
     editorWidthLeft,
@@ -711,6 +717,18 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     var _latestActiveNode13, _latestActiveNode14;
     newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && flags.legacyDragHandleEnabled && findHandleDec(decorations, (_latestActiveNode13 = latestActiveNode) === null || _latestActiveNode13 === void 0 ? void 0 : _latestActiveNode13.pos, (_latestActiveNode14 = latestActiveNode) === null || _latestActiveNode14 === void 0 ? void 0 : _latestActiveNode14.pos).length === 0 ? null : latestActiveNode;
   }
+  if (flags.surfaceNodePositionsEnabled && resolvedSurface) {
+    surfaceNodePositions = updateSurfaceNodePositions({
+      activeNode: newActiveNode,
+      currentPositions: surfaceNodePositions,
+      from,
+      newState,
+      previousActiveNode,
+      resolvedSurface,
+      to,
+      tr
+    });
+  }
   let isMenuOpenNew = isMenuOpen;
   if (editorExperiment('platform_editor_block_menu', true)) {
     if (meta !== null && meta !== void 0 && meta.closeMenu) {
@@ -730,6 +748,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
   }
   return {
     decorations,
+    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,
@@ -753,7 +772,8 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     isSelectedViaDragHandle: isSelectedViaDragHandleNew
   };
 };
-export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled = false, quickInsertButtonEnabled = true, legacyDragHandleEnabled = true) => {
+export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled = false, quickInsertButtonEnabled = true, legacyDragHandleEnabled = true, surfaceNodePositionsEnabled = false) => {
+  var _api$uiControlRegistr, _api$uiControlRegistr2;
   const {
     formatMessage
   } = getIntl();
@@ -763,8 +783,10 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
   const toolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
   const flags = {
     legacyDragHandleEnabled,
+    surfaceNodePositionsEnabled,
     toolbarFlagsEnabled
   };
+  const resolvedSurface = surfaceNodePositionsEnabled ? resolveSurface((_api$uiControlRegistr = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(BLOCK_CONTROLS_LEFT_SURFACE)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [], BLOCK_CONTROLS_LEFT_SURFACE) : undefined;
   let anchorRectCache;
   if (!isAnchorSupported()) {
     anchorRectCache = new AnchorRectCache();
@@ -774,10 +796,13 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
   return new SafePlugin({
     key,
     state: {
-      init() {
-        return initialState;
+      init(_config, editorState) {
+        return {
+          ...initialState,
+          surfaceNodePositions: resolvedSurface ? getSurfaceNodePositions(editorState, resolvedSurface) : []
+        };
       },
-      apply: (tr, currentState, _, newState) => apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled, anchorRectCache, resizeObserverWidth, pragmaticCleanup)
+      apply: (tr, currentState, _, newState) => apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled, anchorRectCache, resizeObserverWidth, pragmaticCleanup, resolvedSurface)
     },
     props: {
       decorations: state => {

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

@@ -0,0 +1,56 @@
+import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls/block-control-ui-context';
+import { willComponentRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
+import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/types';
+import { createBlockControlsSurfaceContextForPosition } from '../../ui/block-controls-surface-context';
+const createSurfaceContextAtPosition = (state, position, activeNode) => {
+  const blockControlsContext = createBlockControlsSurfaceContextForPosition(state, position, activeNode);
+  return blockControlsContext ? createSurfaceContext(BLOCK_CONTROL_UI_CONTEXT, blockControlsContext) : undefined;
+};
+export const getSurfaceNodePositions = (state, resolvedSurface, activeNode, from = 0, to = state.doc.content.size) => {
+  const {
+    root,
+    childrenMap
+  } = resolvedSurface;
+  if (!root) {
+    return [];
+  }
+  const positions = [];
+  const start = Math.max(0, from);
+  const end = Math.min(state.doc.content.size, Math.max(start, to));
+  state.doc.nodesBetween(start, end, (node, position) => {
+    if (node.isBlock && willComponentRender(root, childrenMap, createSurfaceContextAtPosition(state, position, activeNode))) {
+      positions.push(position);
+    }
+  });
+  return positions;
+};
+const hasActiveNodeChanged = (previousActiveNode, activeNode) => (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);
+export const updateSurfaceNodePositions = ({
+  activeNode,
+  currentPositions,
+  from,
+  newState,
+  previousActiveNode,
+  resolvedSurface,
+  to,
+  tr
+}) => {
+  const activeNodeChanged = hasActiveNodeChanged(previousActiveNode, activeNode);
+  if (!tr.docChanged && !activeNodeChanged) {
+    return currentPositions;
+  }
+  const nextActiveNode = activeNode !== null && activeNode !== void 0 ? activeNode : undefined;
+  if (activeNodeChanged) {
+    return getSurfaceNodePositions(newState, resolvedSurface, nextActiveNode);
+  }
+  const {
+    root,
+    childrenMap
+  } = resolvedSurface;
+  const mappedPositions = currentPositions.map(position => tr.mapping.mapResult(position, -1)).filter(result => !result.deleted).map(result => result.pos).filter(position => {
+    const node = newState.doc.nodeAt(position);
+    return Boolean((node === null || node === void 0 ? void 0 : node.isBlock) && root && willComponentRender(root, childrenMap, createSurfaceContextAtPosition(newState, position, nextActiveNode)));
+  });
+  const changedPositions = getSurfaceNodePositions(newState, resolvedSurface, nextActiveNode, from - 1, to + 1);
+  return Array.from(new Set([...mappedPositions, ...changedPositions])).sort((first, second) => first - second);
+};

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

@@ -0,0 +1,25 @@
+/** Combines hover-driven and stored surface positions into one deduplicated list. */
+export const getBlockControlsLeftSurfaceTargets = (activeNode, storedPositions) => {
+  const targetsByPosition = new Map();
+  for (const position of storedPositions) {
+    targetsByPosition.set(position, {
+      position,
+      source: 'stored'
+    });
+  }
+  if (activeNode) {
+    var _activeNode$rootPos;
+    const 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((first, second) => first.position - second.position);
+};

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

@@ -0,0 +1,39 @@
+/* block-controls-left-surface.tsx generated by @compiled/babel-plugin v2.0.0 */
+import "./block-controls-left-surface.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+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 { VisibilityContainer } from './visibility-container';
+const leftSurfaceStyles = null;
+/** Renders one left block-controls surface at a document position. */
+export const BlockControlsLeftSurface = ({
+  api,
+  components,
+  forceVisibleOnMouseOut,
+  placement,
+  source,
+  surfaceContext
+}) => {
+  if (!placement || !willSurfaceRender(components, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext)) {
+    return null;
+  }
+  const surface = /*#__PURE__*/React.createElement(SurfaceRenderer, {
+    components: components,
+    surface: BLOCK_CONTROLS_LEFT_SURFACE,
+    surfaceContext: surfaceContext
+  });
+  return /*#__PURE__*/React.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: ax(["_zulpv77o _4cvr1h6o _1e0c1txw _kqswstnw _1pbyb4wl"])
+  }, /*#__PURE__*/React.createElement(VisibilityContainer, {
+    api: api,
+    controlSide: "left",
+    forceVisibleOnMouseOut: forceVisibleOnMouseOut,
+    shouldUseDisplayContents: true
+  }, surface));
+};

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

@@ -0,0 +1,181 @@
+/* block-controls-left-surfaces.tsx generated by @compiled/babel-plugin v2.0.0 */
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { bind } from 'bind-event-listener';
+import { getDocument } from '@atlaskit/browser-apis';
+import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls/block-control-ui-context';
+import { BLOCK_CONTROLS_LEFT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/types';
+import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
+import { createBlockControlsSurfaceContext, createBlockControlsSurfaceContextForPosition } from './block-controls-surface-context';
+import { BlockControlsLeftSurface } from './block-controls-left-surface';
+import { getBlockControlsLeftSurfaceTargets } from './block-controls-left-surface-targets';
+import { getNodeContentElement } from './utils/get-node-content-element';
+import { getAbsoluteSurfacePlacement, getSurfacePlacement } from './utils/get-surface-placement';
+const EMPTY_SURFACE_POSITIONS = [];
+const EMPTY_SURFACE_COMPONENTS = [];
+export const BlockControlsLeftSurfaces = ({
+  api,
+  editorView
+}) => {
+  var _api$uiControlRegistr, _api$uiControlRegistr2;
+  const {
+    activeNode,
+    surfaceNodePositions
+  } = useSharedPluginStateWithSelector(api, ['blockControls'], states => {
+    var _states$blockControls, _states$blockControls2, _states$blockControls3;
+    return {
+      activeNode: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.activeNode,
+      surfaceNodePositions: (_states$blockControls2 = (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.surfaceNodePositions) !== null && _states$blockControls2 !== void 0 ? _states$blockControls2 : EMPTY_SURFACE_POSITIONS
+    };
+  });
+  const components = (_api$uiControlRegistr = (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(BLOCK_CONTROLS_LEFT_SURFACE)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : EMPTY_SURFACE_COMPONENTS;
+  const targets = useMemo(() => getBlockControlsLeftSurfaceTargets(activeNode, surfaceNodePositions), [activeNode, surfaceNodePositions]);
+  const surfaces = useMemo(() => targets.flatMap(target => {
+    const context = target.source === 'stored' ? createBlockControlsSurfaceContextForPosition(editorView.state, target.position, activeNode) : createBlockControlsSurfaceContext(editorView, activeNode, target.source);
+    if (!context) {
+      return [];
+    }
+    const surfaceContext = createSurfaceContext(BLOCK_CONTROL_UI_CONTEXT, context);
+    return [{
+      ...target,
+      blockControlsContext: context,
+      surfaceContext
+    }];
+  }), [activeNode, editorView, targets]);
+  const [placements, setPlacements] = useState(new Map());
+  const animationFrameRef = useRef(undefined);
+  useLayoutEffect(() => {
+    var _getDocument;
+    if (surfaces.length === 0) {
+      setPlacements(new Map());
+      return;
+    }
+    const measurementTargets = surfaces.flatMap(({
+      blockControlsContext,
+      position
+    }) => {
+      const targetNodeElement = editorView.nodeDOM(blockControlsContext.targetNode.pos);
+      const targetElementRoot = targetNodeElement instanceof HTMLElement ? targetNodeElement : targetNodeElement === null || targetNodeElement === void 0 ? void 0 : targetNodeElement.parentElement;
+      if (!targetElementRoot) {
+        return [];
+      }
+      return [{
+        blockControlsContext,
+        position,
+        targetElement: getNodeContentElement(targetElementRoot, blockControlsContext.targetNode.type.name),
+        targetElementRoot
+      }];
+    });
+    const offsetParent = editorView.dom.offsetParent;
+    const isDocumentOffsetParent = !offsetParent || offsetParent === ((_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.body);
+    const scrollingOffsetParent = offsetParent instanceof HTMLElement && !isDocumentOffsetParent ? offsetParent : undefined;
+    const updatePositions = () => {
+      var _scrollingOffsetParen, _scrollingOffsetParen2;
+      animationFrameRef.current = undefined;
+      const offsetParentRect = offsetParent === null || offsetParent === void 0 ? void 0 : offsetParent.getBoundingClientRect();
+      const offsetParentScrollTop = (_scrollingOffsetParen = scrollingOffsetParent === null || scrollingOffsetParent === void 0 ? void 0 : scrollingOffsetParent.scrollTop) !== null && _scrollingOffsetParen !== void 0 ? _scrollingOffsetParen : window.scrollY;
+      const offsetParentScrollLeft = (_scrollingOffsetParen2 = scrollingOffsetParent === null || scrollingOffsetParent === void 0 ? void 0 : scrollingOffsetParent.scrollLeft) !== null && _scrollingOffsetParen2 !== void 0 ? _scrollingOffsetParen2 : window.scrollX;
+      const nextPlacements = new Map();
+      for (const {
+        blockControlsContext,
+        position,
+        targetElement,
+        targetElementRoot
+      } of measurementTargets) {
+        var _targetElementRoot$ge;
+        if (!targetElementRoot.isConnected || !targetElement.isConnected) {
+          continue;
+        }
+        const placement = getSurfacePlacement({
+          layout: (_targetElementRoot$ge = targetElementRoot.getAttribute('layout')) !== null && _targetElementRoot$ge !== void 0 ? _targetElementRoot$ge : '',
+          nodeRect: targetElement.getBoundingClientRect(),
+          nodeType: blockControlsContext.targetNode.type.name,
+          nodeTypeWithLevel: getNodeTypeWithLevel(blockControlsContext.targetNode.node),
+          parentNodeType: blockControlsContext.targetNode.parentType === 'doc' ? undefined : blockControlsContext.targetNode.parentType
+        });
+        nextPlacements.set(position, getAbsoluteSurfacePlacement({
+          offsetParentRect,
+          offsetParentScrollLeft,
+          offsetParentScrollTop,
+          placement
+        }));
+      }
+      setPlacements(nextPlacements);
+    };
+    const schedulePositionUpdate = () => {
+      if (animationFrameRef.current === undefined) {
+        animationFrameRef.current = requestAnimationFrame(updatePositions);
+      }
+    };
+    updatePositions();
+    const resizeObserver = new ResizeObserver(schedulePositionUpdate);
+    const observedElements = new Set([editorView.dom]);
+    for (const {
+      targetElement
+    } of measurementTargets) {
+      observedElements.add(targetElement);
+    }
+    if (offsetParent instanceof HTMLElement) {
+      observedElements.add(offsetParent);
+    }
+    observedElements.forEach(element => resizeObserver.observe(element));
+    const unbindWindowResize = bind(window, {
+      type: 'resize',
+      listener: schedulePositionUpdate
+    });
+    const unbindWindowScroll = bind(window, {
+      type: 'scroll',
+      listener: schedulePositionUpdate,
+      options: {
+        capture: true,
+        passive: true
+      }
+    });
+    const visualViewport = window.visualViewport;
+    const unbindVisualViewportResize = visualViewport ? bind(visualViewport, {
+      type: 'resize',
+      listener: schedulePositionUpdate
+    }) : undefined;
+    const unbindVisualViewportScroll = visualViewport ? bind(visualViewport, {
+      type: 'scroll',
+      listener: schedulePositionUpdate
+    }) : undefined;
+    const unbindTransitionEnd = bind(editorView.dom, {
+      type: 'transitionend',
+      listener: schedulePositionUpdate,
+      options: {
+        capture: true
+      }
+    });
+    return () => {
+      if (animationFrameRef.current !== undefined) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = undefined;
+      }
+      resizeObserver.disconnect();
+      unbindWindowResize();
+      unbindWindowScroll();
+      unbindVisualViewportResize === null || unbindVisualViewportResize === void 0 ? void 0 : unbindVisualViewportResize();
+      unbindVisualViewportScroll === null || unbindVisualViewportScroll === void 0 ? void 0 : unbindVisualViewportScroll();
+      unbindTransitionEnd();
+    };
+  }, [editorView, surfaces]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, surfaces.map(({
+    position,
+    source,
+    surfaceContext
+  }) => {
+    var _activeNode$handleOpt;
+    return /*#__PURE__*/React.createElement(BlockControlsLeftSurface, {
+      api: api,
+      components: components,
+      forceVisibleOnMouseOut: Boolean(activeNode === null || activeNode === void 0 ? void 0 : (_activeNode$handleOpt = activeNode.handleOptions) === null || _activeNode$handleOpt === void 0 ? void 0 : _activeNode$handleOpt.isFocused),
+      key: position,
+      placement: placements.get(position),
+      source: source,
+      surfaceContext: surfaceContext
+    });
+  }));
+};

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

@@ -1,9 +1,9 @@
-const getNodeContext = (view, pos) => {
-  const node = view.state.doc.nodeAt(pos);
+const getNodeContext = (state, pos) => {
+  const node = state.doc.nodeAt(pos);
   if (!node) {
     return undefined;
   }
-  const $pos = view.state.doc.resolve(pos);
+  const $pos = state.doc.resolve(pos);
   const ancestors = [];
   for (let depth = 0; depth <= $pos.depth; depth++) {
     const ancestor = $pos.node(depth);
@@ -26,26 +26,32 @@ const getNodeContext = (view, pos) => {
     }
   };
 };
-export const createBlockControlsSurfaceContext = (view, activeNode, target = 'root') => {
-  var _activeNode$rootPos, _activeNode$rootNodeT;
-  if (!activeNode) {
-    return undefined;
-  }
-  const rootPos = (_activeNode$rootPos = activeNode.rootPos) !== null && _activeNode$rootPos !== void 0 ? _activeNode$rootPos : activeNode.pos;
-  const activeNodeContext = getNodeContext(view, activeNode.pos);
-  const rootNodeContext = getNodeContext(view, rootPos);
-  if (!activeNodeContext || !rootNodeContext) {
+export const createBlockControlsSurfaceContextForPosition = (state, targetPos, activeNode) => {
+  var _activeNode$rootPos, _getNodeContext, _activeNode$rootNodeT;
+  const targetNodeContext = getNodeContext(state, targetPos);
+  if (!targetNodeContext) {
     return undefined;
   }
+  const activeNodeContext = activeNode ? getNodeContext(state, activeNode.pos) : undefined;
+  const rootPos = activeNode ? (_activeNode$rootPos = activeNode.rootPos) !== null && _activeNode$rootPos !== void 0 ? _activeNode$rootPos : activeNode.pos : targetPos;
+  const rootNodeContext = (_getNodeContext = getNodeContext(state, rootPos)) !== null && _getNodeContext !== void 0 ? _getNodeContext : targetNodeContext;
   return {
-    activeNode: {
+    activeNode: activeNode && activeNodeContext ? {
       ...activeNodeContext,
       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
   };
+};
+export const createBlockControlsSurfaceContext = (view, activeNode, target = 'root') => {
+  var _activeNode$rootPos2;
+  if (!activeNode) {
+    return undefined;
+  }
+  const rootPos = (_activeNode$rootPos2 = activeNode.rootPos) !== null && _activeNode$rootPos2 !== void 0 ? _activeNode$rootPos2 : activeNode.pos;
+  return createBlockControlsSurfaceContextForPosition(view.state, target === 'active' ? activeNode.pos : rootPos, activeNode);
 };

package/dist/esm/blockControlsPlugin.js

@@ -26,7 +26,7 @@ import { selectionPreservationPluginKey } from './pm-plugins/selection-preservat
 import { createSelectionPreservationPlugin } from './pm-plugins/selection-preservation/pm-plugin';
 import { expandAndUpdateSelection as _expandAndUpdateSelection } from './pm-plugins/utils/expand-and-update-selection';
 import { selectNode } from './pm-plugins/utils/getSelection';
-import { BlockControlsSurface } from './ui/block-controls-surface';
+import { BlockControlsLeftSurfaces } from './ui/block-controls-left-surfaces';
 import { getBlockControlsSurfaceDragHandleComponents } from './ui/block-controls-surface-drag-handle-registration';
 import { GlobalStylesWrapper } from './ui/global-styles';
 import { SurfaceEditorViewContext } from './ui/surface-editor-view-context';
@@ -38,6 +38,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
   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 = isExperimentEnabled('platform_editor_block_control_migration');
+  var surfaceNodePositionsEnabled = registryBlockControlsEnabled && isExperimentEnabled('platform_editor_collapsible_headings');
   var legacyBlockControlsEnabled = !registryBlockControlsEnabled;
   if (registryBlockControlsEnabled) {
     var _api$uiControlRegistr;
@@ -121,7 +122,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         plugin: function plugin(_ref2) {
           var getIntl = _ref2.getIntl,
             nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
-          return createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled);
+          return createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled, surfaceNodePositionsEnabled);
         }
       }];
       if (editorExperiment('platform_editor_controls', 'variant1')) {
@@ -423,6 +424,10 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         isEditing: (_interactionTrackingP = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
         isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState10 = 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 = key.getState(editorState)) === null || _key$getState11 === void 0 ? void 0 : _key$getState11.surfaceNodePositions) !== null && _key$getState$surface !== void 0 ? _key$getState$surface : [];
+      }
       if (editorExperiment('platform_editor_controls', 'variant1')) {
         var _interactionTrackingP2, _interactionTrackingP3, _interactionTrackingP4;
         sharedState.isMouseOut = (_interactionTrackingP2 = (_interactionTrackingP3 = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP3 === void 0 ? void 0 : _interactionTrackingP3.isMouseOut) !== null && _interactionTrackingP2 !== void 0 ? _interactionTrackingP2 : false;
@@ -442,7 +447,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         api: api
       }), registryBlockControlsEnabled && editorView && api ? /*#__PURE__*/React.createElement(SurfaceEditorViewContext.Provider, {
         value: editorView
-      }, /*#__PURE__*/React.createElement(BlockControlsSurface, {
+      }, /*#__PURE__*/React.createElement(BlockControlsLeftSurfaces, {
         api: api,
         editorView: editorView
       })) : null);