@ckeditor/ckeditor5-table 48.4.0-alpha.7 → 48.5.0-alpha.0

package/dist/index.js

@@ -960,7 +960,10 @@ function isEntireCellsLineHeader({ table, row, column }) {
 		row,
 		column
 	});
-	for (const { cell } of tableWalker) if (!isTableHeaderCellType(cell.getAttribute("tableCellType"))) return false;
+	for (const { cell } of tableWalker) {
+		const cellType = cell.getAttribute("tableCellType");
+		if (!isTableHeaderCellType(cellType)) return false;
+	}
 	return true;
 }
 /**
@@ -1188,17 +1191,29 @@ function splitVertically(tableCell, columnIndex, splitColumn, writer) {
 function trimTableCellIfNeeded(tableCell, cellRow, cellColumn, limitRow, limitColumn, writer) {
 	const colspan = parseInt(tableCell.getAttribute("colspan") || "1");
 	const rowspan = parseInt(tableCell.getAttribute("rowspan") || "1");
-	if (cellColumn + colspan - 1 > limitColumn) updateNumericAttribute("colspan", limitColumn - cellColumn + 1, tableCell, writer, 1);
-	if (cellRow + rowspan - 1 > limitRow) updateNumericAttribute("rowspan", limitRow - cellRow + 1, tableCell, writer, 1);
+	if (cellColumn + colspan - 1 > limitColumn) {
+		const trimmedSpan = limitColumn - cellColumn + 1;
+		updateNumericAttribute("colspan", trimmedSpan, tableCell, writer, 1);
+	}
+	if (cellRow + rowspan - 1 > limitRow) {
+		const trimmedSpan = limitRow - cellRow + 1;
+		updateNumericAttribute("rowspan", trimmedSpan, tableCell, writer, 1);
+	}
 }
 /**
 * Sets proper heading attributes to a cropped table.
 */
 function addHeadingsToCroppedTable(croppedTable, sourceTable, startRow, startColumn, writer) {
 	const headingRows = parseInt(sourceTable.getAttribute("headingRows") || "0");
-	if (headingRows > 0) updateNumericAttribute("headingRows", headingRows - startRow, croppedTable, writer, 0);
+	if (headingRows > 0) {
+		const headingRowsInCrop = headingRows - startRow;
+		updateNumericAttribute("headingRows", headingRowsInCrop, croppedTable, writer, 0);
+	}
 	const headingColumns = parseInt(sourceTable.getAttribute("headingColumns") || "0");
-	if (headingColumns > 0) updateNumericAttribute("headingColumns", headingColumns - startColumn, croppedTable, writer, 0);
+	if (headingColumns > 0) {
+		const headingColumnsInCrop = headingColumns - startColumn;
+		updateNumericAttribute("headingColumns", headingColumnsInCrop, croppedTable, writer, 0);
+	}
 }
 /**
 * Sets footer row attributes to a cropped table.
@@ -1760,13 +1775,11 @@ function getChangedResizedTables(model) {
 			case "remove":
 				referencePosition = ["tableRow", "tableCell"].includes(change.name) ? change.position : null;
 				break;
-			case "attribute":
-				if (change.range.start.nodeAfter) referencePosition = [
-					"table",
-					"tableRow",
-					"tableCell"
-				].includes(change.range.start.nodeAfter.name) ? change.range.start : null;
-				break;
+			case "attribute": if (change.range.start.nodeAfter) referencePosition = [
+				"table",
+				"tableRow",
+				"tableCell"
+			].includes(change.range.start.nodeAfter.name) ? change.range.start : null;
 		}
 		if (!referencePosition) continue;
 		const tableNode = referencePosition.nodeAfter && referencePosition.nodeAfter.is("element", "table") ? referencePosition.nodeAfter : referencePosition.findAncestor("table");
@@ -1824,14 +1837,29 @@ function getElementWidthInPixels(domElement) {
 	else return parseFloat(styles.width);
 }
 /**
+* Returns the width (in pixels) of a given DOM element's content that's actually available to its children -
+* with the element's own vertical scrollbar subtracted where that's still needed.
+*
+* @internal
+* @param domElement A DOM element.
+* @returns The width available to the element's children, in pixels.
+*/
+function getContainerContentWidth(domElement) {
+	const styles = global.window.getComputedStyle(domElement);
+	const width = getElementWidthInPixels(domElement);
+	if (styles.boxSizing !== "border-box") return width;
+	return width - Math.max(domElement.offsetWidth - domElement.clientWidth - parseFloat(styles.borderLeftWidth) - parseFloat(styles.borderRightWidth), 0);
+}
+/**
 * Returns the inner pixel width of a given editing root, or `null` if the root has no
 * DOM element attached yet (e.g. it hasn't been rendered for the first time).
 *
 * @internal
 */
