@ckeditor/ckeditor5-table 0.0.0-nightly-20250407.0 → 0.0.0-nightly-20250409.0

package/src/tablecellproperties/tablecellpropertiesediting.js

@@ -7,7 +7,7 @@
  */
 import { Plugin } from 'ckeditor5/src/core.js';
 import { addBorderRules, addPaddingRules, addBackgroundRules } from 'ckeditor5/src/engine.js';
-import { downcastAttributeToStyle, upcastBorderStyles } from './../converters/tableproperties.js';
+import { downcastAttributeToStyle, getDefaultValueAdjusted, upcastBorderStyles } from '../converters/tableproperties.js';
 import TableEditing from './../tableediting.js';
 import TableCellWidthEditing from '../tablecellwidth/tablecellwidthediting.js';
 import TableCellPaddingCommand from './commands/tablecellpaddingcommand.js';
@@ -166,9 +166,10 @@ function enableHorizontalAlignmentProperty(schema, conversion, defaultValue) {
         },
         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;
             }
         }
     })
@@ -182,9 +183,10 @@ function enableHorizontalAlignmentProperty(schema, conversion, defaultValue) {
         },
         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;
             }
         }
     });
@@ -222,9 +224,10 @@ function enableVerticalAlignmentProperty(schema, conversion, defaultValue) {
         },
         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;
             }
         }
     })
@@ -238,9 +241,10 @@ function enableVerticalAlignmentProperty(schema, conversion, defaultValue) {
         },
         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;
             }
         }
     });

package/src/tablecellproperties/tablecellpropertiesui.d.ts

