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

package/dist/index.js

@@ -6,9 +6,9 @@ import { Command, Plugin } from '@ckeditor/ckeditor5-core/dist/index.js';
 import { toWidgetEditable, toWidget, Widget, isWidget, WidgetToolbarRepository } from '@ckeditor/ckeditor5-widget/dist/index.js';
 import { first, global, CKEditorError, KeystrokeHandler, FocusTracker, Collection, getLocalizedArrowKeyCodeDirection, Rect, DomEmitterMixin, toUnit } from '@ckeditor/ckeditor5-utils/dist/index.js';
 import { IconTable, IconTableColumn, IconTableRow, IconTableMergeCell, IconCheck, IconCancel, IconAlignBottom, IconAlignMiddle, IconAlignTop, IconAlignJustify, IconAlignRight, IconAlignCenter, IconAlignLeft, IconTableCellProperties, IconTableLayout, IconTableProperties, IconObjectInlineRight, IconObjectCenter, IconObjectInlineLeft, IconCaption } from '@ckeditor/ckeditor5-icons/dist/index.js';
-import { View, addKeyboardHandlingForGrid, ButtonView, createDropdown, MenuBarMenuView, SwitchButtonView, SplitButtonView, addListToDropdown, ViewModel, ViewCollection, FocusCycler, InputTextView, ColorSelectorView, FormHeaderView, FormRowView, submitHandler, LabelView, LabeledFieldView, createLabeledDropdown, createLabeledInputText, ToolbarView, BalloonPanelView, ContextualBalloon, normalizeColorOptions, getLocalizedColorOptions, clickOutsideHandler, DropdownButtonView } from '@ckeditor/ckeditor5-ui/dist/index.js';
+import { View, addKeyboardHandlingForGrid, ButtonView, createDropdown, MenuBarMenuView, SwitchButtonView, SplitButtonView, addListToDropdown, UIModel, ViewCollection, FocusCycler, InputTextView, ColorSelectorView, FormHeaderView, FormRowView, submitHandler, LabelView, LabeledFieldView, createLabeledDropdown, createLabeledInputText, ToolbarView, BalloonPanelView, ContextualBalloon, normalizeColorOptions, getLocalizedColorOptions, clickOutsideHandler, DropdownButtonView } from '@ckeditor/ckeditor5-ui/dist/index.js';
 import { ClipboardMarkersUtils, ClipboardPipeline } from '@ckeditor/ckeditor5-clipboard/dist/index.js';
