@atlaskit/editor-plugin-block-controls/dist/esm/surface-lifecycle/block-controls-surfaces.js

Block controls plugin for @atlaskit/editor-core

import React, { memo, useLayoutEffect, useMemo, useSyncExternalStore } from 'react';
import { isCSSAnchorSupported } from '@atlaskit/editor-common/styles/native-anchor';
import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
import { BlockControlsLeftSurface } from '../ui/block-controls-left-surface';
import { BlockControlsRightSurface } from '../ui/block-controls-right-surface';
import { getAnchoredLeftGutterSurfacePlacement, getAnchoredSurfacePlacement } from '../ui/utils/get-surface-placement';
import { getSurfaceLifecycle } from './surface-lifecycle';
import { getSurfaceKey, useMeasuredSurfacePlacements } from './use-measured-surface-placements';
var CommittedSurface = /*#__PURE__*/memo(function (_ref) {
  var api = _ref.api,
    descriptor = _ref.descriptor,
    side = _ref.side,
    forceVisibleOnMouseOut = _ref.forceVisibleOnMouseOut,
    measuredPlacement = _ref.measuredPlacement;
  var anchorName = descriptor.anchorName,
    blockControlsContext = descriptor.blockControlsContext,
    isTopLevel = descriptor.isTopLevel;
  var nodeType = blockControlsContext.targetNode.type.name;
  var nodeTypeWithLevel = getNodeTypeWithLevel(blockControlsContext.targetNode.node);
  var layout = blockControlsContext.targetNode.node.attrs.layout;
  var parentNodeType = blockControlsContext.targetNode.parentType === 'doc' ? undefined : blockControlsContext.targetNode.parentType;
  var anchoredPlacement = useMemo(function () {
    if (!isCSSAnchorSupported()) {
      return undefined;
    }
    var options = {
      anchorName: anchorName,
      nodeType: nodeType,
      nodeTypeWithLevel: nodeTypeWithLevel,
      layout: layout,
      parentNodeType: parentNodeType,
      side: side
    };
    return side === 'left' && isTopLevel ? getAnchoredLeftGutterSurfacePlacement(options) : getAnchoredSurfacePlacement(options);
  }, [anchorName, nodeType, nodeTypeWithLevel, layout, parentNodeType, side, isTopLevel]);
  var Surface = side === 'left' ? BlockControlsLeftSurface : BlockControlsRightSurface;
  return /*#__PURE__*/React.createElement(Surface, {
    api: api,
    components: descriptor.surfaceComponents,
    forceVisibleOnMouseOut: forceVisibleOnMouseOut,
    placement: anchoredPlacement !== null && anchoredPlacement !== void 0 ? anchoredPlacement : measuredPlacement,
    source: descriptor.source,
    surfaceContext: descriptor.surfaceContext
  });
});
export var CommittedBlockControlsSurfaces = function CommittedBlockControlsSurfaces(props) {
  var lifecycle = getSurfaceLifecycle(props.editorView);
  var snapshot = useSyncExternalStore(lifecycle.subscribe, lifecycle.getSnapshot, function () {
    return undefined;
  });
  var measuredPlacements = useMeasuredSurfacePlacements(props.editorView, snapshot === null || snapshot === void 0 ? void 0 : snapshot.left, snapshot === null || snapshot === void 0 ? void 0 : snapshot.right);
  useLayoutEffect(function () {
    if (snapshot) {
      lifecycle.acknowledge(snapshot.revision);
    }
  }, [lifecycle, snapshot]);
  if (!snapshot) {
    return null;
  }
  return /*#__PURE__*/React.createElement(React.Fragment, null, ['left', 'right'].flatMap(function (side) {
    return snapshot[side].map(function (descriptor) {
      return /*#__PURE__*/React.createElement(CommittedSurface, {
        key: getSurfaceKey(side, descriptor),
        api: props.api,
        descriptor: descriptor,
        side: side,
        forceVisibleOnMouseOut: snapshot.forceVisibleOnMouseOut,
        measuredPlacement: measuredPlacements.get(getSurfaceKey(side, descriptor))
      });
    });
  }));
};