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

package/lang/translations/tr.po

@@ -269,28 +269,28 @@ msgstr "Tablo"
 
 msgctxt "Label for the insert table layout toolbar button."
 msgid "Insert table layout"
-msgstr ""
+msgstr "Tablo düzeni ekle"
 
 msgctxt "The accessible label used in the table layout insert UI element."
 msgid "Table layout"
-msgstr ""
+msgstr "Tablo düzeni"
 
 msgctxt "The accessible label of the layout table type dropdown button."
 msgid "Layout table"
-msgstr ""
+msgstr "Düzen tablosu"
 
 msgctxt "The accessible label of the content table type dropdown button."
 msgid "Content table"
-msgstr ""
+msgstr "İçerik tablosu"
 
 msgctxt "The accessible label of the table balloon button that displays a user interface to choose table type."
 msgid "Choose table type"
-msgstr ""
+msgstr "Tablo türünü seç"
 
 msgctxt "The accessible label of the table type toolbar button."
 msgid "Table type"
-msgstr ""
+msgstr "Tablo türü"
 
 msgctxt "The accessible label of dropdown list that displays a user interface to choose table type."
 msgid "Table type options"
-msgstr ""
+msgstr "Tablo türü seçenekleri"

package/lang/translations/uk.po

@@ -269,28 +269,28 @@ msgstr "Таблиця"
 
 msgctxt "Label for the insert table layout toolbar button."
 msgid "Insert table layout"
-msgstr ""
+msgstr "Вставити формат таблиці"
 
 msgctxt "The accessible label used in the table layout insert UI element."
 msgid "Table layout"
-msgstr ""
+msgstr "Формат таблиці"
 
 msgctxt "The accessible label of the layout table type dropdown button."
 msgid "Layout table"
-msgstr ""
+msgstr "Формат таблиці"
 
 msgctxt "The accessible label of the content table type dropdown button."
 msgid "Content table"
-msgstr ""
+msgstr "Вміст таблиці"
 
 msgctxt "The accessible label of the table balloon button that displays a user interface to choose table type."
 msgid "Choose table type"
-msgstr ""
+msgstr "Вибрати тип таблиці"
 
 msgctxt "The accessible label of the table type toolbar button."
 msgid "Table type"
-msgstr ""
+msgstr "Тип таблиці"
 
 msgctxt "The accessible label of dropdown list that displays a user interface to choose table type."
 msgid "Table type options"
-msgstr ""
+msgstr "Опції типу таблиці"

package/lang/translations/vi.po

@@ -269,28 +269,28 @@ msgstr "Bảng"
 
 msgctxt "Label for the insert table layout toolbar button."
 msgid "Insert table layout"
-msgstr ""
+msgstr "Chèn bố cục bảng"
 
 msgctxt "The accessible label used in the table layout insert UI element."
 msgid "Table layout"
-msgstr ""
+msgstr "Bố cục bảng"
 
 msgctxt "The accessible label of the layout table type dropdown button."
 msgid "Layout table"
-msgstr ""
+msgstr "Bảng bố cục"
 
 msgctxt "The accessible label of the content table type dropdown button."
 msgid "Content table"
-msgstr ""
+msgstr "Bảng nội dung"
 
 msgctxt "The accessible label of the table balloon button that displays a user interface to choose table type."
 msgid "Choose table type"
-msgstr ""
+msgstr "Chọn loại bảng"
 
 msgctxt "The accessible label of the table type toolbar button."
 msgid "Table type"
-msgstr ""
+msgstr "Loại bảng"
 
 msgctxt "The accessible label of dropdown list that displays a user interface to choose table type."
 msgid "Table type options"
-msgstr ""
+msgstr "Tùy chọn loại bảng"

package/lang/translations/zh-cn.po

@@ -269,28 +269,28 @@ msgstr "表格"
 
 msgctxt "Label for the insert table layout toolbar button."
 msgid "Insert table layout"
-msgstr ""
+msgstr "插入表格布局"
 
 msgctxt "The accessible label used in the table layout insert UI element."
 msgid "Table layout"