-import { DomEventObserver, isColor, isLength, isPercentage, addBorderRules, addPaddingRules, addBackgroundRules, enablePlaceholder, Element } from '@ckeditor/ckeditor5-engine/dist/index.js';
+import { DomEventObserver, isColorStyleValue, isLengthStyleValue, isPercentageStyleValue, addBorderStylesRules, addPaddingStylesRules, addBackgroundStylesRules, enableViewPlaceholder, ModelElement } from '@ckeditor/ckeditor5-engine/dist/index.js';
 import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
 
 /**
@@ -16,11 +16,14 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
  *
  * @param options.modelAttribute The attribute to set.
  * @param options.styleName The style name to convert.
+ * @param options.attributeName The HTML attribute name to convert.
+ * @param options.attributeType The HTML attribute type for value normalization.
  * @param options.viewElement The view element name that should be converted.
  * @param options.defaultValue The default value for the specified `modelAttribute`.
  * @param options.shouldUpcast The function which returns `true` if style should be upcasted from this element.
+ * @internal
  */ function upcastStyleToAttribute(conversion, options) {
-    const { modelAttribute, styleName, viewElement, defaultValue, reduceBoxSides = false, shouldUpcast = ()=>true } = options;
+    const { modelAttribute, styleName, attributeName, attributeType, viewElement, defaultValue, reduceBoxSides = false } = options;
     conversion.for('upcast').attributeToAttribute({
         view: {
             name: viewElement,
@@ -31,7 +34,8 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
         model: {
             key: modelAttribute,
             value: (viewElement, conversionApi, data)=>{
-                if (!shouldUpcast(viewElement)) {
+                // Ignore table elements inside figures and figures without the table class.
+                if (viewElement.name == 'table' && viewElement.parent.name == 'figure' || viewElement.name == 'figure' && !viewElement.hasClass('table')) {
                     return;
                 }
                 const localDefaultValue = getDefaultValueAdjusted(defaultValue, '', data);
@@ -40,9 +44,46 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
                 if (localDefaultValue !== value) {
                     return value;
                 }
+                // Consume the style even if not applied to the element so it won't be processed by other converters.
+                conversionApi.consumable.consume(viewElement, {
+                    styles: styleName
+                });
             }
         }
     });
+    if (attributeName) {
+        conversion.for('upcast').attributeToAttribute({
+            view: {
+                name: viewElement,
+                attributes: {
+                    [attributeName]: /.+/
+                }
+            },
+            model: {
+                key: modelAttribute,
+                value: (viewElement, conversionApi, data)=>{
+                    // Convert attributes of table and table cell elements, ignore figure.
+                    // Do not convert attribute if related style is set as it has a higher priority.
+                    // Do not convert attribute if the element is a table inside a figure with the related style set.
+                    if (viewElement.name == 'figure' || viewElement.hasStyle(styleName) || viewElement.name == 'table' && viewElement.parent.name == 'figure' && viewElement.parent.hasStyle(styleName)) {
+                        return;
+                    }
+                    const localDefaultValue = getDefaultValueAdjusted(defaultValue, '', data);
+                    let value = viewElement.getAttribute(attributeName);
+                    if (value && attributeType == 'length' && !value.endsWith('px')) {
+                        value += 'px';
+                    }
+                    if (localDefaultValue !== value) {
+                        return value;
+                    }
+                    // Consume the attribute even if not applied to the element so it won't be processed by other converters.
+                    conversionApi.consumable.consume(viewElement, {
+                        attributes: attributeName
+                    });
+                }
+            }
+        });
+    }
 }
 /**
  * Conversion helper for upcasting border styles for view elements.
@@ -51,6 +92,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
  * @param defaultBorder.color The default `borderColor` value.
  * @param defaultBorder.style The default `borderStyle` value.
  * @param defaultBorder.width The default `borderWidth` value.
+ * @internal
  */ function upcastBorderStyles(conversion, viewElementName, modelAttributes, defaultBorder) {
     conversion.for('upcast').add((dispatcher)=>dispatcher.on('element:' + viewElementName, (evt, data, conversionApi)=>{
             // If the element was not converted by element-to-element converter,
@@ -124,6 +166,8 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
 }
 /**
  * Conversion helper for downcasting an attribute to a style.
+ *
+ * @internal
  */ function downcastAttributeToStyle(conversion, options) {
     const { modelElement, modelAttribute, styleName } = options;
     conversion.for('downcast').attributeToAttribute({
@@ -141,6 +185,8 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
 }
 /**
  * Conversion helper for downcasting attributes from the model table to a view table (not to `<figure>`).
+ *
+ * @internal
  */ function downcastTableAttribute(conversion, options) {
     const { modelAttribute, styleName } = options;
     conversion.for('downcast').add((dispatcher)=>dispatcher.on(`attribute:${modelAttribute}:table`, (evt, data, conversionApi)=>{
@@ -161,6 +207,8 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
 }
 /**
  * Returns the default value for table or table cell property adjusted for layout tables.
+ *
+ * @internal
  */ function getDefaultValueAdjusted(defaultValue, layoutTableDefault, data) {
     const modelElement = data.modelRange && first(data.modelRange.getItems({
         shallow: true
@@ -201,6 +249,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
 /**
  * A common method to update the numeric value. If a value is the default one, it will be unset.
  *
+ * @internal
  * @param key An attribute key.
  * @param value The new attribute value.
  * @param item A model item on which the attribute will be set.
@@ -215,6 +264,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
 /**
  * A common method to create an empty table cell. It creates a proper model structure as a table cell must have at least one block inside.
  *
+ * @internal
  * @param writer The model writer.
  * @param insertPosition The position at which the table cell should be inserted.
  * @param attributes The element attributes.
@@ -227,6 +277,8 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
 }
 /**
  * Checks if a table cell belongs to the heading column section.
+ *
+ * @internal
  */ function isHeadingColumnCell(tableUtils, tableCell) {
     const table = tableCell.parent.parent;
     const headingColumns = parseInt(table.getAttribute('headingColumns') || '0');
@@ -236,6 +288,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
 /**
  * Enables conversion for an attribute for simple view-model mappings.
  *
+ * @internal
  * @param options.defaultValue The default value for the specified `modelAttribute`.
  */ function enableProperty$1(schema, conversion, options) {
     const { modelAttribute } = options;
@@ -244,6 +297,9 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
             modelAttribute
         ]
     });
+    schema.setAttributeProperties(modelAttribute, {
+        isFormatting: true
+    });
     upcastStyleToAttribute(conversion, {
         viewElement: /^(td|th)$/,
         ...options
@@ -255,6 +311,8 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
 }
 /**
  * Depending on the position of the selection we either return the table under cursor or look for the table higher in the hierarchy.
+ *
+ * @internal
  */ function getSelectionAffectedTable(selection) {
     const selectedElement = selection.getSelectedElement();
     // Is the command triggered from the `tableToolbar`?
@@ -276,6 +334,8 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
  * ```xml
  * <table></table>
  * ```
+ *
+ * @internal
  */ function upcastTableFigure() {
     return (dispatcher)=>{
         dispatcher.on('element:figure', (evt, data, conversionApi)=>{
@@ -323,6 +383,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
  * This conversion helper converts the table element as well as table rows.
  *
  * @returns Conversion helper.
+ * @internal
  */ function upcastTable() {
     return (dispatcher)=>{
         dispatcher.on('element:table', (evt, data, conversionApi)=>{
@@ -373,6 +434,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
  * *Note:* Only the first empty rows are removed because they have no meaning and it solves the issue
  * of an improper table with all empty rows.
  *
+ * @internal
  * @returns Conversion helper.
  */ function skipEmptyTableRow() {
     return (dispatcher)=>{
@@ -388,6 +450,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
 /**
  * A converter that ensures an empty paragraph is inserted in a table cell if no other content was converted.
  *
+ * @internal
  * @returns Conversion helper.
  */ function ensureParagraphInTableCell(elementName) {
     return (dispatcher)=>{
@@ -950,7 +1013,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
         return this._rowIndex;
     }
     /**
-	 * Returns the {@link module:engine/model/position~Position} before the table slot.
+	 * Returns the {@link module:engine/model/position~ModelPosition} before the table slot.
 	 */ getPositionBefore() {
         const model = this._table.root.document.model;
         return model.createPositionAt(this._table.getChild(this.row), this._cellIndex);
@@ -971,6 +1034,8 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
 
 /**
  * Model table element to view table element conversion helper.
+ *
+ * @internal
  */ function downcastTable(tableUtils, options) {
     return (table, { writer })=>{
         const headingRows = table.getAttribute('headingRows') || 0;
@@ -1003,6 +1068,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
 /**
  * Model table row element to view `<tr>` element conversion helper.
  *
+ * @internal
  * @returns Element creator.
  */ function downcastRow() {
     return (tableRow, { writer })=>{
@@ -1015,6 +1081,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
  * This conversion helper will create proper `<th>` elements for table cells that are in the heading section (heading row or column)
  * and `<td>` otherwise.
  *
+ * @internal
  * @param options.asWidget If set to `true`, the downcast conversion will produce a widget.
  * @returns Element creator.
  */ function downcastCell(options = {}) {
@@ -1051,6 +1118,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
  * * For a single paragraph without attributes it returns `<span>` to simulate data table.
  * * For all other cases it returns `<p>` element.
  *
+ * @internal
  * @param options.asWidget If set to `true`, the downcast conversion will produce a widget.
  * @returns Element creator.
  */ function convertParagraphInTableCell(options = {}) {
@@ -1080,14 +1148,17 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
  *
  * * If returned `true` - to a `<span class="ck-table-bogus-paragraph">`
  * * If returned `false` - to a `<p>`
+ *
+ * @internal
  */ function isSingleParagraphWithoutAttributes(modelElement) {
     const tableCell = modelElement.parent;
     const isSingleParagraph = tableCell.childCount == 1;
     return isSingleParagraph && !hasAnyAttribute(modelElement);
 }
 /**
- * Converts a given {@link module:engine/view/element~Element} to a table widget:
- * * Adds a {@link module:engine/view/element~Element#_setCustomProperty custom property} allowing to recognize the table widget element.
+ * Converts a given {@link module:engine/view/element~ViewElement} to a table widget:
+ * * Adds a {@link module:engine/view/element~ViewElement#_setCustomProperty custom property}
+ * allowing to recognize the table widget element.
  * * Calls the {@link module:widget/utils~toWidget} function with the proper element's label creator.
  *
  * @param writer An instance of the view writer.
@@ -1371,6 +1442,8 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
  *      ├───┼───┬───┤   ├───┤                  └───────┴───┘
  *   4  │ n │ o │ p │   │ q │
  *      └───┴───┴───┴───┴───┘
+ *
+ * @internal
  */ function cropTableToDimensions(sourceTable, cropDimensions, writer) {
     const { startRow, startColumn, endRow, endColumn } = cropDimensions;
     // Initialize the cropped table element.
@@ -1437,6 +1510,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
  *
  * will return slot info for cells: "j", "f", "k".
  *
+ * @internal
  * @param table The table to check.
  * @param overlapRow The index of the row to check.
  * @param startRow row to start analysis. Use it when it is known that the cells above that row will not overlap. Default value is 0.
@@ -1458,6 +1532,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
 /**
  * Splits the table cell horizontally.
  *
+ * @internal
  * @returns Created table cell, if any were created.
  */ function splitHorizontally(tableCell, splitRow, writer) {
     const tableRow = tableCell.parent;
@@ -1520,6 +1595,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
  *
  * will return slot info for cells: "b", "e", "i".
  *
+ * @internal
  * @param table The table to check.
  * @param overlapColumn The index of the column to check.
  */ function getHorizontallyOverlappingCells(table, overlapColumn) {
@@ -1537,6 +1613,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
 /**
  * Splits the table cell vertically.
  *
+ * @internal
  * @param columnIndex The table cell column index.
  * @param splitColumn The index of column to split cell on.
  * @returns Created table cell.
@@ -1562,6 +1639,8 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
  *
  * If table cell width (or height) covers a column (or row) that is after a limit column (or row)
  * this method will trim "colspan" (or "rowspan") attribute so the table cell will fit in a defined limits.
+ *
+ * @internal
  */ function trimTableCellIfNeeded(tableCell, cellRow, cellColumn, limitRow, limitColumn, writer) {
     const colspan = parseInt(tableCell.getAttribute('colspan') || '1');
     const rowspan = parseInt(tableCell.getAttribute('rowspan') || '1');
@@ -1728,6 +1807,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
  *      3 |   |   |   |   |
  *        +---+---+---+---+
  *
+ * @internal
  * @returns Adjusted last row index.
  */ function adjustLastRowIndex(table, dimensions) {
     const lastRowMap = Array.from(new TableWalker(table, {
@@ -1763,6 +1843,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
  *               ^
  *              last column, each cell has colspan = 2, so we need to return 3, not 2
  *
+ * @internal
  * @returns Adjusted last column index.
  */ function adjustLastColumnIndex(table, dimensions) {
     const lastColumnMap = Array.from(new TableWalker(table, {
@@ -2271,15 +2352,24 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
  */ /**
  * 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
  */ 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
  */ 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
  */ const COLUMN_WIDTH_PRECISION = 2;
 /**
  * The distance in pixels that the mouse has to move to start resizing the column.
+ *
+ * @internal
  */ const COLUMN_RESIZE_DISTANCE_THRESHOLD = 3;
 
 /**
@@ -2288,6 +2378,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
  *
  * Most notably if an entire table is removed it will not be included in returned set.
  *
+ * @internal
  * @param model The model to collect the affected elements from.
  * @returns A set of table model elements.
  */ function getChangedResizedTables(model) {
@@ -2342,6 +2433,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
 /**
  * Calculates the percentage of the minimum column width given in pixels for a given table.
  *
+ * @internal
  * @param modelTable A table model element.
  * @param editor The editor instance.
  * @returns The minimal column width in percentage.
@@ -2351,6 +2443,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
 /**
  * Calculates the table width in pixels.
  *
+ * @internal
  * @param modelTable A table model element.
  * @param editor The editor instance.
  * @returns The width of the table in pixels.
@@ -2378,6 +2471,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
 /**
  * Returns the computed width (in pixels) of the DOM element without padding and borders.
  *
+ * @internal
  * @param domElement A DOM element.
  * @returns The width of the DOM element in pixels.
  */ function getElementWidthInPixels(domElement) {
@@ -2394,6 +2488,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
  * Returns the column indexes on the left and right edges of a cell. They differ if the cell spans
  * across multiple columns.
  *
+ * @internal
  * @param cell A table cell model element.
  * @param tableUtils The Table Utils plugin instance.
  * @returns An object containing the indexes of the left and right edges of the cell.
@@ -2408,6 +2503,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
 /**
  * Rounds the provided value to a fixed-point number with defined number of digits after the decimal point.
  *
+ * @internal
  * @param value A number to be rounded.
  * @returns The rounded number.
  */ function toPrecision(value) {
@@ -2419,6 +2515,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
  * Clamps the number within the inclusive lower (min) and upper (max) bounds. Returned number is rounded using the
  * {@link ~toPrecision `toPrecision()`} function.
  *
+ * @internal
  * @param number A number to be clamped.
  * @param min A lower bound.
  * @param max An upper bound.
@@ -2435,6 +2532,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
 /**
  * Creates an array with defined length and fills all elements with defined value.
  *
+ * @internal
  * @param length The length of the array.
  * @param value The value to fill the array with.
  * @returns An array with defined length and filled with defined value.
@@ -2444,6 +2542,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
 /**
  * Sums all array values that can be parsed to a float.
  *
+ * @internal
  * @param array An array of numbers.
  * @returns The sum of all array values.
  */ function sumArray(array) {
@@ -2454,12 +2553,13 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
  * changed proportionally so that they all sum back to 100%. If there are columns without specified width, the amount remaining
  * after assigning the known widths will be distributed equally between them.
  *
+ * @internal
  * @param columnWidths An array of column widths.
  * @returns An array of column widths guaranteed to sum up to 100%.
  */ function normalizeColumnWidths(columnWidths) {
     const widths = columnWidths.map((width)=>{
-        if (width === 'auto') {
-            return width;
+        if (width === 'auto' || width === undefined) {
+            return 'auto';
         }
         return parseFloat(width.replace('%', ''));
     });
@@ -2506,6 +2606,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
  *  * left and red padding,
  *  * border width.
  *
+ * @internal
  * @param domCell A DOM cell element.
  * @returns Width in pixels without `px` at the end.
  */ function getDomCellOuterWidth(domCell) {
@@ -2521,6 +2622,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
 /**
  * Updates column elements to match columns widths.
  *
+ * @internal
  * @param columns
  * @param tableColumnGroup
  * @param normalizedWidths
@@ -3334,7 +3436,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
     }
     /**
 	 * Returns all model table cells that the provided model selection's ranges
-	 * {@link module:engine/model/range~Range#start} inside.
+	 * {@link module:engine/model/range~ModelRange#start} inside.
 	 *
 	 * To obtain the cells selected from the outside, use
 	 * {@link #getSelectedTableCells}.
@@ -3351,7 +3453,7 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
     /**
 	 * Returns all model table cells that are either completely selected
 	 * by selection ranges or host selection range
-	 * {@link module:engine/model/range~Range#start start positions} inside them.
+	 * {@link module:engine/model/range~ModelRange#start start positions} inside them.
 	 *
 	 * Combines {@link #getTableCellsContainingSelection} and
 	 * {@link #getSelectedTableCells}.
@@ -4070,6 +4172,8 @@ function getMaxOffset(tableCell, start, currentMaxOffset, which) {
  *   </tbody>
  * </table>
  * ```
+ *
+ * @internal
  */ function injectTableLayoutPostFixer(model) {
     model.document.registerPostFixer((writer)=>tableLayoutPostFixer(writer, model));
 }
@@ -4240,6 +4344,8 @@ function getMaxOffset(tableCell, start, currentMaxOffset, which) {
  *   </tableRow>
  * </table>
  * ```
+ *
+ * @internal
  */ function injectTableCellParagraphPostFixer(model) {
     model.document.registerPostFixer((writer)=>tableCellContentsPostFixer(writer, model));
 }
@@ -4323,6 +4429,8 @@ function getMaxOffset(tableCell, start, currentMaxOffset, which) {
  * Table heading rows and heading columns are represented in the model by a `headingRows` and `headingColumns` attributes.
  *
  * When table headings attribute changes, all the cells/rows are marked to re-render to change between `<td>` and `<th>`.
+ *
+ * @internal
  */ function tableHeadingsRefreshHandler(model, editing) {
     const differ = model.document.differ;
     for (const change of differ.getChanges()){
@@ -4367,6 +4475,8 @@ function getMaxOffset(tableCell, start, currentMaxOffset, which) {
  *
  * When table cell content changes, for example a second `paragraph` element is added, we need to ensure that the first `paragraph` is
  * re-rendered so it changes from `<span>` to `<p>`. The easiest way to do it is to re-render the entire table cell.
+ *
+ * @internal
  */ function tableCellRefreshHandler(model, editing) {
     const differ = model.document.differ;
     // Stores cells to be refreshed, so the table cell will be refreshed once for multiple changes.
@@ -4623,6 +4733,8 @@ function getMaxOffset(tableCell, start, currentMaxOffset, which) {
  * The table size view.
  *
  * It renders a 10x10 grid to choose the inserted table size.
+ *
+ * @internal
  */ class InsertTableView extends View {
     /**
 	 * A collection of table size box items.
@@ -5108,7 +5220,7 @@ function getMaxOffset(tableCell, start, currentMaxOffset, which) {
  * @param itemDefinitions A collection of dropdown items to update with the given option.
  */ function addListOption(option, editor, commands, itemDefinitions) {
     if (option.type === 'button' || option.type === 'switchbutton') {
-        const model = option.model = new ViewModel(option.model);
+        const model = option.model = new UIModel(option.model);
         const { commandName, bindIsOn } = option.model;
         const command = editor.commands.get(commandName);
         commands.push(command);
@@ -5356,7 +5468,7 @@ function getMaxOffset(tableCell, start, currentMaxOffset, which) {
 	 * yes, it's a hack).
 	 *
 	 * When multiple cells are selected in the model and the user starts to type, the
-	 * {@link module:engine/view/document~Document#event:insertText} event carries information provided by the
+	 * {@link module:engine/view/document~ViewDocument#event:insertText} event carries information provided by the
 	 * beforeinput DOM  event, that in turn only knows about this collapsed DOM selection in the last cell.
 	 *
 	 * As a result, the selected cells have no chance to be cleaned up. To fix this, this listener intercepts
@@ -5998,7 +6110,7 @@ function doVerticalSplit(table, splitColumn, limitRows, writer) {
         });
     }
     /**
-	 * Handles {@link module:engine/view/document~Document#event:tab tab} events for the <kbd>Tab</kbd> key executed
+	 * Handles {@link module:engine/view/document~ViewDocument#event:tab tab} events for the <kbd>Tab</kbd> key executed
 	 * when the table widget is selected.
 	 */ _handleTabOnSelectedTable(bubblingEventInfo, domEventData) {
         const editor = this.editor;
@@ -6015,7 +6127,7 @@ function doVerticalSplit(table, splitColumn, limitRows, writer) {
         });
     }
     /**
-	 * Handles {@link module:engine/view/document~Document#event:tab tab} events for the <kbd>Tab</kbd> key executed
+	 * Handles {@link module:engine/view/document~ViewDocument#event:tab tab} events for the <kbd>Tab</kbd> key executed
 	 * inside table cells.
 	 */ _handleTab(bubblingEventInfo, domEventData) {
         const editor = this.editor;
@@ -6074,7 +6186,7 @@ function doVerticalSplit(table, splitColumn, limitRows, writer) {
         });
     }
     /**
-	 * Handles {@link module:engine/view/document~Document#event:keydown keydown} events.
+	 * Handles {@link module:engine/view/document~ViewDocument#event:keydown keydown} events.
 	 */ _onArrowKey(eventInfo, domEventData) {
         const editor = this.editor;
         const keyCode = domEventData.keyCode;
@@ -6244,9 +6356,11 @@ function doVerticalSplit(table, splitColumn, limitRows, writer) {
  * - `'mouseleave'`
  *
  * Note that this observer is disabled by default. To enable this observer, it needs to be added to
- * {@link module:engine/view/view~View} using the {@link module:engine/view/view~View#addObserver} method.
+ * {@link module:engine/view/view~EditingView} using the {@link module:engine/view/view~EditingView#addObserver} method.
  *
  * The observer is registered by the {@link module:table/tableselection~TableSelection} plugin.
+ *
+ * @internal
  */ class MouseEventsObserver extends DomEventObserver {
     domEventType = [
         'mousemove',
@@ -6604,6 +6718,8 @@ function haveSameTableParent(cellA, cellB) {
 
 /**
  * Depending on the position of the selection either return the selected table or the table higher in the hierarchy.
+ *
+ * @internal
  */ function getSelectionAffectedTableWidget(selection) {
     const selectedTable = getSelectedTableWidget(selection);
     if (selectedTable) {
@@ -6613,6 +6729,8 @@ function haveSameTableParent(cellA, cellB) {
 }
 /**
  * Returns a table widget editing view element if one is selected.
+ *
+ * @internal
  */ function getSelectedTableWidget(selection) {
     const viewElement = selection.getSelectedElement();
     if (viewElement && isTableWidget(viewElement)) {
@@ -6622,6 +6740,8 @@ function haveSameTableParent(cellA, cellB) {
 }
 /**
  * Returns a table widget editing view element if one is among the selection's ancestors.
+ *
+ * @internal
  */ function getTableWidgetAncestor(selection) {
     const selectionPosition = selection.getFirstPosition();
     if (!selectionPosition) {
@@ -6974,6 +7094,7 @@ const isEmpty = (val)=>val === '';
  * labels. Used by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}
  * and {@link module:table/tableproperties/ui/tablepropertiesview~TablePropertiesView}.
  *
+ * @internal
  * @param t The "t" function provided by the editor that is used to localize strings.
  */ function getBorderStyleLabels(t) {
     return {
@@ -6992,6 +7113,7 @@ const isEmpty = (val)=>val === '';
  * Returns a localized error string that can be displayed next to color (background, border)
  * fields that have an invalid value.
  *
+ * @internal
  * @param t The "t" function provided by the editor that is used to localize strings.
  */ function getLocalizedColorErrorText(t) {
     return t('The color is invalid. Try "#FF0000" or "rgb(255,0,0)" or "red".');
@@ -7000,6 +7122,7 @@ const isEmpty = (val)=>val === '';
  * Returns a localized error string that can be displayed next to length (padding, border width)
  * fields that have an invalid value.
  *
+ * @internal
  * @param t The "t" function provided by the editor that is used to localize strings.
  */ function getLocalizedLengthErrorText(t) {
     return t('The value is invalid. Try "10px" or "2em" or simply "2".');
@@ -7008,33 +7131,40 @@ const isEmpty = (val)=>val === '';
  * Returns `true` when the passed value is an empty string or a valid CSS color expression.
  * Otherwise, `false` is returned.
  *
- * See {@link module:engine/view/styles/utils~isColor}.
+ * See {@link module:engine/view/styles/utils~isColorStyleValue}.
+ *
+ * @internal
  */ function colorFieldValidator(value) {
     value = value.trim().toLowerCase();
-    return isEmpty(value) || isColor(value);
+    return isEmpty(value) || isColorStyleValue(value);
 }
 /**
  * Returns `true` when the passed value is an empty string, a number without a unit or a valid CSS length expression.
  * Otherwise, `false` is returned.
  *
- * See {@link module:engine/view/styles/utils~isLength}.
- * See {@link module:engine/view/styles/utils~isPercentage}.
+ * See {@link module:engine/view/styles/utils~isLengthStyleValue}.
+ * See {@link module:engine/view/styles/utils~isPercentageStyleValue}.
+ *
+ * @internal
  */ function lengthFieldValidator(value) {
     value = value.trim();
-    return isEmpty(value) || isNumberString(value) || isLength(value) || isPercentage(value);
+    return isEmpty(value) || isNumberString(value) || isLengthStyleValue(value) || isPercentageStyleValue(value);
 }
 /**
  * Returns `true` when the passed value is an empty string, a number without a unit or a valid CSS length expression.
  * Otherwise, `false` is returned.
  *
- * See {@link module:engine/view/styles/utils~isLength}.
+ * See {@link module:engine/view/styles/utils~isLengthStyleValue}.
+ *
+ * @internal
  */ function lineWidthFieldValidator(value) {
     value = value.trim();
-    return isEmpty(value) || isNumberString(value) || isLength(value);
+    return isEmpty(value) || isNumberString(value) || isLengthStyleValue(value);
 }
 /**
  * Generates item definitions for a UI dropdown that allows changing the border style of a table or a table cell.
  *
+ * @internal
  * @param defaultStyle The default border.
  */ function getBorderStyleDefinitions(view, defaultStyle) {
     const itemDefinitions = new Collection();
@@ -7042,7 +7172,7 @@ const isEmpty = (val)=>val === '';
     for(const style in styleLabels){
         const definition = {
             type: 'button',
-            model: new ViewModel({
+            model: new UIModel({
                 _borderStyleValue: style,
                 label: styleLabels[style],
                 role: 'menuitemradio',
@@ -7072,6 +7202,7 @@ const isEmpty = (val)=>val === '';
  * * have some icons,
  * * set a certain UI view property value upon execution.
  *
+ * @internal
  * @param options Configuration options
  * @param options.view The view that has the observable property.
  * @param options.icons Object with button icons.
@@ -7186,6 +7317,8 @@ const isEmpty = (val)=>val === '';
  *   }
  * ];
  * ```
+ *
+ * @internal
  */ const defaultColors = [
     {
         color: 'hsl(0, 0%, 0%)',
@@ -7917,6 +8050,7 @@ const BALLOON_POSITIONS = /* #__PURE__ */ (()=>[
  * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon} instance
  * with respect to the table in the editor content, if one is selected.
  *
+ * @internal
  * @param editor The editor instance.
  * @param target Either "cell" or "table". Determines the target the balloon will be attached to.
  */ function repositionContextualBalloon(editor, target) {
@@ -8010,6 +8144,8 @@ const BALLOON_POSITIONS = /* #__PURE__ */ (()=>[
  * getSingleValue( { top: 'foo', right: 'foo', bottom: 'bar', left: 'foo' } );
  * getSingleValue( { top: 'foo', right: 'foo' } );
  * ```
+ *
+ * @internal
  */ function getSingleValue(objectOrString) {
     if (!objectOrString || !isObject(objectOrString)) {
         return objectOrString;
@@ -8031,6 +8167,7 @@ const BALLOON_POSITIONS = /* #__PURE__ */ (()=>[
  * getSingleValue( 'foo', 'px' ); // 'foo'
  * ```
  *
+ * @internal
  * @param defaultUnit A default unit added to a numeric value.
  */ function addDefaultUnitToNumericValue(value, defaultUnit) {
     const numericValue = parseFloat(value);
@@ -8045,6 +8182,7 @@ const BALLOON_POSITIONS = /* #__PURE__ */ (()=>[
 /**
  * Returns the normalized configuration.
  *
+ * @internal
  * @param config The configuration to normalize.
  * @param options Options used to determine which properties should be added.
  */ function getNormalizedDefaultProperties(config, options = {}) {
@@ -8074,6 +8212,7 @@ const BALLOON_POSITIONS = /* #__PURE__ */ (()=>[
 /**
  * Returns the normalized default table properties.
  *
+ * @internal
  * @param config The configuration to normalize.
  * @param options Options used to determine which properties should be added.
  */ function getNormalizedDefaultTableProperties(config, options) {
@@ -8089,6 +8228,7 @@ const BALLOON_POSITIONS = /* #__PURE__ */ (()=>[
 /**
  * Returns the normalized default cell properties.
  *
+ * @internal
  * @param config The configuration to normalize.
  * @param options Options used to determine which properties should be added.
  */ function getNormalizedDefaultCellProperties(config, options) {
@@ -8626,6 +8766,8 @@ const propertyToCommandMap$1 = {
         enableProperty$1(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));
@@ -8989,7 +9131,7 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
             includePaddingProperty: true,
             isRightToLeftContent: editor.locale.contentLanguageDirection === 'rtl'
         });
-        editor.data.addStyleProcessorRules(addBorderRules);
+        editor.data.addStyleProcessorRules(addBorderStylesRules);
         enableBorderProperties$1(schema, conversion, {
             color: defaultTableCellProperties.borderColor,
             style: defaultTableCellProperties.borderStyle,
@@ -9001,10 +9143,12 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
         enableProperty$1(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$1(schema, conversion, {
             modelAttribute: 'tableCellPadding',
             styleName: 'padding',
@@ -9012,10 +9156,12 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
             defaultValue: defaultTableCellProperties.padding
         });
         editor.commands.add('tableCellPadding', new TableCellPaddingCommand(editor, defaultTableCellProperties.padding));
-        editor.data.addStyleProcessorRules(addBackgroundRules);
+        editor.data.addStyleProcessorRules(addBackgroundStylesRules);
         enableProperty$1(schema, conversion, {
             modelAttribute: 'tableCellBackgroundColor',
             styleName: 'background-color',
+            attributeName: 'bgcolor',
+            attributeType: 'color',
             defaultValue: defaultTableCellProperties.backgroundColor
         });
         editor.commands.add('tableCellBackgroundColor', new TableCellBackgroundColorCommand(editor, defaultTableCellProperties.backgroundColor));
@@ -9041,6 +9187,11 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
     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, {
@@ -9069,6 +9220,9 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
             'tableCellHorizontalAlignment'
         ]
     });
+    schema.setAttributeProperties('tableCellHorizontalAlignment', {
+        isFormatting: true
+    });
     conversion.for('downcast').attributeToAttribute({
         model: {
             name: 'tableCell',
@@ -9094,7 +9248,13 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
             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'
+                });
             }
         }
     })// Support for the `align` attribute as the backward compatibility while pasting from other sources.
@@ -9110,7 +9270,13 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
             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'
+                });
             }
         }
     });
@@ -9125,6 +9291,9 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
             'tableCellVerticalAlignment'
         ]
     });
+    schema.setAttributeProperties('tableCellVerticalAlignment', {
+        isFormatting: true
+    });
     conversion.for('downcast').attributeToAttribute({
         model: {
             name: 'tableCell',
@@ -9150,7 +9319,13 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
             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'
+                });
             }
         }
     })// Support for the `align` attribute as the backward compatibility while pasting from other sources.
@@ -9166,7 +9341,13 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
             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'
+                });
             }
         }
     });
@@ -9358,7 +9539,7 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
  * @param label The localized label for the dropdown item.
  * @returns The dropdown item definition.
  */ function createTableTypeDropdownItem(tableTypeCommand, type, label) {
-    const model = new ViewModel({
+    const model = new UIModel({
         label,
         role: 'menuitemradio',
         withText: true,
@@ -9489,6 +9670,8 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
 /**
  * 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
  */ function upcastColgroupElement(tableUtilsPlugin) {
     return (dispatcher)=>dispatcher.on('element:colgroup', (evt, data, conversionApi)=>{
             const modelTable = data.modelCursor.findAncestor('table');
@@ -9512,6 +9695,8 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
 }
 /**
  * Returns downcast helper for adding `ck-table-resized` class if there is a `<tableColumnGroup>` element inside the table.
+ *
+ * @internal
  */ function downcastTableResizedClass() {
     return (dispatcher)=>dispatcher.on('insert:table', (evt, data, conversionApi)=>{
             const viewWriter = conversionApi.writer;
@@ -9528,6 +9713,19 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
             priority: 'low'
         });
 }
+/**
+ * Returns a upcast helper that removes the `ck-table-resized` class from the table element.
+ *
+ * @internal
+ */ function upcastTableResizedClass() {
+    return (dispatcher)=>{
+        dispatcher.on('element:table', (evt, data, conversionApi)=>{
+            conversionApi.consumable.consume(data.viewItem, {
+                classes: 'ck-table-resized'
+            });
+        });
+    };
+}
 
 const toPx = /* #__PURE__ */ toUnit('px');
 /**
@@ -9644,16 +9842,17 @@ const toPx = /* #__PURE__ */ toUnit('px');
     /**
 	 * 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',
@@ -9661,6 +9860,9 @@ const toPx = /* #__PURE__ */ toUnit('px');
             ],
             isLimit: true
         });
+        schema.setAttributeProperties('columnWidth', {
+            isFormatting: true
+        });
     }
     /**
 	 * Registers table column resize post-fixer.
@@ -9757,7 +9959,6 @@ const toPx = /* #__PURE__ */ toUnit('px');
                 }
             },
             model: {
-                name: 'table',
                 key: 'tableWidth',
                 value: (viewElement)=>{
                     const parent = viewElement.parent;
@@ -9790,6 +9991,7 @@ const toPx = /* #__PURE__ */ toUnit('px');
             view: 'col'
         });
         conversion.for('downcast').add(downcastTableResizedClass());
+        conversion.for('upcast').add(upcastTableResizedClass());
         conversion.for('upcast').add(upcastColgroupElement(this._tableUtilsPlugin));
         conversion.for('upcast').attributeToAttribute({
             view: {
@@ -11002,7 +11204,7 @@ const FLOAT_VALUES_REG_EXP = /^(left|none|right)$/;
         const defaultTableProperties = getNormalizedDefaultTableProperties(editor.config.get('table.tableProperties.defaultProperties'), {
             includeAlignmentProperty: true
         });
-        editor.data.addStyleProcessorRules(addBorderRules);
+        editor.data.addStyleProcessorRules(addBorderStylesRules);
         enableBorderProperties(schema, conversion, {
             color: defaultTableProperties.borderColor,
             style: defaultTableProperties.borderStyle,
@@ -11016,19 +11218,25 @@ const FLOAT_VALUES_REG_EXP = /^(left|none|right)$/;
         enableTableToFigureProperty(schema, conversion, {
             modelAttribute: 'tableWidth',
             styleName: 'width',
+            attributeName: 'width',
+            attributeType: 'length',
             defaultValue: defaultTableProperties.width
         });
         editor.commands.add('tableWidth', new TableWidthCommand(editor, defaultTableProperties.width));
         enableTableToFigureProperty(schema, conversion, {
             modelAttribute: 'tableHeight',
             styleName: 'height',
+            attributeName: 'height',
+            attributeType: 'length',
             defaultValue: defaultTableProperties.height
         });
         editor.commands.add('tableHeight', new TableHeightCommand(editor, defaultTableProperties.height));
-        editor.data.addStyleProcessorRules(addBackgroundRules);
+        editor.data.addStyleProcessorRules(addBackgroundStylesRules);
         enableProperty(schema, conversion, {
             modelAttribute: 'tableBackgroundColor',
             styleName: 'background-color',
+            attributeName: 'bgcolor',
+            attributeType: 'color',
             defaultValue: defaultTableProperties.backgroundColor
         });
         editor.commands.add('tableBackgroundColor', new TableBackgroundColorCommand(editor, defaultTableProperties.backgroundColor));
@@ -11050,6 +11258,11 @@ const FLOAT_VALUES_REG_EXP = /^(left|none|right)$/;
     schema.extend('table', {
         allowAttributes: Object.values(modelAttributes)
     });
+    for (const modelAttribute of Object.values(modelAttributes)){
+        schema.setAttributeProperties(modelAttribute, {
+            isFormatting: true
+        });
+    }
     upcastBorderStyles(conversion, 'table', modelAttributes, defaultBorder);
     downcastTableAttribute(conversion, {
         modelAttribute: modelAttributes.color,
@@ -11074,6 +11287,9 @@ const FLOAT_VALUES_REG_EXP = /^(left|none|right)$/;
             'tableAlignment'
         ]
     });
+    schema.setAttributeProperties('tableAlignment', {
+        isFormatting: true
+    });
     conversion.for('downcast').attributeToAttribute({
         model: {
             name: 'table',
@@ -11124,13 +11340,23 @@ const FLOAT_VALUES_REG_EXP = /^(left|none|right)$/;
         model: {
             key: 'tableAlignment',
             value: (viewElement, conversionApi, data)=>{
+                // Ignore other figure elements.
+                if (viewElement.name == 'figure' && !viewElement.hasClass('table')) {
+                    return;
+                }
                 const localDefaultValue = getDefaultValueAdjusted(defaultValue, '', data);
                 let align = viewElement.getStyle('float');
                 // CSS: `float:none` => Model: `alignment:center`.
                 if (align === 'none') {
                     align = 'center';
                 }
-                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: 'float'
+                });
             }
         }
     })// Support for the `margin-left:auto; margin-right:auto;` CSS definition for the table alignment.
@@ -11145,25 +11371,44 @@ const FLOAT_VALUES_REG_EXP = /^(left|none|right)$/;
         model: {
             key: 'tableAlignment',
             value: (viewElement, conversionApi, data)=>{
+                // Ignore other figure elements.
+                if (viewElement.name == 'figure' && !viewElement.hasClass('table')) {
+                    return;
+                }
                 const localDefaultValue = getDefaultValueAdjusted(defaultValue, '', data);
                 const align = 'center';
-                return align === localDefaultValue ? null : align;
+                if (align !== localDefaultValue) {
+                    return align;
+                }
+                // Consume the styles even if not applied to the element so it won't be processed by other converters.
+                conversionApi.consumable.consume(viewElement, {
+                    styles: [
+                        'margin-left',
+                        'margin-right'
+                    ]
+                });
             }
         }
     })// Support for the `align` attribute as the backward compatibility while pasting from other sources.
     .attributeToAttribute({
         view: {
+            name: 'table',
             attributes: {
                 align: ALIGN_VALUES_REG_EXP
             }
         },
         model: {
-            name: 'table',
             key: 'tableAlignment',
             value: (viewElement, conversionApi, data)=>{
                 const localDefaultValue = getDefaultValueAdjusted(defaultValue, '', data);
                 const align = viewElement.getAttribute('align');
-                return align === localDefaultValue ? null : align;
+                if (align !== localDefaultValue) {
+                    return align;
+                }
+                // Consume the attribute even if not applied to the element so it won't be processed by other converters.
+                conversionApi.consumable.consume(viewElement, {
+                    attributes: 'align'
+                });
             }
         }
     });
@@ -11179,6 +11424,9 @@ const FLOAT_VALUES_REG_EXP = /^(left|none|right)$/;
             modelAttribute
         ]
     });
+    schema.setAttributeProperties(modelAttribute, {
+        isFormatting: true
+    });
     upcastStyleToAttribute(conversion, {
         viewElement: 'table',
         ...options
@@ -11194,9 +11442,11 @@ const FLOAT_VALUES_REG_EXP = /^(left|none|right)$/;
             modelAttribute
         ]
     });
+    schema.setAttributeProperties(modelAttribute, {
+        isFormatting: true
+    });
     upcastStyleToAttribute(conversion, {
         viewElement: /^(table|figure)$/,
-        shouldUpcast: (element)=>!(element.name == 'table' && element.parent.name == 'figure'),
         ...options
     });
     downcastAttributeToStyle(conversion, {
@@ -12075,6 +12325,8 @@ const propertyToCommandMap = {
  *
  * * If there are many caption model element, they are merged into one model.
  * * A final, merged caption model is placed at the end of the table.
+ *
+ * @internal
  */ function injectTableCaptionPostFixer(model) {
     model.document.registerPostFixer((writer)=>tableCaptionPostFixer(writer, model));
 }
@@ -12116,6 +12368,7 @@ const propertyToCommandMap = {
  * Checks if the provided model element is a `table`.
  *
  * @param modelElement Element to check if it is a table.
+ * @internal
  */ function isTable(modelElement) {
     return !!modelElement && modelElement.is('element', 'table');
 }
@@ -12123,6 +12376,7 @@ const propertyToCommandMap = {
  * Returns the caption model element from a given table element. Returns `null` if no caption is found.
  *
  * @param tableModelElement Table element in which we will try to find a caption element.
+ * @internal
  */ function getCaptionFromTableModelElement(tableModelElement) {
     for (const node of tableModelElement.getChildren()){
         if (node.is('element', 'caption')) {
@@ -12135,6 +12389,7 @@ const propertyToCommandMap = {
  * Returns the caption model element for a model selection. Returns `null` if the selection has no caption element ancestor.
  *
  * @param selection The selection checked for caption presence.
+ * @internal
  */ function getCaptionFromModelSelection(selection) {
     const tableElement = getSelectionAffectedTable(selection);
     if (!tableElement) {
@@ -12150,6 +12405,7 @@ const propertyToCommandMap = {
  *  - A `<caption>` inside a <table>.
  *
  * @returns Returns the object accepted by {@link module:engine/view/matcher~Matcher} or `null` if the element cannot be matched.
+ * @internal
  */ function matchTableCaptionViewElement(element) {
     const parent = element.parent;
     if (element.name == 'figcaption' && parent && parent.is('element', 'figure') && parent.hasClass('table')) {
@@ -12323,7 +12579,7 @@ const propertyToCommandMap = {
                 const figcaptionElement = writer.createEditableElement('figcaption');
                 writer.setCustomProperty('tableCaption', true, figcaptionElement);
                 figcaptionElement.placeholder = t('Enter table caption');
-                enablePlaceholder({
+                enableViewPlaceholder({
                     view,
                     element: figcaptionElement,
                     keepOnFocus: true
@@ -12334,7 +12590,7 @@ const propertyToCommandMap = {
         injectTableCaptionPostFixer(editor.model);
     }
     /**
-	 * Returns the saved {@link module:engine/model/element~Element#toJSON JSONified} caption
+	 * Returns the saved {@link module:engine/model/element~ModelElement#toJSON JSONified} caption
 	 * of a table model element.
 	 *
 	 * See {@link #_saveCaption}.
@@ -12344,10 +12600,10 @@ const propertyToCommandMap = {
 	 * @returns The model caption element or `null` if there is none.
 	 */ _getSavedCaption(tableModelElement) {
         const jsonObject = this._savedCaptionsMap.get(tableModelElement);
-        return jsonObject ? Element.fromJSON(jsonObject) : null;
+        return jsonObject ? ModelElement.fromJSON(jsonObject) : null;
     }
     /**
-	 * Saves a {@link module:engine/model/element~Element#toJSON JSONified} caption for
+	 * Saves a {@link module:engine/model/element~ModelElement#toJSON JSONified} caption for
 	 * a table element to allow restoring it in the future.
 	 *
 	 * A caption is saved every time it gets hidden. The
@@ -12443,5 +12699,5 @@ const propertyToCommandMap = {
     }
 }
 
-export { PlainTableOutput, Table, TableCaption, TableCaptionEditing, TableCaptionUI, TableCellProperties, TableCellPropertiesEditing, TableCellPropertiesUI, TableCellWidthEditing, TableClipboard, TableColumnResize, TableColumnResizeEditing, TableEditing, TableKeyboard, TableLayout, TableLayoutEditing, TableMouse, TableProperties, TablePropertiesEditing, TablePropertiesUI, TableSelection, TableToolbar, TableUI, TableUtils };
+export { InsertColumnCommand, InsertRowCommand, InsertTableCommand, InsertTableLayoutCommand, MergeCellCommand, MergeCellsCommand, PlainTableOutput, RemoveColumnCommand, RemoveRowCommand, SelectColumnCommand, SelectRowCommand, SetHeaderColumnCommand, SetHeaderRowCommand, SplitCellCommand, Table, TableAlignmentCommand, TableBackgroundColorCommand, TableBorderColorCommand, TableBorderStyleCommand, TableBorderWidthCommand, TableCaption, TableCaptionEditing, TableCaptionUI, TableCellBackgroundColorCommand, TableCellBorderColorCommand, TableCellBorderStyleCommand, TableCellBorderWidthCommand, TableCellHeightCommand, TableCellHorizontalAlignmentCommand, TableCellPaddingCommand, TableCellProperties, TableCellPropertiesEditing, TableCellPropertiesUI, TableCellPropertiesView, TableCellPropertyCommand, TableCellVerticalAlignmentCommand, TableCellWidthCommand, TableCellWidthEditing, TableClipboard, TableColumnResize, TableColumnResizeEditing, TableEditing, TableHeightCommand, TableKeyboard, TableLayout, TableLayoutEditing, TableLayoutUI, TableMouse, TableProperties, TablePropertiesEditing, TablePropertiesUI, TablePropertiesView, TablePropertyCommand, TableSelection, TableToolbar, TableTypeCommand, TableUI, TableUtils, TableWalker, TableWidthCommand, TableWidthsCommand, ToggleTableCaptionCommand, InsertTableView as _InsertTableView, COLUMN_MIN_WIDTH_AS_PERCENTAGE as _TABLE_COLUMN_MIN_WIDTH_AS_PERCENTAGE, COLUMN_MIN_WIDTH_IN_PIXELS as _TABLE_COLUMN_MIN_WIDTH_IN_PIXELS, COLUMN_RESIZE_DISTANCE_THRESHOLD as _TABLE_COLUMN_RESIZE_DISTANCE_THRESHOLD, COLUMN_WIDTH_PRECISION as _TABLE_COLUMN_WIDTH_PRECISION, defaultColors as _TABLE_DEFAULT_COLORS, ColorInputView as _TableColorInputView, MouseEventsObserver as _TableMouseEventsObserver, addDefaultUnitToNumericValue as _addDefaultUnitToNumericValue, adjustLastColumnIndex as _adjustLastTableColumnIndex, adjustLastRowIndex as _adjustLastTableRowIndex, clamp as _clamp, colorFieldValidator as _colorTableFieldValidator, convertParagraphInTableCell as _convertParagraphInTableCell, createEmptyTableCell as _createEmptyTableCell, createFilledArray as _createFilledArray, cropTableToDimensions as _cropTableToDimensions, downcastTable as _downcastTable, downcastTableAttribute as _downcastTableAttribute, downcastAttributeToStyle as _downcastTableAttributeToStyle, downcastCell as _downcastTableCell, downcastTableResizedClass as _downcastTableResizedClass, downcastRow as _downcastTableRow, enableProperty$1 as _enableTableCellProperty, ensureParagraphInTableCell as _ensureParagraphInTableCell, fillToolbar as _fillTableOrCellToolbar, getBalloonCellPositionData as _getBalloonTableCellPositionData, getBalloonTablePositionData as _getBalloonTablePositionData, getBorderStyleLabels as _getBorderTableStyleLabels, getChangedResizedTables as _getChangedResizedTables, getDefaultValueAdjusted as _getDefaultTableValueAdjusted, getDomCellOuterWidth as _getDomTableCellOuterWidth, getElementWidthInPixels as _getElementWidthInPixels, getHorizontallyOverlappingCells as _getHorizontallyOverlappingTableCells, getLabeledColorInputCreator as _getLabeledTableColorInputCreator, getLocalizedColorErrorText as _getLocalizedTableColorErrorText, getLocalizedLengthErrorText as _getLocalizedTableLengthErrorText, getNormalizedDefaultProperties as _getNormalizedDefaultTableBaseProperties, getNormalizedDefaultCellProperties as _getNormalizedDefaultTableCellProperties, getNormalizedDefaultTableProperties as _getNormalizedDefaultTableProperties, getSelectedTableWidget as _getSelectedTableWidget, getSelectionAffectedTable as _getSelectionAffectedTable, getSelectionAffectedTableWidget as _getSelectionAffectedTableWidget, getSingleValue as _getTableBorderBoxSingleValue, getCaptionFromTableModelElement as _getTableCaptionFromModelElement, getCaptionFromModelSelection as _getTableCaptionFromModelSelection, getColumnEdgesIndexes as _getTableColumnEdgesIndexes, getTableColumnElements as _getTableColumnElements, getColumnGroupElement as _getTableColumnGroupElement, getColumnMinWidthAsPercentage as _getTableColumnMinWidthAsPercentage, getTableColumnsWidths as _getTableColumnsWidths, getBorderStyleDefinitions as _getTableOrCellBorderStyleDefinitions, getTableWidgetAncestor as _getTableWidgetAncestor, getTableWidthInPixels as _getTableWidthInPixels, getVerticallyOverlappingCells as _getVerticallyOverlappingTableCells, injectTableCaptionPostFixer as _injectTableCaptionPostFixer, injectTableCellParagraphPostFixer as _injectTableCellParagraphPostFixer, injectTableLayoutPostFixer as _injectTableLayoutPostFixer, isSingleParagraphWithoutAttributes as _isSingleTableParagraphWithoutAttributes, isHeadingColumnCell as _isTableHeadingColumnCell, isTable as _isTableModelElement, lengthFieldValidator as _lengthTableFieldValidator, lineWidthFieldValidator as _lineWidthTableFieldValidator, matchTableCaptionViewElement as _matchTableCaptionViewElement, normalizeColumnWidths as _normalizeTableColumnWidths, removeEmptyColumns as _removeEmptyTableColumns, removeEmptyRows as _removeEmptyTableRows, removeEmptyRowsColumns as _removeEmptyTableRowsColumns, repositionContextualBalloon as _repositionTableContextualBalloon, skipEmptyTableRow as _skipEmptyTableRow, splitHorizontally as _splitTableCellHorizontally, splitVertically as _splitTableCellVertically, sumArray as _sumArray, tableCellRefreshHandler as _tableCellRefreshHandler, tableHeadingsRefreshHandler as _tableHeadingsRefreshHandler, toPrecision as _toPrecision, translateColSpanAttribute as _translateTableColspanAttribute, trimTableCellIfNeeded as _trimTableCellIfNeeded, upcastStyleToAttribute as _upcastNormalizedTableStyleToAttribute, upcastTable as _upcastTable, upcastBorderStyles as _upcastTableBorderStyles, upcastColgroupElement as _upcastTableColgroupElement, upcastTableFigure as _upcastTableFigure, updateColumnElements as _updateTableColumnElements, updateNumericAttribute as _updateTableNumericAttribute };
 //# sourceMappingURL=index.js.map