@ckeditor/ckeditor5-table 45.2.1 → 46.0.0-alpha.0

package/src/tablecellproperties/tablecellpropertiesediting.js

@@ -6,18 +6,18 @@
  * @module table/tablecellproperties/tablecellpropertiesediting
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import { addBorderRules, addPaddingRules, addBackgroundRules } from 'ckeditor5/src/engine.js';
+import { addBorderStylesRules, addPaddingStylesRules, addBackgroundStylesRules } from 'ckeditor5/src/engine.js';
 import { downcastAttributeToStyle, getDefaultValueAdjusted, upcastBorderStyles } from '../converters/tableproperties.js';
-import TableEditing from './../tableediting.js';
-import TableCellWidthEditing from '../tablecellwidth/tablecellwidthediting.js';
-import TableCellPaddingCommand from './commands/tablecellpaddingcommand.js';
-import TableCellHeightCommand from './commands/tablecellheightcommand.js';
-import TableCellBackgroundColorCommand from './commands/tablecellbackgroundcolorcommand.js';
-import TableCellVerticalAlignmentCommand from './commands/tablecellverticalalignmentcommand.js';
-import TableCellHorizontalAlignmentCommand from './commands/tablecellhorizontalalignmentcommand.js';
-import TableCellBorderStyleCommand from './commands/tablecellborderstylecommand.js';
-import TableCellBorderColorCommand from './commands/tablecellbordercolorcommand.js';
-import TableCellBorderWidthCommand from './commands/tablecellborderwidthcommand.js';
+import { TableEditing } from './../tableediting.js';
+import { TableCellWidthEditing } from '../tablecellwidth/tablecellwidthediting.js';
+import { TableCellPaddingCommand } from './commands/tablecellpaddingcommand.js';
+import { TableCellHeightCommand } from './commands/tablecellheightcommand.js';
+import { TableCellBackgroundColorCommand } from './commands/tablecellbackgroundcolorcommand.js';
+import { TableCellVerticalAlignmentCommand } from './commands/tablecellverticalalignmentcommand.js';
+import { TableCellHorizontalAlignmentCommand } from './commands/tablecellhorizontalalignmentcommand.js';
+import { TableCellBorderStyleCommand } from './commands/tablecellborderstylecommand.js';
+import { TableCellBorderColorCommand } from './commands/tablecellbordercolorcommand.js';
+import { TableCellBorderWidthCommand } from './commands/tablecellborderwidthcommand.js';
 import { getNormalizedDefaultCellProperties } from '../utils/table-properties.js';
 import { enableProperty } from '../utils/common.js';
 const VALIGN_VALUES_REG_EXP = /^(top|middle|bottom)$/;
@@ -41,7 +41,7 @@ const ALIGN_VALUES_REG_EXP = /^(left|center|right|justify)$/;
  * - horizontal and vertical alignment: the `'tableCellHorizontalAlignment'` and `'tableCellVerticalAlignment'` commands
  * - width and height: the `'tableCellWidth'` and `'tableCellHeight'` commands
  */
