@ckeditor/ckeditor5-table 48.3.1 → 48.4.0-alpha.0

package/dist/table.d.ts

@@ -13,7 +13,6 @@ import { TableSelection } from "./tableselection.js";
 import { TableClipboard } from "./tableclipboard.js";
 import { TableKeyboard } from "./tablekeyboard.js";
 import { TableMouse } from "./tablemouse.js";
-import "../theme/table.css";
 /**
 * The table plugin.
 *

package/dist/tablecaption.d.ts

@@ -8,7 +8,6 @@
 import { Plugin, type PluginDependenciesOf } from "@ckeditor/ckeditor5-core";
 import { TableCaptionEditing } from "./tablecaption/tablecaptionediting.js";
 import { TableCaptionUI } from "./tablecaption/tablecaptionui.js";
-import "../theme/tablecaption.css";
 /**
 * The table caption plugin.
 */

package/dist/tablecellproperties/tablecellpropertiesui.d.ts

@@ -125,4 +125,11 @@ export declare class TableCellPropertiesUI extends Plugin {
 	* * Or sets the error text next to the invalid field, if the value did not pass the validation.
 	*/
 	private _getValidatedPropertyChangeCallback;
+	/**
+	* Returns the command that drives the width field. When the table is resized and the selection maps onto a single
+	* column, the width field is bound to (and executes) the `'tableColumnWidth'` command, so the width applies to the
+	* column instead of being set as a per-cell width that the column group would shadow. Otherwise it falls back to
+	* the `'tableCellWidth'` command.
+	*/
+	private _getWidthCommandName;
 }

package/dist/tablecellproperties/ui/tablecellpropertiesview.d.ts

