@ckeditor/ckeditor5-table 0.0.0-nightly-next-20251230.0 → 0.0.0-nightly-20251231.0

package/src/tableutils.js

@@ -145,7 +145,6 @@ export class TableUtils extends Plugin {
         const isCopyStructure = options.copyStructureFromAbove !== undefined;
         const copyStructureFrom = options.copyStructureFromAbove ? insertAt - 1 : insertAt;
         const cellTypeEnabled = isTableCellTypeEnabled(this.editor);
-        const scopedHeaders = !!this.editor.config.get('table.tableCellProperties.scopedHeaders');
         const rows = this.getRows(table);
         const columns = this.getColumns(table);
         if (insertAt > rows) {
@@ -158,6 +157,7 @@ export class TableUtils extends Plugin {
         }
         model.change(writer => {
             let headingRows = table.getAttribute('headingRows') || 0;
+            const headingColumns = table.getAttribute('headingColumns') || 0;
             // Inserting rows inside heading section requires to update `headingRows` attribute as the heading section will grow.
             if (headingRows > insertAt) {
                 headingRows += rowsToInsert;
@@ -172,14 +172,10 @@ export class TableUtils extends Plugin {
                     for (let rowOffset = 0; rowOffset < rows.length; rowOffset++) {
                         const row = rows[rowOffset];
                         for (let columnIndex = 0; columnIndex < columns; columnIndex++) {
-                            updateTableCellType({
-                                table,
-                                writer,
-                                cell: row[columnIndex],
-                                row: insertAt + rowOffset,
-                                column: columnIndex,
-                                scopedHeaders
-                            });
+                            const cell = row[columnIndex];
+                            if (insertAt + rowOffset < headingRows || columnIndex < headingColumns) {
+                                writer.setAttribute('tableCellType', 'header', cell);
+                            }
                         }
                     }
                 }
@@ -214,16 +210,10 @@ export class TableUtils extends Plugin {
                     const insertPosition = writer.createPositionAt(tableRow, 'end');
                     // Insert the empty cell only if this slot is not row-spanned from any other cell.
                     if (colspan > 0) {
-                        const insertedCell = createEmptyTableCell(writer, insertPosition, colspan > 1 ? { colspan } : undefined);
-                        if (cellTypeEnabled) {
-                            updateTableCellType({
-                                table,
-                                writer,
-                                cell: insertedCell,
-                                row: insertAt + rowIndex,
-                                column: cellIndex,
-                                scopedHeaders
-                            });
+                        const insertedCells = createEmptyTableCell(writer, insertPosition, colspan > 1 ? { colspan } : undefined);
+                        // If we insert row in heading section, set proper cell type.
+                        if (cellTypeEnabled && (insertAt + rowIndex < headingRows || cellIndex < headingColumns)) {
+                            writer.setAttribute('tableCellType', 'header', insertedCells);
                         }
                     }
                     // Skip the col-spanned slots, there won't be any cells.
@@ -264,8 +254,8 @@ export class TableUtils extends Plugin {
         const insertAt = options.at || 0;
         const columnsToInsert = options.columns || 1;
         const cellTypeEnabled = isTableCellTypeEnabled(this.editor);
-        const scopedHeaders = !!this.editor.config.get('table.tableCellProperties.scopedHeaders');
         model.change(writer => {
+            const headingRows = table.getAttribute('headingRows') || 0;
             let headingColumns = table.getAttribute('headingColumns');
             // Inserting columns inside heading section requires to update `headingColumns` attribute as the heading section will grow.
             if (insertAt < headingColumns) {
@@ -287,14 +277,9 @@ export class TableUtils extends Plugin {
                     if (cellTypeEnabled) {
                         // If we insert column in heading section, set proper cell type.
                         for (let columnOffset = 0; columnOffset < insertedCells.length; columnOffset++) {
-                            updateTableCellType({
-                                table,
-                                writer,
-                                cell: insertedCells[columnOffset],
-                                row: rowIndex,
-                                column: insertAt + columnOffset,
-                                scopedHeaders
-                            });
+                            if (insertAt + columnOffset < headingColumns || rowIndex < headingRows) {
+                                writer.setAttribute('tableCellType', 'header', insertedCells[columnOffset]);
+                            }
                         }
                     }
                     rowIndex++;
@@ -325,14 +310,9 @@ export class TableUtils extends Plugin {
                     // If we insert column in heading section, set proper cell type.
                     if (cellTypeEnabled) {
                         for (let columnOffset = 0; columnOffset < insertedCells.length; columnOffset++) {
-                            updateTableCellType({
-                                table,
-                                writer,
-                                cell: insertedCells[columnOffset],
-                                row,
-                                column: insertAt + columnOffset,
-                                scopedHeaders
-                            });
+                            if (insertAt + columnOffset < headingColumns || row < headingRows) {
+                                writer.setAttribute('tableCellType', 'header', insertedCells[columnOffset]);
+                            }
                         }
                     }
                 }
@@ -825,7 +805,6 @@ export class TableUtils extends Plugin {
      */
     setHeadingRowsCount(writer, table, headingRows, options = {}) {
         const { shallow, resetFormerHeadingCells = true, autoExpand = true } = options;
-        const scopedHeaders = !!this.editor.config.get('table.tableCellProperties.scopedHeaders');
         const oldHeadingRows = table.getAttribute('headingRows') || 0;
         if (headingRows === oldHeadingRows) {
             return;
@@ -841,8 +820,7 @@ export class TableUtils extends Plugin {
                 writer,
                 cell,
                 row,
-                column,
-                scopedHeaders
+                column
             });
         }
         // If heading rows were reduced, set body type to all cells in rows that are no longer in heading section.
@@ -859,8 +837,7 @@ export class TableUtils extends Plugin {
                         writer,
                         cell,
                         row: cellRow,
-                        column,
-                        scopedHeaders
+                        column
                     });
                 }
             }
@@ -891,7 +868,6 @@ export class TableUtils extends Plugin {
     setHeadingColumnsCount(writer, table, headingColumns, options = {}) {
         const { shallow, resetFormerHeadingCells = true, autoExpand = true } = options;
         const oldHeadingColumns = table.getAttribute('headingColumns') || 0;
-        const scopedHeaders = !!this.editor.config.get('table.tableCellProperties.scopedHeaders');
         if (headingColumns === oldHeadingColumns) {
             return;
         }
@@ -906,8 +882,7 @@ export class TableUtils extends Plugin {
                 writer,
                 cell,
                 row,
-                column,
-                scopedHeaders
+                column
             });
         }
         // If heading columns were reduced, set body type to all cells in columns that are no longer in heading section.
@@ -924,8 +899,7 @@ export class TableUtils extends Plugin {
                         writer,
                         cell,
                         row,
-                        column: cellColumn,
-                        scopedHeaders
+                        column: cellColumn
                     });
                 }
             }
@@ -1296,22 +1270,13 @@ function getBiggestRectangleArea(rows, columns) {
  * Updates the `tableCellType` attribute of a table cell based on its position in the table
  * and the table's `headingRows` and `headingColumns` attributes.
  */
-function updateTableCellType({ writer, table, row, column, cell, scopedHeaders }) {
+function updateTableCellType({ writer, table, row, column, cell }) {
     const headingRows = table.getAttribute('headingRows') || 0;
     const headingColumns = table.getAttribute('headingColumns') || 0;
     if (row >= headingRows && column >= headingColumns) {
         writer.removeAttribute('tableCellType', cell);
-        return;
     }
-    let headerCellType = 'header';
-    // If scoped headers are enabled, we prefer to set 'row' or 'column' header types depending on the position.
-    if (scopedHeaders) {
-        if (row < headingRows) {
-            headerCellType = 'header-column';
-        }
-        else {
-            headerCellType = 'header-row';
-        }
+    else {
+        writer.setAttribute('tableCellType', 'header', cell);
     }
-    writer.setAttribute('tableCellType', headerCellType, cell);
 }

package/src/utils/common.js

@@ -4,7 +4,6 @@
  */
 import { downcastAttributeToStyle, upcastStyleToAttribute } from '../converters/tableproperties.js';
 import { TableWalker } from '../tablewalker.js';
-import { isTableHeaderCellType } from '../tablecellproperties/tablecellpropertiesutils.js';
 /**
  * A common method to update the numeric value. If a value is the default one, it will be unset.
  *
@@ -101,7 +100,7 @@ export function isEntireCellsLineHeader({ table, row, column }) {
     const tableWalker = new TableWalker(table, { row, column });
     for (const { cell } of tableWalker) {
         const cellType = cell.getAttribute('tableCellType');
-        if (!isTableHeaderCellType(cellType)) {
+        if (cellType !== 'header') {
             return false;
         }
     }
@@ -113,6 +112,7 @@ export function isEntireCellsLineHeader({ table, row, column }) {
  * @internal
  */
 export function isTableCellTypeEnabled(editor) {
-    const { model } = editor;
-    return model.schema.checkAttribute('tableCell', 'tableCellType');
+    const { model, config } = editor;
+    return (model.schema.checkAttribute('tableCell', 'tableCellType') &&
+        config.get('experimentalFlags.tableCellTypeSupport') === true);
 }

package/src/utils/ui/table-propertiesexperimental.d.ts

@@ -0,0 +1,215 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/**
+ * @module table/utils/ui/table-propertiesexperimental
+ */
+import { type ColorOption, type LabeledFieldView, type ListDropdownItemDefinition, type NormalizedColorOption, type ToolbarView, type View, type ColorPickerConfig } from 'ckeditor5/src/ui.js';
+import { Collection, type LocaleTranslate } from 'ckeditor5/src/utils.js';
+import { type TableCellPropertiesViewExperimental } from '../../tablecellproperties/ui/tablecellpropertiesviewexperimental.js';
+import { type TablePropertiesViewExperimental } from '../../tableproperties/ui/tablepropertiesviewexperimental.js';
+import { ColorInputView } from '../../ui/colorinputview.js';
+/**
+ * Returns an object containing pairs of CSS border style values and their localized UI
+ * labels. Used by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}
+ * and {@link module:table/tableproperties/ui/tablepropertiesview~TablePropertiesView}.
+ *
+ * @internal
+ * @param t The "t" function provided by the editor that is used to localize strings.
+ */
+export declare function getBorderStyleLabels(t: LocaleTranslate): Record<string, string>;
+/**
+ * Returns a localized error string that can be displayed next to color (background, border)
+ * fields that have an invalid value.
+ *
+ * @internal
+ * @param t The "t" function provided by the editor that is used to localize strings.
+ */
+export declare function getLocalizedColorErrorText(t: LocaleTranslate): string;
+/**
+ * Returns a localized error string that can be displayed next to length (padding, border width)
+ * fields that have an invalid value.
+ *
+ * @internal
+ * @param t The "t" function provided by the editor that is used to localize strings.
+ */
+export declare function getLocalizedLengthErrorText(t: LocaleTranslate): string;
+/**
+ * Returns `true` when the passed value is an empty string or a valid CSS color expression.
+ * Otherwise, `false` is returned.
+ *
+ * See {@link module:engine/view/styles/utils~isColorStyleValue}.
+ *
+ * @internal
+ */
+export declare function colorFieldValidator(value: string): boolean;
+/**
+ * Returns `true` when the passed value is an empty string, a number without a unit or a valid CSS length expression.
+ * Otherwise, `false` is returned.
+ *
+ * See {@link module:engine/view/styles/utils~isLengthStyleValue}.
+ * See {@link module:engine/view/styles/utils~isPercentageStyleValue}.
+ *
+ * @internal
+ */
+export declare function lengthFieldValidator(value: string): boolean;
+/**
+ * Returns `true` when the passed value is an empty string, a number without a unit or a valid CSS length expression.
+ * Otherwise, `false` is returned.
+ *
+ * See {@link module:engine/view/styles/utils~isLengthStyleValue}.
+ *
+ * @internal
+ */
+export declare function lineWidthFieldValidator(value: string): boolean;
+/**
+ * Generates item definitions for a UI dropdown that allows changing the border style of a table or a table cell.
+ *
+ * @internal
+ * @param defaultStyle The default border.
+ */
+export declare function getBorderStyleDefinitions(view: TableCellPropertiesViewExperimental | TablePropertiesViewExperimental, defaultStyle: string): Collection<ListDropdownItemDefinition>;
+/**
+ * A helper that fills a toolbar with buttons that:
+ *
+ * * have some labels,
+ * * have some icons,
+ * * set a certain UI view property value upon execution.
+ *
+ * @internal
+ * @param options Configuration options
+ * @param options.view The view that has the observable property.
+ * @param options.icons Object with button icons.
+ * @param options.toolbar The toolbar to fill with buttons.
+ * @param options.labels Object with button labels.
+ * @param options.propertyName The name of the observable property in the view.
+ * @param options.nameToValue A function that maps a button name to a value. By default names are the same as values.
+ * @param options.defaultValue Default value for the property.
+ */
+export declare function fillToolbar<TView extends View, TPropertyName extends keyof TView>(options: {
+    view: TView;
+    icons: Record<string, string>;
+    toolbar: ToolbarView;
+    labels: Record<number, string>;
+    propertyName: TPropertyName;
+    nameToValue?: (name: string) => string;
+    defaultValue?: string;
+}): void;
+/**
+ * A default color palette used by various user interfaces related to tables, for instance,
+ * by {@link module:table/tablecellproperties/tablecellpropertiesui~TableCellPropertiesUI} or
+ * {@link module:table/tableproperties/tablepropertiesui~TablePropertiesUI}.
+ *
+ * The color palette follows the {@link module:table/tableconfig~TableColorConfig table color configuration format}
+ * and contains the following color definitions:
+ *
+ * ```ts
+ * const defaultColors = [
+ *   {
+ *     color: 'hsl(0, 0%, 0%)',
+ *     label: 'Black'
+ *   },
+ *   {
+ *     color: 'hsl(0, 0%, 30%)',
+ *     label: 'Dim grey'
+ *   },
+ *   {
+ *     color: 'hsl(0, 0%, 60%)',
+ *     label: 'Grey'
+ *   },
+ *   {
+ *     color: 'hsl(0, 0%, 90%)',
+ *     label: 'Light grey'
+ *   },
+ *   {
+ *     color: 'hsl(0, 0%, 100%)',
+ *     label: 'White',
+ *     hasBorder: true
+ *   },
+ *   {
+ *     color: 'hsl(0, 75%, 60%)',
+ *     label: 'Red'
+ *   },
+ *   {
+ *     color: 'hsl(30, 75%, 60%)',
+ *     label: 'Orange'
+ *   },
+ *   {
+ *     color: 'hsl(60, 75%, 60%)',
+ *     label: 'Yellow'
+ *   },
+ *   {
+ *     color: 'hsl(90, 75%, 60%)',
+ *     label: 'Light green'
+ *   },
+ *   {
+ *     color: 'hsl(120, 75%, 60%)',
+ *     label: 'Green'
+ *   },
+ *   {
+ *     color: 'hsl(150, 75%, 60%)',
+ *     label: 'Aquamarine'
+ *   },
+ *   {
+ *     color: 'hsl(180, 75%, 60%)',
+ *     label: 'Turquoise'
+ *   },
+ *   {
+ *     color: 'hsl(210, 75%, 60%)',
+ *     label: 'Light blue'
+ *   },
+ *   {
+ *     color: 'hsl(240, 75%, 60%)',
+ *     label: 'Blue'
+ *   },
+ *   {
+ *     color: 'hsl(270, 75%, 60%)',
+ *     label: 'Purple'
+ *   }
+ * ];
+ * ```
+ *
+ * @internal
+ */
+export declare const defaultColors: Array<ColorOption>;
+/**
+ * Returns a creator for a color input with a label.
+ *
+ * For given options, it returns a function that creates an instance of a
+ * {@link module:table/ui/colorinputview~ColorInputView color input} logically related to
+ * a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView labeled view} in the DOM.
+ *
+ * The helper does the following:
+ *
+ * * It sets the color input `id` and `ariaDescribedById` attributes.
+ * * It binds the color input `isReadOnly` to the labeled view.
+ * * It binds the color input `hasError` to the labeled view.
+ * * It enables a logic that cleans up the error when the user starts typing in the color input.
+ *
+ * Usage:
+ *
+ * ```ts
+ * const colorInputCreator = getLabeledColorInputCreator( {
+ *   colorConfig: [ ... ],
+ *   columns: 3,
+ * } );
+ *
+ * const labeledInputView = new LabeledFieldView( locale, colorInputCreator );
+ * console.log( labeledInputView.view ); // A color input instance.
+ * ```
+ *
+ * @internal
+ * @param options Color input options.
+ * @param options.colorConfig The configuration of the color palette displayed in the input's dropdown.
+ * @param options.columns The configuration of the number of columns the color palette consists of in the input's dropdown.
+ * @param options.defaultColorValue If specified, the color input view will replace the "Remove color" button with
+ * the "Restore default" button. Instead of clearing the input field, the default color value will be set.
+ * @param options.colorPickerConfig The configuration of the color picker. You could disable it or define your output format.
+ */
+export declare function getLabeledColorInputCreator(options: {
+    colorConfig: Array<NormalizedColorOption>;
+    columns: number;
+    defaultColorValue?: string;
+    colorPickerConfig: false | ColorPickerConfig;
+}): (labeledFieldView: LabeledFieldView, viewUid: string, statusUid: string) => ColorInputView;