-export default class TableCellPropertiesEditing extends Plugin {
+export class TableCellPropertiesEditing extends Plugin {
     /**
      * @inheritDoc
      */
@@ -74,7 +74,7 @@ export default class TableCellPropertiesEditing extends Plugin {
             includePaddingProperty: true,
             isRightToLeftContent: editor.locale.contentLanguageDirection === 'rtl'
         });
-        editor.data.addStyleProcessorRules(addBorderRules);
+        editor.data.addStyleProcessorRules(addBorderStylesRules);
         enableBorderProperties(schema, conversion, {
             color: defaultTableCellProperties.borderColor,
             style: defaultTableCellProperties.borderStyle,
@@ -86,10 +86,12 @@ export default class TableCellPropertiesEditing extends Plugin {
         enableProperty(schema, conversion, {
             modelAttribute: 'tableCellHeight',
             styleName: 'height',
+            attributeName: 'height',
+            attributeType: 'length',
             defaultValue: defaultTableCellProperties.height
         });
         editor.commands.add('tableCellHeight', new TableCellHeightCommand(editor, defaultTableCellProperties.height));
-        editor.data.addStyleProcessorRules(addPaddingRules);
+        editor.data.addStyleProcessorRules(addPaddingStylesRules);
         enableProperty(schema, conversion, {
             modelAttribute: 'tableCellPadding',
             styleName: 'padding',
@@ -97,10 +99,12 @@ export default class TableCellPropertiesEditing extends Plugin {
             defaultValue: defaultTableCellProperties.padding
         });
         editor.commands.add('tableCellPadding', new TableCellPaddingCommand(editor, defaultTableCellProperties.padding));
-        editor.data.addStyleProcessorRules(addBackgroundRules);
+        editor.data.addStyleProcessorRules(addBackgroundStylesRules);
         enableProperty(schema, conversion, {
             modelAttribute: 'tableCellBackgroundColor',
             styleName: 'background-color',
+            attributeName: 'bgcolor',
+            attributeType: 'color',
             defaultValue: defaultTableCellProperties.backgroundColor
         });
         editor.commands.add('tableCellBackgroundColor', new TableCellBackgroundColorCommand(editor, defaultTableCellProperties.backgroundColor));
@@ -127,6 +131,9 @@ function enableBorderProperties(schema, conversion, defaultBorder) {
     schema.extend('tableCell', {
         allowAttributes: Object.values(modelAttributes)
     });
+    for (const modelAttribute of Object.values(modelAttributes)) {
+        schema.setAttributeProperties(modelAttribute, { isFormatting: true });
+    }
     upcastBorderStyles(conversion, 'td', modelAttributes, defaultBorder);
     upcastBorderStyles(conversion, 'th', modelAttributes, defaultBorder);
     downcastAttributeToStyle(conversion, { modelElement: 'tableCell', modelAttribute: modelAttributes.style, styleName: 'border-style' });
@@ -142,6 +149,7 @@ function enableHorizontalAlignmentProperty(schema, conversion, defaultValue) {
     schema.extend('tableCell', {
         allowAttributes: ['tableCellHorizontalAlignment']
     });
+    schema.setAttributeProperties('tableCellHorizontalAlignment', { isFormatting: true });
     conversion.for('downcast')
         .attributeToAttribute({
         model: {
@@ -169,7 +177,11 @@ function enableHorizontalAlignmentProperty(schema, conversion, defaultValue) {
             value: (viewElement, conversionApi, data) => {
                 const localDefaultValue = getDefaultValueAdjusted(defaultValue, 'left', data);
                 const align = viewElement.getStyle('text-align');
-                return align === localDefaultValue ? null : align;
+                if (align !== localDefaultValue) {
+                    return align;
+                }
+                // Consume the style even if not applied to the element so it won't be processed by other converters.
+                conversionApi.consumable.consume(viewElement, { styles: 'text-align' });
             }
         }
     })
@@ -186,7 +198,11 @@ function enableHorizontalAlignmentProperty(schema, conversion, defaultValue) {
             value: (viewElement, conversionApi, data) => {
                 const localDefaultValue = getDefaultValueAdjusted(defaultValue, 'left', data);
                 const align = viewElement.getAttribute('align');
-                return align === localDefaultValue ? null : align;
+                if (align !== localDefaultValue) {
+                    return align;
+                }
+                // Consume the style even if not applied to the element so it won't be processed by other converters.
+                conversionApi.consumable.consume(viewElement, { attributes: 'align' });
             }
         }
     });
@@ -200,6 +216,7 @@ function enableVerticalAlignmentProperty(schema, conversion, defaultValue) {
     schema.extend('tableCell', {
         allowAttributes: ['tableCellVerticalAlignment']
     });
+    schema.setAttributeProperties('tableCellVerticalAlignment', { isFormatting: true });
     conversion.for('downcast')
         .attributeToAttribute({
         model: {
@@ -227,7 +244,11 @@ function enableVerticalAlignmentProperty(schema, conversion, defaultValue) {
             value: (viewElement, conversionApi, data) => {
                 const localDefaultValue = getDefaultValueAdjusted(defaultValue, 'middle', data);
                 const align = viewElement.getStyle('vertical-align');
-                return align === localDefaultValue ? null : align;
+                if (align !== localDefaultValue) {
+                    return align;
+                }
+                // Consume the style even if not applied to the element so it won't be processed by other converters.
+                conversionApi.consumable.consume(viewElement, { styles: 'vertical-align' });
             }
         }
     })
@@ -244,7 +265,11 @@ function enableVerticalAlignmentProperty(schema, conversion, defaultValue) {
             value: (viewElement, conversionApi, data) => {
                 const localDefaultValue = getDefaultValueAdjusted(defaultValue, 'middle', data);
                 const valign = viewElement.getAttribute('valign');
-                return valign === localDefaultValue ? null : valign;
+                if (valign !== localDefaultValue) {
+                    return valign;
+                }
+                // Consume the attribute even if not applied to the element so it won't be processed by other converters.
+                conversionApi.consumable.consume(viewElement, { attributes: 'valign' });
             }
         }
     });

package/src/tablecellproperties/tablecellpropertiesui.d.ts

@@ -7,14 +7,14 @@
  */
 import { Plugin, type Editor } from 'ckeditor5/src/core.js';
 import { ContextualBalloon } from 'ckeditor5/src/ui.js';
-import TableCellPropertiesView from './ui/tablecellpropertiesview.js';
+import { TableCellPropertiesView } from './ui/tablecellpropertiesview.js';
 /**
  * The table cell properties UI plugin. It introduces the `'tableCellProperties'` button
  * that opens a form allowing to specify the visual styling of a table cell.
  *
  * It uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon plugin}.
  */
-export default class TableCellPropertiesUI extends Plugin {
+export declare class TableCellPropertiesUI extends Plugin {
     /**
      * The default table cell properties.
      */

package/src/tablecellproperties/tablecellpropertiesui.js

@@ -8,7 +8,7 @@
 import { Plugin } from 'ckeditor5/src/core.js';
 import { IconTableCellProperties } from 'ckeditor5/src/icons.js';
 import { ButtonView, clickOutsideHandler, ContextualBalloon, getLocalizedColorOptions, normalizeColorOptions } from 'ckeditor5/src/ui.js';
-import TableCellPropertiesView from './ui/tablecellpropertiesview.js';
+import { TableCellPropertiesView } from './ui/tablecellpropertiesview.js';
 import { colorFieldValidator, getLocalizedColorErrorText, getLocalizedLengthErrorText, defaultColors, lengthFieldValidator, lineWidthFieldValidator } from '../utils/ui/table-properties.js';
 import { debounce } from 'es-toolkit/compat';
 import { getSelectionAffectedTableWidget, getTableWidgetAncestor } from '../utils/ui/widget.js';
@@ -33,7 +33,7 @@ const propertyToCommandMap = {
  *
  * It uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon plugin}.
  */
-export default class TableCellPropertiesUI extends Plugin {
+export class TableCellPropertiesUI extends Plugin {
     /**
      * The default table cell properties.
      */

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

@@ -7,7 +7,7 @@
  */
 import { ButtonView, FocusCycler, LabeledFieldView, ToolbarView, View, ViewCollection, type FocusableView, type NormalizedColorOption, type ColorPickerConfig } from 'ckeditor5/src/ui.js';
 import { KeystrokeHandler, FocusTracker, type Locale } from 'ckeditor5/src/utils.js';
-import type ColorInputView from '../../ui/colorinputview.js';
+import { type ColorInputView } from '../../ui/colorinputview.js';
 import type { TableCellPropertiesOptions } from '../../tableconfig.js';
 import '@ckeditor/ckeditor5-ui/theme/components/form/form.css';
 import '../../../theme/formrow.css';
@@ -23,7 +23,7 @@ export interface TableCellPropertiesViewOptions {
  * The class representing a table cell properties form, allowing users to customize
  * certain style aspects of a table cell, for instance, border, padding, text alignment, etc..
  */
-export default class TableCellPropertiesView extends View {
+export declare class TableCellPropertiesView extends View {
     /**
      * The value of the cell border style.
      *

package/src/tablecellproperties/ui/tablecellpropertiesview.js

@@ -18,7 +18,7 @@ import '../../../theme/tablecellproperties.css';
  * The class representing a table cell properties form, allowing users to customize
  * certain style aspects of a table cell, for instance, border, padding, text alignment, etc..
  */
-export default class TableCellPropertiesView extends View {
+export class TableCellPropertiesView extends View {
     /**
      * Options passed to the view. See {@link #constructor} to learn more.
      */

package/src/tablecellproperties.d.ts

@@ -6,8 +6,8 @@
  * @module table/tablecellproperties
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import TableCellPropertiesUI from './tablecellproperties/tablecellpropertiesui.js';
-import TableCellPropertiesEditing from './tablecellproperties/tablecellpropertiesediting.js';
+import { TableCellPropertiesUI } from './tablecellproperties/tablecellpropertiesui.js';
+import { TableCellPropertiesEditing } from './tablecellproperties/tablecellpropertiesediting.js';
 /**
  * The table cell properties feature. Enables support for setting properties of table cells (size, border, background, etc.).
  *
@@ -18,7 +18,7 @@ import TableCellPropertiesEditing from './tablecellproperties/tablecellpropertie
  * {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing table cell properties editing feature} and
  * the {@link module:table/tablecellproperties/tablecellpropertiesui~TableCellPropertiesUI table cell properties UI feature}.
  */
-export default class TableCellProperties extends Plugin {
+export declare class TableCellProperties extends Plugin {
     /**
      * @inheritDoc
      */

package/src/tablecellproperties.js

@@ -6,8 +6,8 @@
  * @module table/tablecellproperties
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import TableCellPropertiesUI from './tablecellproperties/tablecellpropertiesui.js';
-import TableCellPropertiesEditing from './tablecellproperties/tablecellpropertiesediting.js';
+import { TableCellPropertiesUI } from './tablecellproperties/tablecellpropertiesui.js';
+import { TableCellPropertiesEditing } from './tablecellproperties/tablecellpropertiesediting.js';
 /**
  * The table cell properties feature. Enables support for setting properties of table cells (size, border, background, etc.).
  *
@@ -18,7 +18,7 @@ import TableCellPropertiesEditing from './tablecellproperties/tablecellpropertie
  * {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing table cell properties editing feature} and
  * the {@link module:table/tablecellproperties/tablecellpropertiesui~TableCellPropertiesUI table cell properties UI feature}.
  */
-export default class TableCellProperties extends Plugin {
+export class TableCellProperties extends Plugin {
     /**
      * @inheritDoc
      */

package/src/tablecellwidth/commands/tablecellwidthcommand.d.ts

@@ -6,7 +6,7 @@
  * @module table/tablecellwidth/commands/tablecellwidthcommand
  */
 import type { Editor } from 'ckeditor5/src/core.js';
-import TableCellPropertyCommand from '../../tablecellproperties/commands/tablecellpropertycommand.js';
+import { TableCellPropertyCommand } from '../../tablecellproperties/commands/tablecellpropertycommand.js';
 /**
  * The table cell width command.
  *
@@ -31,7 +31,7 @@ import TableCellPropertyCommand from '../../tablecellproperties/commands/tablece
  *
  * will set the `width` attribute to `'50px'` in the model.
  */
-export default class TableCellWidthCommand extends TableCellPropertyCommand {
+export declare class TableCellWidthCommand extends TableCellPropertyCommand {
     /**
      * Creates a new `TableCellWidthCommand` instance.
      *

package/src/tablecellwidth/commands/tablecellwidthcommand.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 TableCellPropertyCommand from '../../tablecellproperties/commands/tablecellpropertycommand.js';
+import { TableCellPropertyCommand } from '../../tablecellproperties/commands/tablecellpropertycommand.js';
 import { addDefaultUnitToNumericValue } from '../../utils/table-properties.js';
 /**
  * The table cell width command.
@@ -28,7 +28,7 @@ import { addDefaultUnitToNumericValue } from '../../utils/table-properties.js';
  *
  * will set the `width` attribute to `'50px'` in the model.
  */
-export default class TableCellWidthCommand extends TableCellPropertyCommand {
+export class TableCellWidthCommand extends TableCellPropertyCommand {
     /**
      * Creates a new `TableCellWidthCommand` instance.
      *

package/src/tablecellwidth/tablecellwidthediting.d.ts

@@ -6,14 +6,14 @@
  * @module table/tablecellwidth/tablecellwidthediting
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import TableEditing from './../tableediting.js';
+import { TableEditing } from './../tableediting.js';
 /**
  * The table cell width editing feature.
  *
  * Introduces `tableCellWidth` table cell model attribute alongside with its converters
  * and a command.
  */
-export default class TableCellWidthEditing extends Plugin {
+export declare class TableCellWidthEditing extends Plugin {
     /**
      * @inheritDoc
      */

package/src/tablecellwidth/tablecellwidthediting.js

@@ -6,8 +6,8 @@
  * @module table/tablecellwidth/tablecellwidthediting
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import TableEditing from './../tableediting.js';
-import TableCellWidthCommand from './commands/tablecellwidthcommand.js';
+import { TableEditing } from './../tableediting.js';
+import { TableCellWidthCommand } from './commands/tablecellwidthcommand.js';
 import { getNormalizedDefaultCellProperties } from '../utils/table-properties.js';
 import { enableProperty } from '../utils/common.js';
 /**
@@ -16,7 +16,7 @@ import { enableProperty } from '../utils/common.js';
  * Introduces `tableCellWidth` table cell model attribute alongside with its converters
  * and a command.
  */
-export default class TableCellWidthEditing extends Plugin {
+export class TableCellWidthEditing extends Plugin {
     /**
      * @inheritDoc
      */
@@ -44,6 +44,8 @@ export default class TableCellWidthEditing extends Plugin {
         enableProperty(editor.model.schema, editor.conversion, {
             modelAttribute: 'tableCellWidth',
             styleName: 'width',
+            attributeName: 'width',
+            attributeType: 'length',
             defaultValue: defaultTableCellProperties.width
         });
         editor.commands.add('tableCellWidth', new TableCellWidthCommand(editor, defaultTableCellProperties.width));

package/src/tableclipboard.d.ts

@@ -4,15 +4,15 @@
  */
 import { ClipboardPipeline, ClipboardMarkersUtils } from 'ckeditor5/src/clipboard.js';
 import { Plugin } from 'ckeditor5/src/core.js';
-import type { DocumentFragment, Element, Item, Model, Position, Writer } from 'ckeditor5/src/engine.js';
-import TableSelection from './tableselection.js';
+import type { ModelDocumentFragment, ModelElement, ModelItem, Model, ModelPosition, ModelWriter } from 'ckeditor5/src/engine.js';
+import { TableSelection } from './tableselection.js';
 import { type TableSlot } from './tablewalker.js';
-import TableUtils from './tableutils.js';
+import { TableUtils } from './tableutils.js';
 /**
  * This plugin adds support for copying/cutting/pasting fragments of tables.
  * It is loaded automatically by the {@link module:table/table~Table} plugin.
  */
-export default class TableClipboard extends Plugin {
+export declare class TableClipboard extends Plugin {
     /**
      * @inheritDoc
      */
@@ -72,12 +72,12 @@ export default class TableClipboard extends Plugin {
      * @returns Inserted table cell or null if slot should remain empty.
      * @private
      */
-    _replaceTableSlotCell(tableSlot: TableSlot, cellToInsert: Element | null, insertPosition: Position, writer: Writer): Element | null;
+    _replaceTableSlotCell(tableSlot: TableSlot, cellToInsert: ModelElement | null, insertPosition: ModelPosition, writer: ModelWriter): ModelElement | null;
     /**
      * Extracts the table for pasting into a table.
      *
      * @param content The content to insert.
      * @param model The editor model.
      */
-    getTableIfOnlyTableInContent(content: DocumentFragment | Item, model: Model): Element | null;
+    getTableIfOnlyTableInContent(content: ModelDocumentFragment | ModelItem, model: Model): ModelElement | null;
 }

package/src/tableclipboard.js

@@ -4,15 +4,15 @@
  */
 import { ClipboardPipeline, ClipboardMarkersUtils } from 'ckeditor5/src/clipboard.js';
 import { Plugin } from 'ckeditor5/src/core.js';
-import TableSelection from './tableselection.js';
-import TableWalker from './tablewalker.js';
-import TableUtils from './tableutils.js';
+import { TableSelection } from './tableselection.js';
+import { TableWalker } from './tablewalker.js';
+import { TableUtils } from './tableutils.js';
 import { cropTableToDimensions, getHorizontallyOverlappingCells, getVerticallyOverlappingCells, removeEmptyRowsColumns, splitHorizontally, splitVertically, trimTableCellIfNeeded, adjustLastRowIndex, adjustLastColumnIndex } from './utils/structure.js';
 /**
  * This plugin adds support for copying/cutting/pasting fragments of tables.
  * It is loaded automatically by the {@link module:table/table~Table} plugin.
  */
-export default class TableClipboard extends Plugin {
+export class TableClipboard extends Plugin {
     /**
      * @inheritDoc
      */

package/src/tablecolumnresize/constants.d.ts

@@ -8,17 +8,26 @@
 /**
  * The minimum column width given as a percentage value. Used in situations when the table is not yet rendered, so it is impossible to
  * calculate how many percentage of the table width would be {@link ~COLUMN_MIN_WIDTH_IN_PIXELS minimum column width in pixels}.
+ *
+ * @internal
  */
 export declare const COLUMN_MIN_WIDTH_AS_PERCENTAGE = 5;
 /**
  * The minimum column width in pixels when the maximum table width is known.
+ * This value is an equivalent of `10%` of the default editor width (600px).
+ *
+ * @internal
  */
 export declare const COLUMN_MIN_WIDTH_IN_PIXELS = 40;
 /**
  * Determines how many digits after the decimal point are used to store the column width as a percentage value.
+ *
+ * @internal
  */
 export declare const COLUMN_WIDTH_PRECISION = 2;
 /**
  * The distance in pixels that the mouse has to move to start resizing the column.
+ *
+ * @internal
  */
 export declare const COLUMN_RESIZE_DISTANCE_THRESHOLD = 3;

package/src/tablecolumnresize/constants.js

@@ -8,17 +8,26 @@
 /**
  * The minimum column width given as a percentage value. Used in situations when the table is not yet rendered, so it is impossible to
  * calculate how many percentage of the table width would be {@link ~COLUMN_MIN_WIDTH_IN_PIXELS minimum column width in pixels}.
+ *
+ * @internal
  */
 export const COLUMN_MIN_WIDTH_AS_PERCENTAGE = 5;
 /**
  * The minimum column width in pixels when the maximum table width is known.
+ * This value is an equivalent of `10%` of the default editor width (600px).
+ *
+ * @internal
  */
 export const COLUMN_MIN_WIDTH_IN_PIXELS = 40;
 /**
  * Determines how many digits after the decimal point are used to store the column width as a percentage value.
+ *
+ * @internal
  */
 export const COLUMN_WIDTH_PRECISION = 2;
 /**
  * The distance in pixels that the mouse has to move to start resizing the column.
+ *
+ * @internal
  */
 export const COLUMN_RESIZE_DISTANCE_THRESHOLD = 3;

package/src/tablecolumnresize/converters.d.ts

@@ -6,13 +6,23 @@
  * @module table/tablecolumnresize/converters
  */
 import type { DowncastDispatcher, UpcastDispatcher } from 'ckeditor5/src/engine.js';
-import type TableUtils from '../tableutils.js';
+import { type TableUtils } from '../tableutils.js';
 /**
  * Returns a upcast helper that ensures the number of `<tableColumn>` elements corresponds to the actual number of columns in the table,
  * because the input data might have too few or too many <col> elements.
+ *
+ * @internal
  */
 export declare function upcastColgroupElement(tableUtilsPlugin: TableUtils): (dispatcher: UpcastDispatcher) => void;
 /**
  * Returns downcast helper for adding `ck-table-resized` class if there is a `<tableColumnGroup>` element inside the table.
+ *
+ * @internal
  */
 export declare function downcastTableResizedClass(): (dispatcher: DowncastDispatcher) => void;
+/**
+ * Returns a upcast helper that removes the `ck-table-resized` class from the table element.
+ *
+ * @internal
+ */
+export declare function upcastTableResizedClass(): (dispatcher: UpcastDispatcher) => void;

package/src/tablecolumnresize/converters.js

@@ -6,6 +6,8 @@ import { normalizeColumnWidths, updateColumnElements, getColumnGroupElement, get
 /**
  * Returns a upcast helper that ensures the number of `<tableColumn>` elements corresponds to the actual number of columns in the table,
  * because the input data might have too few or too many <col> elements.
+ *
+ * @internal
  */
 export function upcastColgroupElement(tableUtilsPlugin) {
     return dispatcher => dispatcher.on('element:colgroup', (evt, data, conversionApi) => {
@@ -26,6 +28,8 @@ export function upcastColgroupElement(tableUtilsPlugin) {
 }
 /**
  * Returns downcast helper for adding `ck-table-resized` class if there is a `<tableColumnGroup>` element inside the table.
+ *
+ * @internal
  */
 export function downcastTableResizedClass() {
     return dispatcher => dispatcher.on('insert:table', (evt, data, conversionApi) => {
@@ -44,3 +48,15 @@ export function downcastTableResizedClass() {
         }
     }, { priority: 'low' });
 }
+/**
+ * Returns a upcast helper that removes the `ck-table-resized` class from the table element.
+ *
+ * @internal
+ */
+export function upcastTableResizedClass() {
+    return (dispatcher) => {
+        dispatcher.on('element:table', (evt, data, conversionApi) => {
+            conversionApi.consumable.consume(data.viewItem, { classes: 'ck-table-resized' });
+        });
+    };
+}

package/src/tablecolumnresize/tablecolumnresizeediting.d.ts

@@ -3,13 +3,13 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 import { Plugin, type Editor } from 'ckeditor5/src/core.js';
-import type { Element } from 'ckeditor5/src/engine.js';
-import TableEditing from '../tableediting.js';
-import TableUtils from '../tableutils.js';
+import type { ModelElement } from 'ckeditor5/src/engine.js';
+import { TableEditing } from '../tableediting.js';
+import { TableUtils } from '../tableutils.js';
 /**
  * The table column resize editing plugin.
  */
-export default class TableColumnResizeEditing extends Plugin {
+export declare class TableColumnResizeEditing extends Plugin {
     /**
      * A flag indicating if the column resizing is in progress.
      */
@@ -69,21 +69,21 @@ export default class TableColumnResizeEditing extends Plugin {
      * @param element A 'table' or 'tableColumnGroup' element.
      * @returns A 'tableColumnGroup' element.
      */
-    getColumnGroupElement(element: Element): Element | undefined;
+    getColumnGroupElement(element: ModelElement): ModelElement | undefined;
     /**
      * Returns an array of 'tableColumn' elements.
      *
      * @param element A 'table' or 'tableColumnGroup' element.
      * @returns An array of 'tableColumn' elements.
      */
-    getTableColumnElements(element: Element): Array<Element>;
+    getTableColumnElements(element: ModelElement): Array<ModelElement>;
     /**
      * Returns an array of table column widths.
      *
      * @param element A 'table' or 'tableColumnGroup' element.
      * @returns An array of table column widths.
      */
-    getTableColumnsWidths(element: Element): Array<string>;
+    getTableColumnsWidths(element: ModelElement): Array<string>;
     /**
      * Registers new attributes for a table model element.
      */

package/src/tablecolumnresize/tablecolumnresizeediting.js

@@ -8,19 +8,19 @@
 import { throttle, isEqual } from 'es-toolkit/compat';
 import { global, DomEmitterMixin, Rect, toUnit } from 'ckeditor5/src/utils.js';
 import { Plugin } from 'ckeditor5/src/core.js';
-import MouseEventsObserver from '../../src/tablemouse/mouseeventsobserver.js';
-import TableEditing from '../tableediting.js';
-import TableUtils from '../tableutils.js';
-import TableWalker from '../tablewalker.js';
-import TableWidthsCommand from './tablewidthscommand.js';
-import { downcastTableResizedClass, upcastColgroupElement } from './converters.js';
+import { MouseEventsObserver } from '../../src/tablemouse/mouseeventsobserver.js';
+import { TableEditing } from '../tableediting.js';
+import { TableUtils } from '../tableutils.js';
+import { TableWalker } from '../tablewalker.js';
+import { TableWidthsCommand } from './tablewidthscommand.js';
+import { downcastTableResizedClass, upcastColgroupElement, upcastTableResizedClass } from './converters.js';
 import { clamp, createFilledArray, sumArray, getColumnEdgesIndexes, getChangedResizedTables, getColumnMinWidthAsPercentage, getElementWidthInPixels, getTableWidthInPixels, normalizeColumnWidths, toPrecision, getDomCellOuterWidth, updateColumnElements, getColumnGroupElement, getTableColumnElements, getTableColumnsWidths } from './utils.js';
 import { COLUMN_MIN_WIDTH_IN_PIXELS, COLUMN_RESIZE_DISTANCE_THRESHOLD } from './constants.js';
 const toPx = /* #__PURE__ */ toUnit('px');
 /**
  * The table column resize editing plugin.
  */
-export default class TableColumnResizeEditing extends Plugin {
+export class TableColumnResizeEditing extends Plugin {
     /**
      * A flag indicating if the column resizing is in progress.
      */
@@ -144,18 +144,20 @@ export default class TableColumnResizeEditing extends Plugin {
      * Registers new attributes for a table model element.
      */
     _extendSchema() {
-        this.editor.model.schema.extend('table', {
+        const schema = this.editor.model.schema;
+        schema.extend('table', {
             allowAttributes: ['tableWidth']
         });
-        this.editor.model.schema.register('tableColumnGroup', {
+        schema.register('tableColumnGroup', {
             allowIn: 'table',
             isLimit: true
         });
-        this.editor.model.schema.register('tableColumn', {
+        schema.register('tableColumn', {
             allowIn: 'tableColumnGroup',
             allowAttributes: ['columnWidth', 'colSpan'],
             isLimit: true
         });
+        schema.setAttributeProperties('columnWidth', { isFormatting: true });
     }
     /**
      * Registers table column resize post-fixer.
@@ -261,7 +263,6 @@ export default class TableColumnResizeEditing extends Plugin {
                 }
             },
             model: {
-                name: 'table',
                 key: 'tableWidth',
                 value: (viewElement) => {
                     const parent = viewElement.parent;
@@ -288,6 +289,7 @@ export default class TableColumnResizeEditing extends Plugin {
         conversion.elementToElement({ model: 'tableColumnGroup', view: 'colgroup' });
         conversion.elementToElement({ model: 'tableColumn', view: 'col' });
         conversion.for('downcast').add(downcastTableResizedClass());
+        conversion.for('upcast').add(upcastTableResizedClass());
         conversion.for('upcast').add(upcastColgroupElement(this._tableUtilsPlugin));
         conversion.for('upcast').attributeToAttribute({
             view: {