@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
137 lines (133 loc) • 7.67 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.tableNodeSpecWithFixedToDOM = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
var _adfSchema = require("@atlaskit/adf-schema");
var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
var _consts = require("../pm-plugins/table-resizing/utils/consts");
var _misc = require("../pm-plugins/table-resizing/utils/misc");
var _tableContainerStyles = require("./table-container-styles");
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(config) {
var tableNode = config.isNestingSupported ? _adfSchema.tableWithNestedTable : _adfSchema.table;
return _objectSpread(_objectSpread({}, tableNode), {}, {
toDOM: function toDOM(node) {
var alignmentStyle = Object.entries((0, _tableContainerStyles.getAlignmentStyle)(node.attrs.layout)).map(function (_ref) {
var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
k = _ref2[0],
v = _ref2[1];
return "".concat((0, _kebabCase.default)(k), ": ").concat((0, _kebabCase.default)(v));
}).join(';');
var tableMinWidth = (0, _colgroup.getResizerMinWidth)(node);
var isFullPageEditor = !config.isChromelessEditor && !config.isCommentEditor;
var 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-".concat(node.attrs.localId),
'data-ssr-placeholder-replace': "table-".concat(node.attrs.localId)
};
// This would be used for table scaling in colgroup CSS
// cqw, or px is well supported
var resizableTableWidth = isFullPageEditor ? (0, _misc.getTableResizerContainerForFullPageWidthInCSS)(node, config.isTableScalingEnabled) : "calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2))";
var colgroup = '';
if (config.allowColumnResizing) {
colgroup = ['colgroup', {}].concat((0, _toConsumableArray2.default)((0, _colgroup.generateColgroupFromNode)(node, config.isCommentEditor, config.isChromelessEditor, config.isNested, config.isTableScalingEnabled, config.shouldUseIncreasedScalingPercent)));
}
// For Chromeless editor, and nested tables in full page editor
var tableContainerDivLegacy = ['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-with-left-shadow',
style: 'visibility: hidden'
}], ['div', {
class: 'pm-table-wrapper'
}, ['table', attrs, ['span', {
class: 'pm-table-shadow-sentinel-right'
}], ['span', {
class: 'pm-table-shadow-sentinel-left'
}], colgroup, ['tbody', 0]]], ['div', {
class: 'pm-table-with-right-shadow',
style: 'visibility: hidden'
}], ['div', {
class: 'pm-table-sticky-sentinel-bottom',
'data-testid': 'sticky-sentinel-bottom'
}]];
// removed the left/right shadow divs
var tableContainerDivNext = ['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'
}]];
var tableContainerDiv = (0, _expValEquals.expValEquals)('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant1') || (0, _expValEquals.expValEquals)('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant2') || (0, _expValEquals.expValEquals)('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant3') ? tableContainerDivNext : tableContainerDivLegacy;
if (!config.tableResizingEnabled || config.isNested) {
return ['div', {
class: 'tableView-content-wrap',
'data-prosemirror-initial-toDOM-render': 'true',
style: (0, _lazyNodeView.convertToInlineCss)({
'--ak-editor-table-width': resizableTableWidth
})
}, tableContainerDiv];
}
var tableResizingDiv = ['div', {
'data-testid': 'table-alignment-container',
style: alignmentStyle
}, ['div', {
class: 'pm-table-resizer-container',
style: (0, _lazyNodeView.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': resizableTableWidth,
width: "var(--ak-editor-table-width)"
})
}, ['div', {
class: 'resizer-item display-handle',
style: (0, _lazyNodeView.convertToInlineCss)({
position: 'relative',
userSelect: 'auto',
boxSizing: 'border-box',
'--ak-editor-table-max-width': "".concat(_consts.TABLE_MAX_WIDTH, "px"),
'--ak-editor-table-min-width': "".concat(tableMinWidth, "px"),
minWidth: 'var(--ak-editor-table-min-width)',
maxWidth: (0, _misc.getTableResizerContainerMaxWidthInCSS)(config.isCommentEditor, config.isChromelessEditor, config.isTableScalingEnabled),
width: (0, _misc.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];
}
});
};