UNPKG

@atlaskit/editor-plugin-block-controls

Version:

Block controls plugin for @atlaskit/editor-core

69 lines (68 loc) 3.92 kB
/* block-controls-left-surface.tsx generated by @compiled/babel-plugin v3.0.2 */ import "./block-controls-left-surface.compiled.css"; import { ax, ix } from "@compiled/react/runtime"; import React from 'react'; 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 { SurfaceRenderer, willSurfaceRender } from '@atlaskit/editor-ui-control-model/surface-renderer'; import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled'; import { getBlockControlsSurfaceControlSide } from './block-controls-surface-context'; import { partitionComponentsByPersistence } from './utils/partition-components-by-persistence'; import { VisibilityContainer } from './visibility-container'; const leftSurfaceOuterStyles = null; const 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). const leftSurfaceStickyStyles = 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 { hoverOnlyComponents, persistentComponents } = partitionComponentsByPersistence(components, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext); const willRenderPersistent = willSurfaceRender(persistentComponents, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext); const willRenderHoverOnly = willSurfaceRender(hoverOnlyComponents, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext); const isSticky = placement.isSticky; return /*#__PURE__*/React.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: ax(["_kqswstnw _17c61i8t _1pbyb4wl"]) }, /*#__PURE__*/React.createElement("div", { className: ax(["_zulpv77o _4cvr1h6o _1e0c1txw", isSticky && "_kqsw1if8 _154iu2gc"]) }, willRenderHoverOnly && /*#__PURE__*/React.createElement(VisibilityContainer, { api: api, controlSide: getBlockControlsSurfaceControlSide(surfaceContext.get(BLOCK_CONTROL_UI_CONTEXT), isExperimentEnabled('platform_editor_controls_reliable_anchor')), forceVisibleOnMouseOut: forceVisibleOnMouseOut, shouldUseDisplayContents: true }, /*#__PURE__*/React.createElement(SurfaceRenderer, { components: hoverOnlyComponents, surface: BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext: surfaceContext })), willRenderPersistent && /*#__PURE__*/React.createElement(VisibilityContainer, { api: api, controlSide: getBlockControlsSurfaceControlSide(surfaceContext.get(BLOCK_CONTROL_UI_CONTEXT), isExperimentEnabled('platform_editor_controls_reliable_anchor')), forceVisibleOnMouseOut: forceVisibleOnMouseOut, isPersistent: true, shouldUseDisplayContents: true }, /*#__PURE__*/React.createElement(SurfaceRenderer, { components: persistentComponents, surface: BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext: surfaceContext })))); };