@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
236 lines (230 loc) • 13.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.firstCodeBlockWithNoMarginOld = exports.firstCodeBlockWithNoMargin = exports.codeBlockStylesWithEmUnits = exports.codeBlockStyles = exports.CodeBlockSharedCssClassName = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("@emotion/react");
var _overflowShadowStyles = require("./overflowShadowStyles");
var _selectionStyles = require("./selectionStyles");
/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
var CodeBlockSharedCssClassName = exports.CodeBlockSharedCssClassName = {
CODEBLOCK_CONTAINER: 'code-block',
CODEBLOCK_START: 'code-block--start',
CODEBLOCK_END: 'code-block--end',
CODEBLOCK_CONTENT_WRAPPER: 'code-block-content-wrapper',
CODEBLOCK_LINE_NUMBER_GUTTER: 'line-number-gutter',
CODEBLOCK_CONTENT: 'code-content',
DS_CODEBLOCK: '[data-ds--code--code-block]',
CODEBLOCK_CONTENT_WRAPPED: 'code-content--wrapped',
CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET: 'code-content__line-number--wrapped'
};
var fontSize14px = "".concat(14 / 16, "rem");
var blockNodesVerticalMargin = '0.75rem';
var gutterDangerOverlay = (0, _react.css)({
'&::after': {
height: '100%',
content: "''",
position: 'absolute',
left: 0,
top: 0,
width: '24px',
backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
}
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var codeBlockStyles = exports.codeBlockStyles = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED, " > .").concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, " > .").concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
marginRight: "var(--ds-space-100, 8px)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
code: {
display: 'block',
wordBreak: 'break-word',
whiteSpace: 'pre-wrap'
}
}), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, " > .").concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
display: 'flex',
flex: 1,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
code: {
flexGrow: 1,
whiteSpace: 'pre'
}
}), ".".concat(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)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
margin: "".concat(blockNodesVerticalMargin, " 0 0 0"),
fontFamily: "var(--ds-font-family-code, \"Atlassian Mono\", ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
minWidth: 48,
cursor: 'pointer',
clear: 'both',
// This is necessary to allow for arrow key navigation in/out of code blocks in Firefox.
whiteSpace: 'normal',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.code-block-gutter-pseudo-element::before': {
content: 'attr(data-label)'
}
}, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_START), {
position: 'absolute',
visibility: 'hidden',
height: '1.5rem',
top: 0,
left: 0
}), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_END), {
position: 'absolute',
visibility: 'hidden',
height: '1.5rem',
bottom: 0,
right: 0
}), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER), [
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
_overflowShadowStyles.overflowShadowStyles, {
position: 'relative',
backgroundColor: "var(--ds-background-neutral, #0515240F)",
display: 'flex',
borderRadius: "var(--ds-radius-small, 3px)",
width: '100%',
counterReset: 'line',
overflowX: 'auto',
backgroundRepeat: 'no-repeat',
backgroundAttachment: 'local, local, local, local, scroll, scroll, scroll, scroll',
backgroundSize: "var(--ds-space-300, 24px)".concat(" 100%,\n\t ", "var(--ds-space-300, 24px)", " 100%,\n\t ", "var(--ds-space-100, 8px)", " 100%,\n\t ", "var(--ds-space-100, 8px)", " 100%,\n\t ", "var(--ds-space-100, 8px)", " 100%,\n\t 1px 100%,\n\t ", "var(--ds-space-100, 8px)", " 100%,\n\t 1px 100%"),
backgroundPosition: "0 0,\n\t 0 0,\n 100% 0,\n 100% 0,\n 100% 0,\n 100% 0,\n\t 0 0,\n\t 0 0",
// Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers.
overflowY: 'hidden'
}]), ".".concat(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: fontSize14px,
boxSizing: 'content-box'
}), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "::before"), {
content: "'1'",
visibility: 'hidden',
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
fontSize: fontSize14px,
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: '1.5rem'
}), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
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: fontSize14px,
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: '1.5rem'
}
}), ".".concat(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: fontSize14px,
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'
})), "li", {
// if same list item has multiple code blocks we need top margin for all but first
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'> .code-block': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
margin: "".concat(blockNodesVerticalMargin, " 0 0 0")
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
'> .code-block:first-child, > .ProseMirror-gapcursor:first-child + .code-block': {
marginTop: 0
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
'> div:last-of-type.code-block, > pre:last-of-type.code-block': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
marginBottom: blockNodesVerticalMargin
}
}), ".code-block.ak-editor-selected-node:not(.danger)", [
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
_selectionStyles.boxShadowSelectionStyles,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
_selectionStyles.blanketSelectionStyles,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
_selectionStyles.hideNativeBrowserTextSelectionStyles]), '.danger.code-block', (0, _defineProperty2.default)((0, _defineProperty2.default)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)")
}, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER), [{
backgroundColor: "var(--ds-background-danger, #FFECEB)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
color: "var(--ds-text-danger, #AE2E24)"
}, gutterDangerOverlay]), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
})), '.danger .code-block', (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER), [{
backgroundColor: "var(--ds-background-danger, #FFECEB)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
color: "var(--ds-text-danger, #AE2E24)"
}, gutterDangerOverlay]), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
}))
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var codeBlockStylesWithEmUnits = exports.codeBlockStylesWithEmUnits = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': (0, _defineProperty2.default)({}, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER), (0, _defineProperty2.default)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.code-block-gutter-pseudo-element::before': {
display: 'flow',
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: '1.5em'
}
}, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
code: {
// 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'
}
}))
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var firstCodeBlockWithNoMargin = exports.firstCodeBlockWithNoMargin = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__content': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
'> .code-block:first-child, > .ProseMirror-widget:first-child + .code-block, > .ProseMirror-widget:first-child + .ProseMirror-widget + .code-block': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space,@atlaskit/ui-styling-standard/no-important-styles
margin: '0!important'
}
}
}
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var firstCodeBlockWithNoMarginOld = exports.firstCodeBlockWithNoMarginOld = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__content': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
'> .code-block:first-child': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space,@atlaskit/ui-styling-standard/no-important-styles
margin: '0!important'
}
}
}
});