@atlaskit/renderer
Version:
Renderer component
98 lines (95 loc) • 4.77 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
/**
* @jsxRuntime classic
* @jsx jsx
*/
/* eslint-disable @typescript-eslint/consistent-type-imports, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic */
import { jsx, css } from '@emotion/react';
import { akEditorFullWidthLayoutWidth, akEditorMaxLayoutWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { RendererCssClassName } from '../../consts';
// Legacy centering (breaks position: sticky in nested content).
var legacyWrapperStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
margin: "".concat(blockNodesVerticalMargin, " 0"),
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginLeft: '50%',
transform: 'translateX(-50%)'
});
var flexWrapperStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
margin: "".concat(blockNodesVerticalMargin, " 0")
});
// Flex item: no vertical margin so flex container height = content height (matches legacy single-wrapper height).
// flexShrink: 0 so the inner div keeps its width (matches legacy behaviour; flex items default to flex-shrink: 1).
var innerWrapperStyles = css({
flexShrink: 0
});
var getWidth = function getWidth(width, mode) {
if (editorExperiment('advanced_layouts', true) && width) {
return "min(".concat(width, "px, var(--ak-editor--breakout-container-without-gutter-width))");
} else {
if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) {
if (mode === 'max' || typeof width === 'number' && width >= akEditorFullWidthLayoutWidth) {
return "min(".concat(akEditorMaxLayoutWidth, "px, var(--ak-editor--breakout-container-without-gutter-width))");
}
}
if (mode === 'full-width') {
return "min(".concat(akEditorFullWidthLayoutWidth, "px, var(--ak-editor--breakout-container-without-gutter-width))");
}
if (mode === 'wide') {
return "min(var(--ak-editor--breakout-wide-layout-width), var(--ak-editor--breakout-container-without-gutter-width))";
}
}
};
/**
* React component that renders a breakout mark with dynamic width based on editor layout (wide or full-width).
*
* @param props - Breakout mark attrs, such as mode (wide or full-width).
* @returns The rendered breakout mark as a React element.
*/
export default function Breakout(props) {
var width = getWidth('width' in props ? props.width : null, props.mode);
var useStickySafeCentering = expValEquals('platform_editor_flex_based_centering', 'isEnabled', true);
if (useStickySafeCentering) {
return jsx("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
className: RendererCssClassName.STICKY_SAFE_BREAKOUT_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER,
css: flexWrapperStyles
}, jsx("div", _extends({
css: innerWrapperStyles
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
,
className: "".concat(RendererCssClassName.STICKY_SAFE_BREAKOUT_INNER, " fabric-editor-breakout-mark fabric-editor-block-mark"),
"data-mode": props.mode
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, editorExperiment('advanced_layouts', true) && {
'data-has-width': !!props.width,
'data-width': props.width
}, {
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
style: {
width: width
}
}), props.children));
}
return jsx("div", _extends({
css: legacyWrapperStyles,
"data-mode": props.mode
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, editorExperiment('advanced_layouts', true) && {
'data-has-width': !!props.width,
'data-width': props.width
}, {
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
style: {
width: getWidth('width' in props ? props.width : null, props.mode)
}
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: "fabric-editor-breakout-mark fabric-editor-block-mark"
}), props.children);
}