@ckeditor/ckeditor5-table 48.8.1-alpha.4 → 49.0.0-alpha.0

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

@@ -1,215 +1,218 @@
 /**
- * @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
- */
+* @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/tableproperties/ui/tablepropertiesview
- */
-import { ButtonView, FocusCycler, LabeledFieldView, ToolbarView, View, ViewCollection, type DropdownView, type InputTextView, type NormalizedColorOption, type ColorPickerConfig, type FocusableView } from '@ckeditor/ckeditor5-ui';
-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';
+* @module table/tableproperties/ui/tablepropertiesview
+*/
+import { ButtonView, FocusCycler, LabeledFieldView, ToolbarView, View, ViewCollection, type DropdownView, type InputTextView, type NormalizedColorOption, type ColorPickerConfig, type FocusableView } from "@ckeditor/ckeditor5-ui";
+import { FocusTracker, KeystrokeHandler, type Locale } from "@ckeditor/ckeditor5-utils";
+import { type ColorInputView } from "../../ui/colorinputview.js";
+import type { TablePropertiesOptions } from "../../tableconfig.js";
 /**
- * Additional configuration of the view.
- */
+* Additional configuration of the view.
+*/
 export interface TablePropertiesViewOptions {
-    /**
-     * A configuration of the border color palette used by the
-     * {@link module:table/tableproperties/ui/tablepropertiesview~TablePropertiesView#borderColorInput}.
-     */
-    borderColors: Array<NormalizedColorOption>;
-    /**
-     * A configuration of the background color palette used by the
-     * {@link module:table/tableproperties/ui/tablepropertiesview~TablePropertiesView#backgroundInput}.
-     */
-    backgroundColors: Array<NormalizedColorOption>;
-    /**
-     * The default table properties.
-     */
-    defaultTableProperties: TablePropertiesOptions;
-    /**
-     * The default color picker config.
-     */
-    colorPickerConfig: false | ColorPickerConfig;
+	/**
+	* A configuration of the border color palette used by the
+	* {@link module:table/tableproperties/ui/tablepropertiesview~TablePropertiesView#borderColorInput}.
+	*/
+	borderColors: Array<NormalizedColorOption>;
+	/**
+	* A configuration of the background color palette used by the
+	* {@link module:table/tableproperties/ui/tablepropertiesview~TablePropertiesView#backgroundInput}.
+	*/
+	backgroundColors: Array<NormalizedColorOption>;
+	/**
+	* The default table properties.
+	*/
+	defaultTableProperties: TablePropertiesOptions;
+	/**
+	* The number of columns in the color palettes.
+	*
+	* Defaults to {@link module:ui/colorgrid/colors~defaultColorGridColumns}.
+	*/
+	colorGridColumns?: number;
+	/**
+	* The default color picker config.
+	*/
+	colorPickerConfig: false | ColorPickerConfig;
 }
 /**
- * The class representing a table properties form, allowing users to customize
- * certain style aspects of a table, for instance, border, background color, alignment, etc..
- */
+* The class representing a table properties form, allowing users to customize
+* certain style aspects of a table, for instance, border, background color, alignment, etc..
+*/
 export declare class TablePropertiesView extends View {
-    /**
-     * The value of the border style.
-     *
-     * @observable
-     * @default ''
-     */
-    borderStyle: string;
-    /**
-     * The value of the border width style.
-     *
-     * @observable
-     * @default ''
-     */
-    borderWidth: string;
-    /**
-     * The value of the border color style.
-     *
-     * @observable
-     * @default ''
-     */
-    borderColor: string;
-    /**
-     * The value of the background color style.
-     *
-     * @observable
-     * @default ''
-     */
-    backgroundColor: string;
-    /**
-     * The value of the table width style.
-     *
-     * @observable
-     * @default ''
-     */
-    width: string;
-    /**
-     * The value of the table height style.
-     *
-     * @observable
-     * @default ''
-     */
-    height: string;
-    /**
-     * The value of the table alignment style.
-     *
-     * @observable
-     * @default ''
-     */
-    alignment: string;
-    /**
-     * Options passed to the view. See {@link #constructor} to learn more.
-     */
-    readonly options: TablePropertiesViewOptions;
-    /**
-     * Tracks information about the DOM focus in the form.
-     */
-    readonly focusTracker: FocusTracker;
-    /**
-     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-     */
-    readonly keystrokes: KeystrokeHandler;
-    /**
-     * A collection of child views in the form.
-     */
-    readonly children: ViewCollection;
-    /**
-     * A dropdown that allows selecting the style of the table border.
-     */
-    readonly borderStyleDropdown: LabeledFieldView<DropdownView>;
-    /**
-     * An input that allows specifying the width of the table border.
-     */
-    readonly borderWidthInput: LabeledFieldView<InputTextView>;
-    /**
-     * An input that allows specifying the color of the table border.
-     */
-    readonly borderColorInput: LabeledFieldView<ColorInputView>;
-    /**
-     * An input that allows specifying the table background color.
-     */
-    readonly backgroundInput: LabeledFieldView<ColorInputView>;
-    /**
-     * An input that allows specifying the table width.
-     */
-    readonly widthInput: LabeledFieldView<InputTextView>;
-    /**
-     * An input that allows specifying the table height.
-     */
-    readonly heightInput: LabeledFieldView<InputTextView>;
-    /**
-     * A toolbar with buttons that allow changing the alignment of an entire table.
-     */
-    readonly alignmentToolbar: ToolbarView;
-    /**
-     * The "Save" button view.
-     */
-    saveButtonView: ButtonView;
-    /**
-     * The "Cancel" button view.
-     */
-    cancelButtonView: ButtonView;
-    /**
-     * The Back button view displayed in the header.
-     */
-    backButtonView: ButtonView;
-    /**
-     * A collection of views that can be focused in the form.
-     */
-    protected readonly _focusables: ViewCollection<FocusableView>;
-    /**
-     * Helps cycling over {@link #_focusables} in the form.
-     */
-    protected readonly _focusCycler: FocusCycler;
-    /**
-     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
-     * @param options Additional configuration of the view.
-     */
-    constructor(locale: Locale, options: TablePropertiesViewOptions);
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-    /**
-     * @inheritDoc
-     */
-    destroy(): void;
-    /**
-     * Focuses the fist focusable field in the form.
-     */
-    focus(): void;
-    /**
-     * Creates the following form fields:
-     *
-     * * {@link #borderStyleDropdown},
-     * * {@link #borderWidthInput},
-     * * {@link #borderColorInput}.
-     */
-    private _createBorderFields;
-    /**
-     * Creates the following form fields:
-     *
-     * * {@link #backgroundInput}.
-     */
-    private _createBackgroundFields;
-    /**
-     * Creates the following form fields:
-     *
-     * * {@link #widthInput},
-     * * {@link #heightInput}.
-     */
-    private _createDimensionFields;
-    /**
-     * Creates the following form fields:
-     *
-     * * {@link #alignmentToolbar}.
-     */
-    private _createAlignmentFields;
-    /**
-     * Creates the following form controls:
-     *
-     * * {@link #saveButtonView},
-     * * {@link #cancelButtonView}.
-     */
-    private _createActionButtons;
-    /**
-     * Creates a back button view that cancels the form.
-     */
-    private _createBackButton;
-    /**
-     * Provides localized labels for {@link #alignmentToolbar} buttons.
-     */
-    private get _alignmentLabels();
+	/**
+	* The value of the border style.
+	*
+	* @observable
+	* @default ''
+	*/
+	borderStyle: string;
+	/**
+	* The value of the border width style.
+	*
+	* @observable
+	* @default ''
+	*/
+	borderWidth: string;
+	/**
+	* The value of the border color style.
+	*
+	* @observable
+	* @default ''
+	*/
+	borderColor: string;
+	/**
+	* The value of the background color style.
+	*
+	* @observable
+	* @default ''
+	*/
+	backgroundColor: string;
+	/**
+	* The value of the table width style.
+	*
+	* @observable
+	* @default ''
+	*/
+	width: string;
+	/**
+	* The value of the table height style.
+	*
+	* @observable
+	* @default ''
+	*/
+	height: string;
+	/**
+	* The value of the table alignment style.
+	*
+	* @observable
+	* @default ''
+	*/
+	alignment: string;
+	/**
+	* Options passed to the view. See {@link #constructor} to learn more.
+	*/
+	readonly options: TablePropertiesViewOptions;
+	/**
+	* Tracks information about the DOM focus in the form.
+	*/
+	readonly focusTracker: FocusTracker;
+	/**
+	* An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+	*/
+	readonly keystrokes: KeystrokeHandler;
+	/**
+	* A collection of child views in the form.
+	*/
+	readonly children: ViewCollection;
+	/**
+	* A dropdown that allows selecting the style of the table border.
+	*/
+	readonly borderStyleDropdown: LabeledFieldView<DropdownView>;
+	/**
+	* An input that allows specifying the width of the table border.
+	*/
+	readonly borderWidthInput: LabeledFieldView<InputTextView>;
+	/**
+	* An input that allows specifying the color of the table border.
+	*/
+	readonly borderColorInput: LabeledFieldView<ColorInputView>;
+	/**
+	* An input that allows specifying the table background color.
+	*/
+	readonly backgroundInput: LabeledFieldView<ColorInputView>;
+	/**
+	* An input that allows specifying the table width.
+	*/
+	readonly widthInput: LabeledFieldView<InputTextView>;
+	/**
+	* An input that allows specifying the table height.
+	*/
+	readonly heightInput: LabeledFieldView<InputTextView>;
+	/**
+	* A toolbar with buttons that allow changing the alignment of an entire table.
+	*/
+	readonly alignmentToolbar: ToolbarView;
+	/**
+	* The "Save" button view.
+	*/
+	saveButtonView: ButtonView;
+	/**
+	* The "Cancel" button view.
+	*/
+	cancelButtonView: ButtonView;
+	/**
+	* The Back button view displayed in the header.
+	*/
+	backButtonView: ButtonView;
+	/**
+	* A collection of views that can be focused in the form.
+	*/
+	protected readonly _focusables: ViewCollection<FocusableView>;
+	/**
+	* Helps cycling over {@link #_focusables} in the form.
+	*/
+	protected readonly _focusCycler: FocusCycler;
+	/**
+	* @param locale The {@link module:core/editor/editor~Editor#locale} instance.
+	* @param options Additional configuration of the view.
+	*/
+	constructor(locale: Locale, options: TablePropertiesViewOptions);
+	/**
+	* @inheritDoc
+	*/
+	override render(): void;
+	/**
+	* @inheritDoc
+	*/
+	override destroy(): void;
+	/**
+	* Focuses the fist focusable field in the form.
+	*/
+	focus(): void;
+	/**
+	* Creates the following form fields:
+	*
+	* * {@link #borderStyleDropdown},
+	* * {@link #borderWidthInput},
+	* * {@link #borderColorInput}.
+	*/
+	private _createBorderFields;
+	/**
+	* Creates the following form fields:
+	*
+	* * {@link #backgroundInput}.
+	*/
+	private _createBackgroundFields;
+	/**
+	* Creates the following form fields:
+	*
+	* * {@link #widthInput},
+	* * {@link #heightInput}.
+	*/
+	private _createDimensionFields;
+	/**
+	* Creates the following form fields:
+	*
+	* * {@link #alignmentToolbar}.
+	*/
+	private _createAlignmentFields;
+	/**
+	* Creates the following form controls:
+	*
+	* * {@link #saveButtonView},
+	* * {@link #cancelButtonView}.
+	*/
+	private _createActionButtons;
+	/**
+	* Creates a back button view that cancels the form.
+	*/
+	private _createBackButton;
+	/**
+	* Provides localized labels for {@link #alignmentToolbar} buttons.
+	*/
+	private get _alignmentLabels();
 }

