@ckeditor/ckeditor5-table 45.0.0-alpha.0 → 45.0.0-alpha.10

package/dist/index.js

@@ -4,7 +4,7 @@
  */
 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 } from '@ckeditor/ckeditor5-utils/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 { ClipboardMarkersUtils, ClipboardPipeline } from '@ckeditor/ckeditor5-clipboard/dist/index.js';
@@ -12,11 +12,6 @@ import { DomEventObserver, isColor, isLength, isPercentage, addBorderRules, addP
 import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
 
 /**
- * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */ /**
- * @module table/converters/tableproperties
- */ /**
  * Conversion helper for upcasting attributes using normalized styles.
  *
  * @param options.modelAttribute The attribute to set.
@@ -35,13 +30,14 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
         },
         model: {
             key: modelAttribute,
-            value: (viewElement)=>{
+            value: (viewElement, conversionApi, data)=>{
                 if (!shouldUpcast(viewElement)) {
                     return;
                 }
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, '', data);
                 const normalized = viewElement.getNormalizedStyle(styleName);
                 const value = reduceBoxSides ? reduceBoxSidesValue(normalized) : normalized;
-                if (defaultValue !== value) {
+                if (localDefaultValue !== value) {
                     return value;
                 }
             }
@@ -93,6 +89,17 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
                     shallow: true
                 })
             ].pop();
+            const tableElement = modelElement.findAncestor('table', {
+                includeSelf: true
+            });
+            let localDefaultBorder = defaultBorder;
+            if (tableElement && tableElement.getAttribute('tableType') == 'layout') {
+                localDefaultBorder = {
+                    style: 'none',
+                    color: '',
+                    width: ''
+                };
+            }
             conversionApi.consumable.consume(data.viewItem, matcherPattern);
             const normalizedBorder = {
                 style: data.viewItem.getNormalizedStyle('border-style'),
@@ -104,13 +111,13 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
                 color: reduceBoxSidesValue(normalizedBorder.color),
                 width: reduceBoxSidesValue(normalizedBorder.width)
             };
-            if (reducedBorder.style !== defaultBorder.style) {
+            if (reducedBorder.style !== localDefaultBorder.style) {
                 conversionApi.writer.setAttribute(modelAttributes.style, reducedBorder.style, modelElement);
             }
-            if (reducedBorder.color !== defaultBorder.color) {
+            if (reducedBorder.color !== localDefaultBorder.color) {
                 conversionApi.writer.setAttribute(modelAttributes.color, reducedBorder.color, modelElement);
             }
-            if (reducedBorder.width !== defaultBorder.width) {
+            if (reducedBorder.width !== localDefaultBorder.width) {
                 conversionApi.writer.setAttribute(modelAttributes.width, reducedBorder.width, modelElement);
             }
         }));
@@ -152,6 +159,20 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
             }
         }));
 }
+/**
+ * Returns the default value for table or table cell property adjusted for layout tables.
+ */ function getDefaultValueAdjusted(defaultValue, layoutTableDefault, data) {
+    const modelElement = data.modelRange && first(data.modelRange.getItems({
+        shallow: true
+    }));
+    const tableElement = modelElement && modelElement.is('element') && modelElement.findAncestor('table', {
+        includeSelf: true
+    });
+    if (tableElement && tableElement.getAttribute('tableType') === 'layout') {
+        return layoutTableDefault;
+    }
+    return defaultValue;
+}
 /**
  * Reduces the full top, right, bottom, left object to a single string if all sides are equal.
  * Returns original style otherwise.
@@ -7073,7 +7094,12 @@ const isEmpty = (val)=>val === '';
             return buttonValue === valueToCompare;
         });
         button.on('execute', ()=>{
-            view[propertyName] = buttonValue;
+            // Allow toggling alignment if there is no default value specified (especially for layout tables).
+            if (!defaultValue && buttonValue && view[propertyName] === buttonValue) {
+                view[propertyName] = undefined;
+            } else {
+                view[propertyName] = buttonValue;
+            }
         });
         toolbar.items.add(button);
     }
@@ -8088,13 +8114,22 @@ const propertyToCommandMap$1 = {
  */ class TableCellPropertiesUI extends Plugin {
     /**
 	 * The default table cell properties.
-	 */ _defaultTableCellProperties;
+	 */ _defaultContentTableCellProperties;
+    /**
+	 * The default layout table cell properties.
+	 */ _defaultLayoutTableCellProperties;
     /**
 	 * The contextual balloon plugin instance.
 	 */ _balloon;
     /**
 	 * The cell properties form view displayed inside the balloon.
 	 */ view;
+    /**
+	 * The cell properties form view displayed inside the balloon (content table).
+	 */ _viewWithContentTableDefaults;
+    /**
+	 * The cell properties form view displayed inside the balloon (layout table).
+	 */ _viewWithLayoutTableDefaults;
     /**
 	 * The batch used to undo all changes made by the form (which are live, as the user types)
 	 * when "Cancel" was pressed. Each time the view is shown, a new batch is created.
@@ -8134,12 +8169,17 @@ const propertyToCommandMap$1 = {
 	 */ init() {
         const editor = this.editor;
         const t = editor.t;
-        this._defaultTableCellProperties = getNormalizedDefaultCellProperties(editor.config.get('table.tableCellProperties.defaultProperties'), {
+        this._defaultContentTableCellProperties = getNormalizedDefaultCellProperties(editor.config.get('table.tableCellProperties.defaultProperties'), {
             includeVerticalAlignmentProperty: true,
             includeHorizontalAlignmentProperty: true,
             includePaddingProperty: true,
             isRightToLeftContent: editor.locale.contentLanguageDirection === 'rtl'
         });
+        this._defaultLayoutTableCellProperties = getNormalizedDefaultProperties(undefined, {
+            includeVerticalAlignmentProperty: true,
+            includeHorizontalAlignmentProperty: true,
+            isRightToLeftContent: editor.locale.contentLanguageDirection === 'rtl'
+        });
         this._balloon = editor.plugins.get(ContextualBalloon);
         this.view = null;
         this._isReady = false;
@@ -8170,7 +8210,7 @@ const propertyToCommandMap$1 = {
 	 * Creates the {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView} instance.
 	 *
 	 * @returns The cell properties form view instance.
-	 */ _createPropertiesView() {
+	 */ _createPropertiesView(defaultTableCellProperties) {
         const editor = this.editor;
         const config = editor.config.get('table.tableCellProperties');
         const borderColorsConfig = normalizeColorOptions(config.borderColors);
@@ -8181,7 +8221,7 @@ const propertyToCommandMap$1 = {
         const view = new TableCellPropertiesView(editor.locale, {
             borderColors: localizedBorderColors,
             backgroundColors: localizedBackgroundColors,
-            defaultTableCellProperties: this._defaultTableCellProperties,
+            defaultTableCellProperties,
             colorPickerConfig: hasColorPicker ? config.colorPicker || {} : false
         });
         const t = editor.t;
@@ -8270,7 +8310,8 @@ const propertyToCommandMap$1 = {
         const commands = this.editor.commands;
         const borderStyleCommand = commands.get('tableCellBorderStyle');
         Object.entries(propertyToCommandMap$1).map(([property, commandName])=>{
-            const defaultValue = this._defaultTableCellProperties[property] || '';
+            const propertyKey = property;
+            const defaultValue = this.view === this._viewWithContentTableDefaults ? this._defaultContentTableCellProperties[propertyKey] || '' : this._defaultLayoutTableCellProperties[propertyKey] || '';
             return [
                 property,
                 commands.get(commandName).value || defaultValue
@@ -8292,9 +8333,15 @@ const propertyToCommandMap$1 = {
 	 * for all of them.
 	 */ _showView() {
         const editor = this.editor;
-        if (!this.view) {
-            this.view = this._createPropertiesView();
-        }
+        const viewTable = getSelectionAffectedTableWidget(editor.editing.view.document.selection);
+        const modelTable = viewTable && editor.editing.mapper.toModelElement(viewTable);
+        const useDefaults = !modelTable || modelTable.getAttribute('tableType') !== 'layout';
+        if (useDefaults && !this._viewWithContentTableDefaults) {
+            this._viewWithContentTableDefaults = this._createPropertiesView(this._defaultContentTableCellProperties);
+        } else if (!useDefaults && !this._viewWithLayoutTableDefaults) {
+            this._viewWithLayoutTableDefaults = this._createPropertiesView(this._defaultLayoutTableCellProperties);
+        }
+        this.view = useDefaults ? this._viewWithContentTableDefaults : this._viewWithLayoutTableDefaults;
         this.listenTo(editor.ui, 'update', ()=>{
             this._updateView();
         });
@@ -8398,7 +8445,15 @@ const propertyToCommandMap$1 = {
 	 */ attributeName;
     /**
 	 * The default value for the attribute.
+	 *
+	 * @readonly
 	 */ _defaultValue;
+    /**
+	 * The default value for the attribute for the content table.
+	 */ _defaultContentTableValue;
+    /**
+	 * The default value for the attribute for the layout table.
+	 */ _defaultLayoutTableValue;
     /**
 	 * Creates a new `TableCellPropertyCommand` instance.
 	 *
@@ -8408,14 +8463,31 @@ const propertyToCommandMap$1 = {
 	 */ constructor(editor, attributeName, defaultValue){
         super(editor);
         this.attributeName = attributeName;
-        this._defaultValue = defaultValue;
+        this._defaultContentTableValue = defaultValue;
+        // Hardcoded defaults for layout table.
+        switch(attributeName){
+            case 'tableCellBorderStyle':
+                this._defaultLayoutTableValue = 'none';
+                break;
+            case 'tableCellHorizontalAlignment':
+                this._defaultLayoutTableValue = 'left';
+                break;
+            case 'tableCellVerticalAlignment':
+                this._defaultLayoutTableValue = 'middle';
+                break;
+            default:
+                this._defaultLayoutTableValue = undefined;
+        }
     }
     /**
 	 * @inheritDoc
 	 */ refresh() {
         const editor = this.editor;
+        const selection = editor.model.document.selection;
         const tableUtils = this.editor.plugins.get('TableUtils');
-        const selectedTableCells = tableUtils.getSelectionAffectedTableCells(editor.model.document.selection);
+        const selectedTableCells = tableUtils.getSelectionAffectedTableCells(selection);
+        const table = getSelectionAffectedTable(selection);
+        this._defaultValue = !table || table.getAttribute('tableType') !== 'layout' ? this._defaultContentTableValue : this._defaultLayoutTableValue;
         this.isEnabled = !!selectedTableCells.length;
         this.value = this._getSingleValue(selectedTableCells);
     }
@@ -9010,9 +9082,10 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
         },
         model: {
             key: 'tableCellHorizontalAlignment',
-            value: (viewElement)=>{
+            value: (viewElement, conversionApi, data)=>{
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, 'left', data);
                 const align = viewElement.getStyle('text-align');
-                return align === defaultValue ? null : align;
+                return align === localDefaultValue ? null : align;
             }
         }
     })// Support for the `align` attribute as the backward compatibility while pasting from other sources.
@@ -9025,9 +9098,10 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
         },
         model: {
             key: 'tableCellHorizontalAlignment',
-            value: (viewElement)=>{
+            value: (viewElement, conversionApi, data)=>{
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, 'left', data);
                 const align = viewElement.getAttribute('align');
-                return align === defaultValue ? null : align;
+                return align === localDefaultValue ? null : align;
             }
         }
     });
@@ -9064,9 +9138,10 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
         },
         model: {
             key: 'tableCellVerticalAlignment',
-            value: (viewElement)=>{
+            value: (viewElement, conversionApi, data)=>{
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, 'middle', data);
                 const align = viewElement.getStyle('vertical-align');
-                return align === defaultValue ? null : align;
+                return align === localDefaultValue ? null : align;
             }
         }
     })// Support for the `align` attribute as the backward compatibility while pasting from other sources.
@@ -9079,9 +9154,10 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
         },
         model: {
             key: 'tableCellVerticalAlignment',
-            value: (viewElement)=>{
+            value: (viewElement, conversionApi, data)=>{
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, 'middle', data);
                 const valign = viewElement.getAttribute('valign');
-                return valign === defaultValue ? null : valign;
+                return valign === localDefaultValue ? null : valign;
             }
         }
     });
@@ -9444,6 +9520,7 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
         });
 }
 
+const toPx = /* #__PURE__ */ toUnit('px');
 /**
  * The table column resize editing plugin.
  */ class TableColumnResizeEditing extends Plugin {
@@ -9747,12 +9824,88 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
 	 */ _registerResizingListeners() {
         const editingView = this.editor.editing.view;
         editingView.addObserver(MouseEventsObserver);
+        editingView.document.on('mouseover', this._onMouseOverHandler.bind(this), {
+            priority: 'high'
+        });
         editingView.document.on('mousedown', this._onMouseDownHandler.bind(this), {
             priority: 'high'
         });
+        editingView.document.on('mouseout', this._onMouseOutHandler.bind(this), {
+            priority: 'high'
+        });
         this._domEmitter.listenTo(global.window.document, 'mousemove', throttle(this._onMouseMoveHandler.bind(this), 50));
         this._domEmitter.listenTo(global.window.document, 'mouseup', this._onMouseUpHandler.bind(this));
     }
+    /**
+	 * Calculate and set `top` and `bottom` styles to the column resizer element to fit the height of the table.
+	 *
+	 * @param viewResizer The column resizer element.
+	 */ _recalculateResizerElement(viewResizer) {
+        const editor = this.editor;
+        const domConverter = editor.editing.view.domConverter;
+        // Get DOM target figure ancestor element.
+        const domTable = domConverter.mapViewToDom(viewResizer.findAncestor('table'));
+        // Get DOM table cell element.
+        const domCell = domConverter.mapViewToDom(viewResizer.findAncestor((item)=>[
+                'td',
+                'th'
+            ].includes(item.name)));
+        const rectTable = new Rect(domTable);
+        const rectCell = new Rect(domCell);
+        // Calculate the top, and bottom positions of the column resizer element.
+        const targetTopPosition = toPx(Number((rectTable.top - rectCell.top).toFixed(4)));
+        const targetBottomPosition = toPx(Number((rectCell.bottom - rectTable.bottom).toFixed(4)));
+        // Set `top` and `bottom` styles to the column resizer element.
+        editor.editing.view.change((viewWriter)=>{
+            viewWriter.setStyle('top', targetTopPosition, viewResizer);
+            viewWriter.setStyle('bottom', targetBottomPosition, viewResizer);
+        });
+    }
+    /**
+	 * Remove `top` and `bottom` styles of the column resizer element.
+	 *
+	 * @param viewResizer The column resizer element.
+	 */ _resetResizerStyles(viewResizer) {
+        this.editor.editing.view.change((viewWriter)=>{
+            viewWriter.removeStyle('top', viewResizer);
+            viewWriter.removeStyle('bottom', viewResizer);
+        });
+    }
+    /**
+	 * Handles the `mouseover` event on column resizer element.
+	 * Recalculates the `top` and `bottom` styles of the column resizer element to fit the height of the table.
+	 *
+	 * @param eventInfo An object containing information about the fired event.
+	 * @param domEventData The data related to the DOM event.
+	 */ _onMouseOverHandler(eventInfo, domEventData) {
+        const target = domEventData.target;
+        if (!target.hasClass('ck-table-column-resizer')) {
+            return;
+        }
+        if (!this._isResizingAllowed) {
+            return;
+        }
+        this._recalculateResizerElement(target);
+    }
+    /**
+	 * Handles the `mouseout` event on column resizer element.
+	 * When resizing is not active, it resets the `top` and `bottom` styles of the column resizer element.
+	 *
+	 * @param eventInfo An object containing information about the fired event.
+	 * @param domEventData The data related to the DOM event.
+	 */ _onMouseOutHandler(eventInfo, domEventData) {
+        const target = domEventData.target;
+        if (!target.hasClass('ck-table-column-resizer')) {
+            return;
+        }
+        if (!this._isResizingAllowed) {
+            return;
+        }
+        if (this._isResizingActive) {
+            return;
+        }
+        this._resetResizerStyles(target);
+    }
     /**
 	 * Handles the `mousedown` event on column resizer element:
 	 *  * calculates the initial column pixel widths,
@@ -9877,7 +10030,7 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
             this._onMouseUpHandler();
             return;
         }
-        const { columnPosition, flags: { isRightEdge, isTableCentered, isLtrContent }, elements: { viewFigure, viewLeftColumn, viewRightColumn }, widths: { viewFigureParentWidth, tableWidth, leftColumnWidth, rightColumnWidth } } = this._resizingData;
+        const { columnPosition, flags: { isRightEdge, isTableCentered, isLtrContent }, elements: { viewFigure, viewLeftColumn, viewRightColumn, viewResizer }, widths: { viewFigureParentWidth, tableWidth, leftColumnWidth, rightColumnWidth } } = this._resizingData;
         const dxLowerBound = -leftColumnWidth + COLUMN_MIN_WIDTH_IN_PIXELS;
         const dxUpperBound = isRightEdge ? viewFigureParentWidth - tableWidth : rightColumnWidth - COLUMN_MIN_WIDTH_IN_PIXELS;
         // The multiplier is needed for calculating the proper movement offset:
@@ -9899,6 +10052,7 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
                 writer.setStyle('width', `${rightColumnWidthAsPercentage}%`, viewRightColumn);
             }
         });
+        this._recalculateResizerElement(viewResizer);
     }
     /**
 	 * Handles the `mouseup` event.
@@ -9963,6 +10117,10 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
         editingView.change((writer)=>{
             writer.removeClass('ck-table-column-resizer__active', viewResizer);
         });
+        const element = editingView.domConverter.mapViewToDom(viewResizer);
+        if (!element.matches(':hover')) {
+            this._resetResizerStyles(viewResizer);
+        }
         this._isResizingActive = false;
         this._resizingData = null;
     }
@@ -10413,7 +10571,7 @@ const TABLE_TYPES = [
 /**
  * The table plugin.
  *
- * For a detailed overview, check the {@glink features/tables/tables-layout Layout table feature documentation}.
+ * For a detailed overview, check the {@glink features/tables/layout-tables Layout table feature documentation}.
  */ class TableLayout extends Plugin {
     /**
 	 * @inheritDoc
@@ -10447,7 +10605,15 @@ const TABLE_TYPES = [
 	 */ attributeName;
     /**
 	 * The default value for the attribute.
+	 *
+	 * @readonly
 	 */ _defaultValue;
+    /**
+	 * The default value for the attribute for the content table.
+	 */ _defaultContentTableValue;
+    /**
+	 * The default value for the attribute for the layout table.
+	 */ _defaultLayoutTableValue;
     /**
 	 * Creates a new `TablePropertyCommand` instance.
 	 *
@@ -10457,7 +10623,8 @@ const TABLE_TYPES = [
 	 */ constructor(editor, attributeName, defaultValue){
         super(editor);
         this.attributeName = attributeName;
-        this._defaultValue = defaultValue;
+        this._defaultContentTableValue = defaultValue;
+        this._defaultLayoutTableValue = attributeName === 'tableBorderStyle' ? 'none' : undefined;
     }
     /**
 	 * @inheritDoc
@@ -10465,6 +10632,7 @@ const TABLE_TYPES = [
         const editor = this.editor;
         const selection = editor.model.document.selection;
         const table = getSelectionAffectedTable(selection);
+        this._defaultValue = !table || table.getAttribute('tableType') !== 'layout' ? this._defaultContentTableValue : this._defaultLayoutTableValue;
         this.isEnabled = !!table;
         this.value = this._getValue(table);
     }
@@ -10894,15 +11062,40 @@ const FLOAT_VALUES_REG_EXP = /^(left|none|right)$/;
     conversion.for('downcast').attributeToAttribute({
         model: {
             name: 'table',
-            key: 'tableAlignment'
+            key: 'tableAlignment',
+            values: [
+                'left',
+                'center',
+                'right'
+            ]
         },
-        view: (alignment)=>({
+        view: {
+            left: {
                 key: 'style',
                 value: {
-                    // Model: `alignment:center` => CSS: `float:none`.
-                    float: alignment === 'center' ? 'none' : alignment
+                    float: 'left'
                 }
-            }),
+            },
+            right: {
+                key: 'style',
+                value: {
+                    float: 'right'
+                }
+            },
+            center: (alignment, conversionApi, data)=>{
+                const value = data.item.getAttribute('tableType') !== 'layout' ? {
+                    // Model: `alignment:center` => CSS: `float:none`.
+                    float: 'none'
+                } : {
+                    'margin-left': 'auto',
+                    'margin-right': 'auto'
+                };
+                return {
+                    key: 'style',
+                    value
+                };
+            }
+        },
         converterPriority: 'high'
     });
     conversion.for('upcast')// Support for the `float:*;` CSS definition for the table alignment.
@@ -10915,13 +11108,31 @@ const FLOAT_VALUES_REG_EXP = /^(left|none|right)$/;
         },
         model: {
             key: 'tableAlignment',
-            value: (viewElement)=>{
+            value: (viewElement, conversionApi, data)=>{
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, '', data);
                 let align = viewElement.getStyle('float');
                 // CSS: `float:none` => Model: `alignment:center`.
                 if (align === 'none') {
                     align = 'center';
                 }
-                return align === defaultValue ? null : align;
+                return align === localDefaultValue ? null : align;
+            }
+        }
+    })// Support for the `margin-left:auto; margin-right:auto;` CSS definition for the table alignment.
+    .attributeToAttribute({
+        view: {
+            name: /^(table|figure)$/,
+            styles: {
+                'margin-left': 'auto',
+                'margin-right': 'auto'
+            }
+        },
+        model: {
+            key: 'tableAlignment',
+            value: (viewElement, conversionApi, data)=>{
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, '', data);
+                const align = 'center';
+                return align === localDefaultValue ? null : align;
             }
         }
     })// Support for the `align` attribute as the backward compatibility while pasting from other sources.
@@ -10934,9 +11145,10 @@ const FLOAT_VALUES_REG_EXP = /^(left|none|right)$/;
         model: {
             name: 'table',
             key: 'tableAlignment',
-            value: (viewElement)=>{
+            value: (viewElement, conversionApi, data)=>{
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, '', data);
                 const align = viewElement.getAttribute('align');
-                return align === defaultValue ? null : align;
+                return align === localDefaultValue ? null : align;
             }
         }
     });
@@ -11489,13 +11701,22 @@ const propertyToCommandMap = {
  */ class TablePropertiesUI extends Plugin {
     /**
 	 * The default table properties.
-	 */ _defaultTableProperties;
+	 */ _defaultContentTableProperties;
+    /**
+	 * The default layout table properties.
+	 */ _defaultLayoutTableProperties;
     /**
 	 * The contextual balloon plugin instance.
 	 */ _balloon;
     /**
 	 * The properties form view displayed inside the balloon.
 	 */ view = null;
+    /**
+	 * The properties form view displayed inside the balloon (content table).
+	 */ _viewWithContentTableDefaults = null;
+    /**
+	 * The properties form view displayed inside the balloon (layout table).
+	 */ _viewWithLayoutTableDefaults = null;
     /**
 	 * The batch used to undo all changes made by the form (which are live, as the user types)
 	 * when "Cancel" was pressed. Each time the view is shown, a new batch is created.
@@ -11534,9 +11755,10 @@ const propertyToCommandMap = {
 	 * @inheritDoc
 	 */ init() {
         const editor = this.editor;
-        this._defaultTableProperties = getNormalizedDefaultTableProperties(editor.config.get('table.tableProperties.defaultProperties'), {
+        this._defaultContentTableProperties = getNormalizedDefaultTableProperties(editor.config.get('table.tableProperties.defaultProperties'), {
             includeAlignmentProperty: true
         });
+        this._defaultLayoutTableProperties = getNormalizedDefaultProperties();
         this._balloon = editor.plugins.get(ContextualBalloon);
         editor.ui.componentFactory.add('tableProperties', ()=>this._createTablePropertiesButton());
     }
@@ -11572,7 +11794,7 @@ const propertyToCommandMap = {
 	 * Creates the {@link module:table/tableproperties/ui/tablepropertiesview~TablePropertiesView} instance.
 	 *
 	 * @returns The table properties form view instance.
-	 */ _createPropertiesView() {
+	 */ _createPropertiesView(defaultTableProperties) {
         const editor = this.editor;
         const config = editor.config.get('table.tableProperties');
         const borderColorsConfig = normalizeColorOptions(config.borderColors);
@@ -11583,7 +11805,7 @@ const propertyToCommandMap = {
         const view = new TablePropertiesView(editor.locale, {
             borderColors: localizedBorderColors,
             backgroundColors: localizedBackgroundColors,
-            defaultTableProperties: this._defaultTableProperties,
+            defaultTableProperties,
             colorPickerConfig: hasColorPicker ? config.colorPicker || {} : false
         });
         const t = editor.t;
@@ -11666,7 +11888,7 @@ const propertyToCommandMap = {
         const borderStyleCommand = commands.get('tableBorderStyle');
         Object.entries(propertyToCommandMap).map(([property, commandName])=>{
             const propertyKey = property;
-            const defaultValue = this._defaultTableProperties[propertyKey] || '';
+            const defaultValue = this.view === this._viewWithContentTableDefaults ? this._defaultContentTableProperties[propertyKey] || '' : this._defaultLayoutTableProperties[propertyKey] || '';
             return [
                 propertyKey,
                 commands.get(commandName).value || defaultValue
@@ -11688,9 +11910,15 @@ const propertyToCommandMap = {
 	 * for all of them.
 	 */ _showView() {
         const editor = this.editor;
-        if (!this.view) {
-            this.view = this._createPropertiesView();
-        }
+        const viewTable = getSelectionAffectedTableWidget(editor.editing.view.document.selection);
+        const modelTable = viewTable && editor.editing.mapper.toModelElement(viewTable);
+        const useDefaults = !modelTable || modelTable.getAttribute('tableType') !== 'layout';
+        if (useDefaults && !this._viewWithContentTableDefaults) {
+            this._viewWithContentTableDefaults = this._createPropertiesView(this._defaultContentTableProperties);
+        } else if (!useDefaults && !this._viewWithLayoutTableDefaults) {
+            this._viewWithLayoutTableDefaults = this._createPropertiesView(this._defaultLayoutTableProperties);
+        }
+        this.view = useDefaults ? this._viewWithContentTableDefaults : this._viewWithLayoutTableDefaults;
         this.listenTo(editor.ui, 'update', ()=>{
             this._updateView();
         });