@ckeditor/ckeditor5-table 0.0.0-nightly-20251218.0 → 0.0.0-nightly-next-20251218.0

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') !== false;
+        const useInlineStyles = editor.config.get('table.tableProperties.alignment.useInlineStyles') === true;
         editor.data.addStyleProcessorRules(addMarginStylesRules);
         editor.data.addStyleProcessorRules(addBorderStylesRules);
         enableBorderProperties(editor, {
@@ -90,12 +90,7 @@ 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));
-        if (editor.config.get('experimentalFlags.useExtendedTableBlockAlignment')) {
-            enableExtendedAlignmentProperty(schema, conversion, defaultTableProperties.alignment, useInlineStyles);
-        }
-        else {
-            enableAlignmentProperty(schema, conversion, defaultTableProperties.alignment);
-        }
+        enableAlignmentProperty(schema, conversion, defaultTableProperties.alignment, useInlineStyles);
         editor.commands.add('tableAlignment', new TableAlignmentCommand(editor, defaultTableProperties.alignment));
         enableTableToFigureProperty(schema, conversion, {
             modelAttribute: 'tableWidth',
@@ -122,18 +117,16 @@ export class TablePropertiesEditing extends Plugin {
             defaultValue: defaultTableProperties.backgroundColor
         });
         editor.commands.add('tableBackgroundColor', new TableBackgroundColorCommand(editor, defaultTableProperties.backgroundColor));
-        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' });
-        }
+        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' });
     }
 }
 /**
@@ -194,11 +187,11 @@ function enableBorderProperties(editor, defaultBorder) {
     downcastTableAttribute(conversion, { modelAttribute: modelAttributes.width, styleName: 'border-width' });
 }
 /**
- * Enables the extended block`'alignment'` attribute for table.
+ * Enables the `'alignment'` attribute for table.
  *
  * @param defaultValue The default alignment value.
  */
