@atlaskit/renderer
Version:
Renderer component
63 lines • 4.38 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
/**
* @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 { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import CodeBlockButtonContainer from './codeBlockButtonContainer';
var codeBlockStyleOverrides = css(_defineProperty({
tabSize: 4,
backgroundColor: "var(--ds-surface-raised, #FFFFFF)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
button: {
opacity: 0,
transition: 'opacity 0.2s ease 0s'
},
'&:hover': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
button: {
opacity: 1
}
}
}, "".concat(CodeBlockSharedCssClassName.DS_CODEBLOCK), {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
fontSize: "".concat(14 / 16, "rem"),
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: '1.5rem',
backgroundImage: "linear-gradient(\n\t\t\tto right,\n\t\t\t".concat("var(--ds-background-neutral, #0515240F)", " ", "var(--ds-space-300, 24px)", ",\n\t\t\ttransparent ", "var(--ds-space-300, 24px)", "\n\t\t\t),linear-gradient(\n\t\t\tto right,\n\t\t\t", "var(--ds-surface-raised, #FFFFFF)", " ", "var(--ds-space-300, 24px)", ",\n\t\t\ttransparent ", "var(--ds-space-300, 24px)", "\n\t\t\t),linear-gradient(\n\t\t\tto left,\n\t\t\t", "var(--ds-background-neutral, #0515240F)", " ", "var(--ds-space-100, 8px)", ",\n\t\t\ttransparent ", "var(--ds-space-100, 8px)", "\n\t\t\t),linear-gradient(\n\t\t\tto left,\n\t\t\t", "var(--ds-surface-raised, #FFFFFF)", " ", "var(--ds-space-100, 8px)", ",\n\t\t\ttransparent ", "var(--ds-space-100, 8px)", "\n\t\t\t),linear-gradient(\n\t\t\tto left,\n\t\t\t", "var(--ds-shadow-overflow-spread, #1E1F2129)", " 0,\n\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", " ", "var(--ds-space-100, 8px)", "\n\t\t\t),linear-gradient(\n\t\t\tto left,\n\t\t\t", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", " 0,\n\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", " ", "var(--ds-space-100, 8px)", "\n\t\t\t),linear-gradient(\n\t\t\tto right,\n\t\t\t", "var(--ds-shadow-overflow-spread, #1E1F2129)", " 0,\n\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", " ", "var(--ds-space-100, 8px)", "\n\t\t\t),linear-gradient(\n\t\t\tto right,\n\t\t\t", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", " 0,\n\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", " ", "var(--ds-space-100, 8px)", "\n\t\t\t)"),
backgroundAttachment: 'local, local, local, local, scroll, scroll, scroll, scroll',
backgroundPosition: '0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0'
}));
var denseModeOverrides = css(_defineProperty({}, "".concat(CodeBlockSharedCssClassName.DS_CODEBLOCK), {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
fontSize: '0.875em',
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: '1.5em'
}));
var CodeBlockContainer = function CodeBlockContainer(_ref) {
var allowCopyToClipboard = _ref.allowCopyToClipboard,
allowWrapCodeBlock = _ref.allowWrapCodeBlock,
children = _ref.children,
className = _ref.className,
localId = _ref.localId,
setWrapLongLines = _ref.setWrapLongLines,
text = _ref.text,
wrapLongLines = _ref.wrapLongLines;
return jsx("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: className,
"data-local-id": localId,
css: [codeBlockStyleOverrides, (expValEquals('confluence_compact_text_format', 'isEnabled', true) || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp')) && denseModeOverrides]
}, jsx(CodeBlockButtonContainer, {
allowCopyToClipboard: allowCopyToClipboard,
allowWrapCodeBlock: allowWrapCodeBlock,
setWrapLongLines: setWrapLongLines,
text: text,
wrapLongLines: wrapLongLines
}), children);
};
export default CodeBlockContainer;