@atlaskit/editor-plugin-block-controls/dist/cjs/ui/block-controls-left-surface.js

Block controls plugin for @atlaskit/editor-core

/* block-controls-left-surface.tsx generated by @compiled/babel-plugin v3.0.2 */
"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 _blockControlUiContext = require("@atlaskit/editor-common/block-controls/block-control-ui-context");
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 _blockControlsSurfaceWithClsFix = require("../surface-lifecycle/block-controls-surface-with-cls-fix");
var _blockControlsSurfaceComponents = require("./block-controls-surface-components");
var _blockControlsSurfaceContext = require("./block-controls-surface-context");
var _visibilityContainer = require("./visibility-container");
var leftSurfaceHiddenWrapperStyles = null;
var leftSurfaceOuterStyles = null;
var leftSurfaceGutterStyles = {
  container: "_1f38ffwv _7cca15wb _lcxvglyw",
  row: "_1bahesu3 _lcxvglyw _w1y61wug _19vrglyw"
};

// Nested surfaces (e.g. a table inside an expand) can span the target node's full height and sit
// over controls rendered in the node's own gutter, such as the table row insert button. Let pointer
// events pass through the wrapper and row so those controls stay interactive, matching the top-level
// gutter behaviour without applying its container query sizing.
var nestedSurfacePointerEventsStyles = {
  container: "_lcxvglyw",
  row: "_lcxvglyw _w1y61wug"
};
var leftSurfaceRowStyles = null;

// Applied in addition to leftSurfaceRowStyles when the target node is sticky-eligible (e.g. long
// tables): the outer wrapper spans the node's full height (see `placement.height`), so the content
// 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;

// Keep in sync with STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER in ./consts (must be a static literal here)
var leftSurfaceStickyTableHeaderStyles = null;
var BlockControlsLeftSurfaceContent = function BlockControlsLeftSurfaceContent(_ref) {
  var api = _ref.api,
    components = _ref.components,
    forceVisibleOnMouseOut = _ref.forceVisibleOnMouseOut,
    placement = _ref.placement,
    source = _ref.source,
    surfaceContext = _ref.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';
  var shouldPassThroughNestedPointerEvents = !isTopLevel && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_nested_left_surface_pointer_fix');
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-editor-block-controls-surface": true,
    "data-editor-block-controls-side": "left",
    "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 per target node, from its runtime DOM geometry or from its CSS anchor.
    ,
    style: placement.style,
    className: (0, _runtime.ax)(["_kqswstnw _17c61i8t _1pbyb4wl", isTopLevel && leftSurfaceGutterStyles.container, shouldPassThroughNestedPointerEvents && nestedSurfacePointerEventsStyles.container])
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _runtime.ax)(["_zulpv77o _4cvr1h6o _1e0c1txw", isTopLevel && leftSurfaceGutterStyles.row, shouldPassThroughNestedPointerEvents && nestedSurfacePointerEventsStyles.row, isSticky && "_kqsw1if8 _154iu2gc", isSticky && (blockControlsContext === null || blockControlsContext === void 0 ? void 0 : blockControlsContext.targetNode.type.name) === 'table' && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_controls_sticky_header_fix') && "_154i1ejb"])
  }, /*#__PURE__*/_react.default.createElement(_blockControlsSurfaceComponents.BlockControlsVisibilityProvider, {
    shouldHideHoverControls: shouldHideHoverControls,
    useCssStyles: useCssStyles
  }, /*#__PURE__*/_react.default.createElement(_surfaceRenderer.SurfaceRenderer, {
    components: components,
    surface: _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE,
    surfaceContext: surfaceContext
  }))));
};
var BlockControlsLeftSurfaceWrapper = function BlockControlsLeftSurfaceWrapper(_ref2) {
  var children = _ref2.children,
    placement = _ref2.placement,
    source = _ref2.source,
    surfaceContext = _ref2.surfaceContext;
  var blockControlsContext = surfaceContext.get(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT);
  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",
    "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 per target node, from its runtime DOM geometry or from its CSS anchor.
    ,
    style: placement.style,
    className: (0, _runtime.ax)(["_kqswstnw _17c61i8t _1pbyb4wl", isTopLevel && leftSurfaceGutterStyles.container, "_3um015vq"])
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _runtime.ax)(["_zulpv77o _4cvr1h6o _1e0c1txw", isTopLevel && leftSurfaceGutterStyles.row, isSticky && "_kqsw1if8 _154iu2gc", isSticky && (blockControlsContext === null || blockControlsContext === void 0 ? void 0 : blockControlsContext.targetNode.type.name) === 'table' && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_controls_sticky_header_fix') && "_154i1ejb"])
  }, children));
};

/** Renders one left block-controls surface at a document position. */
var BlockControlsLeftSurface = exports.BlockControlsLeftSurface = function BlockControlsLeftSurface(_ref3) {
  var api = _ref3.api,
    components = _ref3.components,
    forceVisibleOnMouseOut = _ref3.forceVisibleOnMouseOut,
    placement = _ref3.placement,
    source = _ref3.source,
    surfaceContext = _ref3.surfaceContext;
  if (!placement) {
    return null;
  }
  if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_controls_cls_fix')) {
    return /*#__PURE__*/_react.default.createElement(_blockControlsSurfaceWithClsFix.BlockControlsSurfaceWithClsFix, {
      side: "left",
      SurfaceWrapper: BlockControlsLeftSurfaceWrapper,
      api: api,
      components: components,
      forceVisibleOnMouseOut: forceVisibleOnMouseOut,
      placement: placement,
      source: source,
      surfaceContext: surfaceContext
    });
  } else {
    return /*#__PURE__*/_react.default.createElement(BlockControlsLeftSurfaceContent, {
      api: api,
      components: components,
      forceVisibleOnMouseOut: forceVisibleOnMouseOut,
      placement: placement,
      source: source,
      surfaceContext: surfaceContext
    });
  }
};