@atlaskit/renderer
Version:
Renderer component
100 lines • 4.25 kB
JavaScript
/**
* @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';
const codeBlockStyleOverrides = css({
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
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
[`${CodeBlockSharedCssClassName.DS_CODEBLOCK}`]: {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
fontSize: `${14 / 16}rem`,
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: '1.5rem',
backgroundImage: `linear-gradient(
to right,
${"var(--ds-background-neutral, #0515240F)"} ${"var(--ds-space-300, 24px)"},
transparent ${"var(--ds-space-300, 24px)"}
),linear-gradient(
to right,
${"var(--ds-surface-raised, #FFFFFF)"} ${"var(--ds-space-300, 24px)"},
transparent ${"var(--ds-space-300, 24px)"}
),linear-gradient(
to left,
${"var(--ds-background-neutral, #0515240F)"} ${"var(--ds-space-100, 8px)"},
transparent ${"var(--ds-space-100, 8px)"}
),linear-gradient(
to left,
${"var(--ds-surface-raised, #FFFFFF)"} ${"var(--ds-space-100, 8px)"},
transparent ${"var(--ds-space-100, 8px)"}
),linear-gradient(
to left,
${"var(--ds-shadow-overflow-spread, #1E1F2129)"} 0,
${"var(--ds-UNSAFE-transparent, transparent)"} ${"var(--ds-space-100, 8px)"}
),linear-gradient(
to left,
${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"} 0,
${"var(--ds-UNSAFE-transparent, transparent)"} ${"var(--ds-space-100, 8px)"}
),linear-gradient(
to right,
${"var(--ds-shadow-overflow-spread, #1E1F2129)"} 0,
${"var(--ds-UNSAFE-transparent, transparent)"} ${"var(--ds-space-100, 8px)"}
),linear-gradient(
to right,
${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"} 0,
${"var(--ds-UNSAFE-transparent, transparent)"} ${"var(--ds-space-100, 8px)"}
)`,
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'
}
});
const denseModeOverrides = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
[`${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'
}
});
const CodeBlockContainer = ({
allowCopyToClipboard,
allowWrapCodeBlock,
children,
className,
localId,
setWrapLongLines,
text,
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;