@@ -18,7 +18,11 @@ export default class TableCellPropertiesUI extends Plugin {
     /**
      * The default table cell properties.
      */
-    private _defaultTableCellProperties;
+    private _defaultContentTableCellProperties;
+    /**
+     * The default layout table cell properties.
+     */
+    private _defaultLayoutTableCellProperties;
     /**
      * The contextual balloon plugin instance.
      */
@@ -27,6 +31,14 @@ export default class TableCellPropertiesUI extends Plugin {
      * The cell properties form view displayed inside the balloon.
      */
     view?: TableCellPropertiesView | null;
+    /**
+     * The cell properties form view displayed inside the balloon (content table).
+     */
+    private _viewWithContentTableDefaults?;
+    /**
+     * The cell properties form view displayed inside the balloon (layout table).
+     */
+    private _viewWithLayoutTableDefaults?;
     /**
      * The batch used to undo all changes made by the form (which are live, as the user types)
      * when "Cancel" was pressed. Each time the view is shown, a new batch is created.

package/src/tablecellproperties/tablecellpropertiesui.js

@@ -11,9 +11,9 @@ import { ButtonView, clickOutsideHandler, ContextualBalloon, getLocalizedColorOp
 import TableCellPropertiesView from './ui/tablecellpropertiesview.js';
 import { colorFieldValidator, getLocalizedColorErrorText, getLocalizedLengthErrorText, defaultColors, lengthFieldValidator, lineWidthFieldValidator } from '../utils/ui/table-properties.js';
 import { debounce } from 'es-toolkit/compat';
-import { getTableWidgetAncestor } from '../utils/ui/widget.js';
+import { getSelectionAffectedTableWidget, getTableWidgetAncestor } from '../utils/ui/widget.js';
 import { getBalloonCellPositionData, repositionContextualBalloon } from '../utils/ui/contextualballoon.js';
-import { getNormalizedDefaultCellProperties } from '../utils/table-properties.js';
+import { getNormalizedDefaultCellProperties, getNormalizedDefaultProperties } from '../utils/table-properties.js';
 const ERROR_TEXT_TIMEOUT = 500;
 // Map of view properties and related commands.
 const propertyToCommandMap = {
@@ -37,7 +37,11 @@ export default class TableCellPropertiesUI extends Plugin {
     /**
      * The default table cell properties.
      */
-    _defaultTableCellProperties;
+    _defaultContentTableCellProperties;
+    /**
+     * The default layout table cell properties.
+     */
+    _defaultLayoutTableCellProperties;
     /**
      * The contextual balloon plugin instance.
      */
@@ -46,6 +50,14 @@ export default class TableCellPropertiesUI extends Plugin {
      * 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.
@@ -90,12 +102,17 @@ export default class TableCellPropertiesUI extends Plugin {
     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;
@@ -129,7 +146,7 @@ export default class TableCellPropertiesUI extends Plugin {
      *
      * @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);
@@ -140,7 +157,7 @@ export default class TableCellPropertiesUI extends Plugin {
         const view = new TableCellPropertiesView(editor.locale, {
             borderColors: localizedBorderColors,
             backgroundColors: localizedBackgroundColors,
-            defaultTableCellProperties: this._defaultTableCellProperties,
+            defaultTableCellProperties,
             colorPickerConfig: hasColorPicker ? (config.colorPicker || {}) : false
         });
         const t = editor.t;
@@ -229,7 +246,10 @@ export default class TableCellPropertiesUI extends Plugin {
         const borderStyleCommand = commands.get('tableCellBorderStyle');
         Object.entries(propertyToCommandMap)
             .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
@@ -253,9 +273,16 @@ export default class TableCellPropertiesUI extends Plugin {
      */
     _showView() {
         const editor = this.editor;
-        if (!this.view) {
-            this.view = this._createPropertiesView();
+        const viewTable = getSelectionAffectedTableWidget(editor.editing.view.document.selection);
+        const modelTable = viewTable && editor.editing.mapper.toModelElement(viewTable);
+        const useDefaults = !modelTable || modelTable.getAttribute('tableType') !== 'layout';
+        if (useDefaults && !this._viewWithContentTableDefaults) {
+            this._viewWithContentTableDefaults = this._createPropertiesView(this._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();
         });

package/src/tablecolumnresize/tablecolumnresizeediting.d.ts

@@ -104,6 +104,34 @@ export default class TableColumnResizeEditing extends Plugin {
      * Registers listeners to handle resizing process.
      */
     private _registerResizingListeners;
+    /**
+     * 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.
+     */
+    private _recalculateResizerElement;
+    /**
+     * Remove `top` and `bottom` styles of the column resizer element.
+     *
+     * @param viewResizer The column resizer element.
+     */
+    private _resetResizerStyles;
+    /**
+     * 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.
+     */
+    private _onMouseOverHandler;
+    /**
+     * 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.
+     */
+    private _onMouseOutHandler;
     /**
      * Handles the `mousedown` event on column resizer element:
      *  * calculates the initial column pixel widths,

package/src/tablecolumnresize/tablecolumnresizeediting.js

@@ -6,7 +6,7 @@
  * @module table/tablecolumnresize/tablecolumnresizeediting
  */
 import { throttle, isEqual } from 'es-toolkit/compat';
-import { global, DomEmitterMixin } from 'ckeditor5/src/utils.js';
+import { global, DomEmitterMixin, Rect, toUnit } from 'ckeditor5/src/utils.js';
 import { Plugin } from 'ckeditor5/src/core.js';
 import MouseEventsObserver from '../../src/tablemouse/mouseeventsobserver.js';
 import TableEditing from '../tableediting.js';
@@ -16,6 +16,7 @@ import TableWidthsCommand from './tablewidthscommand.js';
 import { downcastTableResizedClass, upcastColgroupElement } from './converters.js';
 import { clamp, createFilledArray, sumArray, getColumnEdgesIndexes, getChangedResizedTables, getColumnMinWidthAsPercentage, getElementWidthInPixels, getTableWidthInPixels, normalizeColumnWidths, toPrecision, getDomCellOuterWidth, updateColumnElements, getColumnGroupElement, getTableColumnElements, getTableColumnsWidths } from './utils.js';
 import { COLUMN_MIN_WIDTH_IN_PIXELS, COLUMN_RESIZE_DISTANCE_THRESHOLD } from './constants.js';
+const toPx = /* #__PURE__ */ toUnit('px');
 /**
  * The table column resize editing plugin.
  */
@@ -326,10 +327,83 @@ export default class TableColumnResizeEditing extends Plugin {
     _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,
@@ -461,7 +535,7 @@ export default class TableColumnResizeEditing extends Plugin {
             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 :
@@ -486,6 +560,7 @@ export default class TableColumnResizeEditing extends Plugin {
                 writer.setStyle('width', `${rightColumnWidthAsPercentage}%`, viewRightColumn);
             }
         });
+        this._recalculateResizerElement(viewResizer);
     }
     /**
      * Handles the `mouseup` event.
@@ -556,6 +631,10 @@ export default class TableColumnResizeEditing extends Plugin {
         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;
     }

package/src/tablelayout.d.ts

@@ -13,7 +13,7 @@ import TableColumnResize from './tablecolumnresize.js';
 /**
  * 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}.
  */
 export default class TableLayout extends Plugin {
     /**

package/src/tablelayout.js

@@ -13,7 +13,7 @@ import TableColumnResize from './tablecolumnresize.js';
 /**
  * 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}.
  */
 export default class TableLayout extends Plugin {
     /**

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

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

package/src/tableproperties/commands/tablepropertycommand.js

@@ -16,8 +16,18 @@ export default class TablePropertyCommand extends Command {
     attributeName;
     /**
      * The default value for the attribute.
+     *
+     * @readonly
      */
     _defaultValue;
+    /**
+     * The default value for the attribute for the content table.
+     */
+    _defaultContentTableValue;
+    /**
+     * The default value for the attribute for the layout table.
+     */
+    _defaultLayoutTableValue;
     /**
      * Creates a new `TablePropertyCommand` instance.
      *
@@ -28,7 +38,8 @@ export default class TablePropertyCommand extends Command {
     constructor(editor, attributeName, defaultValue) {
         super(editor);
         this.attributeName = attributeName;
-        this._defaultValue = defaultValue;
+        this._defaultContentTableValue = defaultValue;
+        this._defaultLayoutTableValue = attributeName === 'tableBorderStyle' ? 'none' : undefined;
     }
     /**
      * @inheritDoc
@@ -37,6 +48,9 @@ export default class TablePropertyCommand extends Command {
         const editor = this.editor;
         const selection = editor.model.document.selection;
         const table = getSelectionAffectedTable(selection);
+        this._defaultValue = !table || table.getAttribute('tableType') !== 'layout' ?
+            this._defaultContentTableValue :
+            this._defaultLayoutTableValue;
         this.isEnabled = !!table;
         this.value = this._getValue(table);
     }

package/src/tableproperties/tablepropertiesediting.js

@@ -8,7 +8,7 @@
 import { Plugin } from 'ckeditor5/src/core.js';
 import { addBackgroundRules, addBorderRules } from 'ckeditor5/src/engine.js';
 import TableEditing from '../tableediting.js';
-import { downcastAttributeToStyle, downcastTableAttribute, upcastBorderStyles, upcastStyleToAttribute } from '../converters/tableproperties.js';
+import { downcastAttributeToStyle, downcastTableAttribute, getDefaultValueAdjusted, upcastBorderStyles, upcastStyleToAttribute } from '../converters/tableproperties.js';
 import TableBackgroundColorCommand from './commands/tablebackgroundcolorcommand.js';
 import TableBorderColorCommand from './commands/tablebordercolorcommand.js';
 import TableBorderStyleCommand from './commands/tableborderstylecommand.js';
@@ -133,15 +133,36 @@ function enableAlignmentProperty(schema, conversion, defaultValue) {
         .attributeToAttribute({
         model: {
             name: 'table',
-            key: 'tableAlignment'
+            key: 'tableAlignment',
+            values: ['left', 'center', 'right']
         },
-        view: alignment => ({
-            key: 'style',
-            value: {
-                // Model: `alignment:center` => CSS: `float:none`.
-                float: alignment === 'center' ? 'none' : alignment
+        view: {
+            left: {
+                key: 'style',
+                value: {
+                    float: 'left'
+                }
+            },
+            right: {
+                key: 'style',
+                value: {
+                    float: 'right'
+                }
+            },
+            center: (alignment, conversionApi, data) => {
+                const value = data.item.getAttribute('tableType') !== 'layout' ? {
+                    // Model: `alignment:center` => CSS: `float:none`.
+                    float: 'none'
+                } : {
+                    'margin-left': 'auto',
+                    'margin-right': 'auto'
+                };
+                return {
+                    key: 'style',
+                    value
+                };
             }
-        }),
+        },
         converterPriority: 'high'
     });
     conversion.for('upcast')
@@ -155,13 +176,32 @@ function enableAlignmentProperty(schema, conversion, defaultValue) {
         },
         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;
             }
         }
     })
@@ -175,9 +215,10 @@ function enableAlignmentProperty(schema, conversion, defaultValue) {
         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;
             }
         }
     });

package/src/tableproperties/tablepropertiesui.d.ts

@@ -18,7 +18,11 @@ export default class TablePropertiesUI extends Plugin {
     /**
      * The default table properties.
      */
-    private _defaultTableProperties;
+    private _defaultContentTableProperties;
+    /**
+     * The default layout table properties.
+     */
+    private _defaultLayoutTableProperties;
     /**
      * The contextual balloon plugin instance.
      */
@@ -27,6 +31,14 @@ export default class TablePropertiesUI extends Plugin {
      * The properties form view displayed inside the balloon.
      */
     view: TablePropertiesView | null;
+    /**
+     * The properties form view displayed inside the balloon (content table).
+     */
+    private _viewWithContentTableDefaults;
+    /**
+     * The properties form view displayed inside the balloon (layout table).
+     */
+    private _viewWithLayoutTableDefaults;
     /**
      * The batch used to undo all changes made by the form (which are live, as the user types)
      * when "Cancel" was pressed. Each time the view is shown, a new batch is created.

package/src/tableproperties/tablepropertiesui.js

@@ -13,7 +13,7 @@ import TablePropertiesView from './ui/tablepropertiesview.js';
 import { colorFieldValidator, getLocalizedColorErrorText, getLocalizedLengthErrorText, lengthFieldValidator, lineWidthFieldValidator, defaultColors } from '../utils/ui/table-properties.js';
 import { getSelectionAffectedTableWidget } from '../utils/ui/widget.js';
 import { getBalloonTablePositionData, repositionContextualBalloon } from '../utils/ui/contextualballoon.js';
-import { getNormalizedDefaultTableProperties } from '../utils/table-properties.js';
+import { getNormalizedDefaultProperties, getNormalizedDefaultTableProperties } from '../utils/table-properties.js';
 const ERROR_TEXT_TIMEOUT = 500;
 // Map of view properties and related commands.
 const propertyToCommandMap = {
@@ -35,7 +35,11 @@ export default class TablePropertiesUI extends Plugin {
     /**
      * The default table properties.
      */
-    _defaultTableProperties;
+    _defaultContentTableProperties;
+    /**
+     * The default layout table properties.
+     */
+    _defaultLayoutTableProperties;
     /**
      * The contextual balloon plugin instance.
      */
@@ -44,6 +48,14 @@ export default class TablePropertiesUI extends Plugin {
      * 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.
@@ -87,9 +99,10 @@ export default class TablePropertiesUI extends Plugin {
      */
     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());
     }
@@ -129,7 +142,7 @@ export default class TablePropertiesUI extends Plugin {
      *
      * @returns The table properties form view instance.
      */
-    _createPropertiesView() {
+    _createPropertiesView(defaultTableProperties) {
         const editor = this.editor;
         const config = editor.config.get('table.tableProperties');
         const borderColorsConfig = normalizeColorOptions(config.borderColors);
@@ -140,7 +153,7 @@ export default class TablePropertiesUI extends Plugin {
         const view = new TablePropertiesView(editor.locale, {
             borderColors: localizedBorderColors,
             backgroundColors: localizedBackgroundColors,
-            defaultTableProperties: this._defaultTableProperties,
+            defaultTableProperties,
             colorPickerConfig: hasColorPicker ? (config.colorPicker || {}) : false
         });
         const t = editor.t;
@@ -223,7 +236,9 @@ export default class TablePropertiesUI extends Plugin {
         Object.entries(propertyToCommandMap)
             .map(([property, commandName]) => {
             const propertyKey = property;
-            const defaultValue = this._defaultTableProperties[propertyKey] || '';
+            const defaultValue = this.view === this._viewWithContentTableDefaults ?
+                this._defaultContentTableProperties[propertyKey] || '' :
+                this._defaultLayoutTableProperties[propertyKey] || '';
             return [propertyKey, (commands.get(commandName).value || defaultValue)];
         })
             .forEach(([property, value]) => {
@@ -244,9 +259,16 @@ export default class TablePropertiesUI extends Plugin {
      */
     _showView() {
         const editor = this.editor;
-        if (!this.view) {
-            this.view = this._createPropertiesView();
+        const viewTable = getSelectionAffectedTableWidget(editor.editing.view.document.selection);
+        const modelTable = viewTable && editor.editing.mapper.toModelElement(viewTable);
+        const useDefaults = !modelTable || modelTable.getAttribute('tableType') !== 'layout';
+        if (useDefaults && !this._viewWithContentTableDefaults) {
+            this._viewWithContentTableDefaults = this._createPropertiesView(this._defaultContentTableProperties);
+        }
+        else if (!useDefaults && !this._viewWithLayoutTableDefaults) {
+            this._viewWithLayoutTableDefaults = this._createPropertiesView(this._defaultLayoutTableProperties);
         }
+        this.view = useDefaults ? this._viewWithContentTableDefaults : this._viewWithLayoutTableDefaults;
         this.listenTo(editor.ui, 'update', () => {
             this._updateView();
         });