@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
22 lines • 4.68 kB
JavaScript
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
var _templateObject, _templateObject2;
/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Should be safe to autofix, but ignoring for now */
import { css } from '@emotion/react';
import { akEditorCodeFontFamily, akEditorLineHeight, akEditorTableCellMinWidth, blockNodesVerticalMargin, overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
import { N20, N30, N400, N800 } from '@atlaskit/theme/colors';
import { fontSize } from '@atlaskit/theme/constants';
export var 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]'
};
export var codeBlockSharedStyles = function codeBlockSharedStyles() {
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .", " {\n position: relative;\n background-color: ", ";\n border-radius: ", ";\n margin: ", " 0 0 0;\n font-family: ", ";\n min-width: ", "px;\n cursor: pointer;\n\n --ds--code--bg-color: transparent;\n\n /* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */\n white-space: normal;\n\n .", " {\n position: absolute;\n visibility: hidden;\n height: 1.5rem;\n top: 0px;\n left: 0px;\n }\n\n .", " {\n position: absolute;\n visibility: hidden;\n height: 1.5rem;\n bottom: 0px;\n right: 0px;\n }\n\n .", " {\n background-color: ", ";\n display: flex;\n border-radius: ", ";\n width: 100%;\n counter-reset: line;\n overflow-x: auto;\n\n background-image: ", ";\n\n background-repeat: no-repeat;\n background-attachment: local, local, local, local, scroll, scroll, scroll,\n scroll;\n background-size: ", " 100%,\n ", " 100%, ", " 100%,\n ", " 100%, ", " 100%,\n 1px 100%, ", " 100%, 1px 100%;\n background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;\n\n /* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */\n overflow-y: hidden;\n }\n\n .", " {\n flex-shrink: 0;\n text-align: right;\n background-color: ", ";\n padding: ", ";\n position: relative;\n\n span {\n display: block;\n line-height: 0;\n font-size: 0;\n\n ::before {\n display: inline-block;\n content: counter(line);\n counter-increment: line;\n color: ", ";\n font-size: ", ";\n line-height: 1.5rem;\n }\n }\n }\n\n .", " {\n display: flex;\n flex: 1;\n\n code {\n flex-grow: 1;\n tab-size: 4;\n cursor: text;\n color: ", ";\n border-radius: ", ";\n margin: ", ";\n white-space: pre;\n font-size: ", ";\n line-height: 1.5rem;\n }\n }\n }\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, transparent)", "var(--ds-border-radius, 3px)", blockNodesVerticalMargin, akEditorCodeFontFamily, akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, "var(--ds-background-neutral, ".concat(N20, ")"), "var(--ds-border-radius, 3px)", overflowShadow({
leftCoverWidth: "var(--ds-space-300, 24px)"
}), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-neutral, ".concat(N30, ")"), "var(--ds-space-100, 8px)", "var(--ds-text-subtlest, ".concat(N400, ")"), relativeFontSizeToBase16(fontSize()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-text, ".concat(N800, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-100, 8px)", relativeFontSizeToBase16(fontSize()));
};
export var codeBlockInListSafariFix = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ::before {\n content: ' ';\n line-height: ", ";\n }\n\n > p:first-child,\n > .code-block:first-child,\n > .ProseMirror-gapcursor:first-child + .code-block {\n margin-top: -", "em !important;\n }\n"])), akEditorLineHeight, akEditorLineHeight);