@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
116 lines (115 loc) • 6.15 kB
JavaScript
import classNames from 'classnames';
import kebabCase from 'lodash/kebabCase';
import { table, tableWithNestedTable } from '@atlaskit/adf-schema';
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { generateColgroupFromNode, getResizerMinWidth } from '../pm-plugins/table-resizing/utils/colgroup';
import { TABLE_MAX_WIDTH, TABLE_FULL_WIDTH } from '../pm-plugins/table-resizing/utils/consts';
import { getTableResizerContainerMaxWidthInCSS, getTableResizerContainerForFullPageWidthInCSS, getTableResizerItemWidthInCSS } from '../pm-plugins/table-resizing/utils/misc';
import { isTableInContentMode } from '../pm-plugins/utils/tableMode';
import { getAlignmentStyle } from './table-container-styles';
export const tableNodeSpecWithFixedToDOM = config => {
const tableNode = config.isNestingSupported ? tableWithNestedTable : table;
return {
...tableNode,
toDOM: node => {
const isFullPageEditor = !config.isChromelessEditor && !config.isCommentEditor;
const isInContentMode = isTableInContentMode({
node,
allowColumnResizing: config.allowColumnResizing,
allowTableResizing: config.tableResizingEnabled,
isFullPageEditor,
isTableNested: config.isNested
}) && expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true);
const alignmentStyle = Object.entries(getAlignmentStyle(node.attrs.layout)).map(([k, v]) => `${kebabCase(k)}: ${kebabCase(v)}`).join(';');
const tableMinWidth = getResizerMinWidth(node);
const attrs = {
'data-number-column': node.attrs.isNumberColumnEnabled,
'data-layout': node.attrs.layout,
'data-autosize': node.attrs.__autoSize,
'data-table-local-id': node.attrs.localId,
'data-table-width': node.attrs.width,
'data-ssr-placeholder': `table-${node.attrs.localId}`,
'data-ssr-placeholder-replace': `table-${node.attrs.localId}`
};
if (isInContentMode) {
attrs['data-initial-width-mode'] = 'content';
}
if (expValEquals('platform_editor_table_display_mode_in_to_dom', 'isEnabled', true)) {
attrs['data-table-display-mode'] = node.attrs.displayMode;
}
// This would be used for table scaling in colgroup CSS
// cqw, or px is well supported
const resizableTableWidth = isFullPageEditor ? getTableResizerContainerForFullPageWidthInCSS(node, config.isTableScalingEnabled) : `calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2))`;
let colgroup = '';
if (config.allowColumnResizing) {
colgroup = ['colgroup', {}, ...generateColgroupFromNode(node, config.isCommentEditor, config.isChromelessEditor, config.isNested, config.isTableScalingEnabled, config.shouldUseIncreasedScalingPercent)];
}
const tableContainerDiv = ['div', {
class: 'pm-table-container',
'data-number-column': node.attrs.isNumberColumnEnabled,
'data-layout': node.attrs.layout,
'data-testid': 'table-container'
}, ['div', {
class: 'pm-table-sticky-sentinel-top',
'data-testid': 'sticky-sentinel-top'
}], ['div', {
class: 'pm-table-row-controls-wrapper'
}, ['div']], ['div', {
class: 'pm-table-wrapper'
}, ['table', attrs, colgroup, ['tbody', 0]]], ['div', {
class: 'pm-table-sticky-sentinel-bottom',
'data-testid': 'sticky-sentinel-bottom'
}], ...(expValEquals('platform_editor_vc90_transition_table_border', 'isEnabled', true) ? [['div', {
contenteditable: 'false',
class: 'pm-table-left-border',
'data-with-numbered-table': node.attrs.isNumberColumnEnabled,
'data-testid': 'table-left-border'
}], ['div', {
contenteditable: 'false',
class: 'pm-table-right-border',
'data-testid': 'table-right-border'
}]] : [])];
if (!config.tableResizingEnabled || config.isNested) {
return ['div', {
class: 'tableView-content-wrap',
'data-prosemirror-initial-toDOM-render': 'true',
style: convertToInlineCss({
'--ak-editor-table-width': resizableTableWidth
})
}, tableContainerDiv];
}
const tableResizingDiv = ['div', {
'data-testid': 'table-alignment-container',
style: alignmentStyle
}, ['div', {
class: 'pm-table-resizer-container',
style: convertToInlineCss({
'--ak-editor-table-gutter-padding': config.isTableScalingEnabled ? 'calc(var(--ak-editor--large-gutter-padding) * 2)' : 'calc(var(--ak-editor--large-gutter-padding) * 2 - var(--ak-editor-resizer-handle-spacing))',
'--ak-editor-table-width': isInContentMode ? 'max-content' : resizableTableWidth,
width: `var(--ak-editor-table-width)`
})
}, ['div', {
class: expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) ? 'resizer-item display-handle' : classNames('resizer-item', {
'display-handle': !isInContentMode
}),
style: convertToInlineCss({
position: 'relative',
userSelect: 'auto',
boxSizing: 'border-box',
'--ak-editor-table-max-width': `${expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true) ? TABLE_MAX_WIDTH : TABLE_FULL_WIDTH}px`,
'--ak-editor-table-min-width': `${tableMinWidth}px`,
minWidth: 'var(--ak-editor-table-min-width)',
maxWidth: getTableResizerContainerMaxWidthInCSS(config.isCommentEditor, config.isChromelessEditor, config.isTableScalingEnabled),
width: isInContentMode ? 'auto' : getTableResizerItemWidthInCSS(node, config.isCommentEditor, config.isChromelessEditor)
})
}, ['span', {
class: 'resizer-hover-zone'
}, tableContainerDiv]]]];
return ['div', {
class: 'tableView-content-wrap',
'data-prosemirror-initial-toDOM-render': 'true'
}, tableResizingDiv];
}
};
};