@ckeditor/ckeditor5-table 0.0.0-nightly-20250305.0 → 0.0.0-nightly-next-20250305.0

package/src/tableproperties/ui/tablepropertiesview.js

@@ -5,12 +5,13 @@
 /**
  * @module table/tableproperties/ui/tablepropertiesview
  */
-import { addListToDropdown, ButtonView, createLabeledDropdown, createLabeledInputText, FocusCycler, FormHeaderView, LabeledFieldView, LabelView, submitHandler, ToolbarView, View, ViewCollection } from 'ckeditor5/src/ui.js';
+import { addListToDropdown, ButtonView, createLabeledDropdown, createLabeledInputText, FocusCycler, FormRowView, FormHeaderView, LabeledFieldView, LabelView, submitHandler, ToolbarView, View, ViewCollection } from 'ckeditor5/src/ui.js';
 import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils.js';
-import { icons } from 'ckeditor5/src/core.js';
+import { IconCancel, IconCheck, IconObjectCenter, IconObjectInlineLeft, IconObjectInlineRight } from 'ckeditor5/src/icons.js';
 import { fillToolbar, getBorderStyleDefinitions, getBorderStyleLabels, getLabeledColorInputCreator } from '../../utils/ui/table-properties.js';
-import FormRowView from '../../ui/formrowview.js';
-import '../../../theme/form.css';
+// eslint-disable-next-line ckeditor5-rules/ckeditor-imports
+import '@ckeditor/ckeditor5-ui/theme/components/form/form.css';
+import '../../../theme/formrow.css';
 import '../../../theme/tableform.css';
 import '../../../theme/tableproperties.css';
 /**
@@ -18,6 +19,66 @@ import '../../../theme/tableproperties.css';
  * certain style aspects of a table, for instance, border, background color, alignment, etc..
  */
 export default class TablePropertiesView extends View {
+    /**
+     * Options passed to the view. See {@link #constructor} to learn more.
+     */
+    options;
+    /**
+     * Tracks information about the DOM focus in the form.
+     */
+    focusTracker;
+    /**
+     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     */
+    keystrokes;
+    /**
+     * A collection of child views in the form.
+     */
+    children;
+    /**
+     * A dropdown that allows selecting the style of the table border.
+     */
+    borderStyleDropdown;
+    /**
+     * An input that allows specifying the width of the table border.
+     */
+    borderWidthInput;
+    /**
+     * An input that allows specifying the color of the table border.
+     */
+    borderColorInput;
+    /**
+     * An input that allows specifying the table background color.
+     */
+    backgroundInput;
+    /**
+     * An input that allows specifying the table width.
+     */
+    widthInput;
+    /**
+     * An input that allows specifying the table height.
+     */
+    heightInput;
+    /**
+     * A toolbar with buttons that allow changing the alignment of an entire table.
+     */
+    alignmentToolbar;
+    /**
+     * The "Save" button view.
+     */
+    saveButtonView;
+    /**
+     * The "Cancel" button view.
+     */
+    cancelButtonView;
+    /**
+     * A collection of views that can be focused in the form.
+     */
+    _focusables;
+    /**
+     * Helps cycling over {@link #_focusables} in the form.
+     */
+    _focusCycler;
     /**
      * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
      * @param options Additional configuration of the view.
@@ -383,9 +444,9 @@ export default class TablePropertiesView extends View {
         fillToolbar({
             view: this,
             icons: {
-                left: icons.objectLeft,
-                center: icons.objectCenter,
-                right: icons.objectRight
+                left: IconObjectInlineLeft,
+                center: IconObjectCenter,
+                right: IconObjectInlineRight
             },
             toolbar: alignmentToolbar,
             labels: this._alignmentLabels,
@@ -417,7 +478,7 @@ export default class TablePropertiesView extends View {
         ];
         saveButtonView.set({
             label: t('Save'),
-            icon: icons.check,
+            icon: IconCheck,
             class: 'ck-button-save',
             type: 'submit',
             withText: true
@@ -427,7 +488,7 @@ export default class TablePropertiesView extends View {
         });
         cancelButtonView.set({
             label: t('Cancel'),
-            icon: icons.cancel,
+            icon: IconCancel,
             class: 'ck-button-cancel',
             withText: true
         });

package/src/tableselection.js

@@ -275,7 +275,25 @@ export default class TableSelection extends Plugin {
         const startRow = Math.min(startLocation.row, endLocation.row);
         const endRow = Math.max(startLocation.row, endLocation.row);
         const startColumn = Math.min(startLocation.column, endLocation.column);
-        const endColumn = Math.max(startLocation.column, endLocation.column);
+        // Adjust the selection to include the entire row if a cell with colspan is selected.
+        // This ensures that the selection covers the full width of the colspan cell.
+        //
+        // Example:
+        // +---+---+---+---+
+        // | A | B | C | D |
+        // +---+---+---+---+
+        // | E             |
+        // +---+---+---+---+
+        //
+        // If the selection starts at `B` and ends at `E`, the entire first row should be selected.
+        //
+        // In other words, the selection will represent the following cells:
+        // 	* Without this adjustment, only `B`, `A` and `E` would be selected.
+        // 	* With this adjustment, `A`, `B`, `C`, `D`, and `E` are selected.
+        //
+        // See: https://github.com/ckeditor/ckeditor5/issues/17538
+        const endColumnExtraColspan = (parseInt(targetCell.getAttribute('colspan') || '1') - 1);
+        const endColumn = Math.max(startLocation.column, endLocation.column + endColumnExtraColspan);
         // 2-dimensional array of the selected cells to ease flipping the order of cells for backward selections.
         const selectionMap = new Array(endRow - startRow + 1).fill(null).map(() => []);
         const walkerOptions = {

package/src/tableui.js

@@ -5,13 +5,11 @@
 /**
  * @module table/tableui
  */
-import { icons, Plugin } from 'ckeditor5/src/core.js';
+import { Plugin } from 'ckeditor5/src/core.js';
+import { IconTable, IconTableColumn, IconTableRow, IconTableMergeCell } from 'ckeditor5/src/icons.js';
 import { addListToDropdown, createDropdown, ViewModel, SplitButtonView, SwitchButtonView, MenuBarMenuView } from 'ckeditor5/src/ui.js';
 import { Collection } from 'ckeditor5/src/utils.js';
 import InsertTableView from './ui/inserttableview.js';
-import tableColumnIcon from './../theme/icons/table-column.svg';
-import tableRowIcon from './../theme/icons/table-row.svg';
-import tableMergeCellIcon from './../theme/icons/table-merge-cell.svg';
 /**
  * The table UI plugin. It introduces:
  *
@@ -50,7 +48,7 @@ export default class TableUI extends Plugin {
             dropdownView.bind('isEnabled').to(command);
             // Decorate dropdown's button.
             dropdownView.buttonView.set({
-                icon: icons.table,
+                icon: IconTable,
                 label: t('Insert table'),
                 tooltip: true
             });
@@ -86,7 +84,7 @@ export default class TableUI extends Plugin {
             });
             menuView.buttonView.set({
                 label: t('Table'),
-                icon: icons.table
+                icon: IconTable
             });
             menuView.panelView.children.add(insertTableView);
             menuView.bind('isEnabled').to(command);
@@ -132,7 +130,7 @@ export default class TableUI extends Plugin {
                     }
                 }
             ];
-            return this._prepareDropdown(t('Column'), tableColumnIcon, options, locale);
+            return this._prepareDropdown(t('Column'), IconTableColumn, options, locale);
         });
         editor.ui.componentFactory.add('tableRow', locale => {
             const options = [
@@ -174,7 +172,7 @@ export default class TableUI extends Plugin {
                     }
                 }
             ];
-            return this._prepareDropdown(t('Row'), tableRowIcon, options, locale);
+            return this._prepareDropdown(t('Row'), IconTableRow, options, locale);
         });
         editor.ui.componentFactory.add('mergeTableCells', locale => {
             const options = [
@@ -222,7 +220,7 @@ export default class TableUI extends Plugin {
                     }
                 }
             ];
-            return this._prepareMergeSplitButtonDropdown(t('Merge cells'), tableMergeCellIcon, options, locale);
+            return this._prepareMergeSplitButtonDropdown(t('Merge cells'), IconTableMergeCell, options, locale);
         });
     }
     /**

package/src/tablewalker.js

@@ -7,6 +7,73 @@
  * {@link module:table/tablewalker~TableSlot} with proper table cell attributes.
  */
 export default class TableWalker {
+    /**
+     * The walker's table element.
+     *
+     * @internal
+     */
+    _table;
+    /**
+     * A row index from which this iterator will start.
+     */
+    _startRow;
+    /**
+     * A row index at which this iterator will end.
+     */
+    _endRow;
+    /**
+     * If set, the table walker will only output cells from a given column and following ones or cells that overlap them.
+     */
+    _startColumn;
+    /**
+     * If set, the table walker will only output cells up to a given column.
+     */
+    _endColumn;
+    /**
+     * Enables output of spanned cells that are normally not yielded.
+     */
+    _includeAllSlots;
+    /**
+     * Row indexes to skip from the iteration.
+     */
+    _skipRows;
+    /**
+     * The current row index.
+     *
+     * @internal
+     */
+    _row;
+    /**
+     * The index of the current row element in the table.
+     *
+     * @internal
+     */
+    _rowIndex;
+    /**
+     * The current column index.
+     *
+     * @internal
+     */
+    _column;
+    /**
+     * The cell index in a parent row. For spanned cells when {@link #_includeAllSlots} is set to `true`,
+     * this represents the index of the next table cell.
+     *
+     * @internal
+     */
+    _cellIndex;
+    /**
+     * Holds a map of spanned cells in a table.
+     */
+    _spannedCells;
+    /**
+     * Index of the next column where a cell is anchored.
+     */
+    _nextCellAtColumn;
+    /**
+     * Indicates whether the iterator jumped to (or close to) the start row, ignoring rows that don't need to be traversed.
+     */
+    _jumpedToStartRow = false;
     /**
      * Creates an instance of the table walker.
      *
@@ -84,10 +151,6 @@ 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;
@@ -324,6 +387,38 @@ export default class TableWalker {
  * An object returned by {@link module:table/tablewalker~TableWalker} when traversing table cells.
  */
 class TableSlot {
+    /**
+     * The current table cell.
+     */
+    cell;
+    /**
+     * The row index of a table slot.
+     */
+    row;
+    /**
+     * The column index of a table slot.
+     */
+    column;
+    /**
+     * The row index of a cell anchor slot.
+     */
+    cellAnchorRow;
+    /**
+     * The column index of a cell anchor slot.
+     */
+    cellAnchorColumn;
+    /**
+     * The index of the current cell in the parent row.
+     */
+    _cellIndex;
+    /**
+     * The index of the current row element in the table.
+     */
+    _rowIndex;
+    /**
+     * The table element.
+     */
+    _table;
     /**
      * Creates an instance of the table walker value.
      *

package/src/ui/colorinputview.js

@@ -15,6 +15,40 @@ import '../../theme/colorinput.css';
  * @internal
  */
 export default class ColorInputView extends View {
+    /**
+     * A cached reference to the options passed to the constructor.
+     */
+    options;
+    /**
+     * Tracks information about the DOM focus in the view.
+     */
+    focusTracker;
+    /**
+     * Helps cycling over focusable children in the input view.
+     */
+    focusCycler;
+    /**
+     * A collection of views that can be focused in the view.
+     */
+    _focusables;
+    /**
+     * An instance of the dropdown allowing to select a color from a grid.
+     */
+    dropdownView;
+    /**
+     * An instance of the input allowing the user to type a color value.
+     */
+    inputView;
+    /**
+     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     */
+    keystrokes;
+    /**
+     * The flag that indicates whether the user is still typing.
+     * If set to true, it means that the text input field ({@link #inputView}) still has the focus.
+     * So, we should interrupt the user by replacing the input's value.
+     */
+    _stillTyping;
     /**
      * Creates an instance of the color input view.
      *

package/src/ui/inserttableview.js

@@ -14,6 +14,18 @@ import './../../theme/inserttable.css';
  * It renders a 10x10 grid to choose the inserted table size.
  */
 export default class InsertTableView extends View {
+    /**
+     * A collection of table size box items.
+     */
+    items;
+    /**
+     * Listen to `keydown` events fired in this view's main element.
+     */
+    keystrokes;
+    /**
+     * Tracks information about the DOM focus in the grid.
+     */
+    focusTracker;
     /**
      * @inheritDoc
      */

package/src/utils/table-properties.js

@@ -2,7 +2,7 @@
  * @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
  */
-import { isObject } from 'lodash-es';
+import { isObject } from 'es-toolkit/compat';
 /**
  * Returns a string if all four values of box sides are equal.
  *

package/theme/formrow.css

@@ -4,16 +4,6 @@
  */
 
 .ck.ck-form__row {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: nowrap;
-	justify-content: space-between;
-
-	/* Ignore labels that work as fieldset legends */
-	& > *:not(.ck-label) {
-		flex-grow: 1;
-	}
-
 	&.ck-table-form__action-row {
 		& .ck-button-save,
 		& .ck-button-cancel {

package/theme/tableform.css

@@ -31,6 +31,12 @@
 				flex-grow: 0;
 			}
 		}
+
+		/* Ignore labels that work as fieldset legends */
+		/* Fallback for table dimension operator */
+		& > *:not(.ck-label, .ck-table-form__dimension-operator) {
+			flex-grow: 1;
+		}
 	}
 
 	& .ck.ck-labeled-field-view {

package/src/ui/formrowview.d.ts

@@ -1,61 +0,0 @@
-/**
- * @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/ui/formrowview
- */
-import { View, type LabelView, type ViewCollection } from 'ckeditor5/src/ui.js';
-import type { Locale } from 'ckeditor5/src/utils.js';
-import '../../theme/formrow.css';
-/**
- * The class representing a single row in a complex form,
- * used by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}.
- *
- * **Note**: For now this class is private. When more use cases arrive (beyond ckeditor5-table),
- * it will become a component in ckeditor5-ui.
- *
- * @internal
- */
-export default class FormRowView extends View {
-    /**
-     * An additional CSS class added to the {@link #element}.
-     *
-     * @observable
-     */
-    class: string | null;
-    /**
-     * A collection of row items (buttons, dropdowns, etc.).
-     */
-    readonly children: ViewCollection;
-    /**
-     * The role property reflected by the `role` DOM attribute of the {@link #element}.
-     *
-     * **Note**: Used only when a `labelView` is passed to constructor `options`.
-     *
-     * @observable
-     * @internal
-     */
-    _role: string | null;
-    /**
-     * The ARIA property reflected by the `aria-labelledby` DOM attribute of the {@link #element}.
-     *
-     * **Note**: Used only when a `labelView` is passed to constructor `options`.
-     *
-     * @observable
-     * @internal
-     */
-    _ariaLabelledBy: string | null;
-    /**
-     * Creates an instance of the form row class.
-     *
-     * @param locale The locale instance.
-     * @param options.labelView When passed, the row gets the `group` and `aria-labelledby`
-     * DOM attributes and gets described by the label.
-     */
-    constructor(locale: Locale, options?: {
-        children?: Array<View>;
-        class?: string;
-        labelView?: LabelView;
-    });
-}

package/src/ui/formrowview.js

@@ -1,57 +0,0 @@
-/**
- * @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/ui/formrowview
- */
-import { View } from 'ckeditor5/src/ui.js';
-import '../../theme/formrow.css';
-/**
- * The class representing a single row in a complex form,
- * used by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}.
- *
- * **Note**: For now this class is private. When more use cases arrive (beyond ckeditor5-table),
- * it will become a component in ckeditor5-ui.
- *
- * @internal
- */
-export default class FormRowView extends View {
-    /**
-     * Creates an instance of the form row class.
-     *
-     * @param locale The locale instance.
-     * @param options.labelView When passed, the row gets the `group` and `aria-labelledby`
-     * DOM attributes and gets described by the label.
-     */
-    constructor(locale, options = {}) {
-        super(locale);
-        const bind = this.bindTemplate;
-        this.set('class', options.class || null);
-        this.children = this.createCollection();
-        if (options.children) {
-            options.children.forEach(child => this.children.add(child));
-        }
-        this.set('_role', null);
-        this.set('_ariaLabelledBy', null);
-        if (options.labelView) {
-            this.set({
-                _role: 'group',
-                _ariaLabelledBy: options.labelView.id
-            });
-        }
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-form__row',
-                    bind.to('class')
-                ],
-                role: bind.to('_role'),
-                'aria-labelledby': bind.to('_ariaLabelledBy')
-            },
-            children: this.children
-        });
-    }
-}

package/theme/form.css

@@ -1,11 +0,0 @@
-/*
- * 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
- */
-
-/*
- * Note: This file should contain the wireframe styles only. But since there are no such styles,
- * it acts as a message to the builder telling that it should look for the corresponding styles
- * **in the theme** when compiling the editor.
- */
-

package/theme/icons/table-cell-properties.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.105 18-.17 1H2.5A1.5 1.5 0 0 1 1 17.5v-15A1.5 1.5 0 0 1 2.5 1h15A1.5 1.5 0 0 1 19 2.5v9.975l-.85-.124-.15-.302V8h-5v4h.021l-.172.351-1.916.28-.151.027c-.287.063-.54.182-.755.341L8 13v5h3.105zM2 12h5V8H2v4zm10-4H8v4h4V8zM2 2v5h5V2H2zm0 16h5v-5H2v5zM13 7h5V2h-5v5zM8 2v5h4V2H8z" opacity=".6"/><path d="m15.5 11.5 1.323 2.68 2.957.43-2.14 2.085.505 2.946L15.5 18.25l-2.645 1.39.505-2.945-2.14-2.086 2.957-.43L15.5 11.5zM13 6a1 1 0 0 1 1 1v3.172a2.047 2.047 0 0 0-.293.443l-.858 1.736-1.916.28-.151.027A1.976 1.976 0 0 0 9.315 14H7a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm-1 2H8v4h4V8z"/></svg>

package/theme/icons/table-column.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 1h15A1.5 1.5 0 0 1 19 2.5v15a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 1 17.5v-15A1.5 1.5 0 0 1 2.5 1zM2 2v16h16V2H2z" opacity=".6"/><path d="M18 7v1H2V7h16zm0 5v1H2v-1h16z" opacity=".6"/><path d="M14 1v18a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1zm-2 1H8v4h4V2zm0 6H8v4h4V8zm0 6H8v4h4v-4z"/></svg>

package/theme/icons/table-merge-cell.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 1h15A1.5 1.5 0 0 1 19 2.5v15a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 1 17.5v-15A1.5 1.5 0 0 1 2.5 1zM2 2v16h16V2H2z" opacity=".6"/><path d="M7 2h1v16H7V2zm5 0h1v7h-1V2zm6 5v1H2V7h16zM8 12v1H2v-1h6z" opacity=".6"/><path d="M7 7h12a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zm1 2v9h10V9H8z"/></svg>

package/theme/icons/table-properties.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8 2v5h4V2h1v5h5v1h-5v4h.021l-.172.351-1.916.28-.151.027c-.287.063-.54.182-.755.341L8 13v5H7v-5H2v-1h5V8H2V7h5V2h1zm4 6H8v4h4V8z" opacity=".6"/><path d="m15.5 11.5 1.323 2.68 2.957.43-2.14 2.085.505 2.946L15.5 18.25l-2.645 1.39.505-2.945-2.14-2.086 2.957-.43L15.5 11.5zM17 1a2 2 0 0 1 2 2v9.475l-.85-.124-.857-1.736a2.048 2.048 0 0 0-.292-.44L17 3H3v14h7.808l.402.392L10.935 19H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h14z"/></svg>

package/theme/icons/table-row.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 1h15A1.5 1.5 0 0 1 19 2.5v15a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 1 17.5v-15A1.5 1.5 0 0 1 2.5 1zM2 2v16h16V2H2z" opacity=".6"/><path d="M7 2h1v16H7V2zm5 0h1v16h-1V2z" opacity=".6"/><path d="M1 6h18a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm1 2v4h4V8H2zm6 0v4h4V8H8zm6 0v4h4V8h-4z"/></svg>