@atlaskit/renderer
Version:
Renderer component
105 lines (101 loc) • 5.23 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = Breakout;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = require("@emotion/react");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _consts = require("../../consts");
/**
* @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 */
// Legacy centering (breaks position: sticky in nested content).
var legacyWrapperStyles = (0, _react.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(_editorSharedStyles.blockNodesVerticalMargin, " 0"),
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginLeft: '50%',
transform: 'translateX(-50%)'
});
var flexWrapperStyles = (0, _react.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(_editorSharedStyles.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 = (0, _react.css)({
flexShrink: 0
});
var getWidth = function getWidth(width, mode) {
if ((0, _experiments.editorExperiment)('advanced_layouts', true) && width) {
return "min(".concat(width, "px, var(--ak-editor--breakout-container-without-gutter-width))");
} else {
if ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) {
if (mode === 'max' || typeof width === 'number' && width >= _editorSharedStyles.akEditorFullWidthLayoutWidth) {
return "min(".concat(_editorSharedStyles.akEditorMaxLayoutWidth, "px, var(--ak-editor--breakout-container-without-gutter-width))");
}
}
if (mode === 'full-width') {
return "min(".concat(_editorSharedStyles.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.
*/
function Breakout(props) {
var width = getWidth('width' in props ? props.width : null, props.mode);
var useStickySafeCentering = (0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true);
if (useStickySafeCentering) {
return (0, _react.jsx)("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
className: _consts.RendererCssClassName.STICKY_SAFE_BREAKOUT_WRAPPER + ' ' + _consts.RendererCssClassName.FLEX_CENTER_WRAPPER,
css: flexWrapperStyles
}, (0, _react.jsx)("div", (0, _extends2.default)({
css: innerWrapperStyles
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
,
className: "".concat(_consts.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
}, (0, _experiments.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 (0, _react.jsx)("div", (0, _extends2.default)({
css: legacyWrapperStyles,
"data-mode": props.mode
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, (0, _experiments.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);
}