@atlaskit/renderer
Version:
Renderer component
71 lines (69 loc) • 4.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("@emotion/react");
var _styles = require("@atlaskit/editor-common/styles");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _codeBlockButtonContainer = _interopRequireDefault(require("./codeBlockButtonContainer"));
/**
* @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 */
var codeBlockStyleOverrides = (0, _react.css)((0, _defineProperty2.default)({
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(_styles.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 = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(_styles.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 (0, _react.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, ((0, _expValEquals.expValEquals)('confluence_compact_text_format', 'isEnabled', true) || (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp')) && denseModeOverrides]
}, (0, _react.jsx)(_codeBlockButtonContainer.default, {
allowCopyToClipboard: allowCopyToClipboard,
allowWrapCodeBlock: allowWrapCodeBlock,
setWrapLongLines: setWrapLongLines,
text: text,
wrapLongLines: wrapLongLines
}), children);
};
var _default = exports.default = CodeBlockContainer;