@ckeditor/ckeditor5-table 45.0.0-alpha.2 → 45.0.0-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-table",
-  "version": "45.0.0-alpha.2",
+  "version": "45.0.0-alpha.3",
   "description": "Table feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,14 +13,14 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "45.0.0-alpha.2",
-    "@ckeditor/ckeditor5-clipboard": "45.0.0-alpha.2",
-    "@ckeditor/ckeditor5-core": "45.0.0-alpha.2",
-    "@ckeditor/ckeditor5-engine": "45.0.0-alpha.2",
-    "@ckeditor/ckeditor5-icons": "45.0.0-alpha.2",
-    "@ckeditor/ckeditor5-ui": "45.0.0-alpha.2",
-    "@ckeditor/ckeditor5-utils": "45.0.0-alpha.2",
-    "@ckeditor/ckeditor5-widget": "45.0.0-alpha.2",
+    "ckeditor5": "45.0.0-alpha.3",
+    "@ckeditor/ckeditor5-clipboard": "45.0.0-alpha.3",
+    "@ckeditor/ckeditor5-core": "45.0.0-alpha.3",
+    "@ckeditor/ckeditor5-engine": "45.0.0-alpha.3",
+    "@ckeditor/ckeditor5-icons": "45.0.0-alpha.3",
+    "@ckeditor/ckeditor5-ui": "45.0.0-alpha.3",
+    "@ckeditor/ckeditor5-utils": "45.0.0-alpha.3",
+    "@ckeditor/ckeditor5-widget": "45.0.0-alpha.3",
     "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/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/tablelayout.css

@@ -27,6 +27,12 @@
 
 		/* Widget type around overrides. */
 		&.ck-widget {
+			&:hover {
+				/* To prevent the widget outline from being cut off at the bottom
+				when the next cell or table has a background color, for example. */
+				z-index: var(--ck-z-default);
+			}
+
 			&:hover > .ck-widget__selection-handle {
 				opacity: 0.75;
 				visibility: visible;