-msgstr ""
+msgstr "表格布局"
 
 msgctxt "The accessible label of the layout table type dropdown button."
 msgid "Layout table"
-msgstr ""
+msgstr "布局表格"
 
 msgctxt "The accessible label of the content table type dropdown button."
 msgid "Content table"
-msgstr ""
+msgstr "内容表格"
 
 msgctxt "The accessible label of the table balloon button that displays a user interface to choose table type."
 msgid "Choose table type"
-msgstr ""
+msgstr "选择表格类型"
 
 msgctxt "The accessible label of the table type toolbar button."
 msgid "Table type"
-msgstr ""
+msgstr "表格类型"
 
 msgctxt "The accessible label of dropdown list that displays a user interface to choose table type."
 msgid "Table type options"
-msgstr ""
+msgstr "表格类型选项"

package/lang/translations/zh.po

@@ -269,28 +269,28 @@ msgstr "表格"
 
 msgctxt "Label for the insert table layout toolbar button."
 msgid "Insert table layout"
-msgstr ""
+msgstr "插入表格版面配置"
 
 msgctxt "The accessible label used in the table layout insert UI element."
 msgid "Table layout"
-msgstr ""
+msgstr "表格版面配置"
 
 msgctxt "The accessible label of the layout table type dropdown button."
 msgid "Layout table"
-msgstr ""
+msgstr "版面配置表格"
 
 msgctxt "The accessible label of the content table type dropdown button."
 msgid "Content table"
-msgstr ""
+msgstr "內容表格"
 
 msgctxt "The accessible label of the table balloon button that displays a user interface to choose table type."
 msgid "Choose table type"
-msgstr ""
+msgstr "選擇表格類型"
 
 msgctxt "The accessible label of the table type toolbar button."
 msgid "Table type"
-msgstr ""
+msgstr "表格類型"
 
 msgctxt "The accessible label of dropdown list that displays a user interface to choose table type."
 msgid "Table type options"
-msgstr ""
+msgstr "表格類型選項"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-table",
-  "version": "45.0.0-alpha.1",
+  "version": "45.0.0-alpha.11",
   "description": "Table feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,14 +13,14 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "45.0.0-alpha.1",
-    "@ckeditor/ckeditor5-clipboard": "45.0.0-alpha.1",
-    "@ckeditor/ckeditor5-core": "45.0.0-alpha.1",
-    "@ckeditor/ckeditor5-engine": "45.0.0-alpha.1",
-    "@ckeditor/ckeditor5-icons": "45.0.0-alpha.1",
-    "@ckeditor/ckeditor5-ui": "45.0.0-alpha.1",
-    "@ckeditor/ckeditor5-utils": "45.0.0-alpha.1",
-    "@ckeditor/ckeditor5-widget": "45.0.0-alpha.1",
+    "ckeditor5": "45.0.0-alpha.11",
+    "@ckeditor/ckeditor5-clipboard": "45.0.0-alpha.11",
+    "@ckeditor/ckeditor5-core": "45.0.0-alpha.11",
+    "@ckeditor/ckeditor5-engine": "45.0.0-alpha.11",
+    "@ckeditor/ckeditor5-icons": "45.0.0-alpha.11",
+    "@ckeditor/ckeditor5-ui": "45.0.0-alpha.11",
+    "@ckeditor/ckeditor5-utils": "45.0.0-alpha.11",
+    "@ckeditor/ckeditor5-widget": "45.0.0-alpha.11",
     "es-toolkit": "1.32.0"
   },
   "author": "CKSource (http://cksource.com/)",

package/src/converters/tableproperties.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module table/converters/tableproperties
  */
-import type { Conversion, ViewElement } from 'ckeditor5/src/engine.js';
+import type { Conversion, UpcastConversionData, ViewElement } from 'ckeditor5/src/engine.js';
 /**
  * Conversion helper for upcasting attributes using normalized styles.
  *
@@ -52,3 +52,7 @@ export declare function downcastTableAttribute(conversion: Conversion, options:
     modelAttribute: string;
     styleName: string;
 }): void;
+/**
+ * Returns the default value for table or table cell property adjusted for layout tables.
+ */
+export declare function getDefaultValueAdjusted(defaultValue: string, layoutTableDefault: string, data: UpcastConversionData<ViewElement>): string;

