@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
121 lines (114 loc) • 6.18 kB
JavaScript
/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
import { css } from '@emotion/react';
import { scrollbarStyles } from './scrollbarStyles';
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export const tableLayoutFixes = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'.pm-table-header-content-wrap :not(.fabric-editor-alignment), .pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark, .pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'p:first-of-type': {
marginTop: 0
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.pm-table-cell-content-wrap .mediaGroupView-content-wrap': {
clear: 'both'
}
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export const tableLayoutFixesWithFontSize = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'.pm-table-header-content-wrap :not(.fabric-editor-alignment, .fabric-editor-font-size), .pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark, .pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'p:first-of-type': {
marginTop: 0
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.pm-table-cell-content-wrap .mediaGroupView-content-wrap': {
clear: 'both'
}
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export const tableCommentEditorMarginOverride = css({
marginLeft: 0,
marginRight: 0
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export const tableCommentEditorStyles = css({
// TODO: ED-28075 - refactor array include to unblock Compiled CSS migration
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
[`.ProseMirror .pm-table-wrapper > table`]: [tableCommentEditorMarginOverride, scrollbarStyles]
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export const tableContainerStyles = css({
/* Fix for HOT-119925: Ensure table containers have proper width constraints and overflow handling */
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror .pm-table-wrapper': {
maxWidth: '100%',
overflowX: 'auto',
// Ensure the wrapper doesn't grow beyond its container
width: '100%',
boxSizing: 'border-box'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror .pm-table-wrapper.pm-table-wrapper-no-overflow': {
overflowX: 'visible'
},
/* Fix for HOT-119925: Ensure table elements are responsive and don't overflow */
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror .pm-table-wrapper table': {
maxWidth: '100%',
width: '100%',
tableLayout: 'fixed',
// Ensure tables can be scrolled horizontally if needed
minWidth: 'auto'
}
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export const tableEmptyRowStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror .pm-table-wrapper': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.pm-table-cell-content-wrap, .pm-table-header-content-wrap': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'p:empty': {
/* add a minimum height to empty table rows in SSR */
minHeight: '1.714em'
}
}
}
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export const tableContentModeStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'.pm-table-resizer-container:has(table[data-initial-width-mode="content"])': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
width: 'max-content !important',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
'--ak-editor-table-width': 'max-content'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'.resizer-item:has(table[data-initial-width-mode="content"])': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
width: 'max-content !important'
},
// Reset the extended hover zone padding for content-mode tables so it doesn't
// inflate the max-content width of parent elements (resizer-container, wrapper).
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'.resizer-item:has(table[data-initial-width-mode="content"]) > .resizer-hover-zone.resizer-is-extended': {
padding: 'unset',
left: 'unset'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror .pm-table-wrapper table[data-initial-width-mode="content"]': {
tableLayout: 'auto',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
width: 'max-content !important'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror .pm-table-wrapper table[data-initial-width-mode="content"] > colgroup > col': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
width: 'unset !important'
}
});