-function getEditableWidth(editor, rootName) {
+function getEditableContentWidth(editor, rootName) {
 	const domRoot = editor.editing.view.getDomRoot(rootName);
-	return domRoot ? getElementWidthInPixels(domRoot) : null;
+	if (!domRoot) return null;
+	return getContainerContentWidth(domRoot);
 }
 /**
 * Returns the column indexes on the left and right edges of a cell. They differ if the cell spans
@@ -2122,7 +2150,8 @@ var TableUtils = class extends Plugin {
 	getCellLocation(tableCell) {
 		const tableRow = tableCell.parent;
 		const table = tableRow.parent;
-		const tableWalker = new TableWalker(table, { row: table.getChildIndex(tableRow) });
+		const rowIndex = table.getChildIndex(tableRow);
+		const tableWalker = new TableWalker(table, { row: rowIndex });
 		for (const { cell, row, column } of tableWalker) if (cell === tableCell) return {
 			row,
 			column
@@ -2907,7 +2936,8 @@ var TableUtils = class extends Plugin {
 	* @returns Returns an object with the `first` and `last` table column indexes.
 	*/
 	getColumnIndexes(tableCells) {
-		const indexes = [...new TableWalker(tableCells[0].findAncestor("table"))].filter((entry) => tableCells.includes(entry.cell)).map((entry) => entry.column);
+		const table = tableCells[0].findAncestor("table");
+		const indexes = [...new TableWalker(table)].filter((entry) => tableCells.includes(entry.cell)).map((entry) => entry.column);
 		return this._getFirstLastIndexesObject(indexes);
 	}
 	/**
@@ -3079,7 +3109,10 @@ function adjustHeadingColumns(table, removedColumnIndexes, writer) {
 */
 function updateHeadingRows(table, { first, last }, writer) {
 	const headingRows = table.getAttribute("headingRows") || 0;
-	if (first < headingRows) updateNumericAttribute("headingRows", last < headingRows ? headingRows - (last - first + 1) : first, table, writer, 0);
+	if (first < headingRows) {
+		const newRows = last < headingRows ? headingRows - (last - first + 1) : first;
+		updateNumericAttribute("headingRows", newRows, table, writer, 0);
+	}
 }
 /**
 * Calculates a new footer rows value for removing rows from footer section.
@@ -3088,7 +3121,10 @@ function updateFooterRows(table, totalRows, { first, last }, writer) {
 	if (!table.hasAttribute("footerRows")) return;
 	const footerRows = table.getAttribute("footerRows");
 	const footerIndex = totalRows - footerRows;
-	if (last >= footerIndex) updateNumericAttribute("footerRows", first >= footerIndex ? footerRows - (last - first + 1) : totalRows - 1 - last, table, writer, 0);
+	if (last >= footerIndex) {
+		const newRows = first >= footerIndex ? footerRows - (last - first + 1) : totalRows - 1 - last;
+		updateNumericAttribute("footerRows", newRows, table, writer, 0);
+	}
 }
 /**
 * Finds cells that will be:
@@ -3341,10 +3377,14 @@ function downcastRow() {
 */
 function downcastCell(options) {
 	return (tableCell, { writer }) => {
-		if (options.cellTypeEnabled?.()) return createCellElement(writer, isTableHeaderCellType(tableCell.getAttribute("tableCellType")) ? "th" : "td");
+		if (options.cellTypeEnabled?.()) {
+			const tableCellType = tableCell.getAttribute("tableCellType");
+			return createCellElement(writer, isTableHeaderCellType(tableCellType) ? "th" : "td");
+		}
 		const tableRow = tableCell.parent;
 		const table = tableRow.parent;
-		const tableWalker = new TableWalker(table, { row: table.getChildIndex(tableRow) });
+		const rowIndex = table.getChildIndex(tableRow);
+		const tableWalker = new TableWalker(table, { row: rowIndex });
 		const headingRows = table.getAttribute("headingRows") || 0;
 		const headingColumns = table.getAttribute("headingColumns") || 0;
 		let result = null;
@@ -3884,7 +3924,8 @@ var MergeCellCommand = class extends Command {
 			writer.setAttribute(spanAttribute, cellSpan + cellToMergeSpan, cellToExpand);
 			writer.setSelection(writer.createRangeIn(cellToExpand));
 			const tableUtils = this.editor.plugins.get("TableUtils");
-			removeEmptyRowsColumns(removedTableCellRow.findAncestor("table"), tableUtils);
+			const table = removedTableCellRow.findAncestor("table");
+			removeEmptyRowsColumns(table, tableUtils);
 		});
 	}
 	/**
@@ -4386,7 +4427,8 @@ var MergeCellsCommand = class extends Command {
 			updateNumericAttribute("colspan", mergeWidth, firstTableCell, writer);
 			updateNumericAttribute("rowspan", mergeHeight, firstTableCell, writer);
 			for (const tableCell of selectedTableCells) mergeTableCells(tableCell, firstTableCell, writer);
-			removeEmptyRowsColumns(firstTableCell.findAncestor("table"), tableUtils);
+			const table = firstTableCell.findAncestor("table");
+			removeEmptyRowsColumns(table, tableUtils);
 			writer.setSelection(firstTableCell, "in");
 		});
 	}
@@ -5000,7 +5042,8 @@ function fixTableSections(tableUtils, writer, table) {
 	const footerRows = table.getAttribute("footerRows") || 0;
 	const rows = tableUtils.getRows(table);
 	if (headingRows + footerRows > rows) {
-		updateNumericAttribute("footerRows", Math.max(0, rows - headingRows), table, writer, 0);
+		const value = Math.max(0, rows - headingRows);
+		updateNumericAttribute("footerRows", value, table, writer, 0);
 		return true;
 	}
 	return false;
@@ -6631,9 +6674,7 @@ var TableKeyboard = class extends Plugin {
 			case "right":
 				column += currentCellInfo.cellWidth;
 				break;
-			case "down":
-				row += currentCellInfo.cellHeight;
-				break;
+			case "down": row += currentCellInfo.cellHeight;
 		}
 		if (row < 0 || row > lastRow || column < 0 && row <= 0 || column > lastColumn && row >= lastRow) {
 			model.change((writer) => {
@@ -7989,12 +8030,13 @@ var TableCellPropertiesView = class extends View {
 		const t = this.t;
 		const backgroundRowLabel = new LabelView(locale);
 		backgroundRowLabel.text = t("Background");
-		const backgroundInput = new LabeledFieldView(locale, getLabeledColorInputCreator({
+		const colorInputCreator = getLabeledColorInputCreator({
 			colorConfig: this.options.backgroundColors,
 			columns: 5,
 			defaultColorValue: this.options.defaultTableCellProperties.backgroundColor,
 			colorPickerConfig: this.options.colorPickerConfig
-		}));
+		});
+		const backgroundInput = new LabeledFieldView(locale, colorInputCreator);
 		backgroundInput.set({
 			label: t("Color"),
 			class: "ck-table-cell-properties-form__background"
@@ -9737,8 +9779,9 @@ function enableCellTypeProperty(editor) {
 			const { writer } = conversionApi;
 			const { modelRange } = data;
 			const modelElement = modelRange?.start.nodeAfter;
-			if (modelElement?.is("element", "table") && modelElement.getAttribute("tableType") === "layout") {
-				for (const { cell } of new TableWalker(modelElement)) if (isTableHeaderCellType(cell.getAttribute("tableCellType"))) {
+			if (modelElement?.is("element", "table") && modelElement.getAttribute("tableType") === "layout") for (const { cell } of new TableWalker(modelElement)) {
+				const tableCellType = cell.getAttribute("tableCellType");
+				if (isTableHeaderCellType(tableCellType)) {
 					writer.setAttribute("tableType", "content", modelElement);
 					break;
 				}
@@ -9774,9 +9817,7 @@ function enableCellTypeProperty(editor) {
 					case "row":
 						writer.setAttribute("tableCellType", "header-row", modelElement);
 						break;
-					case "col":
-						writer.setAttribute("tableCellType", "header-column", modelElement);
-						break;
+					case "col": writer.setAttribute("tableCellType", "header-column", modelElement);
 				}
 			});
 		});
@@ -9816,7 +9857,8 @@ function enableCellTypeProperty(editor) {
 		}
 		for (const tableCell of cellsToReconvert) {
 			const viewElement = editing.mapper.toViewElement(tableCell);
-			const expectedElementName = isTableHeaderCellType(tableCell.getAttribute("tableCellType")) ? "th" : "td";
+			const cellType = tableCell.getAttribute("tableCellType");
+			const expectedElementName = isTableHeaderCellType(cellType) ? "th" : "td";
 			if (viewElement?.name !== expectedElementName) editing.reconvertItem(tableCell);
 		}
 	});
@@ -9971,7 +10013,8 @@ var TableLayoutUI = class extends Plugin {
 		if (!editor.plugins.has("TablePropertiesUI")) return;
 		const tablePropertiesUI = plugins.get("TablePropertiesUI");
 		ui.componentFactory.add("tableProperties", (locale) => {
-			const splitButtonView = new SplitButtonView(locale, tablePropertiesUI._createTablePropertiesButton());
+			const baseButton = tablePropertiesUI._createTablePropertiesButton();
+			const splitButtonView = new SplitButtonView(locale, baseButton);
 			return createTableTypeDropdown(editor, splitButtonView);
 		});
 	}
@@ -9988,7 +10031,8 @@ function createTableTypeDropdown(editor, dropdownButton) {
 	const locale = editor.locale;
 	const tableTypeCommand = editor.commands.get("tableType");
 	const dropdownView = createDropdown(locale, dropdownButton);
-	addListToDropdown(dropdownView, createTableLayoutTypeDropdownItems(editor), {
+	const itemsDefinitions = createTableLayoutTypeDropdownItems(editor);
+	addListToDropdown(dropdownView, itemsDefinitions, {
 		ariaLabel: t("Table type options"),
 		role: "menu"
 	});
@@ -10639,7 +10683,8 @@ var TableColumnResizeEditing = class extends Plugin {
 				const hasMoreColumns = currentColumnsDelta > 0;
 				const currentColumnIndex = plugin._tableUtilsPlugin.getCellLocation(cell).column;
 				if (hasMoreColumns) {
-					const columnWidthsToInsert = createFilledArray(currentColumnsDelta, isPixelMode ? 40 : getColumnMinWidthAsPercentage(table, plugin.editor));
+					const insertedColumnWidth = isPixelMode ? 40 : getColumnMinWidthAsPercentage(table, plugin.editor);
+					const columnWidthsToInsert = createFilledArray(currentColumnsDelta, insertedColumnWidth);
 					widths.splice(currentColumnIndex, 0, ...columnWidthsToInsert);
 				} else {
 					const removedColumnWidths = widths.splice(currentColumnIndex, Math.abs(currentColumnsDelta));
@@ -10858,7 +10903,8 @@ var TableColumnResizeEditing = class extends Plugin {
 			const tableWalker = new TableWalker(modelTable);
 			for (const cellSlot of tableWalker) {
 				const viewCell = editor.editing.mapper.toViewElement(cellSlot.cell);
-				const domCellWidth = getDomCellOuterWidth(editor.editing.view.domConverter.mapViewToDom(viewCell));
+				const domCell = editor.editing.view.domConverter.mapViewToDom(viewCell);
+				const domCellWidth = getDomCellOuterWidth(domCell);
 				if (!columnWidthsInPx[cellSlot.column] || domCellWidth < columnWidthsInPx[cellSlot.column]) columnWidthsInPx[cellSlot.column] = toPrecision(domCellWidth);
 			}
 			return columnWidthsInPx;
@@ -10892,7 +10938,8 @@ var TableColumnResizeEditing = class extends Plugin {
 			viewWriter.addClass("ck-table-resized", viewTable);
 			viewWriter.addClass("ck-table-column-resizer__active", resizingData.elements.viewResizer);
 			if (resizingData.flags.isPixelMode) return `${toPrecision(parseFloat(resizingData.elements.modelTable.getAttribute("tableWidth")))}px`;
-			return `${toPrecision(Math.max(resizingData.widths.tableWidth, resizingData.widths.viewFigureWidth) / resizingData.widths.viewFigureParentWidth * 100)}%`;
+			const figureWidth = Math.max(resizingData.widths.tableWidth, resizingData.widths.viewFigureWidth);
+			return `${toPrecision(figureWidth / resizingData.widths.viewFigureParentWidth * 100)}%`;
 		}
 	}
 	/**
@@ -10921,7 +10968,7 @@ var TableColumnResizeEditing = class extends Plugin {
 		const { columnPosition, flags: { isRightEdge, isTableCentered, isLtrContent, isPixelMode, isTableWidthWithinContainerAtDragStart, isTableScrollAllowed }, elements: { modelTable, viewFigure, viewLeftColumn, viewRightColumn, viewResizer }, widths: { viewFigureParentWidth, tableWidth, leftColumnWidth, rightColumnWidth } } = this._resizingData;
 		const dxLowerBound = -leftColumnWidth + 40;
 		const isTableScrollActive = !!(plugins.has("TableScrollEditing") ? plugins.get("TableScrollEditing") : null) && isTableScrollAllowed;
-		const containerWidth = getEditableWidth(this.editor, modelTable.root.rootName);
+		const containerWidth = getEditableContentWidth(this.editor, modelTable.root.rootName);
 		let dxUpperBound;
 		if (isRightEdge) dxUpperBound = isTableScrollActive ? Infinity : viewFigureParentWidth - tableWidth;
 		else dxUpperBound = rightColumnWidth - 40;
@@ -10942,7 +10989,10 @@ var TableColumnResizeEditing = class extends Plugin {
 			dx = newTableWidth - tableWidth;
 		} else dx = rawDx * (ltrSign * (isCenteredRightEdge ? 2 : 1));
 		dx = clamp(dx, Math.min(dxLowerBound, 0), Math.max(dxUpperBound, 0));
-		if (isTableScrollActive && isRightEdge) dx = clamp(applyContainerWidthResistance(tableWidth + dx, containerWidth) - tableWidth, Math.min(dxLowerBound, 0), Math.max(dxUpperBound, 0));
+		if (isTableScrollActive && isRightEdge) {
+			const resistedTableWidth = applyContainerWidthResistance(tableWidth + dx, containerWidth);
+			dx = clamp(resistedTableWidth - tableWidth, Math.min(dxLowerBound, 0), Math.max(dxUpperBound, 0));
+		}
 		if (dx === 0) return;
 		this.editor.editing.view.change((writer) => {
 			const toWidthValue = (widthInPx, basisInPx) => isPixelMode ? `${toPrecision(widthInPx)}px` : `${toPrecision(widthInPx * 100 / basisInPx)}%`;
@@ -11008,7 +11058,7 @@ var TableColumnResizeEditing = class extends Plugin {
 		const editor = this.editor;
 		const columnPosition = domEventData.domEvent.clientX;
 		const viewResizer = domEventData.target;
-		const viewLeftCell = viewResizer.findAncestor("td") || viewResizer.findAncestor("th");
+		const viewLeftCell = viewResizer.findAncestor((element) => element.is("element", "td") || element.is("element", "th"));
 		const modelLeftCell = editor.editing.mapper.toModelElement(viewLeftCell);
 		const modelTable = modelLeftCell.findAncestor("table");
 		const leftColumnIndex = getColumnEdgesIndexes(modelLeftCell, this._tableUtilsPlugin).rightEdge;
@@ -11027,12 +11077,13 @@ var TableColumnResizeEditing = class extends Plugin {
 		const viewColgroup = [...viewTable.getChildren()].find((viewCol) => viewCol.is("element", "colgroup"));
 		const viewLeftColumn = viewColgroup.getChild(leftColumnIndex);
 		const viewRightColumn = isRightEdge ? void 0 : viewColgroup.getChild(leftColumnIndex + 1);
-		const viewFigureParentWidth = getElementWidthInPixels(editor.editing.view.domConverter.mapViewToDom(viewFigure.parent));
+		const domFigureParent = editor.editing.view.domConverter.mapViewToDom(viewFigure.parent);
+		const viewFigureParentWidth = getContainerContentWidth(domFigureParent);
 		const viewFigureWidth = getElementWidthInPixels(editor.editing.view.domConverter.mapViewToDom(viewFigure));
 		const tableWidth = getTableWidthInPixels(modelTable, editor);
 		const leftColumnWidth = columnWidths[leftColumnIndex];
 		const rightColumnWidth = isRightEdge ? void 0 : columnWidths[leftColumnIndex + 1];
-		const isTableWidthWithinContainerAtDragStart = tableWidth <= getEditableWidth(editor, modelTable.root.rootName);
+		const isTableWidthWithinContainerAtDragStart = tableWidth <= getEditableContentWidth(editor, modelTable.root.rootName);
 		const tableScrollPlugin = editor.plugins.has("TableScrollEditing") ? editor.plugins.get("TableScrollEditing") : null;
 		return {
 			columnPosition,
@@ -11444,14 +11495,22 @@ function upcastLayoutTable(editor, preferredExternalTableType) {
 		dispatcher.on("element:table", (evt, data, conversionApi) => {
 			const { viewItem, modelRange } = data;
 			if (modelRange) {
-				conversionApi.writer.setAttribute("tableType", resolveTableType(viewItem, preferredExternalTableType), modelRange);
-				conversionApi.consumable.consume(viewItem, { classes: ["layout-table"] });
-				conversionApi.consumable.consume(viewItem, { classes: ["content-table"] });
+				const resolvedType = resolveTableType(viewItem, preferredExternalTableType);
+				conversionApi.writer.setAttribute("tableType", resolvedType, modelRange);
+				consumeViewTableClasses(conversionApi.consumable, viewItem);
+				if (resolvedType === "content" && viewItem.parent?.is("element", "figure")) consumeViewTableClasses(conversionApi.consumable, viewItem.parent);
 			}
 		}, { priority: "low" });
 	};
 }
 /**
+* Consume all possible classes that determine type of table on provided view item.
+*/
+function consumeViewTableClasses(consumable, viewItem) {
+	consumable.consume(viewItem, { classes: ["layout-table"] });
+	consumable.consume(viewItem, { classes: ["content-table"] });
+}
+/**
 * Model table container element to view table element conversion helper.
 *
 * @returns Conversion helper.
@@ -12605,12 +12664,13 @@ var TablePropertiesView = class extends View {
 		const t = this.t;
 		const backgroundRowLabel = new LabelView(locale);
 		backgroundRowLabel.text = t("Background");
-		const backgroundInput = new LabeledFieldView(locale, getLabeledColorInputCreator({
+		const backgroundInputCreator = getLabeledColorInputCreator({
 			colorConfig: this.options.backgroundColors,
 			columns: 5,
 			defaultColorValue: this.options.defaultTableProperties.backgroundColor,
 			colorPickerConfig: this.options.colorPickerConfig
-		}));
+		});
+		const backgroundInput = new LabeledFieldView(locale, backgroundInputCreator);
 		backgroundInput.set({
 			label: t("Color"),
 			class: "ck-table-properties-form__background"
@@ -13727,7 +13787,7 @@ var TableScrollEditing = class extends Plugin {
 	*/
 	_updateTableScrollOverflowState(table, tableWidthOverride) {
 		const { editor } = this;
-		const containerWidth = getEditableWidth(editor, table.root.rootName);
+		const containerWidth = getEditableContentWidth(editor, table.root.rootName);
 		if (containerWidth === null) return;
 		const viewFigure = editor.editing.mapper.toViewElement(table);
 		if (!viewFigure) return;