UNPKG

@atlaskit/editor-plugin-block-controls

Version:

Block controls plugin for @atlaskit/editor-core

70 lines (68 loc) • 4.13 kB
/* block-controls-right-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.BlockControlsRightSurface = void 0; require("./block-controls-right-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 _partitionComponentsByPersistence = require("./utils/partition-components-by-persistence"); var _visibilityContainer = require("./visibility-container"); var rightSurfaceOuterStyles = null; var rightSurfaceRowStyles = null; // Applied in addition to rightSurfaceRowStyles 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 rightSurfaceStickyStyles = null; /** Renders one right block-controls surface at a document position. */ var BlockControlsRightSurface = exports.BlockControlsRightSurface = function BlockControlsRightSurface(_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 isSticky = placement.isSticky; return /*#__PURE__*/_react.default.createElement("div", { "data-editor-block-controls-surface": true, "data-editor-block-controls-side": "right", "data-testid": source === 'stored' ? 'block-controls-right-surface-stored' : source === 'active' ? 'block-controls-right-surface-active' : 'block-controls-right-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"]) }, /*#__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(_surfaceRenderer.SurfaceRenderer, { components: persistentComponents, surface: _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext: surfaceContext })), willRenderHoverOnly && /*#__PURE__*/_react.default.createElement(_visibilityContainer.VisibilityContainer, { api: api, controlSide: "right", forceVisibleOnMouseOut: forceVisibleOnMouseOut, shouldUseDisplayContents: true }, /*#__PURE__*/_react.default.createElement(_surfaceRenderer.SurfaceRenderer, { components: hoverOnlyComponents, surface: _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext: surfaceContext })))); };