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

package/src/tablelayout.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @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/tablelayout
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import TableLayoutUI from './tablelayout/tablelayoutui.js';
+import TableLayoutEditing from './tablelayout/tablelayoutediting.js';
+import PlainTableOutput from './plaintableoutput.js';
+import TableColumnResize from './tablecolumnresize.js';
+/**
+ * The table plugin.
+ *
+ * For a detailed overview, check the {@glink features/tables/tables-layout Layout table feature documentation}.
+ */
+export default class TableLayout extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "TableLayout";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof PlainTableOutput, typeof TableColumnResize, typeof TableLayoutEditing, typeof TableLayoutUI];
+}

package/src/tablelayout.js

@@ -0,0 +1,37 @@
+/**
+ * @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/tablelayout
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import TableLayoutUI from './tablelayout/tablelayoutui.js';
+import TableLayoutEditing from './tablelayout/tablelayoutediting.js';
+import PlainTableOutput from './plaintableoutput.js';
+import TableColumnResize from './tablecolumnresize.js';
+/**
+ * The table plugin.
+ *
+ * For a detailed overview, check the {@glink features/tables/tables-layout Layout table feature documentation}.
+ */
+export default class TableLayout extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'TableLayout';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [PlainTableOutput, TableColumnResize, TableLayoutEditing, TableLayoutUI];
+    }
+}

package/src/tablemouse/mouseeventsobserver.js

