@ckeditor/ckeditor5-table 39.0.0 → 39.0.2

package/src/tablecolumnresize/utils.d.ts

@@ -90,8 +90,6 @@ export declare function sumArray(array: Array<number | string>): number;
  * changed proportionally so that they all sum back to 100%. If there are columns without specified width, the amount remaining
  * after assigning the known widths will be distributed equally between them.
  *
- * Currently, only widths provided as percentage values are supported.
- *
  * @param columnWidths An array of column widths.
  * @returns An array of column widths guaranteed to sum up to 100%.
  */
@@ -124,7 +122,7 @@ export declare function updateColumnElements(columns: Array<Element>, tableColum
  */
 export declare function getColumnGroupElement(element: Element): Element;
 /**
- * Returns an array of 'tableColumn' elements.
+ * Returns an array of 'tableColumn' elements. It may be empty if there's no `tableColumnGroup` element.
  *
  * @internal
  * @param element A 'table' or 'tableColumnGroup' element.
@@ -139,3 +137,12 @@ export declare function getTableColumnElements(element: Element): Array<Element>
  * @returns An array of table column widths.
  */
 export declare function getTableColumnsWidths(element: Element): Array<string>;
+/**
+ * Translates the `colSpan` model attribute into additional column widths and returns the resulting array.
+ *
+ * @internal
+ * @param element A 'table' or 'tableColumnGroup' element.
+ * @param writer A writer instance.
+ * @returns An array of table column widths.
+ */
+export declare function translateColSpanAttribute(element: Element, writer: Writer): Array<string>;

package/src/tablecolumnresize/utils.js

@@ -188,14 +188,11 @@ export function sumArray(array) {
  * changed proportionally so that they all sum back to 100%. If there are columns without specified width, the amount remaining
  * after assigning the known widths will be distributed equally between them.
  *
- * Currently, only widths provided as percentage values are supported.
- *
  * @param columnWidths An array of column widths.
  * @returns An array of column widths guaranteed to sum up to 100%.
  */
 export function normalizeColumnWidths(columnWidths) {
     const widths = columnWidths.map(width => {
-        // Possible values are 'auto' or string ending with '%'
         if (width === 'auto') {
             return width;
         }
@@ -309,14 +306,18 @@ export function getColumnGroupElement(element) {
         .find(element => element.is('element', 'tableColumnGroup'));
 }
 /**
- * Returns an array of 'tableColumn' elements.
+ * Returns an array of 'tableColumn' elements. It may be empty if there's no `tableColumnGroup` element.
  *
  * @internal
  * @param element A 'table' or 'tableColumnGroup' element.
  * @returns An array of 'tableColumn' elements.
  */
 export function getTableColumnElements(element) {
-    return Array.from(getColumnGroupElement(element).getChildren());
+    const columnGroupElement = getColumnGroupElement(element);
+    if (!columnGroupElement) {
+        return [];
+    }
+    return Array.from(columnGroupElement.getChildren());
 }
 /**
  * Returns an array of table column widths.
@@ -328,3 +329,30 @@ export function getTableColumnElements(element) {
 export function getTableColumnsWidths(element) {
     return getTableColumnElements(element).map(column => column.getAttribute('columnWidth'));
 }
+/**
+ * Translates the `colSpan` model attribute into additional column widths and returns the resulting array.
+ *
+ * @internal
+ * @param element A 'table' or 'tableColumnGroup' element.
+ * @param writer A writer instance.
+ * @returns An array of table column widths.
+ */
+export function translateColSpanAttribute(element, writer) {
+    const tableColumnElements = getTableColumnElements(element);
+    return tableColumnElements.reduce((acc, element) => {
+        const columnWidth = element.getAttribute('columnWidth');
+        const colSpan = element.getAttribute('colSpan');
+        if (!colSpan) {
+            acc.push(columnWidth);
+            return acc;
+        }
+        // Translate the `colSpan` model attribute on to the proper number of column widths
+        // and remove it from the element.
+        // See https://github.com/ckeditor/ckeditor5/issues/14521#issuecomment-1662102889 for more details.
+        for (let i = 0; i < colSpan; i++) {
+            acc.push(columnWidth);
+        }
+        writer.removeAttribute('colSpan', element);
+        return acc;
+    }, []);
+}

package/src/tableutils.js

@@ -10,6 +10,7 @@ import { Plugin } from 'ckeditor5/src/core';
 import TableWalker from './tablewalker';
 import { createEmptyTableCell, updateNumericAttribute } from './utils/common';
 import { removeEmptyColumns, removeEmptyRows } from './utils/structure';
+import { getTableColumnElements } from './tablecolumnresize/utils';
 /**
  * The table utilities plugin.
  */
@@ -378,6 +379,7 @@ export default class TableUtils extends Plugin {
         const last = options.at + columnsToRemove - 1;
         model.change(writer => {
             adjustHeadingColumns(table, { first, last }, writer);
+            const tableColumns = getTableColumnElements(table);
             for (let removedColumnIndex = last; removedColumnIndex >= first; removedColumnIndex--) {
                 for (const { cell, column, cellWidth } of [...new TableWalker(table)]) {
                     // If colspaned cell overlaps removed column decrease its span.
@@ -389,6 +391,18 @@ export default class TableUtils extends Plugin {
                         writer.remove(cell);
                     }
                 }
+                // If table has `tableColumn` elements, we need to update it manually.
+                // See https://github.com/ckeditor/ckeditor5/issues/14521#issuecomment-1662102889 for details.
+                if (tableColumns[removedColumnIndex]) {
+                    // If the removed column is the first one then we need to add its width to the next column.
+                    // Otherwise we add it to the previous column.
+                    const adjacentColumn = removedColumnIndex === 0 ? tableColumns[1] : tableColumns[removedColumnIndex - 1];
+                    const removedColumnWidth = parseFloat(tableColumns[removedColumnIndex].getAttribute('columnWidth'));
+                    const adjacentColumnWidth = parseFloat(adjacentColumn.getAttribute('columnWidth'));
+                    writer.remove(tableColumns[removedColumnIndex]);
+                    // Add the removed column width (in %) to the adjacent column.
+                    writer.setAttribute('columnWidth', removedColumnWidth + adjacentColumnWidth + '%', adjacentColumn);
+                }
             }
             // Remove empty rows that could appear after removing columns.
             if (!removeEmptyRows(table, this)) {

package/src/tablewalker.d.ts

@@ -107,6 +107,10 @@ export default class TableWalker implements IterableIterator<TableSlot> {
      * Index of the next column where a cell is anchored.
      */
     private _nextCellAtColumn;
+    /**
+     * Indicates whether the iterator jumped to (or close to) the start row, ignoring rows that don't need to be traversed.
+     */
+    private _jumpedToStartRow;
     /**
      * Creates an instance of the table walker.
      *
@@ -245,6 +249,41 @@ export default class TableWalker implements IterableIterator<TableSlot> {
      * @param data A spanned cell details (cell element, anchor row and column).
      */
     private _markSpannedCell;
+    /**
+     * Checks if part of the table can be skipped.
+     */
+    private _canJumpToStartRow;
+    /**
+     * Sets the current row to `this._startRow` or the first row before it that has the number of cells
+     * equal to the number of columns in the table.
+     *
+     * Example:
+     * 	+----+----+----+
+     *  | 00 | 01 | 02 |
+     *  |----+----+----+
+     *  | 10      | 12 |
+     *  |         +----+
+     *  |         | 22 |
+     *  |         +----+
+     *  |         | 32 | <--- Start row
+     *  +----+----+----+
+     *  | 40 | 41 | 42 |
+     *  +----+----+----+
+     *
+     * If the 4th row is a `this._startRow`, this method will:
+     * 1.) Count the number of columns this table has based on the first row (3 columns in this case).
+     * 2.) Check if the 4th row contains 3 cells. It doesn't, so go to the row before it.
+     * 3.) Check if the 3rd row contains 3 cells. It doesn't, so go to the row before it.
+     * 4.) Check if the 2nd row contains 3 cells. It does, so set the current row to that row.
+     *
+     * Setting the current row this way is necessary to let the `next()`  method loop over the cells
+     * spanning multiple rows or columns and update the `this._spannedCells` property.
+     */
+    private _jumpToNonSpannedRowClosestToStartRow;
+    /**
+     * Returns a number of columns in a row taking `colspan` into consideration.
+     */
+    private _getRowLength;
 }
 /**
  * An object returned by {@link module:table/tablewalker~TableWalker} when traversing table cells.

package/src/tablewalker.js

@@ -84,6 +84,10 @@ export default class TableWalker {
      * @param options.includeAllSlots Also return values for spanned cells. Default value is "false".
      */
     constructor(table, options = {}) {
+        /**
+         * Indicates whether the iterator jumped to (or close to) the start row, ignoring rows that don't need to be traversed.
+         */
+        this._jumpedToStartRow = false;
         this._table = table;
         this._startRow = options.row !== undefined ? options.row : options.startRow || 0;
         this._endRow = options.row !== undefined ? options.row : options.endRow;
@@ -110,6 +114,9 @@ export default class TableWalker {
      * @returns The next table walker's value.
      */
     next() {
+        if (this._canJumpToStartRow()) {
+            this._jumpToNonSpannedRowClosestToStartRow();
+        }
         const row = this._table.getChild(this._rowIndex);
         // Iterator is done when there's no row (table ended) or the row is after `endRow` limit.
         if (!row || this._isOverEndRow()) {
@@ -259,6 +266,59 @@ export default class TableWalker {
         const rowSpans = this._spannedCells.get(row);
         rowSpans.set(column, data);
     }
+    /**
+     * Checks if part of the table can be skipped.
+     */
+    _canJumpToStartRow() {
+        return !!this._startRow &&
+            this._startRow > 0 &&
+            !this._jumpedToStartRow;
+    }
+    /**
+     * Sets the current row to `this._startRow` or the first row before it that has the number of cells
+     * equal to the number of columns in the table.
+     *
+     * Example:
+     * 	+----+----+----+
+     *  | 00 | 01 | 02 |
+     *  |----+----+----+
+     *  | 10      | 12 |
+     *  |         +----+
+     *  |         | 22 |
+     *  |         +----+
+     *  |         | 32 | <--- Start row
+     *  +----+----+----+
+     *  | 40 | 41 | 42 |
+     *  +----+----+----+
+     *
+     * If the 4th row is a `this._startRow`, this method will:
+     * 1.) Count the number of columns this table has based on the first row (3 columns in this case).
+     * 2.) Check if the 4th row contains 3 cells. It doesn't, so go to the row before it.
+     * 3.) Check if the 3rd row contains 3 cells. It doesn't, so go to the row before it.
+     * 4.) Check if the 2nd row contains 3 cells. It does, so set the current row to that row.
+     *
+     * Setting the current row this way is necessary to let the `next()`  method loop over the cells
+     * spanning multiple rows or columns and update the `this._spannedCells` property.
+     */
+    _jumpToNonSpannedRowClosestToStartRow() {
+        const firstRowLength = this._getRowLength(0);
+        for (let i = this._startRow; !this._jumpedToStartRow; i--) {
+            if (firstRowLength === this._getRowLength(i)) {
+                this._row = i;
+                this._rowIndex = i;
+                this._jumpedToStartRow = true;
+            }
+        }
+    }
+    /**
+     * Returns a number of columns in a row taking `colspan` into consideration.
+     */
+    _getRowLength(rowIndex) {
+        const row = this._table.getChild(rowIndex);
+        return [...row.getChildren()].reduce((cols, row) => {
+            return cols + parseInt(row.getAttribute('colspan') || '1');
+        }, 0);
+    }
 }
 /**
  * An object returned by {@link module:table/tablewalker~TableWalker} when traversing table cells.

package/src/utils/ui/table-properties.js

@@ -55,7 +55,7 @@ export function getLocalizedLengthErrorText(t) {
  * See {@link module:engine/view/styles/utils~isColor}.
  */
 export function colorFieldValidator(value) {
-    value = value.trim();
+    value = value.trim().toLowerCase();
     return isEmpty(value) || isColor(value);
 }
 /**

package/theme/tablecolumnresize.css

@@ -30,12 +30,8 @@
 
 .ck.ck-editor__editable .table .ck-table-column-resizer {
 	position: absolute;
-	/* The resizer element resides in each cell so to occupy the entire height of the table, which is unknown from a CSS point of view,
-	   it is extended to an extremely high height. Even for screens with a very high pixel density, the resizer will fulfill its role as
-	   it should, i.e. for a screen of 476 ppi the total height of the resizer will take over 350 sheets of A4 format, which is totally
-	   unrealistic height for a single table. */
-	top: -999999px;
-	bottom: -999999px;
+	top: 0;
+	bottom: 0;
 	right: var(--ck-table-column-resizer-position-offset);
 	width: var(--ck-table-column-resizer-width);
 	cursor: col-resize;
@@ -57,6 +53,12 @@
 .ck.ck-editor__editable .table .ck-table-column-resizer__active {
 	background-color: var(--ck-color-selector-column-resizer-hover);
 	opacity: 0.25;
+	/* The resizer element resides in each cell so to occupy the entire height of the table, which is unknown from a CSS point of view,
+	   it is extended to an extremely high height. Even for screens with a very high pixel density, the resizer will fulfill its role as
+	   it should, i.e. for a screen of 476 ppi the total height of the resizer will take over 350 sheets of A4 format, which is totally
+	   unrealistic height for a single table. */
+	top: -999999px;
+	bottom: -999999px;
 }
 
 .ck.ck-editor__editable[dir=rtl] .table .ck-table-column-resizer {