@atlaskit/renderer
Version:
Renderer component
195 lines (193 loc) • 10.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getLightWeightCodeBlockStylesForRootRendererStyleSheet = exports.default = exports.LightWeightCodeBlockCssClassName = void 0;
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _styles = require("@atlaskit/editor-common/styles");
var _useBidiWarnings2 = require("../../../hooks/use-bidi-warnings");
var _consts = require("../../../../consts");
var _templateObject;
/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var codeBlockSharedStyles = (0, _react2.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED, "\n\t\t> .").concat(_styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, "\n\t\t> .").concat(_styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
marginRight: "var(--ds-space-100, 8px)",
code: {
display: 'block',
wordBreak: 'break-word',
whiteSpace: 'pre-wrap'
}
}), ".".concat(_styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, "\n\t\t> .").concat(_styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
display: 'flex',
flex: 1,
code: {
flexGrow: 1,
whiteSpace: 'pre'
}
}), ".".concat(_styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
position: 'relative',
backgroundColor: "var(--ds-surface-raised, #FFFFFF)",
borderRadius: "var(--ds-radius-small, 3px)",
margin: "".concat(_editorSharedStyles.blockNodesVerticalMargin, " 0 0 0"),
fontFamily: "var(--ds-font-family-code, \"Atlassian Mono\", ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
minWidth: "".concat(_editorSharedStyles.akEditorTableCellMinWidth, "px"),
cursor: 'pointer',
clear: 'both',
'--ds--code--bg-color': 'transparent',
'.code-block-gutter-pseudo-element::before': {
content: '"attr(data-label)"'
},
/* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */
whiteSpace: 'normal'
}, ".".concat(_styles.CodeBlockSharedCssClassName.CODEBLOCK_START), {
position: 'absolute',
visibility: 'hidden',
height: '1.5rem',
top: '0px',
left: '0px'
}), "".concat(_styles.CodeBlockSharedCssClassName.CODEBLOCK_END), {
position: 'absolute',
visibility: 'hidden',
height: '1.5rem',
bottom: '0px',
right: '0px'
}), ".".concat(_styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER), {
position: 'relative',
backgroundColor: "var(--ds-background-neutral, #0515240F)",
display: 'flex',
borderRadius: "var(--ds-radius-small, 3px)",
width: '100%',
counterReset: 'line',
overflowX: 'auto',
backgroundImage: 'var(--ak-renderer-codeblock-content-wrapper-bg-img)',
backgroundRepeat: 'no-repeat',
backgroundAttachment: 'local, local, local, local, scroll, scroll, scroll, scroll',
backgroundSize: "var(--ds-space-300, 24px)".concat(" 100%,\n\t\t\t\t", "var(--ds-space-300, 24px)", " 100%,\n\t\t\t\t", "var(--ds-space-100, 8px)", " 100%,\n\t\t\t\t", "var(--ds-space-100, 8px)", " 100%,\n\t\t\t\t", "var(--ds-space-100, 8px)", " 100%,\n\t\t\t\t1px 100%,\n\t\t\t\t", "var(--ds-space-100, 8px)", " 100%,\n\t\t\t\t1px 100%"),
backgroundPosition: "0 0,\n\t\t\t\t0 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t0 0,\n\t\t\t\t0 0",
/* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */
overflowY: 'hidden'
}), ".".concat(_styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER), {
backgroundColor: "var(--ds-background-neutral, #0515240F)",
position: 'relative',
width: 'var(--lineNumberGutterWidth, 2rem)',
padding: "var(--ds-space-100, 8px)",
flexShrink: 0,
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
fontSize: "".concat(14 / 16, "rem"),
boxSizing: 'content-box'
}), ".".concat(_styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "::before"), {
content: '"1"',
visibility: 'hidden',
// 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'
}), ".".concat(_styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
code: {
tabSize: 4,
cursor: 'text',
color: "var(--ds-text, #292A2E)",
borderRadius: "var(--ds-radius-small, 3px)",
margin: "var(--ds-space-100, 8px)",
// 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'
}
}), ".".concat(_styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET), {
pointerEvents: 'none',
userSelect: 'none',
width: 'var(--lineNumberGutterWidth, 2rem)',
left: 0,
position: 'absolute',
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
fontSize: "".concat(14 / 16, "rem"),
padding: "0px ".concat("var(--ds-space-100, 8px)"),
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: '1.5rem',
textAlign: 'right',
color: "var(--ds-text-subtlest, #6B6E76)",
boxSizing: 'content-box'
})));
var lightWeightCodeBlockStyles = (0, _react2.css)((0, _defineProperty2.default)({}, ".".concat(_styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER), {
cursor: 'text'
}));
var LightWeightCodeBlockCssClassName = exports.LightWeightCodeBlockCssClassName = {
CONTAINER: 'light-weight-code-block'
};
/**
* @private
* @deprecated styles are moved to RendererStyleContainer
*/
var getLightWeightCodeBlockStylesForRootRendererStyleSheet = exports.getLightWeightCodeBlockStylesForRootRendererStyleSheet = function getLightWeightCodeBlockStylesForRootRendererStyleSheet() {
// We overwrite the rule that clears margin-top for first nested codeblocks, as
// our lightweight codeblock dom structure will always nest the codeblock inside
// an extra container div which would constantly be targeted. Now, top-level
// lightweight codeblock containers will not be targeted.
// NOTE: This must be added after other .code-block styles in the root
// Renderer stylesheet.
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t.", "\n\t\t\t> .", "\n\t\t\t.", " {\n\t\t\tmargin-top: ", ";\n\t\t}\n\t"])), _consts.RendererCssClassName.DOCUMENT, LightWeightCodeBlockCssClassName.CONTAINER, _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, _editorSharedStyles.blockNodesVerticalMargin);
};
var LightWeightCodeBlock = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
var text = _ref.text,
_ref$codeBidiWarningT = _ref.codeBidiWarningTooltipEnabled,
codeBidiWarningTooltipEnabled = _ref$codeBidiWarningT === void 0 ? true : _ref$codeBidiWarningT,
_ref$hideLineNumbers = _ref.hideLineNumbers,
hideLineNumbers = _ref$hideLineNumbers === void 0 ? false : _ref$hideLineNumbers,
className = _ref.className;
var textRows = (0, _react.useMemo)(function () {
return (text !== null && text !== void 0 ? text : '').split('\n');
}, [text]);
var _useBidiWarnings = (0, _useBidiWarnings2.useBidiWarnings)({
enableWarningTooltip: codeBidiWarningTooltipEnabled
}),
renderBidiWarnings = _useBidiWarnings.renderBidiWarnings;
var classNames = [LightWeightCodeBlockCssClassName.CONTAINER, className].join(' ');
var codeBlockBackgroundImage = (0, _editorSharedStyles.overflowShadow)({
leftCoverWidth: "var(--ds-space-300, 24px)"
});
return (0, _react2.jsx)("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: classNames,
ref: ref
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
,
css: [codeBlockSharedStyles, lightWeightCodeBlockStyles],
style: {
'--ak-renderer-codeblock-content-wrapper-bg-img': codeBlockBackgroundImage
}
}, (0, _react2.jsx)("div", {
className: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER
}, (0, _react2.jsx)("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER
}, !hideLineNumbers && (0, _react2.jsx)("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: _styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER
}, textRows.map(function (_, index) {
return (
// Ignored via go/ees005
// eslint-disable-next-line react/no-array-index-key
(0, _react2.jsx)("span", {
key: index
})
);
})), (0, _react2.jsx)("div", {
className: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT
}, (0, _react2.jsx)("code", null, renderBidiWarnings(text))))));
});
var _default = exports.default = LightWeightCodeBlock;