-function enableExtendedAlignmentProperty(schema, conversion, defaultValue, useInlineStyles) {
+function enableAlignmentProperty(schema, conversion, defaultValue, useInlineStyles) {
     schema.extend('table', {
         allowAttributes: ['tableAlignment']
     });
@@ -289,132 +282,6 @@ function enableExtendedAlignmentProperty(schema, conversion, defaultValue, useIn
     });
     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/ui/tablepropertiesview.d.ts

@@ -142,6 +142,10 @@ export declare class TablePropertiesView extends View {
      * The "Cancel" button view.
      */
     cancelButtonView: ButtonView;
+    /**
+     * The Back button view displayed in the header.
+     */
+    backButtonView: ButtonView;
     /**
      * A collection of views that can be focused in the form.
      */
@@ -201,6 +205,10 @@ export declare class TablePropertiesView extends View {
      * * {@link #cancelButtonView}.
      */
     private _createActionButtons;
+    /**
+     * Creates a back button view that cancels the form.
+     */
+    private _createBackButton;
     /**
      * Provides localized labels for {@link #alignmentToolbar} buttons.
      */

package/src/tableproperties/ui/tablepropertiesview.js

@@ -7,7 +7,7 @@
  */
 import { addListToDropdown, ButtonView, createLabeledDropdown, createLabeledInputText, FocusCycler, FormRowView, FormHeaderView, LabeledFieldView, LabelView, submitHandler, ToolbarView, View, ViewCollection } from 'ckeditor5/src/ui.js';
 import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils.js';
-import { IconCancel, IconCheck, IconObjectCenter, IconObjectInlineLeft, IconObjectInlineRight } from 'ckeditor5/src/icons.js';
+import { IconObjectCenter, IconObjectInlineLeft, IconObjectInlineRight, IconObjectLeft, IconObjectRight, IconPreviousArrow } from 'ckeditor5/src/icons.js';
 import { fillToolbar, getBorderStyleDefinitions, getBorderStyleLabels, getLabeledColorInputCreator } from '../../utils/ui/table-properties.js';
 // eslint-disable-next-line ckeditor5-rules/ckeditor-imports
 import '@ckeditor/ckeditor5-ui/theme/components/form/form.css';
@@ -71,6 +71,10 @@ export class TablePropertiesView extends View {
      * The "Cancel" button view.
      */
     cancelButtonView;
+    /**
+     * The Back button view displayed in the header.
+     */
+    backButtonView;
     /**
      * A collection of views that can be focused in the form.
      */
@@ -115,6 +119,7 @@ export class TablePropertiesView extends View {
         const { saveButtonView, cancelButtonView } = this._createActionButtons();
         this.saveButtonView = saveButtonView;
         this.cancelButtonView = cancelButtonView;
+        this.backButtonView = this._createBackButton();
         this._focusables = new ViewCollection();
         this._focusCycler = new FocusCycler({
             focusables: this._focusables,
@@ -128,29 +133,22 @@ export class TablePropertiesView extends View {
             }
         });
         // Form header.
-        this.children.add(new FormHeaderView(locale, {
+        const headerView = new FormHeaderView(locale, {
             label: this.t('Table properties')
-        }));
+        });
+        headerView.children.add(this.backButtonView, 0);
+        this.children.add(headerView);
         // Border row.
         this.children.add(new FormRowView(locale, {
             labelView: borderRowLabel,
             children: [
                 borderRowLabel,
                 borderStyleDropdown,
-                borderColorInput,
-                borderWidthInput
+                borderWidthInput,
+                borderColorInput
             ],
             class: 'ck-table-form__border-row'
         }));
-        // Background row.
-        this.children.add(new FormRowView(locale, {
-            labelView: backgroundRowLabel,
-            children: [
-                backgroundRowLabel,
-                backgroundInput
-            ],
-            class: 'ck-table-form__background-row'
-        }));
         this.children.add(new FormRowView(locale, {
             children: [
                 // Dimensions row.
@@ -164,22 +162,31 @@ export class TablePropertiesView extends View {
                     ],
                     class: 'ck-table-form__dimensions-row'
                 }),
-                // Alignment row.
+                // Background row.
                 new FormRowView(locale, {
-                    labelView: alignmentLabel,
+                    labelView: backgroundRowLabel,
                     children: [
-                        alignmentLabel,
-                        alignmentToolbar
+                        backgroundRowLabel,
+                        backgroundInput
                     ],
-                    class: 'ck-table-properties-form__alignment-row'
+                    class: 'ck-table-form__background-row'
                 })
             ]
         }));
+        // Alignment row.
+        this.children.add(new FormRowView(locale, {
+            labelView: alignmentLabel,
+            children: [
+                alignmentLabel,
+                alignmentToolbar
+            ],
+            class: 'ck-table-properties-form__alignment-row'
+        }));
         // Action row.
         this.children.add(new FormRowView(locale, {
             children: [
-                this.saveButtonView,
-                this.cancelButtonView
+                this.cancelButtonView,
+                this.saveButtonView
             ],
             class: 'ck-table-form__action-row'
         }));
@@ -214,14 +221,15 @@ export class TablePropertiesView extends View {
         });
         [
             this.borderStyleDropdown,
-            this.borderColorInput,
             this.borderWidthInput,
-            this.backgroundInput,
+            this.borderColorInput,
             this.widthInput,
             this.heightInput,
+            this.backgroundInput,
             this.alignmentToolbar,
+            this.cancelButtonView,
             this.saveButtonView,
-            this.cancelButtonView
+            this.backButtonView
         ].forEach(view => {
             // Register the view as focusable.
             this._focusables.add(view);
@@ -433,7 +441,7 @@ export class TablePropertiesView extends View {
         const t = this.t;
         // -- Label ---------------------------------------------------
         const alignmentLabel = new LabelView(locale);
-        alignmentLabel.text = t('Alignment');
+        alignmentLabel.text = t('Table Alignment');
         // -- Toolbar ---------------------------------------------------
         const alignmentToolbar = new ToolbarView(locale);
         alignmentToolbar.set({
@@ -446,7 +454,9 @@ export class TablePropertiesView extends View {
             icons: {
                 left: IconObjectInlineLeft,
                 center: IconObjectCenter,
-                right: IconObjectInlineRight
+                right: IconObjectInlineRight,
+                blockLeft: IconObjectLeft,
+                blockRight: IconObjectRight
             },
             toolbar: alignmentToolbar,
             labels: this._alignmentLabels,
@@ -478,8 +488,7 @@ export class TablePropertiesView extends View {
         ];
         saveButtonView.set({
             label: t('Save'),
-            icon: IconCheck,
-            class: 'ck-button-save',
+            class: 'ck-button-action',
             type: 'submit',
             withText: true
         });
@@ -488,8 +497,6 @@ export class TablePropertiesView extends View {
         });
         cancelButtonView.set({
             label: t('Cancel'),
-            icon: IconCancel,
-            class: 'ck-button-cancel',
             withText: true
         });
         cancelButtonView.delegate('execute').to(this, 'cancel');
@@ -497,22 +504,37 @@ export class TablePropertiesView extends View {
             saveButtonView, cancelButtonView
         };
     }
+    /**
+     * Creates a back button view that cancels the form.
+     */
+    _createBackButton() {
+        const t = this.locale.t;
+        const backButton = new ButtonView(this.locale);
+        backButton.set({
+            class: 'ck-button-back',
+            label: t('Back'),
+            icon: IconPreviousArrow,
+            tooltip: true
+        });
+        backButton.delegate('execute').to(this, 'cancel');
+        return backButton;
+    }
     /**
      * Provides localized labels for {@link #alignmentToolbar} buttons.
      */
     get _alignmentLabels() {
         const locale = this.locale;
         const t = this.t;
-        const left = t('Align table to the left');
-        const center = t('Center table');
-        const right = t('Align table to the right');
+        const blockLeft = t('Align table to the left with no text wrapping');
+        const blockRight = t('Align table to the right with no text wrapping');
+        const left = t('Align table to the left with text wrapping');
+        const center = t('Center table with no text wrapping');
+        const right = t('Align table to the right with text wrapping');
         // Returns object with a proper order of labels.
         if (locale.uiLanguageDirection === 'rtl') {
-            return { right, center, left };
-        }
-        else {
-            return { left, center, right };
+            return { right, left, blockRight, center, blockLeft };
         }
+        return { blockLeft, center, blockRight, left, right };
     }
 }
 function isBorderStyleSet(value) {

package/src/utils/common.js

@@ -112,7 +112,6 @@ export function isEntireCellsLineHeader({ table, row, column }) {
  * @internal
  */
 export function isTableCellTypeEnabled(editor) {
-    const { model, config } = editor;
-    return (model.schema.checkAttribute('tableCell', 'tableCellType') &&
-        config.get('experimentalFlags.tableCellTypeSupport') === true);
+    const { model } = editor;
+    return model.schema.checkAttribute('tableCell', 'tableCellType');
 }

package/theme/formrow.css

@@ -5,6 +5,8 @@
 
 .ck.ck-form__row {
 	&.ck-table-form__action-row {
+		justify-content: flex-end;
+
 		& .ck-button-save,
 		& .ck-button-cancel {
 			justify-content: center;

package/theme/tableform.css

@@ -25,15 +25,11 @@
 					flex-grow: 0;
 				}
 			}
-
-			& .ck-table-form__dimension-operator {
-				flex-grow: 0;
-			}
 		}
 
 		/* Ignore labels that work as fieldset legends */
 		/* Fallback for table dimension operator */
-		& > *:not(.ck-label, .ck-table-form__dimension-operator) {
+		&:not(.ck-table-form__action-row) > *:not(.ck-label, .ck-table-form__dimension-operator) {
 			flex-grow: 1;
 		}
 	}

package/theme/tableproperties.css

@@ -3,6 +3,10 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
+:root {
+	--ck-content-table-style-spacing: 1.5em;
+}
+
 .ck.ck-table-properties-form {
 	& .ck-form__row {
 		&.ck-table-properties-form__alignment-row {
@@ -16,3 +20,59 @@
 		}
 	}
 }
+
+.ck-content {
+	& .table {
+		&.table-style-align-left {
+			float: left;
+			margin-right: var(--ck-content-table-style-spacing);
+		}
+
+		&.table-style-align-right {
+			float: right;
+			margin-left: var(--ck-content-table-style-spacing);
+		}
+
+		&.table-style-align-center {
+			margin-left: auto;
+			margin-right: auto;
+		}
+
+		&.table-style-block-align-left {
+			margin-left: 0;
+			margin-right: auto;
+		}
+
+		&.table-style-block-align-right {
+			margin-left: auto;
+			margin-right: 0;
+		}
+	}
+}
+
+.ck-editor__editable {
+	& .table.layout-table {
+		&.table-style-align-center {
+			margin-left: auto;
+			margin-right: auto;
+		}
+
+		&.table-style-align-left {
+			margin-right: var(--ck-content-table-style-spacing);
+		}
+
+		&.table-style-align-right {
+			margin-left: var(--ck-content-table-style-spacing);
+		}
+
+		&.table-style-block-align-left {
+			margin-left: 0;
+			margin-right: auto;
+		}
+
+		&.table-style-block-align-right {
+			margin-left: auto;
+			margin-right: 0;
+		}
+	}
+}

package/src/tablecellproperties/tablecellpropertiesuiexperimental.d.ts

@@ -1,128 +0,0 @@
-/**
- * @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/tablecellproperties/tablecellpropertiesuiexperimental
- */
-import { Plugin, type Editor } from 'ckeditor5/src/core.js';
-import { ContextualBalloon } from 'ckeditor5/src/ui.js';
-import { TableCellPropertiesViewExperimental } from './ui/tablecellpropertiesviewexperimental.js';
-/**
- * The table cell properties UI plugin. It introduces the `'tableCellProperties'` button
- * that opens a form allowing to specify the visual styling of a table cell.
- *
- * It uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon plugin}.
- */
-export declare class TableCellPropertiesUIExperimental extends Plugin {
-    /**
-     * The default table cell properties.
-     */
-    private _defaultContentTableCellProperties;
-    /**
-     * The default layout table cell properties.
-     */
-    private _defaultLayoutTableCellProperties;
-    /**
-     * The contextual balloon plugin instance.
-     */
-    private _balloon?;
-    /**
-     * The cell properties form view displayed inside the balloon.
-     */
-    view?: TableCellPropertiesViewExperimental | 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.
-     */
-    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(): "TableCellPropertiesUIExperimental";
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin(): true;
-    /**
-     * @inheritDoc
-     */
-    constructor(editor: Editor);
-    /**
-     * @inheritDoc
-     */
-    init(): void;
-    /**
-     * @inheritDoc
-     */
-    destroy(): void;
-    /**
-     * Creates the {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView} instance.
-     *
-     * @returns The cell properties form view instance.
-     */
-    private _createPropertiesView;
-    /**
-     * In this method the "editor data -> UI" binding is happening.
-     *
-     * When executed, this method obtains selected cell 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, a new {@link #_undoStepBatch} is created. It 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 cell is no longer selected.
-     */
-    protected _updateView(): void;
-    /**
-     * Returns `true` when the {@link #view} is 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 the {@link #view view's} property change
-     * executes a related editor command with the new property value.
-     *
-     * @param commandName The default value of the command.
-     */
-    private _getPropertyChangeCallback;
-    /**
-     * Creates a callback that when executed upon the {@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;
-}