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

package/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,26 @@ import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
         },
         model: {
             key: modelAttribute,
-            value: (viewElement)=>{
+            value: (viewElement, conversionApi, data)=>{
                 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 normalized = viewElement.getNormalizedStyle(styleName);
                 const value = reduceBoxSides ? reduceBoxSidesValue(normalized) : normalized;
-                if (defaultValue !== value) {
+                if (localDefaultValue !== value) {
                     return value;
                 }
             }
@@ -93,6 +101,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 +123,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);
             }
         }));
@@ -7073,7 +7092,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 +8112,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 +8167,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 +8208,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 +8219,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 +8308,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 +8331,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 +8443,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 +8461,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 +9080,22 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
         },
         model: {
             key: 'tableCellHorizontalAlignment',
-            value: (viewElement)=>{
+            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 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 +9108,22 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
         },
         model: {
             key: 'tableCellHorizontalAlignment',
-            value: (viewElement)=>{
+            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 align = viewElement.getAttribute('align');
-                return align === defaultValue ? null : align;
+                return align === localDefaultValue ? null : align;
             }
         }
     });
@@ -9064,9 +9160,22 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
         },
         model: {
             key: 'tableCellVerticalAlignment',
-            value: (viewElement)=>{
+            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 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 +9188,22 @@ const ALIGN_VALUES_REG_EXP$1 = /^(left|center|right|justify)$/;
         },
         model: {
             key: 'tableCellVerticalAlignment',
-            value: (viewElement)=>{
+            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 valign = viewElement.getAttribute('valign');
-                return valign === defaultValue ? null : valign;
+                return valign === localDefaultValue ? null : valign;
             }
         }
     });
@@ -10447,7 +10569,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 +10587,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 +10596,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 +11026,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 +11072,23 @@ const FLOAT_VALUES_REG_EXP = /^(left|none|right)$/;
         },
         model: {
             key: 'tableAlignment',
-            value: (viewElement)=>{
+            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 = '';
+                    }
+                }
                 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 `align` attribute as the backward compatibility while pasting from other sources.
@@ -10934,9 +11101,19 @@ const FLOAT_VALUES_REG_EXP = /^(left|none|right)$/;
         model: {
             name: 'table',
             key: 'tableAlignment',
-            value: (viewElement)=>{
+            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 align = viewElement.getAttribute('align');
-                return align === defaultValue ? null : align;
+                return align === localDefaultValue ? null : align;
             }
         }
     });
@@ -11489,13 +11666,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 +11720,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 +11759,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 +11770,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 +11853,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 +11875,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();
         });