@ckeditor/ckeditor5-table 44.3.0 → 45.0.0-alpha.0

package/src/tableproperties/tablepropertiesui.js

@@ -6,10 +6,10 @@
  * @module table/tableproperties/tablepropertiesui
  */
 import { Plugin } from 'ckeditor5/src/core.js';
+import { IconTableProperties } from 'ckeditor5/src/icons.js';
 import { ButtonView, ContextualBalloon, clickOutsideHandler, getLocalizedColorOptions, normalizeColorOptions } from 'ckeditor5/src/ui.js';
-import { debounce } from 'lodash-es';
+import { debounce } from 'es-toolkit/compat';
 import TablePropertiesView from './ui/tablepropertiesview.js';
-import tableProperties from './../../theme/icons/table-properties.svg';
 import { colorFieldValidator, getLocalizedColorErrorText, getLocalizedLengthErrorText, lengthFieldValidator, lineWidthFieldValidator, defaultColors } from '../utils/ui/table-properties.js';
 import { getSelectionAffectedTableWidget } from '../utils/ui/widget.js';
 import { getBalloonTablePositionData, repositionContextualBalloon } from '../utils/ui/contextualballoon.js';
@@ -32,6 +32,28 @@ const propertyToCommandMap = {
  * It uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon plugin}.
  */
 export default class TablePropertiesUI extends Plugin {
+    /**
+     * The default table properties.
+     */
+    _defaultTableProperties;
+    /**
+     * The contextual balloon plugin instance.
+     */
+    _balloon;
+    /**
+     * The properties form view displayed inside the balloon.
+     */
+    view = null;
+    /**
+     * The batch used to undo all changes made by the form (which are live, as the user types)
+     * when "Cancel" was pressed. Each time the view is shown, a new batch is created.
+     */
+    _undoStepBatch;
+    /**
+     * Flag used to indicate whether view is ready to execute update commands
+     * (it finished loading initial data).
+     */
+    _isReady;
     /**
      * @inheritDoc
      */
@@ -55,10 +77,6 @@ export default class TablePropertiesUI extends Plugin {
      */
     constructor(editor) {
         super(editor);
-        /**
-         * The properties form view displayed inside the balloon.
-         */
-        this.view = null;
         editor.config.define('table.tableProperties', {
             borderColors: defaultColors,
             backgroundColors: defaultColors
@@ -69,24 +87,31 @@ export default class TablePropertiesUI extends Plugin {
      */
     init() {
         const editor = this.editor;
-        const t = editor.t;
         this._defaultTableProperties = getNormalizedDefaultTableProperties(editor.config.get('table.tableProperties.defaultProperties'), {
             includeAlignmentProperty: true
         });
         this._balloon = editor.plugins.get(ContextualBalloon);
-        editor.ui.componentFactory.add('tableProperties', locale => {
-            const view = new ButtonView(locale);
-            view.set({
-                label: t('Table properties'),
-                icon: tableProperties,
-                tooltip: true
-            });
-            this.listenTo(view, 'execute', () => this._showView());
-            const commands = Object.values(propertyToCommandMap)
-                .map(commandName => editor.commands.get(commandName));
-            view.bind('isEnabled').toMany(commands, 'isEnabled', (...areEnabled) => (areEnabled.some(isCommandEnabled => isCommandEnabled)));
-            return view;
+        editor.ui.componentFactory.add('tableProperties', () => this._createTablePropertiesButton());
+    }
+    /**
+     * Creates the table properties button.
+     *
+     * @internal
+     */
+    _createTablePropertiesButton() {
+        const editor = this.editor;
+        const t = editor.t;
+        const view = new ButtonView(editor.locale);
+        view.set({
+            label: t('Table properties'),
+            icon: IconTableProperties,
+            tooltip: true
         });
+        this.listenTo(view, 'execute', () => this._showView());
+        const commands = Object.values(propertyToCommandMap)
+            .map(commandName => editor.commands.get(commandName));
+        view.bind('isEnabled').toMany(commands, 'isEnabled', (...areEnabled) => (areEnabled.some(isCommandEnabled => isCommandEnabled)));
+        return view;
     }
     /**
      * @inheritDoc

package/src/tableproperties/ui/tablepropertiesview.d.ts

@@ -7,7 +7,8 @@
  */
 import { ButtonView, FocusCycler, LabeledFieldView, ToolbarView, View, ViewCollection, type DropdownView, type InputTextView, type NormalizedColorOption, type ColorPickerConfig, type FocusableView } from 'ckeditor5/src/ui.js';
 import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils.js';
-import '../../../theme/form.css';
+import '@ckeditor/ckeditor5-ui/theme/components/form/form.css';
+import '../../../theme/formrow.css';
 import '../../../theme/tableform.css';
 import '../../../theme/tableproperties.css';
 import type ColorInputView from '../../ui/colorinputview.js';

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/structure.js

@@ -35,8 +35,14 @@ import { createEmptyTableCell, updateNumericAttribute } from './common.js';
  */
 export function cropTableToDimensions(sourceTable, cropDimensions, writer) {
     const { startRow, startColumn, endRow, endColumn } = cropDimensions;
-    // Create empty table with empty rows equal to crop height.
+    // Initialize the cropped table element.
     const croppedTable = writer.createElement('table');
+    // Copy table type attribute if present.
+    const sourceTableType = sourceTable.getAttribute('tableType');
+    if (sourceTableType) {
+        writer.setAttribute('tableType', sourceTableType, croppedTable);
+    }
+    // Create empty table with empty rows equal to crop height.
     const cropHeight = endRow - startRow + 1;
     for (let i = 0; i < cropHeight; i++) {
         writer.insertElement('tableRow', croppedTable, 'end');

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/table.css

@@ -3,41 +3,68 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
-.ck-content .table {
-	/* Give the table widget some air and center it horizontally */
-	/* The first value should be equal to --ck-spacing-large variable if used in the editor context
-	to avoid the content jumping (See https://github.com/ckeditor/ckeditor5/issues/9825). */
-	margin: 0.9em auto;
-	display: table;
+.ck-content {
+	/* Text alignment of the table header should match the editor settings and override the native browser styling,
+	when content is available outside the editor. See https://github.com/ckeditor/ckeditor5/issues/6638 */
+	&[dir="rtl"] .table th {
+		text-align: right;
+	}
+
+	&[dir="ltr"] .table th {
+		text-align: left;
+	}
+
+	& figure.table:not(.layout-table) {
+		display: table;
 
-	& table {
+		& > table {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	& figure.table:not(.layout-table),
+	& table.table:not(.layout-table) {
+		/* Give the table widget some air and center it horizontally */
+		/* The first value should be equal to --ck-spacing-large variable if used in the editor context
+		to avoid the content jumping (See https://github.com/ckeditor/ckeditor5/issues/9825). */
+		margin: 0.9em auto;
+	}
+
+	& table.table:not(.layout-table),
+	& figure.table:not(.layout-table) > table {
 		/* The table cells should have slight borders */
 		border-collapse: collapse;
 		border-spacing: 0;
 
-		/* Table width and height are set on the parent <figure>. Make sure the table inside stretches
-		to the full dimensions of the container (https://github.com/ckeditor/ckeditor5/issues/6186). */
-		width: 100%;
-		height: 100%;
-
 		/* The outer border of the table should be slightly darker than the inner lines.
 		Also see https://github.com/ckeditor/ckeditor5-table/issues/50. */
 		border: 1px double hsl(0, 0%, 70%);
 
-		& td,
-		& th {
-			min-width: 2em;
-			padding: .4em;
+		& > thead,
+		& > tbody {
+			/* The linter is disabled here because linter is confused when resolving the `table.table:not(.layout-table)`
+			and `figure.table:not(.layout-table) > table` selectors combined with below selectors.
+			There is no need to split it into two large structures with same code just to make linter happy. */
+			/* stylelint-disable no-descending-specificity */
+			& > tr {
+				& > th {
+					font-weight: bold;
+					background: hsla(0, 0%, 0%, 5%);
+				}
 
-			/* The border is inherited from .ck-editor__nested-editable styles, so theoretically it's not necessary here.
-			However, the border is a content style, so it should use .ck-content (so it works outside the editor).
-			Hence, the duplication. See https://github.com/ckeditor/ckeditor5/issues/6314 */
-			border: 1px solid hsl(0, 0%, 75%);
-		}
+				& > td,
+				& > th {
+					/* stylelint-enable no-descending-specificity */
+					min-width: 2em;
+					padding: .4em;
 
-		& th {
-			font-weight: bold;
-			background: hsla(0, 0%, 0%, 5%);
+					/* The border is inherited from .ck-editor__nested-editable styles, so theoretically it's not necessary here.
+					However, the border is a content style, so it should use .ck-content (so it works outside the editor).
+					Hence, the duplication. See https://github.com/ckeditor/ckeditor5/issues/6314 */
+					border: 1px solid hsl(0, 0%, 75%);
+				}
+			}
 		}
 	}
 }
@@ -54,21 +81,11 @@
  * For now, resetting the height to `initial` in the print mode works as a workaround.
  */
 @media print {
-	.ck-content .table table {
+	.ck-content figure.table > table {
 		height: initial;
 	}
 }
 
-/* Text alignment of the table header should match the editor settings and override the native browser styling,
-when content is available outside the editor. See https://github.com/ckeditor/ckeditor5/issues/6638 */
-.ck-content[dir="rtl"] .table th {
-	text-align: right;
-}
-
-.ck-content[dir="ltr"] .table th {
-	text-align: left;
-}
-
 .ck-editor__editable .ck-table-bogus-paragraph {
 	/*
 	 * Use display:inline-block to force Chrome/Safari to limit text mutations to this element.

package/theme/tablecolumnresize.css

@@ -25,6 +25,11 @@
 	/* To prevent text overflowing beyond its cell when columns are resized by resize handler
 	(https://github.com/ckeditor/ckeditor5/pull/14379#issuecomment-1589460978). */
 	overflow-wrap: break-word;
+}
+
+.ck.ck-editor__editable .table td,
+.ck.ck-editor__editable .table th {
+	/* The resizer element is placed inside each cell, so it must be positioned relatively to the cell. */
 	position: relative;
 }