@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
203 lines (197 loc) • 11.4 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.isMinCellWidthTable = exports.insertColgroupFromNode = exports.hasTableColumnBeenResized = exports.hasTableBeenResized = exports.getResizerMinWidth = exports.getColgroupChildrenLength = exports.getColWidthFix = exports.generateColgroupFromNode = exports.generateColgroup = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _styles = require("@atlaskit/editor-common/styles");
var _utils = require("@atlaskit/editor-common/utils");
var _model = require("@atlaskit/editor-prosemirror/model");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _tableMap = require("@atlaskit/editor-tables/table-map");
var _consts = require("./consts");
var _misc = require("./misc");
/**
* This ensures the combined width of the columns (and tbody) of table is always smaller or equal
* than the table and table wrapper elements. This is necessary as there is no longer
* padding on the .pm-table-wrapper, so all elements need to be the same width to avoid
* overflow.
*/
var getColWidthFix = exports.getColWidthFix = function getColWidthFix(colwidth, tableColumnCount) {
return colwidth - 1 / tableColumnCount;
};
var generateColStyle = function generateColStyle(fixedColWidth, tableWidth, isCommentEditor, isChromelessEditor, isNested, shouldUseIncreasedScalingPercent, isNumberColumnEnabled, isTableHasWidth, hasTableBeenResized) {
var maxScalingPercent = shouldUseIncreasedScalingPercent ? _consts.MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION : _consts.MAX_SCALING_PERCENT;
var maxScaledRatio = 1 - maxScalingPercent;
var isFullPageEditor = !isChromelessEditor && !isCommentEditor;
// for nested tables, or chromeless editor, which used non resizable table container
if (isNested || isChromelessEditor) {
if (hasTableBeenResized) {
return "width: max(".concat(fixedColWidth, "px, ").concat(_styles.tableCellMinWidth, "px)");
}
return "width: ".concat(_styles.tableCellMinWidth, "px)");
}
if (isFullPageEditor || !isFullPageEditor && isTableHasWidth) {
var scaledPercent = isNumberColumnEnabled ? "calc(calc(var(--ak-editor-table-width) - ".concat(_editorSharedStyles.akEditorTableNumberColumnWidth, "px - 1px)/").concat(tableWidth, ")") : "calc(calc(var(--ak-editor-table-width) - 1px)/".concat(tableWidth, ")");
return "width: max(calc(".concat(fixedColWidth, "px * ").concat(maxScaledRatio, "), calc(").concat(fixedColWidth, " * ").concat(scaledPercent, "), ").concat(_styles.tableCellMinWidth, "px)");
}
// table resized to full-width in comment editor
// it doesn't have a width attribute, and cols has been resized
if (hasTableBeenResized) {
var _scaledPercent = isNumberColumnEnabled ? "calc(calc(var(--ak-editor-table-width) - ".concat(_editorSharedStyles.akEditorTableNumberColumnWidth, "px - 1px)/").concat(tableWidth, ")") : "calc(calc(var(--ak-editor-table-width) - 1px)/".concat(tableWidth, ")");
return "width: max(calc(".concat(fixedColWidth, " * ").concat(_scaledPercent, "), ").concat(_styles.tableCellMinWidth, "px)");
}
return "width: ".concat(_styles.tableCellMinWidth, "px");
};
var generateColgroupFromNode = exports.generateColgroupFromNode = function generateColgroupFromNode(table, isCommentEditor, isChromelessEditor, isNested, isTableScalingEnabled, shouldUseIncreasedScalingPercent) {
var cols = [];
var map = _tableMap.TableMap.get(table);
var isTableHasWidth = !!table.attrs.width;
var isNumberColumnEnabled = table.attrs.isNumberColumnEnabled || false;
var isFullPageEditor = !isChromelessEditor && !isCommentEditor;
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
table.content.firstChild.content.forEach(function (cell) {
var colspan = cell.attrs.colspan || 1;
// if the table has been resized
if (Array.isArray(cell.attrs.colwidth)) {
cell.attrs.colwidth.slice(0, colspan).forEach(function (width) {
// existing logic for calculating the width of the column
var fixedColWidth = getColWidthFix(width, map.width);
var tableWidth = isFullPageEditor || !isFullPageEditor && isTableHasWidth ? (0, _misc.getTableContainerElementWidth)(table) : (0, _utils.calcTableColumnWidths)(table).reduce(function (sum, width) {
return sum + width;
}, 0);
if (isTableScalingEnabled) {
cols.push(['col', {
style: generateColStyle(fixedColWidth, tableWidth, isCommentEditor, isChromelessEditor, isNested, shouldUseIncreasedScalingPercent, isNumberColumnEnabled, isTableHasWidth, true)
}]);
} else {
cols.push(['col', {
style: "width: max(".concat(fixedColWidth, "px, ").concat(_styles.tableCellMinWidth, "px)")
}]);
}
});
} else {
// columns has not been resized, so distribute the width evenly
cols.push.apply(cols, (0, _toConsumableArray2.default)(Array.from({
length: colspan
}, function (_) {
var tableWidth = (0, _misc.getTableContainerElementWidth)(table);
var columnWidth = tableWidth / map.width || 0;
var fixedColWidth = getColWidthFix(columnWidth, map.width || 0);
return ['col', {
style: generateColStyle(fixedColWidth, tableWidth, isCommentEditor, isChromelessEditor, isNested, shouldUseIncreasedScalingPercent, isNumberColumnEnabled, isTableHasWidth)
}];
})));
}
});
return cols;
};
var generateColgroup = exports.generateColgroup = function generateColgroup(table, tableRef, shouldUseIncreasedScalingPercent, isCommentEditor) {
var cols = [];
var map = _tableMap.TableMap.get(table);
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
table.content.firstChild.content.forEach(function (cell) {
var colspan = cell.attrs.colspan || 1;
if (Array.isArray(cell.attrs.colwidth)) {
// We slice here to guard against our colwidth array having more entries
// Than the we actually span. We'll patch the document at a later point.
if (tableRef) {
var _table$attrs;
// if we have tableRef here, isTableScalingEnabled is true
var scalePercent = 1;
if (isCommentEditor && !((_table$attrs = table.attrs) !== null && _table$attrs !== void 0 && _table$attrs.width)) {
scalePercent = (0, _misc.getScalingPercentForTableWithoutWidth)(table, tableRef);
} else {
scalePercent = (0, _misc.getTableScalingPercent)(table, tableRef, shouldUseIncreasedScalingPercent);
}
cell.attrs.colwidth.slice(0, colspan).forEach(function (width) {
// existing logic for calculating the width of the column
var fixedColWidth = getColWidthFix(width, map.width);
var scaledWidth = fixedColWidth * scalePercent;
var finalWidth = Math.max(scaledWidth, _styles.tableCellMinWidth);
cols.push(['col', {
style: "width: ".concat(finalWidth, "px;")
}]);
});
} else {
cell.attrs.colwidth.slice(0, colspan).forEach(function (width) {
cols.push(['col', {
style: "width: ".concat(getColWidthFix(width ? Math.max(width, _styles.tableCellMinWidth) : _styles.tableCellMinWidth, map.width), "px;")
}]);
});
}
} else {
// When we have merged cells on the first row (firstChild),
// We want to ensure we're creating the appropriate amount of
// cols the table still has.
cols.push.apply(cols, (0, _toConsumableArray2.default)(Array.from({
length: colspan
}, function (_) {
return ['col', {
style: "width: ".concat(_styles.tableCellMinWidth, "px;")
}];
})));
}
});
return cols;
};
var insertColgroupFromNode = exports.insertColgroupFromNode = function insertColgroupFromNode(tableRef, table) {
var isTableScalingEnabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var shouldRemove = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
var shouldUseIncreasedScalingPercent = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
var isCommentEditor = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
var colgroup = tableRef === null || tableRef === void 0 ? void 0 : tableRef.querySelector('colgroup');
if (colgroup && shouldRemove) {
tableRef === null || tableRef === void 0 || tableRef.removeChild(colgroup);
}
colgroup = renderColgroupFromNode(table, isTableScalingEnabled ? tableRef !== null && tableRef !== void 0 ? tableRef : undefined : undefined, shouldUseIncreasedScalingPercent, isCommentEditor);
if (shouldRemove) {
tableRef === null || tableRef === void 0 || tableRef.insertBefore(colgroup, tableRef === null || tableRef === void 0 ? void 0 : tableRef.firstChild);
}
return colgroup.children;
};
var hasTableBeenResized = exports.hasTableBeenResized = function hasTableBeenResized(table) {
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
return !!(0, _utils.getFragmentBackingArray)(table.content.firstChild.content).find(function (cell) {
return cell.attrs.colwidth;
});
};
var hasTableColumnBeenResized = exports.hasTableColumnBeenResized = hasTableBeenResized;
/**
* Check if a table has all the column width set to tableCellMinWidth(48px) or null
*
* @param table
* @returns true if all column width is equal to tableCellMinWidth or null, false otherwise
*/
var isMinCellWidthTable = exports.isMinCellWidthTable = function isMinCellWidthTable(table) {
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
var cellArray = (0, _utils.getFragmentBackingArray)(table.content.firstChild.content);
var isTableMinCellWidth = cellArray.every(function (cell) {
return cell.attrs.colwidth && cell.attrs.colwidth[0] === _styles.tableCellMinWidth || cell.attrs.colwidth === null;
});
return isTableMinCellWidth;
};
function renderColgroupFromNode(table, maybeTableRef, shouldUseIncreasedScalingPercent, isCommentEditor) {
var rendered = _model.DOMSerializer.renderSpec(document, ['colgroup', {}].concat((0, _toConsumableArray2.default)(generateColgroup(table, maybeTableRef, shouldUseIncreasedScalingPercent, isCommentEditor))));
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
return rendered.dom;
}
var getColgroupChildrenLength = exports.getColgroupChildrenLength = function getColgroupChildrenLength(table) {
var map = _tableMap.TableMap.get(table);
return map.width;
};
var getResizerMinWidth = exports.getResizerMinWidth = function getResizerMinWidth(node) {
var currentColumnCount = getColgroupChildrenLength(node);
var minColumnWidth = Math.min(3, currentColumnCount) * _consts.COLUMN_MIN_WIDTH;
// add an extra pixel as the scale table logic will scale columns to be tableContainerWidth - 1
// the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
return minColumnWidth + 1;
};