@ckeditor/ckeditor5-table 0.0.0-nightly-next-20251222.0 → 0.0.0-nightly-20251223.0

package/src/tableconfig.d.ts

@@ -329,7 +329,7 @@ export interface TablePropertiesConfig {
      * const tableConfig = {
      * 	tableProperties: {
      * 		alignment: {
-     * 			useInlineStyles: true // Use inline styles instead of CSS classes
+     * 			useInlineStyles: false // Use CSS classes instead of inline styles
      * 		}
      * 	}
      * };
@@ -621,10 +621,10 @@ export interface TableAlignmentConfig {
     /**
      * Whether to use inline styles for table alignment in the editor output.
      *
-     * * When `true`, the alignment is rendered as inline styles.
-     * * When `false` (default), the alignment is rendered as CSS classes.
+     * * When `true` (default), the alignment is rendered as inline styles.
+     * * When `false`, the alignment is rendered as CSS classes.
      *
-     * @default false
+     * @default true
      */
     useInlineStyles?: boolean;
 }

package/src/tableproperties/tablepropertiesediting.js

@@ -79,7 +79,7 @@ export class TablePropertiesEditing extends Plugin {
         const defaultTableProperties = getNormalizedDefaultTableProperties(editor.config.get('table.tableProperties.defaultProperties'), {
             includeAlignmentProperty: true
         });
-        const useInlineStyles = editor.config.get('table.tableProperties.alignment.useInlineStyles') === true;
+        const useInlineStyles = editor.config.get('table.tableProperties.alignment.useInlineStyles') !== false;
         editor.data.addStyleProcessorRules(addMarginStylesRules);
         editor.data.addStyleProcessorRules(addBorderStylesRules);
         enableBorderProperties(editor, {
@@ -90,7 +90,12 @@ export class TablePropertiesEditing extends Plugin {
         editor.commands.add('tableBorderColor', new TableBorderColorCommand(editor, defaultTableProperties.borderColor));
         editor.commands.add('tableBorderStyle', new TableBorderStyleCommand(editor, defaultTableProperties.borderStyle));
         editor.commands.add('tableBorderWidth', new TableBorderWidthCommand(editor, defaultTableProperties.borderWidth));
-        enableAlignmentProperty(schema, conversion, defaultTableProperties.alignment, useInlineStyles);
+        if (editor.config.get('experimentalFlags.useExtendedTableBlockAlignment')) {
+            enableExtendedAlignmentProperty(schema, conversion, defaultTableProperties.alignment, useInlineStyles);
+        }
+        else {
+            enableAlignmentProperty(schema, conversion, defaultTableProperties.alignment);
+        }
         editor.commands.add('tableAlignment', new TableAlignmentCommand(editor, defaultTableProperties.alignment));
         enableTableToFigureProperty(schema, conversion, {
             modelAttribute: 'tableWidth',
@@ -117,16 +122,18 @@ export class TablePropertiesEditing extends Plugin {
             defaultValue: defaultTableProperties.backgroundColor
         });
         editor.commands.add('tableBackgroundColor', new TableBackgroundColorCommand(editor, defaultTableProperties.backgroundColor));
-        const viewDoc = editor.editing.view.document;
-        // Adjust clipboard output to wrap tables in divs if needed (for alignment).
-        this.listenTo(viewDoc, 'clipboardOutput', (evt, data) => {
-            editor.editing.view.change(writer => {
-                for (const { item } of writer.createRangeIn(data.content)) {
-                    wrapInDivIfNeeded(item, writer);
-                }
-                data.dataTransfer.setData('text/html', this.editor.data.htmlProcessor.toData(data.content));
-            });
-        }, { priority: 'lowest' });
+        if (editor.config.get('experimentalFlags.useExtendedTableBlockAlignment')) {
+            const viewDoc = editor.editing.view.document;
+            // Adjust clipboard output to wrap tables in divs if needed (for alignment).
+            this.listenTo(viewDoc, 'clipboardOutput', (evt, data) => {
+                editor.editing.view.change(writer => {
+                    for (const { item } of writer.createRangeIn(data.content)) {
+                        wrapInDivIfNeeded(item, writer);
+                    }
+                    data.dataTransfer.setData('text/html', this.editor.data.htmlProcessor.toData(data.content));
+                });
+            }, { priority: 'lowest' });
+        }
     }
 }
 /**
@@ -187,11 +194,11 @@ function enableBorderProperties(editor, defaultBorder) {
     downcastTableAttribute(conversion, { modelAttribute: modelAttributes.width, styleName: 'border-width' });
 }
 /**
- * Enables the `'alignment'` attribute for table.
+ * Enables the extended block`'alignment'` attribute for table.
  *
  * @param defaultValue The default alignment value.
  */
-function enableAlignmentProperty(schema, conversion, defaultValue, useInlineStyles) {
+function enableExtendedAlignmentProperty(schema, conversion, defaultValue, useInlineStyles) {
     schema.extend('table', {
         allowAttributes: ['tableAlignment']
     });
@@ -282,6 +289,132 @@ function enableAlignmentProperty(schema, conversion, defaultValue, useInlineStyl
     });
     conversion.for('upcast').add(upcastTableAlignedDiv(defaultValue));
 }
+/**
+ * Enables the `'alignment'` attribute for table.
+ *
+ * @param defaultValue The default alignment value.
+ */
+function enableAlignmentProperty(schema, conversion, defaultValue) {
+    const ALIGN_VALUES_REG_EXP = /^(left|center|right)$/;
+    const FLOAT_VALUES_REG_EXP = /^(left|none|right)$/;
+    schema.extend('table', {
+        allowAttributes: ['tableAlignment']
+    });
+    schema.setAttributeProperties('tableAlignment', { isFormatting: true });
+    conversion.for('downcast')
+        .attributeToAttribute({
+        model: {
+            name: 'table',
+            key: 'tableAlignment',
+            values: ['left', 'center', 'right']
+        },
+        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')
+        // Support for the `float:*;` CSS definition for the table alignment.
+        .attributeToAttribute({
+        view: {
+            name: /^(table|figure)$/,
+            styles: {
+                float: FLOAT_VALUES_REG_EXP
+            }
+        },
+        model: {
+            key: 'tableAlignment',
+            value: (viewElement, conversionApi, data) => {
+                // Ignore other figure elements.
+                if (viewElement.name == 'figure' && !viewElement.hasClass('table')) {
+                    return;
+                }
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, '', data);
+                let align = viewElement.getStyle('float');
+                // CSS: `float:none` => Model: `alignment:center`.
+                if (align === 'none') {
+                    align = 'center';
+                }
+                if (align !== localDefaultValue) {
+                    return align;
+                }
+                // Consume the style even if not applied to the element so it won't be processed by other converters.
+                conversionApi.consumable.consume(viewElement, { styles: 'float' });
+            }
+        }
+    })
+        // 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) => {
+                // Ignore other figure elements.
+                if (viewElement.name == 'figure' && !viewElement.hasClass('table')) {
+                    return;
+                }
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, '', data);
+                const align = 'center';
+                if (align !== localDefaultValue) {
+                    return align;
+                }
+                // Consume the styles even if not applied to the element so it won't be processed by other converters.
+                conversionApi.consumable.consume(viewElement, { styles: ['margin-left', 'margin-right'] });
+            }
+        }
+    })
+        // Support for the `align` attribute as the backward compatibility while pasting from other sources.
+        .attributeToAttribute({
+        view: {
+            name: 'table',
+            attributes: {
+                align: ALIGN_VALUES_REG_EXP
+            }
+        },
+        model: {
+            key: 'tableAlignment',
+            value: (viewElement, conversionApi, data) => {
+                const localDefaultValue = getDefaultValueAdjusted(defaultValue, '', data);
+                const align = viewElement.getAttribute('align');
+                if (align !== localDefaultValue) {
+                    return align;
+                }
+                // Consume the attribute even if not applied to the element so it won't be processed by other converters.
+                conversionApi.consumable.consume(viewElement, { attributes: 'align' });
+            }
+        }
+    });
+}
 /**
  * Returns a function that converts the table view representation:
  *

package/src/tableproperties/tablepropertiesuiexperimental.d.ts

@@ -0,0 +1,136 @@
+/**
+ * @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/tableproperties/tablepropertiesuiexperimental
+ */
+import { Plugin, type Editor } from 'ckeditor5/src/core.js';
+import { ButtonView, ContextualBalloon } from 'ckeditor5/src/ui.js';
+import { TablePropertiesViewExperimental } from './ui/tablepropertiesviewexperimental.js';
+/**
+ * The table properties UI plugin. It introduces the `'tableProperties'` button
+ * that opens a form allowing to specify visual styling of an entire table.
+ *
+ * It uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon plugin}.
+ */
+export declare class TablePropertiesUIExperimental extends Plugin {
+    /**
+     * The default table properties.
+     */
+    private _defaultContentTableProperties;
+    /**
+     * The default layout table properties.
+     */
+    private _defaultLayoutTableProperties;
+    /**
+     * The contextual balloon plugin instance.
+     */
+    private _balloon;
+    /**
+     * The properties form view displayed inside the balloon.
+     */
+    view: TablePropertiesViewExperimental | 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.
+     */
+    private _undoStepBatch?;
+    /**
+     * Flag used to indicate whether view is ready to execute update commands
+     * (it finished loading initial data).
+     */
+    private _isReady?;
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ContextualBalloon];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "TablePropertiesUIExperimental";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * Creates the table properties button.
+     *
+     * @internal
+     */
+    _createTablePropertiesButton(): ButtonView;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Creates the {@link module:table/tableproperties/ui/tablepropertiesview~TablePropertiesView} instance.
+     *
+     * @returns The table properties form view instance.
+     */
+    private _createPropertiesView;
+    /**
+     * In this method the "editor data -> UI" binding is happening.
+     *
+     * When executed, this method obtains selected table property values from various table commands
+     * and passes them to the {@link #view}.
+     *
+     * This way, the UI stays up–to–date with the editor data.
+     */
+    private _fillViewFormFromCommandValues;
+    /**
+     * Shows the {@link #view} in the {@link #_balloon}.
+     *
+     * **Note**: Each time a view is shown, the new {@link #_undoStepBatch} is created that contains
+     * all changes made to the document when the view is visible, allowing a single undo step
+     * for all of them.
+     */
+    protected _showView(): void;
+    /**
+     * Removes the {@link #view} from the {@link #_balloon}.
+     */
+    protected _hideView(): void;
+    /**
+     * Repositions the {@link #_balloon} or hides the {@link #view} if a table is no longer selected.
+     */
+    protected _updateView(): void;
+    /**
+     * Returns `true` when the {@link #view} is the visible in the {@link #_balloon}.
+     */
+    private get _isViewVisible();
+    /**
+     * Returns `true` when the {@link #view} is in the {@link #_balloon}.
+     */
+    private get _isViewInBalloon();
+    /**
+     * Creates a callback that when executed upon {@link #view view's} property change
+     * executes a related editor command with the new property value.
+     *
+     * If new value will be set to the default value, the command will not be executed.
+     *
+     * @param commandName The command that will be executed.
+     */
+    private _getPropertyChangeCallback;
+    /**
+     * Creates a callback that when executed upon {@link #view view's} property change:
+     * * executes a related editor command with the new property value if the value is valid,
+     * * or sets the error text next to the invalid field, if the value did not pass the validation.
+     */
+    private _getValidatedPropertyChangeCallback;
+}