@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
62 lines (61 loc) • 8.48 kB
JavaScript
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
var _templateObject;
import { css } from '@emotion/react';
import { tableCellContentDomSelector, tableCellSelector, tableHeaderSelector, tablePrefixSelector } from '@atlaskit/adf-schema';
import { akEditorBreakoutPadding, akEditorFullWidthLayoutWidth, akEditorSelectedNodeClassName, akEditorTableBorder, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorWideLayoutWidth, overflowShadow } from '@atlaskit/editor-shared-styles';
import browser from '../../utils/browser';
import { CodeBlockSharedCssClassName } from './code-block';
import { tableCellBackgroundStyleOverride } from './tableCell';
export var tableMarginTop = 24;
export var tableMarginBottom = 16;
export var tableMarginTopWithControl = 14;
export var tableMarginSides = 8;
export var tableCellMinWidth = 48;
export var tableNewColumnMinWidth = 140;
export var tableCellBorderWidth = 1;
export var tableCellPadding = 8;
export var tableResizeHandleWidth = 6;
export var TableSharedCssClassName = {
TABLE_CONTAINER: "".concat(tablePrefixSelector, "-container"),
TABLE_NODE_WRAPPER: "".concat(tablePrefixSelector, "-wrapper"),
TABLE_LEFT_SHADOW: "".concat(tablePrefixSelector, "-with-left-shadow"),
TABLE_RIGHT_SHADOW: "".concat(tablePrefixSelector, "-with-right-shadow"),
TABLE_STICKY_SHADOW: "".concat(tablePrefixSelector, "-sticky-shadow"),
TABLE_STICKY_WRAPPER: "".concat(tablePrefixSelector, "-sticky-wrapper"),
TABLE_STICKY_SCROLLBAR_CONTAINER: "".concat(tablePrefixSelector, "-sticky-scrollbar-container"),
TABLE_STICKY_SENTINEL_TOP: "".concat(tablePrefixSelector, "-sticky-sentinel-top"),
TABLE_STICKY_SENTINEL_BOTTOM: "".concat(tablePrefixSelector, "-sticky-sentinel-bottom"),
TABLE_STICKY_SCROLLBAR_SENTINEL_TOP: "".concat(tablePrefixSelector, "-sticky-scrollbar-sentinel-top"),
TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM: "".concat(tablePrefixSelector, "-sticky-scrollbar-sentinel-bottom"),
TABLE_SHADOW_SENTINEL_LEFT: "".concat(tablePrefixSelector, "-shadow-sentinel-left"),
TABLE_SHADOW_SENTINEL_RIGHT: "".concat(tablePrefixSelector, "-shadow-sentinel-right"),
TABLE_CELL_NODEVIEW_CONTENT_DOM: tableCellContentDomSelector,
TABLE_CELL_WRAPPER: tableCellSelector,
TABLE_HEADER_CELL_WRAPPER: tableHeaderSelector,
TABLE_ROW_CONTROLS_WRAPPER: "".concat(tablePrefixSelector, "-row-controls-wrapper"),
TABLE_COLUMN_CONTROLS_DECORATIONS: "".concat(tablePrefixSelector, "-column-controls-decoration"),
TABLE_RESIZER_CONTAINER: "".concat(tablePrefixSelector, "-resizer-container")
};
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Appears safe to auto-fix, but leaving it up to the team to remediate as the readability only gets worse with autofixing
var tableSharedStyle = function tableSharedStyle() {
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n .", " {\n position: relative;\n margin: 0 auto ", ";\n box-sizing: border-box;\n\n /**\n * Fix block top alignment inside table cells.\n */\n .decisionItemView-content-wrap:first-of-type > div {\n margin-top: 0;\n }\n }\n .", "[data-number-column='true'] {\n padding-left: ", "px;\n clear: both;\n }\n\n .", " {\n will-change: width, margin-left;\n }\n\n .", " table {\n will-change: width;\n }\n\n .", " > table {\n margin: ", " 0 0 0;\n }\n\n .", " > table,\n .", " > table {\n margin: ", " ", " 0 0;\n }\n\n /* avoid applying styles to nested tables (possible via extensions) */\n .", " > table,\n .", " > table,\n .", " > table {\n border-collapse: collapse;\n border: ", "px solid\n ", ";\n table-layout: fixed;\n font-size: 1em;\n width: 100%;\n\n &[data-autosize='true'] {\n table-layout: auto;\n }\n\n & {\n * {\n box-sizing: border-box;\n }\n hr {\n box-sizing: content-box;\n }\n\n tbody {\n border-bottom: none;\n }\n th td {\n background-color: ", ";\n }\n th,\n td {\n min-width: ", "px;\n font-weight: normal;\n vertical-align: top;\n border: 1px solid\n ", ";\n border-right-width: 0;\n border-bottom-width: 0;\n padding: ", ";\n /* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n ", "\n\n > :first-child:not(style),\n > style:first-child + * {\n margin-top: 0;\n }\n\n > .ProseMirror-gapcursor:first-child + *,\n > style:first-child + .ProseMirror-gapcursor + * {\n margin-top: 0;\n }\n\n > .ProseMirror-gapcursor:first-child + span + *,\n > style:first-child + .ProseMirror-gapcursor + span + * {\n margin-top: 0;\n }\n\n th p:not(:first-of-type),\n td p:not(:first-of-type) {\n margin-top: ", ";\n }\n }\n th {\n background-color: ", ";\n text-align: left;\n\n /* only apply this styling to codeblocks in default background headercells */\n /* TODO this needs to be overhauled as it relies on unsafe selectors */\n &:not([style]):not(.danger) {\n .", ":not(.danger) {\n background-color: ", ";\n\n :not(.", ") {\n box-shadow: 0px 0px 0px 1px\n ", ";\n }\n\n .", " {\n background-image: ", ";\n\n background-color: ", ";\n }\n\n .", " {\n background-color: ", ";\n }\n\n /* this is only relevant to the element taken care of by renderer */\n > [data-ds--code--code-block] {\n background-image: ", "!important;\n\n background-color: ", "!important;\n\n // selector lives inside @atlaskit/code\n --ds--code--line-number-bg-color: ", ";\n }\n }\n }\n }\n }\n }\n"])), tableCellBackgroundStyleOverride(), TableSharedCssClassName.TABLE_CONTAINER, "var(--ds-space-200, 16px)", TableSharedCssClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_RESIZER_CONTAINER, TableSharedCssClassName.TABLE_RESIZER_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, "var(--ds-space-300, 24px)", TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableCellBorderWidth, "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-neutral-subtle, white)", tableCellMinWidth, "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-space-100, 8px)", browser.gecko || browser.ie || browser.mac && browser.chrome ? 'background-clip: padding-box;' : '', "var(--ds-space-150, 12px)", "var(--ds-background-accent-gray-subtlest, ".concat(akEditorTableToolbar, ")"), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, rgb(235, 237, 240))", akEditorSelectedNodeClassName, "var(--ds-border, transparent)", CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, overflowShadow({
leftCoverWidth: "var(--ds-space-300, 24px)"
}), "var(--ds-background-neutral, rgb(235, 237, 240))", CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-neutral, rgb(226, 229, 233))", overflowShadow({
leftCoverWidth: "var(--ds-space-300, 24px)"
}), "var(--ds-background-neutral, rgb(235, 237, 240))", "var(--ds-background-neutral, rgb(226, 229, 233))");
};
export var calcTableWidth = function calcTableWidth(layout, containerWidth) {
var addControllerPadding = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
switch (layout) {
case 'full-width':
return containerWidth ? Math.min(containerWidth - (addControllerPadding ? akEditorBreakoutPadding : 0), akEditorFullWidthLayoutWidth) : akEditorFullWidthLayoutWidth;
case 'wide':
if (containerWidth) {
return Math.min(containerWidth - (addControllerPadding ? akEditorBreakoutPadding : 0), akEditorWideLayoutWidth);
}
return akEditorWideLayoutWidth;
default:
return 'inherit';
}
};
export { tableSharedStyle };