@@ -20,12 +20,9 @@ import { DomEventObserver } from 'ckeditor5/src/engine.js';
  * The observer is registered by the {@link module:table/tableselection~TableSelection} plugin.
  */
 export default class MouseEventsObserver extends DomEventObserver {
-    constructor() {
-        super(...arguments);
-        this.domEventType = [
-            'mousemove', 'mouseleave'
-        ];
-    }
+    domEventType = [
+        'mousemove', 'mouseleave'
+    ];
     /**
      * @inheritDoc
      */

package/src/tableproperties/commands/tablepropertycommand.d.ts

@@ -26,8 +26,18 @@ export default class TablePropertyCommand extends Command {
     readonly attributeName: string;
     /**
      * The default value for the attribute.
+     *
+     * @readonly
+     */
+    protected _defaultValue: string | undefined;
+    /**
+     * The default value for the attribute for the content table.
+     */
+    private readonly _defaultContentTableValue;
+    /**
+     * The default value for the attribute for the layout table.
      */
-    protected readonly _defaultValue: string | undefined;
+    private readonly _defaultLayoutTableValue;
     /**
      * Creates a new `TablePropertyCommand` instance.
      *

package/src/tableproperties/commands/tablepropertycommand.js

@@ -10,6 +10,24 @@ import { getSelectionAffectedTable } from '../../utils/common.js';
  * This command is a base command for other table property commands.
  */
 export default class TablePropertyCommand extends Command {
+    /**
+     * The attribute that will be set by the command.
+     */
+    attributeName;
+    /**
+     * The default value for the attribute.
+     *
+     * @readonly
+     */
+    _defaultValue;
+    /**
+     * The default value for the attribute for the content table.
+     */
+    _defaultContentTableValue;
+    /**
+     * The default value for the attribute for the layout table.
+     */
+    _defaultLayoutTableValue;
     /**
      * Creates a new `TablePropertyCommand` instance.
      *
@@ -20,7 +38,8 @@ export default class TablePropertyCommand extends Command {
     constructor(editor, attributeName, defaultValue) {
         super(editor);
         this.attributeName = attributeName;
-        this._defaultValue = defaultValue;
+        this._defaultContentTableValue = defaultValue;
+        this._defaultLayoutTableValue = attributeName === 'tableBorderStyle' ? 'none' : undefined;
     }
     /**
      * @inheritDoc
@@ -29,6 +48,9 @@ export default class TablePropertyCommand extends Command {
         const editor = this.editor;
         const selection = editor.model.document.selection;
         const table = getSelectionAffectedTable(selection);
+        this._defaultValue = !table || table.getAttribute('tableType') !== 'layout' ?
+            this._defaultContentTableValue :
+            this._defaultLayoutTableValue;
         this.isEnabled = !!table;
         this.value = this._getValue(table);
     }

package/src/tableproperties/tablepropertiesediting.js

@@ -6,6 +6,7 @@
  * @module table/tableproperties/tablepropertiesediting
  */
 import { Plugin } from 'ckeditor5/src/core.js';
+import { first } from 'ckeditor5/src/utils.js';
 import { addBackgroundRules, addBorderRules } from 'ckeditor5/src/engine.js';
 import TableEditing from '../tableediting.js';
 import { downcastAttributeToStyle, downcastTableAttribute, upcastBorderStyles, upcastStyleToAttribute } from '../converters/tableproperties.js';
@@ -133,15 +134,36 @@ function enableAlignmentProperty(schema, conversion, defaultValue) {
         .attributeToAttribute({
         model: {
             name: 'table',
-            key: 'tableAlignment'
+            key: 'tableAlignment',
+            values: ['left', 'center', 'right']
         },
-        view: alignment => ({
-            key: 'style',
-            value: {
-                // Model: `alignment:center` => CSS: `float:none`.
-                float: alignment === 'center' ? 'none' : alignment
+        view: {
+            left: {
+                key: 'style',
+                value: {
+                    float: 'left'
+                }
+            },
+            right: {
+                key: 'style',
+                value: {
+                    float: 'right'
+                }
+            },
+            center: (alignment, conversionApi, data) => {
+                const value = data.item.getAttribute('tableType') !== 'layout' ? {
+                    // Model: `alignment:center` => CSS: `float:none`.
+                    float: 'none'
+                } : {
+                    'margin-left': 'auto',
+                    'margin-right': 'auto'
+                };
+                return {
+                    key: 'style',
+                    value
+                };
             }
-        }),
+        },
         converterPriority: 'high'
     });
     conversion.for('upcast')
@@ -155,13 +177,21 @@ function enableAlignmentProperty(schema, conversion, defaultValue) {
         },
         model: {
             key: 'tableAlignment',
-            value: (viewElement) => {
+            value: (viewElement, conversionApi, data) => {
+                let localDefaultValue = defaultValue;
+                // Adjust default for layout tables.
+                if (data.modelRange) {
+                    const modelElement = first(data.modelRange.getItems({ shallow: true }));
+                    if (modelElement && modelElement.is('element') && modelElement.getAttribute('tableType') == 'layout') {
+                        localDefaultValue = '';
+                    }
+                }
                 let align = viewElement.getStyle('float');
                 // CSS: `float:none` => Model: `alignment:center`.
                 if (align === 'none') {
                     align = 'center';
                 }
-                return align === defaultValue ? null : align;
+                return align === localDefaultValue ? null : align;
             }
         }
     })
@@ -175,9 +205,17 @@ function enableAlignmentProperty(schema, conversion, defaultValue) {
         model: {
             name: 'table',
             key: 'tableAlignment',
-            value: (viewElement) => {
+            value: (viewElement, conversionApi, data) => {
+                let localDefaultValue = defaultValue;
+                // Adjust default for layout tables.
+                if (data.modelRange) {
+                    const modelElement = first(data.modelRange.getItems({ shallow: true }));
+                    if (modelElement && modelElement.is('element') && modelElement.getAttribute('tableType') == 'layout') {
+                        localDefaultValue = '';
+                    }
+                }
                 const align = viewElement.getAttribute('align');
-                return align === defaultValue ? null : align;
+                return align === localDefaultValue ? null : align;
             }
         }
     });

package/src/tableproperties/tablepropertiesui.d.ts

@@ -5,8 +5,8 @@
 /**
  * @module table/tableproperties/tablepropertiesui
  */
-import { type Editor, Plugin } from 'ckeditor5/src/core.js';
-import { ContextualBalloon } from 'ckeditor5/src/ui.js';
+import { Plugin, type Editor } from 'ckeditor5/src/core.js';
+import { ButtonView, ContextualBalloon } from 'ckeditor5/src/ui.js';
 import TablePropertiesView from './ui/tablepropertiesview.js';
 /**
  * The table properties UI plugin. It introduces the `'tableProperties'` button
@@ -18,7 +18,11 @@ export default class TablePropertiesUI extends Plugin {
     /**
      * The default table properties.
      */
-    private _defaultTableProperties;
+    private _defaultContentTableProperties;
+    /**
+     * The default layout table properties.
+     */
+    private _defaultLayoutTableProperties;
     /**
      * The contextual balloon plugin instance.
      */
@@ -27,6 +31,14 @@ export default class TablePropertiesUI extends Plugin {
      * The properties form view displayed inside the balloon.
      */
     view: TablePropertiesView | null;
+    /**
+     * The properties form view displayed inside the balloon (content table).
+     */
+    private _viewWithContentTableDefaults;
+    /**
+     * The properties form view displayed inside the balloon (layout table).
+     */
+    private _viewWithLayoutTableDefaults;
     /**
      * 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.
@@ -57,6 +69,12 @@ export default class TablePropertiesUI extends Plugin {
      * @inheritDoc
      */
     init(): void;
+    /**
+     * Creates the table properties button.
+     *
+     * @internal
+     */
+    _createTablePropertiesButton(): ButtonView;
     /**
      * @inheritDoc
      */

package/src/tableproperties/tablepropertiesui.js

@@ -6,14 +6,14 @@
  * @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';
-import { getNormalizedDefaultTableProperties } from '../utils/table-properties.js';
+import { getNormalizedDefaultProperties, getNormalizedDefaultTableProperties } from '../utils/table-properties.js';
 const ERROR_TEXT_TIMEOUT = 500;
 // Map of view properties and related commands.
 const propertyToCommandMap = {
@@ -32,6 +32,40 @@ 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.
+     */
+    _defaultContentTableProperties;
+    /**
+     * The default layout table properties.
+     */
+    _defaultLayoutTableProperties;
+    /**
+     * The contextual balloon plugin instance.
+     */
+    _balloon;
+    /**
+     * The properties form view displayed inside the balloon.
+     */
+    view = null;
+    /**
+     * The properties form view displayed inside the balloon (content table).
+     */
+    _viewWithContentTableDefaults = null;
+    /**
+     * The properties form view displayed inside the balloon (layout table).
+     */
+    _viewWithLayoutTableDefaults = 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 +89,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 +99,32 @@ export default class TablePropertiesUI extends Plugin {
      */
     init() {
         const editor = this.editor;
-        const t = editor.t;
-        this._defaultTableProperties = getNormalizedDefaultTableProperties(editor.config.get('table.tableProperties.defaultProperties'), {
+        this._defaultContentTableProperties = getNormalizedDefaultTableProperties(editor.config.get('table.tableProperties.defaultProperties'), {
             includeAlignmentProperty: true
         });
+        this._defaultLayoutTableProperties = getNormalizedDefaultProperties();
         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
@@ -104,7 +142,7 @@ export default class TablePropertiesUI extends Plugin {
      *
      * @returns The table properties form view instance.
      */
-    _createPropertiesView() {
+    _createPropertiesView(defaultTableProperties) {
         const editor = this.editor;
         const config = editor.config.get('table.tableProperties');
         const borderColorsConfig = normalizeColorOptions(config.borderColors);
@@ -115,7 +153,7 @@ export default class TablePropertiesUI extends Plugin {
         const view = new TablePropertiesView(editor.locale, {
             borderColors: localizedBorderColors,
             backgroundColors: localizedBackgroundColors,
-            defaultTableProperties: this._defaultTableProperties,
+            defaultTableProperties,
             colorPickerConfig: hasColorPicker ? (config.colorPicker || {}) : false
         });
         const t = editor.t;
@@ -198,7 +236,9 @@ export default class TablePropertiesUI extends Plugin {
         Object.entries(propertyToCommandMap)
             .map(([property, commandName]) => {
             const propertyKey = property;
-            const defaultValue = this._defaultTableProperties[propertyKey] || '';
+            const defaultValue = this.view === this._viewWithContentTableDefaults ?
+                this._defaultContentTableProperties[propertyKey] || '' :
+                this._defaultLayoutTableProperties[propertyKey] || '';
             return [propertyKey, (commands.get(commandName).value || defaultValue)];
         })
             .forEach(([property, value]) => {
@@ -219,9 +259,16 @@ export default class TablePropertiesUI extends Plugin {
      */
     _showView() {
         const editor = this.editor;
-        if (!this.view) {
-            this.view = this._createPropertiesView();
+        const viewTable = getSelectionAffectedTableWidget(editor.editing.view.document.selection);
+        const modelTable = viewTable && editor.editing.mapper.toModelElement(viewTable);
+        const useDefaults = !modelTable || modelTable.getAttribute('tableType') !== 'layout';
+        if (useDefaults && !this._viewWithContentTableDefaults) {
+            this._viewWithContentTableDefaults = this._createPropertiesView(this._defaultContentTableProperties);
+        }
+        else if (!useDefaults && !this._viewWithLayoutTableDefaults) {
+            this._viewWithLayoutTableDefaults = this._createPropertiesView(this._defaultLayoutTableProperties);
         }
+        this.view = useDefaults ? this._viewWithContentTableDefaults : this._viewWithLayoutTableDefaults;
         this.listenTo(editor.ui, 'update', () => {
             this._updateView();
         });

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

@@ -7,11 +7,12 @@
  */
 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 '../../../theme/tableform.css';
-import '../../../theme/tableproperties.css';
 import type ColorInputView from '../../ui/colorinputview.js';
 import type { TablePropertiesOptions } from '../../tableconfig.js';
+import '@ckeditor/ckeditor5-ui/theme/components/form/form.css';
+import '../../../theme/formrow.css';
+import '../../../theme/tableform.css';
+import '../../../theme/tableproperties.css';
 /**
  * Additional configuration of the view.
  */

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 = {