package/src/converters/tableproperties.js

@@ -27,16 +27,7 @@ export function upcastStyleToAttribute(conversion, options) {
                 if (!shouldUpcast(viewElement)) {
                     return;
                 }
-                let localDefaultValue = defaultValue;
-                // Adjust default for layout tables.
-                if (data.modelRange) {
-                    const modelElement = first(data.modelRange.getItems({ shallow: true }));
-                    const tableElement = modelElement && modelElement.is('element') &&
-                        modelElement.findAncestor('table', { includeSelf: true });
-                    if (tableElement && tableElement.getAttribute('tableType') == 'layout') {
-                        localDefaultValue = '';
-                    }
-                }
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, '', data);
                 const normalized = viewElement.getNormalizedStyle(styleName);
                 const value = reduceBoxSides ? reduceBoxSidesValue(normalized) : normalized;
                 if (localDefaultValue !== value) {
@@ -157,6 +148,17 @@ export function downcastTableAttribute(conversion, options) {
         }
     }));
 }
+/**
+ * Returns the default value for table or table cell property adjusted for layout tables.
+ */
+export 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.

package/src/tablecellproperties/tablecellpropertiesediting.js

@@ -6,9 +6,8 @@
  * @module table/tablecellproperties/tablecellpropertiesediting
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import { first } from 'ckeditor5/src/utils.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';
@@ -168,16 +167,7 @@ function enableHorizontalAlignmentProperty(schema, conversion, defaultValue) {
         model: {
             key: 'tableCellHorizontalAlignment',
             value: (viewElement, conversionApi, data) => {
-                let localDefaultValue = defaultValue;
-                // Adjust default for layout tables.
-                if (data.modelRange) {
-                    const modelElement = first(data.modelRange.getItems({ shallow: true }));
-                    const tableElement = modelElement && modelElement.is('element') &&
-                        modelElement.findAncestor('table', { includeSelf: true });
-                    if (tableElement && tableElement.getAttribute('tableType') == 'layout') {
-                        localDefaultValue = 'left';
-                    }
-                }
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, 'left', data);
                 const align = viewElement.getStyle('text-align');
                 return align === localDefaultValue ? null : align;
             }
@@ -194,16 +184,7 @@ function enableHorizontalAlignmentProperty(schema, conversion, defaultValue) {
         model: {
             key: 'tableCellHorizontalAlignment',
             value: (viewElement, conversionApi, data) => {
-                let localDefaultValue = defaultValue;
-                // Adjust default for layout tables.
-                if (data.modelRange) {
-                    const modelElement = first(data.modelRange.getItems({ shallow: true }));
-                    const tableElement = modelElement && modelElement.is('element') &&
-                        modelElement.findAncestor('table', { includeSelf: true });
-                    if (tableElement && tableElement.getAttribute('tableType') == 'layout') {
-                        localDefaultValue = 'left';
-                    }
-                }
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, 'left', data);
                 const align = viewElement.getAttribute('align');
                 return align === localDefaultValue ? null : align;
             }
@@ -244,16 +225,7 @@ function enableVerticalAlignmentProperty(schema, conversion, defaultValue) {
         model: {
             key: 'tableCellVerticalAlignment',
             value: (viewElement, conversionApi, data) => {
-                let localDefaultValue = defaultValue;
-                // Adjust default for layout tables.
-                if (data.modelRange) {
-                    const modelElement = first(data.modelRange.getItems({ shallow: true }));
-                    const tableElement = modelElement && modelElement.is('element') &&
-                        modelElement.findAncestor('table', { includeSelf: true });
-                    if (tableElement && tableElement.getAttribute('tableType') == 'layout') {
-                        localDefaultValue = 'middle';
-                    }
-                }
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, 'middle', data);
                 const align = viewElement.getStyle('vertical-align');
                 return align === localDefaultValue ? null : align;
             }
@@ -270,16 +242,7 @@ function enableVerticalAlignmentProperty(schema, conversion, defaultValue) {
         model: {
             key: 'tableCellVerticalAlignment',
             value: (viewElement, conversionApi, data) => {
-                let localDefaultValue = defaultValue;
-                // Adjust default for layout tables.
-                if (data.modelRange) {
-                    const modelElement = first(data.modelRange.getItems({ shallow: true }));
-                    const tableElement = modelElement && modelElement.is('element') &&
-                        modelElement.findAncestor('table', { includeSelf: true });
-                    if (tableElement && tableElement.getAttribute('tableType') == 'layout') {
-                        localDefaultValue = 'middle';
-                    }
-                }
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, 'middle', data);
                 const valign = viewElement.getAttribute('valign');
                 return valign === localDefaultValue ? null : valign;
             }

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/tablepropertiesediting.js

@@ -6,10 +6,9 @@
  * @module table/tableproperties/tablepropertiesediting
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import { first } from 'ckeditor5/src/utils.js';
 import { addBackgroundRules, addBorderRules } from 'ckeditor5/src/engine.js';
 import TableEditing from '../tableediting.js';
-import { downcastAttributeToStyle, downcastTableAttribute, upcastBorderStyles, upcastStyleToAttribute } from '../converters/tableproperties.js';
+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';
@@ -178,14 +177,7 @@ function enableAlignmentProperty(schema, conversion, defaultValue) {
         model: {
             key: 'tableAlignment',
             value: (viewElement, conversionApi, data) => {
-                let localDefaultValue = defaultValue;
-                // Adjust default for layout tables.
-                if (data.modelRange) {
-                    const modelElement = first(data.modelRange.getItems({ shallow: true }));
-                    if (modelElement && modelElement.is('element') && modelElement.getAttribute('tableType') == 'layout') {
-                        localDefaultValue = '';
-                    }
-                }
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, '', data);
                 let align = viewElement.getStyle('float');
                 // CSS: `float:none` => Model: `alignment:center`.
                 if (align === 'none') {
@@ -194,6 +186,24 @@ function enableAlignmentProperty(schema, conversion, defaultValue) {
                 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.
         .attributeToAttribute({
@@ -206,14 +216,7 @@ function enableAlignmentProperty(schema, conversion, defaultValue) {
             name: 'table',
             key: 'tableAlignment',
             value: (viewElement, conversionApi, data) => {
-                let localDefaultValue = defaultValue;
-                // Adjust default for layout tables.
-                if (data.modelRange) {
-                    const modelElement = first(data.modelRange.getItems({ shallow: true }));
-                    if (modelElement && modelElement.is('element') && modelElement.getAttribute('tableType') == 'layout') {
-                        localDefaultValue = '';
-                    }
-                }
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, '', data);
                 const align = viewElement.getAttribute('align');
                 return align === localDefaultValue ? null : align;
             }

package/theme/tablecolumnresize.css

@@ -16,10 +16,6 @@
 	table-layout: fixed;
 }
 
-.ck-content .table table {
-	overflow: hidden;
-}
-
 .ck-content .table td,
 .ck-content .table th {
 	/* To prevent text overflowing beyond its cell when columns are resized by resize handler
@@ -58,12 +54,6 @@
 .ck.ck-editor__editable .table .ck-table-column-resizer__active {
 	background-color: var(--ck-color-selector-column-resizer-hover);
 	opacity: 0.25;
-	/* The resizer element resides in each cell so to occupy the entire height of the table, which is unknown from a CSS point of view,
-	   it is extended to an extremely high height. Even for screens with a very high pixel density, the resizer will fulfill its role as
-	   it should, i.e. for a screen of 476 ppi the total height of the resizer will take over 350 sheets of A4 format, which is totally
-	   unrealistic height for a single table. */
-	top: -999999px;
-	bottom: -999999px;
 }
 
 .ck.ck-editor__editable[dir=rtl] .table .ck-table-column-resizer {