package/dist/tableproperties.d.ts

@@ -1,34 +1,34 @@
 /**
- * @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
- */
+* @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/tableproperties
- */
-import { Plugin } from '@ckeditor/ckeditor5-core';
-import { TablePropertiesEditing } from './tableproperties/tablepropertiesediting.js';
-import { TablePropertiesUI } from './tableproperties/tablepropertiesui.js';
+* @module table/tableproperties
+*/
+import { Plugin, type PluginDependenciesOf } from "@ckeditor/ckeditor5-core";
+import { TablePropertiesEditing } from "./tableproperties/tablepropertiesediting.js";
+import { TablePropertiesUI } from "./tableproperties/tablepropertiesui.js";
 /**
- * The table properties feature. Enables support for setting properties of tables (size, border, background, etc.).
- *
- * Read more in the {@glink features/tables/tables-styling Table and cell styling tools} section.
- * See also the {@link module:table/tablecellproperties~TableCellProperties} plugin.
- *
- * This is a "glue" plugin that loads the
- * {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing table properties editing feature} and
- * the {@link module:table/tableproperties/tablepropertiesui~TablePropertiesUI table properties UI feature}.
- */
+* The table properties feature. Enables support for setting properties of tables (size, border, background, etc.).
+*
+* Read more in the {@glink features/tables/tables-styling Table and cell styling tools} section.
+* See also the {@link module:table/tablecellproperties~TableCellProperties} plugin.
+*
+* This is a "glue" plugin that loads the
+* {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing table properties editing feature} and
+* the {@link module:table/tableproperties/tablepropertiesui~TablePropertiesUI table properties UI feature}.
+*/
 export declare class TableProperties extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName(): "TableProperties";
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin(): true;
-    /**
-     * @inheritDoc
-     */
-    static get requires(): readonly [typeof TablePropertiesEditing, typeof TablePropertiesUI];
+	/**
+	* @inheritDoc
+	*/
+	static get pluginName(): "TableProperties";
+	/**
+	* @inheritDoc
+	*/
+	static override get isOfficialPlugin(): true;
+	/**
+	* @inheritDoc
+	*/
+	static get requires(): PluginDependenciesOf<[TablePropertiesEditing, TablePropertiesUI]>;
 }

package/dist/tablescroll/tablescrollediting.d.ts

@@ -0,0 +1,91 @@
+/**
+* @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 {
+	/**
+	* Stops the `scroll` listeners set up by {@link #_watchFiguresScroll}.
+	*/
+	private _stopWatchingRootsScroll?;
+	/**
+	* Stops the `resize` observers set up by {@link #_watchRootEditables}.
+	*/
+	private _stopWatchingRootsResize?;
+	/**
+	* The throttled recalculation callback set up by {@link #_watchRootEditables}, kept so {@link #destroy}
+	* can cancel any call still pending. `undefined` until {@link #init} has run.
+	*/
+	private _throttledRecalculateAll?;
+	/**
+	* @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,29 @@
+/**
+* @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, type EventInfo } 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;
+/**
+* Listens to `scroll` on every editing root and calls `onScroll` for scrolls happening anywhere inside them.
+*
+* @internal
+*/
+export declare function watchRootsScroll(view: EditingView, onScroll: (evt: EventInfo, domEvent: Event) => 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]>;
+}