@@ -9,9 +9,6 @@ import { ButtonView, FocusCycler, LabeledFieldView, ToolbarView, View, ViewColle
 import { KeystrokeHandler, FocusTracker, type Locale } from "@ckeditor/ckeditor5-utils";
 import { type ColorInputView } from "../../ui/colorinputview.js";
 import type { TableCellPropertiesOptions } from "../../tableconfig.js";
-import "../../../theme/formrow.css";
-import "../../../theme/tableform.css";
-import "../../../theme/tablecellproperties.css";
 export interface TableCellPropertiesViewOptions {
 	borderColors: Array<NormalizedColorOption>;
 	backgroundColors: Array<NormalizedColorOption>;

package/dist/tablecolumnresize/commands/tablecolumnwidthcommand.d.ts

@@ -0,0 +1,56 @@
+/**
+* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+*/
+/**
+* @module table/tablecolumnresize/commands/tablecolumnwidthcommand
+*/
+import { Command } from "@ckeditor/ckeditor5-core";
+import type { Batch } from "@ckeditor/ckeditor5-engine";
+/**
+* The table column width command.
+*
+* The command is registered by the {@link module:table/tablecolumnresize/tablecolumnresizeediting~TableColumnResizeEditing}
+* as the `'tableColumnWidth'` editor command.
+*
+* It sets the width of every column covered by the selected cells (keeping the whole table's width mode consistent),
+* so the change actually takes effect in a resized table - where a per-cell width would be shadowed by the column
+* group. The command is enabled whenever the selection maps onto the columns of a resized, regular table.
+*
+* ```ts
+* editor.execute( 'tableColumnWidth', {
+*   value: '150px'
+* } );
+* ```
+*
+* **Note**: This command adds a default `'px'` unit to numeric values. Executing:
+*
+* ```ts
+* editor.execute( 'tableColumnWidth', {
+*   value: '150'
+* } );
+* ```
+*
+* will set the column width to `'150px'`.
+*/
+export declare class TableColumnWidthCommand extends Command {
+	/**
+	* The width of the first column covered by the selection, or `null` when the selection does not map onto table
+	* columns (for example when there is no cell selected or the table is not resized).
+	*
+	* @readonly
+	* @observable
+	*/
+	value: string | null;
+	/**
+	* @inheritDoc
+	*/
+	override refresh(): void;
+	/**
+	* @inheritDoc
+	*/
+	override execute(options?: {
+		value?: string | number;
+		batch?: Batch;
+	}): void;
+}

package/dist/tablecolumnresize/constants.d.ts

@@ -31,3 +31,18 @@ export declare const COLUMN_WIDTH_PRECISION = 2;
 * @internal
 */
 export declare const COLUMN_RESIZE_DISTANCE_THRESHOLD = 3;
+/**
+* The distance (in pixels) around the container's width within which a dragged table edge snaps to exactly
+* 100% of the container width, in either direction - making it easy to precisely land on that value.
+*
+* @internal
+*/
+export declare const TABLE_WIDTH_SNAP_THRESHOLD_IN_PIXELS = 5;
+/**
+* How much further (in pixels, on top of the snap threshold above) a table edge has to be dragged past the
+* container's width before it actually starts growing past 100% again. This is what makes 100% "sticky" -
+* while still letting the table grow past it with a deliberate, longer drag.
+*
+* @internal
+*/
+export declare const TABLE_WIDTH_GROWTH_RESISTANCE_IN_PIXELS = 10;

package/dist/tablecolumnresize/tablecolumnresizeediting.d.ts

@@ -3,7 +3,7 @@
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
 */
 import { Plugin, type Editor, type PluginDependenciesOf } from "@ckeditor/ckeditor5-core";
-import type { ModelElement } from "@ckeditor/ckeditor5-engine";
+import type { ViewDowncastWriter, ModelElement, ModelWriter, ViewElement } from "@ckeditor/ckeditor5-engine";
 import { TableEditing } from "../tableediting.js";
 import { TableUtils } from "../tableutils.js";
 /**
@@ -12,8 +12,11 @@ import { TableUtils } from "../tableutils.js";
 export declare class TableColumnResizeEditing extends Plugin {
 	/**
 	* A flag indicating if the column resizing is in progress.
+	*
+	* @observable
+	* @internal
 	*/
-	private _isResizingActive;
+	_isResizingActive: boolean;
 	/**
 	* A flag indicating if the column resizing is allowed. It is not allowed if the editor is in read-only
 	* or comments-only mode or the `TableColumnResize` plugin is disabled.
@@ -71,8 +74,17 @@ export declare class TableColumnResizeEditing extends Plugin {
 	/**
 	* @inheritDoc
 	*/
+	afterInit(): void;
+	/**
+	* @inheritDoc
+	*/
 	override destroy(): void;
 	/**
+	* The table for which a column resize is currently in progress, or `null` if no resize is active.
+	* Only one table can be resized at a time.
+	*/
+	get resizingTable(): ModelElement | null;
+	/**
 	* Returns a 'tableColumnGroup' element from the 'table'.
 	*
 	* @param element A 'table' or 'tableColumnGroup' element.
@@ -94,6 +106,59 @@ export declare class TableColumnResizeEditing extends Plugin {
 	*/
 	getTableColumnsWidths(element: ModelElement): Array<string>;
 	/**
+	* Returns the table and the sorted, unique indexes of the columns covered by the given cells (a `colspan` cell
+	* covers several columns). Returns `null` when the selection cannot be mapped onto columns - a non-resized table
+	* or an irregular column structure.
+	*
+	* @param cells An array of 'tableCell' model elements.
+	*/
+	getColumnIndexesForCells(cells: Array<ModelElement>): {
+		table: ModelElement;
+		columnIndexes: Array<number>;
+	} | null;
+	/**
+	* Applies the given width to every column in `columnIndexes`, keeping the whole table's width mode consistent
+	* (see {@link module:table/tablecolumnresize/utils~isTableWidthInPixels}).
+	*
+	* @param writer A model writer instance.
+	* @param table A 'table' model element.
+	* @param columnIndexes Indexes of the columns the width is applied to.
+	* @param value The width to apply. May be expressed in pixels or as a percentage.
+	*/
+	applyColumnWidths(writer: ModelWriter, table: ModelElement, columnIndexes: Array<number>, value: string): void;
+	/**
+	* Converts the column widths of a resized table to the unit of the table's own width (`px` or `%`), so a table
+	* width change (in the table properties) also switches the columns' unit. It is a no-op when the table is not
+	* resized or the columns already use that unit.
+	*/
+	private _reconcileColumnUnits;
+	/**
+	* Applies a column width in the percentage mode: the target column gets the (clamped) percentage and the remaining
+	* columns are redistributed proportionally so that all the widths keep summing up to 100%.
+	*/
+	private _applyPercentageColumnWidths;
+	/**
+	* Applies a width to the target columns in the percentage mode when the selection reaches the last column. As
+	* there is no next column to balance against, the table itself grows or shrinks (like dragging the last column's
+	* right edge): every other column keeps its absolute width, so expressed against the resized table their
+	* percentages scale, and the table's own width scales by the inverse.
+	*/
+	private _growTableToColumnWidths;
+	/**
+	* Applies `width` to whichever element currently represents the table's actual width - by default the
+	* widget's `<figure>`. Passing `null` clears it instead of setting anything.
+	*
+	* @internal
+	*/
+	_setResizingTableWidth(writer: ViewDowncastWriter, viewFigure: ViewElement, width: string | null): void;
+	/**
+	* Returns the table's current actual width, read from whichever element holds it - by default the
+	* widget's `<figure>`.
+	*
+	* @internal
+	*/
+	_getResizingTableWidth(viewFigure: ViewElement): string;
+	/**
 	* Registers new attributes for a table model element.
 	*/
 	private _extendSchema;
@@ -186,3 +251,17 @@ export declare class TableColumnResizeEditing extends Plugin {
 	*/
 	private _registerResizerInserter;
 }
+/**
+* Given the table width a drag would naturally produce, returns the width that should actually be applied
+* once snapping and growth resistance around the container's width are taken into account:
+*
+*  * if the natural width lands close to the container's width (on either side), it's pulled to exactly
+*    match it,
+*  * if the natural width is past the container's width, it stays pinned at the container's width until the
+*    drag has gone far enough beyond it (the "resistance" zone) - past that point it keeps growing 1:1,
+*    continuing smoothly from where the resistance was overcome instead of jumping,
+*  * shrinking below the container's width is never resisted, only snapped when close.
+*
+* @internal
+*/
+export declare function applyContainerWidthResistance(naturalTableWidth: number, containerWidth: number): number;

package/dist/tablecolumnresize/utils.d.ts

@@ -46,6 +46,13 @@ export declare function getTableWidthInPixels(modelTable: ModelElement, editor:
 */
 export declare function getElementWidthInPixels(domElement: HTMLElement): number;
 /**
+* 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
+*/
+export declare function getEditableWidth(editor: Editor, rootName: string): number | null;
+/**
 * Returns the column indexes on the left and right edges of a cell. They differ if the cell spans
 * across multiple columns.
 *
@@ -150,6 +157,21 @@ export declare function getTableColumnElements(element: ModelElement): Array<Mod
 */
 export declare function getTableColumnsWidths(element: ModelElement): Array<string>;
 /**
+* Tells whether a table is in the pixel width mode, that is, its `tableWidth` attribute is expressed in pixels.
+* The `tableWidth` unit is the single source of truth for the whole table's width mode.
+*
+* @internal
+* @param table A 'table' model element.
+*/
+export declare function isTableWidthInPixels(table: ModelElement): boolean;
+/**
+* Tells whether the given column widths are expressed in pixels.
+*
+* @internal
+* @param columnWidths An array of column widths.
+*/
+export declare function isColumnWidthsInPixels(columnWidths: Array<string>): boolean;
+/**
 * Translates the `colSpan` model attribute into additional column widths and returns the resulting array.
 *
 * @internal
@@ -158,3 +180,11 @@ export declare function getTableColumnsWidths(element: ModelElement): Array<stri
 * @returns An array of table column widths.
 */
 export declare function translateColSpanAttribute(element: ModelElement, writer: ModelWriter): Array<string>;
+/**
+* Removes the `tableCellWidth` attribute from every cell of the given table. Once a column is resized (with the resize
+* handler or the column-width command), a per-cell width is obsolete - the column width governs the layout - so it is
+* dropped to keep the model clean.
+*
+* @internal
+*/
+export declare function removeCellWidthsFromTable(writer: ModelWriter, table: ModelElement): void;

package/dist/tablecolumnresize.d.ts

@@ -8,7 +8,6 @@
 import { Plugin, type PluginDependenciesOf } from "@ckeditor/ckeditor5-core";
 import { TableColumnResizeEditing } from "./tablecolumnresize/tablecolumnresizeediting.js";
 import { TableCellWidthEditing } from "./tablecellwidth/tablecellwidthediting.js";
-import "../theme/tablecolumnresize.css";
 /**
 * The table column resize feature.
 *

package/dist/tableconfig.d.ts

@@ -246,6 +246,16 @@ export interface TableConfig {
 	*/
 	tableCaption?: TableCaptionConfig;
 	/**
+	* Configuration of the table scroll feature.
+	*
+	* ```ts
+	* const tableConfig = {
+	* 	tableScroll: ... // Table scroll feature config.
+	* };
+	* ```
+	*/
+	tableScroll?: TableScrollConfig;
+	/**
 	* When set to `true` (default), the editor visually displays dashed borders around table elements (`<table>`, `<td>`, `<th>`)
 	* that contain inline styles explicitly removing borders (for example: `border: none`, `border-top-style: none`, etc.).
 	*
@@ -682,6 +692,34 @@ export interface TableCaptionConfig {
 	useCaptionElement?: boolean;
 }
 /**
+* The configuration of the table scroll feature.
+*/
+export interface TableScrollConfig {
+	/**
+	* The list of table types for which a table that is wider than its container is allowed to become
+	* horizontally scrollable, and for which the column resize handle is allowed to drag the table's width
+	* past 100% of the container width.
+	*
+	* By default, only `'content'` tables are scrollable. Layout tables are not included by default, since
+	* letting a layout table grow past the container width can easily break the intended page layout - to
+	* allow it anyway, add `'layout'` to the list:
+	*
+	* ```ts
+	* const tableConfig = {
+	* 	tableScroll: {
+	* 		tableTypes: [ 'content', 'layout' ]
+	* 	}
+	* };
+	* ```
+	*
+	* Note that regardless of this setting, only a table that is a direct child of the editing root can become
+	* scrollable - a table nested inside another table, a block quote, or any other container never scrolls.
+	*
+	* @default [ 'content' ]
+	*/
+	tableTypes?: Array<TableType>;
+}
+/**
 * The type of the table.
 */
 export type TableType = "content" | "layout";

package/dist/tableediting.d.ts

@@ -8,7 +8,6 @@
 import { Plugin, type Editor, type PluginDependenciesOf } from "@ckeditor/ckeditor5-core";
 import type { ModelPositionOffset, DowncastSlotFilter } from "@ckeditor/ckeditor5-engine";
 import { TableUtils } from "./tableutils.js";
-import "../theme/tableediting.css";
 /**
 * The table editing feature.
 */

package/dist/tablelayout/tablelayoutediting.d.ts

@@ -7,7 +7,6 @@
 */
 import { Plugin, type PluginDependenciesOf } from "@ckeditor/ckeditor5-core";
 import { TableColumnResize } from "../tablecolumnresize.js";
-import "../../theme/tablelayout.css";
 /**
 * The table layout editing plugin.
 */

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

@@ -9,9 +9,6 @@ import { ButtonView, FocusCycler, LabeledFieldView, ToolbarView, View, ViewColle
 import { FocusTracker, KeystrokeHandler, type Locale } from "@ckeditor/ckeditor5-utils";
 import { type ColorInputView } from "../../ui/colorinputview.js";
 import type { TablePropertiesOptions } from "../../tableconfig.js";
-import "../../../theme/formrow.css";
-import "../../../theme/tableform.css";
-import "../../../theme/tableproperties.css";
 /**
 * Additional configuration of the view.
 */

package/dist/tablescroll/tablescrollediting.d.ts

@@ -0,0 +1,82 @@
+/**
+* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+*/
+import { Plugin, type Editor, type PluginDependenciesOf } from "@ckeditor/ckeditor5-core";
+import type { ModelElement } from "@ckeditor/ckeditor5-engine";
+import { TableEditing } from "../tableediting.js";
+/**
+* The table scrolling editing plugin.
+*/
+export declare class TableScrollEditing extends Plugin {
+	/**
+	* Used to listen to native DOM events.
+	*/
+	private _domEmitter;
+	/**
+	* @inheritDoc
+	*/
+	static get pluginName(): "TableScrollEditing";
+	/**
+	* @inheritDoc
+	*/
+	static override get isOfficialPlugin(): true;
+	/**
+	* @inheritDoc
+	*/
+	static get requires(): PluginDependenciesOf<[TableEditing]>;
+	/**
+	* @inheritDoc
+	*/
+	constructor(editor: Editor);
+	/**
+	* @inheritDoc
+	*/
+	init(): void;
+	/**
+	* @inheritDoc
+	*/
+	override destroy(): void;
+	/**
+	* Whether a given table may overflow its container and become horizontally scrollable, and whether
+	* column/table resizing is allowed to grow it past the container's width.
+	*
+	* @internal
+	*/
+	_isTableScrollable(table: ModelElement): boolean;
+	/**
+	* Determines whether a table overflows its container and applies the corresponding view state:
+	* the `ck-table-overflowing` class on the figure, and the actual (possibly container-exceeding)
+	* width on the inner `<table>` and a sibling `<figcaption>`, if present.
+	*
+	* @internal
+	*/
+	_updateTableScrollOverflowState(table: ModelElement, tableWidthOverride?: string | null): void;
+	/**
+	* Schedules a re-read of the widget figure's actual `scrollLeft` into `--ck-table-scroll-offset`, once
+	* the render reflecting the change that triggered it has actually happened - see the call site for why
+	* this can't just read (and force a reflow for) `scrollLeft` immediately instead.
+	*/
+	private _scheduleScrollOffsetSync;
+	/**
+	* Registers editing-only downcast listeners that keep overflow state in sync.
+	*/
+	private _registerConversion;
+	/**
+	* Keeps every overflowing table's `--ck-table-scroll-offset` custom property in sync with its
+	* `scrollLeft`, using a single delegated listener instead of one native listener per table.
+	*/
+	private _watchFiguresScroll;
+	/**
+	* Listen for column resize events and updates proper view element size.
+	*/
+	private _watchColumnResize;
+	/**
+	* Re-evaluates the overflow state of every table whenever the window or an editing root is resized.
+	*/
+	private _watchRootEditables;
+	/**
+	* Evaluates the overflow state of every newly inserted table.
+	*/
+	private _watchNewTables;
+}

package/dist/tablescroll/watchers.d.ts

@@ -0,0 +1,23 @@
+/**
+* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+*/
+/**
+* @module table/tablescroll/watchers
+*/
+import { Collection } from "@ckeditor/ckeditor5-utils";
+import type { EditingView, Model, ModelElement } from "@ckeditor/ckeditor5-engine";
+/**
+* Creates a live collection of all `table` model elements present in the document and keeps it
+* up to date as tables are inserted, moved, or removed.
+*
+* @internal
+*/
+export declare function watchTableModelElements(model: Model): Collection<ModelElement>;
+/**
+* Observes the DOM width of every editing root and calls `onResize` whenever any of them changes width.
+* Height-only changes are ignored, since only a root's width can make a table overflow it.
+*
+* @internal
+*/
+export declare function watchRootsWidthResize(view: EditingView, onResize: () => void): () => void;

package/dist/tablescroll.d.ts

@@ -0,0 +1,23 @@
+/**
+* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+*/
+/**
+* @module table/tablescroll
+*/
+import { Plugin, type PluginDependenciesOf } from "@ckeditor/ckeditor5-core";
+import { TableScrollEditing } from "./tablescroll/tablescrollediting.js";
+export declare class TableScroll extends Plugin {
+	/**
+	* @inheritDoc
+	*/
+	static get pluginName(): "TableScroll";
+	/**
+	* @inheritDoc
+	*/
+	static override get isOfficialPlugin(): true;
+	/**
+	* @inheritDoc
+	*/
+	static get requires(): PluginDependenciesOf<[TableScrollEditing]>;
+}

package/dist/tableselection.d.ts

@@ -8,7 +8,6 @@
 import { Plugin, type PluginDependenciesOf } from "@ckeditor/ckeditor5-core";
 import type { ModelElement, ModelDocumentFragment } from "@ckeditor/ckeditor5-engine";
 import { TableUtils } from "./tableutils.js";
-import "../theme/tableselection.css";
 /**
 * This plugin enables the advanced table cells, rows and columns selection.
 * It is loaded automatically by the {@link module:table/table~Table} plugin.

package/dist/ui/colorinputview.d.ts

@@ -7,7 +7,6 @@
 */
 import { View, InputTextView, FocusCycler, ViewCollection, type ColorDefinition, type DropdownView, type ColorPickerConfig, type FocusableView } from "@ckeditor/ckeditor5-ui";
 import { FocusTracker, KeystrokeHandler, type Locale } from "@ckeditor/ckeditor5-utils";
-import "../../theme/colorinput.css";
 /**
 * The options for the color input view.
 *

package/dist/ui/inserttableview.d.ts

@@ -7,7 +7,6 @@
 */
 import { View, ButtonView, type ViewCollection } from "@ckeditor/ckeditor5-ui";
 import { KeystrokeHandler, FocusTracker, type Locale } from "@ckeditor/ckeditor5-utils";
-import "./../../theme/inserttable.css";
 /**
 * The table size view.
 *

package/dist/utils/common.d.ts

@@ -76,3 +76,9 @@ export declare function isEntireCellsLineHeader({ table, row, column }: {
 * @internal
 */
 export declare function isTableCellTypeEnabled(editor: Editor): boolean;
+/**
+* Yields every empty block (typically a `paragraph`) found inside the given table's cells.
+*
+* @internal
+*/
+export declare function getEmptyTableCellBlocks(table: ModelElement): IterableIterator<ModelElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-table",
-  "version": "48.3.1",
+  "version": "48.4.0-alpha.0",
   "description": "Table feature for CKEditor 5.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "CKSource (http://cksource.com/)",
@@ -26,14 +26,15 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@ckeditor/ckeditor5-clipboard": "48.3.1",
-    "@ckeditor/ckeditor5-core": "48.3.1",
-    "@ckeditor/ckeditor5-engine": "48.3.1",
-    "@ckeditor/ckeditor5-icons": "48.3.1",
-    "@ckeditor/ckeditor5-typing": "48.3.1",
-    "@ckeditor/ckeditor5-ui": "48.3.1",
-    "@ckeditor/ckeditor5-utils": "48.3.1",
-    "@ckeditor/ckeditor5-widget": "48.3.1",
+    "@ckeditor/ckeditor5-clipboard": "48.4.0-alpha.0",
+    "@ckeditor/ckeditor5-core": "48.4.0-alpha.0",
+    "@ckeditor/ckeditor5-engine": "48.4.0-alpha.0",
+    "@ckeditor/ckeditor5-enter": "48.4.0-alpha.0",
+    "@ckeditor/ckeditor5-icons": "48.4.0-alpha.0",
+    "@ckeditor/ckeditor5-typing": "48.4.0-alpha.0",
+    "@ckeditor/ckeditor5-ui": "48.4.0-alpha.0",
+    "@ckeditor/ckeditor5-utils": "48.4.0-alpha.0",
+    "@ckeditor/ckeditor5-widget": "48.4.0-alpha.0",
     "es-toolkit": "1.45.1"
   },
   "files": [