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

package/lang/contexts.json

@@ -36,7 +36,6 @@
 	"Dimensions": "The label describing a group of form fields that allows setting dimensions of a table or a table cell.",
 	"Table cell text alignment": "The label for the group of toolbars that allows configuring the text alignment in a table cell.",
 	"Table Alignment": "The label for the toolbar that allows configuring the alignment of a table.",
-	"Alignment": "The label for the toolbar that allows configuring the alignment of a table.",
 	"Horizontal text alignment toolbar": "The label used by assistive technologies describing a toolbar that allows configuring the horizontal text alignment in a table cell.",
 	"Vertical text alignment toolbar": "The label used by assistive technologies describing a toolbar that allows configuring the vertical text alignment in a table cell.",
 	"Table alignment toolbar": "The label used by assistive technologies describing a toolbar that allows configuring the alignment of a table.",
@@ -61,9 +60,6 @@
 	"Align table to the right with text wrapping": "The label used by assistive technologies describing a button that aligns the table to the right as an inline element, allowing text to wrap around it.",
 	"Align table to the left with no text wrapping": "The label used by assistive technologies describing a button that aligns the table to the left as a block element with no text wrapping.",
 	"Align table to the right with no text wrapping": "The label used by assistive technologies describing a button that aligns the table to the right as a block element with no text wrapping.",
-	"Align table to the left": "The label used by assistive technologies describing a button that aligns the table to the left.",
-	"Center table": "The label used by assistive technologies describing a button that centers the table.",
-	"Align table to the right": "The label used by assistive technologies describing a button that aligns the table to the right.",
 	"The color is invalid. Try \"#FF0000\" or \"rgb(255,0,0)\" or \"red\".": "The localized error string that can be displayed next to color (background, border) fields that have an invalid value",
 	"The value is invalid. Try \"10px\" or \"2em\" or simply \"2\".": "The localized error string that can be displayed next to length (padding, border width) fields that have an invalid value.",
 	"Enter table caption": "The placeholder text for the table caption displayed when the caption is empty.",

package/package.json

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

package/src/augmentation.d.ts

@@ -15,21 +15,6 @@ declare module '@ckeditor/ckeditor5-engine' {
          * This will be enabled by default in the future CKEditor 5 releases.
          */
         upcastTableBorderZeroAttributes?: boolean;
-        /**
-         * When enabled, the the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing table properties feature}
-         * will support extended alignment options for tables, i.e. `blockLeft` and `blockRight`, using CSS `margin` property.
-         *
-         * This will be enabled by default in the future CKEditor 5 releases.
-         */
-        useExtendedTableBlockAlignment?: boolean;
-        /**
-         * When enabled, the
-         * {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing table cell properties feature}
-         * will introduce a special selector for table cell types (i.e. header and data cells) in the cell properties dropdown.
-         *
-         * This will be enabled by default in the future CKEditor 5 releases.
-         */
-        tableCellTypeSupport?: boolean;
     }
 }
 declare module '@ckeditor/ckeditor5-core' {

package/src/converters/downcast.js

@@ -174,10 +174,7 @@ function hasAnyAttribute(element) {
  */
 export function convertPlainTable(editor) {
     return (table, conversionApi) => {
-        const hasPlainTableOutput = editor.plugins.has('PlainTableOutput');
-        const isClipboardPipeline = conversionApi.options.isClipboardPipeline;
-        const useExtendedAlignment = editor.config.get('experimentalFlags.useExtendedTableBlockAlignment');
-        if (!hasPlainTableOutput && !(useExtendedAlignment && isClipboardPipeline)) {
+        if (!conversionApi.options.isClipboardPipeline && !editor.plugins.has('PlainTableOutput')) {
             return null;
         }
         return downcastPlainTable(table, conversionApi, editor);
@@ -188,10 +185,7 @@ export function convertPlainTable(editor) {
  */
 export function convertPlainTableCaption(editor) {
     return (modelElement, { writer, options }) => {
-        const hasPlainTableOutput = editor.plugins.has('PlainTableOutput');
-        const isClipboardPipeline = options.isClipboardPipeline;
-        const useExtendedAlignment = editor.config.get('experimentalFlags.useExtendedTableBlockAlignment');
-        if (!hasPlainTableOutput && !(useExtendedAlignment && isClipboardPipeline)) {
+        if (!options.isClipboardPipeline && !editor.plugins.has('PlainTableOutput')) {
             return null;
         }
         if (modelElement.parent.name === 'table') {
@@ -276,10 +270,7 @@ export function downcastTableBorderAndBackgroundAttributes(editor) {
             return dispatcher.on(`attribute:${modelAttribute}:table`, (evt, data, conversionApi) => {
                 const { item, attributeNewValue } = data;
                 const { mapper, writer } = conversionApi;
-                const hasPlainTableOutput = editor.plugins.has('PlainTableOutput');
-                const isClipboardPipeline = conversionApi.options.isClipboardPipeline;
-                const useExtendedAlignment = editor.config.get('experimentalFlags.useExtendedTableBlockAlignment');
-                if (!hasPlainTableOutput && !(useExtendedAlignment && isClipboardPipeline)) {
+                if (!conversionApi.options.isClipboardPipeline && !editor.plugins.has('PlainTableOutput')) {
                     return;
                 }
                 if (!conversionApi.consumable.consume(item, evt.name)) {

package/src/index.d.ts

@@ -34,10 +34,6 @@ export { TableUtils, type TableIndexesObject } from './tableutils.js';
 export { TableColumnResize } from './tablecolumnresize.js';
 export { TableColumnResizeEditing } from './tablecolumnresize/tablecolumnresizeediting.js';
 export { TableWidthsCommand, type TableWidthsCommandOptions } from './tablecolumnresize/tablewidthscommand.js';
-export { TablePropertiesUIExperimental } from './tableproperties/tablepropertiesuiexperimental.js';
-export { TablePropertiesViewExperimental, type TablePropertiesViewOptionsExperimental } from './tableproperties/ui/tablepropertiesviewexperimental.js';
-export { TableCellPropertiesUIExperimental } from './tablecellproperties/tablecellpropertiesuiexperimental.js';
-export { TableCellPropertiesViewExperimental, type TableCellPropertiesViewOptionsExperimental } from './tablecellproperties/ui/tablecellpropertiesviewexperimental.js';
 export { InsertColumnCommand } from './commands/insertcolumncommand.js';
 export { InsertRowCommand } from './commands/insertrowcommand.js';
 export { InsertTableCommand } from './commands/inserttablecommand.js';

package/src/index.js

@@ -34,11 +34,6 @@ export { TableUtils } from './tableutils.js';
 export { TableColumnResize } from './tablecolumnresize.js';
 export { TableColumnResizeEditing } from './tablecolumnresize/tablecolumnresizeediting.js';
 export { TableWidthsCommand } from './tablecolumnresize/tablewidthscommand.js';
-// [experimental] Remove in the v48.
-export { TablePropertiesUIExperimental } from './tableproperties/tablepropertiesuiexperimental.js';
-export { TablePropertiesViewExperimental } from './tableproperties/ui/tablepropertiesviewexperimental.js';
-export { TableCellPropertiesUIExperimental } from './tablecellproperties/tablecellpropertiesuiexperimental.js';
-export { TableCellPropertiesViewExperimental } from './tablecellproperties/ui/tablecellpropertiesviewexperimental.js';
 export { InsertColumnCommand } from './commands/insertcolumncommand.js';
 export { InsertRowCommand } from './commands/insertrowcommand.js';
 export { InsertTableCommand } from './commands/inserttablecommand.js';

package/src/tablecellproperties/tablecellpropertiesediting.js

@@ -129,10 +129,8 @@ export class TableCellPropertiesEditing extends Plugin {
         editor.commands.add('tableCellHorizontalAlignment', new TableCellHorizontalAlignmentCommand(editor, defaultTableCellProperties.horizontalAlignment));
         enableVerticalAlignmentProperty(schema, conversion, defaultTableCellProperties.verticalAlignment);
         editor.commands.add('tableCellVerticalAlignment', new TableCellVerticalAlignmentCommand(editor, defaultTableCellProperties.verticalAlignment));
-        if (editor.config.get('experimentalFlags.tableCellTypeSupport')) {
-            enableCellTypeProperty(editor);
-            editor.commands.add('tableCellType', new TableCellTypeCommand(editor));
-        }
+        enableCellTypeProperty(editor);
+        editor.commands.add('tableCellType', new TableCellTypeCommand(editor));
     }
 }
 /**

package/src/tablecellproperties/tablecellpropertiesui.js

@@ -25,7 +25,8 @@ const propertyToCommandMap = {
     padding: 'tableCellPadding',
     backgroundColor: 'tableCellBackgroundColor',
     horizontalAlignment: 'tableCellHorizontalAlignment',
-    verticalAlignment: 'tableCellVerticalAlignment'
+    verticalAlignment: 'tableCellVerticalAlignment',
+    cellType: 'tableCellType'
 };
 /**
  * The table cell properties UI plugin. It introduces the `'tableCellProperties'` button
@@ -124,8 +125,10 @@ export class TableCellPropertiesUI extends Plugin {
                 tooltip: true
             });
             this.listenTo(view, 'execute', () => this._showView());
-            const commands = Object.values(propertyToCommandMap)
-                .map(commandName => editor.commands.get(commandName));
+            const commands = (Object
+                .values(propertyToCommandMap)
+                .map(commandName => editor.commands.get(commandName))
+                .filter(val => !!val));
             view.bind('isEnabled').toMany(commands, 'isEnabled', (...areEnabled) => (areEnabled.some(isCommandEnabled => isCommandEnabled)));
             return view;
         });
@@ -231,6 +234,11 @@ export class TableCellPropertiesUI extends Plugin {
         }));
         view.on('change:horizontalAlignment', this._getPropertyChangeCallback('tableCellHorizontalAlignment'));
         view.on('change:verticalAlignment', this._getPropertyChangeCallback('tableCellVerticalAlignment'));
+        const cellTypeCommand = editor.commands.get('tableCellType');
+        if (cellTypeCommand) {
+            view.cellTypeDropdown.bind('isEnabled').to(cellTypeCommand, 'isEnabled');
+            view.on('change:cellType', this._getPropertyChangeCallback('tableCellType'));
+        }
         return view;
     }
     /**
@@ -244,16 +252,28 @@ export class TableCellPropertiesUI extends Plugin {
     _fillViewFormFromCommandValues() {
         const commands = this.editor.commands;
         const borderStyleCommand = commands.get('tableCellBorderStyle');
-        Object.entries(propertyToCommandMap)
-            .map(([property, commandName]) => {
+        Object
+            .entries(propertyToCommandMap)
+            .flatMap(([property, commandName]) => {
+            const command = commands.get(commandName);
+            if (!command) {
+                return [];
+            }
             const propertyKey = property;
-            const defaultValue = this.view === this._viewWithContentTableDefaults ?
-                this._defaultContentTableCellProperties[propertyKey] || '' :
-                this._defaultLayoutTableCellProperties[propertyKey] || '';
-            return [
+            let defaultValue;
+            if (propertyKey === 'cellType') {
+                defaultValue = '';
+            }
+            else {
+                defaultValue = this.view === this._viewWithContentTableDefaults ?
+                    this._defaultContentTableCellProperties[propertyKey] || '' :
+                    this._defaultLayoutTableCellProperties[propertyKey] || '';
+            }
+            const entry = [
                 property,
-                commands.get(commandName).value || defaultValue
+                command.value || defaultValue
             ];
+            return [entry];
         })
             .forEach(([property, value]) => {
             // Do not set the `border-color` and `border-width` fields if `border-style:none`.

package/src/tablecellproperties/ui/tablecellpropertiesview.d.ts

@@ -87,6 +87,13 @@ export declare class TableCellPropertiesView extends View {
      * @default ''
      */
     verticalAlignment: string;
+    /**
+     * The type of the table cell ('data' or 'header').
+     *
+     * @observable
+     * @default ''
+     */
+    cellType: string;
     /**
      * Options passed to the view. See {@link #constructor} to learn more.
      */
@@ -119,6 +126,10 @@ export declare class TableCellPropertiesView extends View {
      * An input that allows specifying the table cell background color.
      */
     readonly backgroundInput: LabeledFieldView<ColorInputView>;
+    /**
+     * A dropdown that allows selecting the type of the table cell (data or header).
+     */
+    readonly cellTypeDropdown: LabeledFieldView<FocusableView>;
     /**
      * An input that allows specifying the table cell padding.
      */
@@ -147,6 +158,10 @@ export declare class TableCellPropertiesView extends View {
      * The "Cancel" button view.
      */
     cancelButtonView: ButtonView;
+    /**
+     * The "Back" button view.
+     */
+    backButtonView: ButtonView;
     /**
      * A collection of views that can be focused in the form.
      */
@@ -191,6 +206,14 @@ export declare class TableCellPropertiesView extends View {
      * * {@link #backgroundInput}.
      */
     private _createBackgroundFields;
+    /**
+     * Create cell type field.
+     *
+     * * {@link #cellTypeDropdown}.
+     *
+     * @internal
+     */
+    private _createCellTypeField;
     /**
      * Creates the following form fields:
      *
@@ -218,6 +241,14 @@ export declare class TableCellPropertiesView extends View {
      * * {@link #cancelButtonView}.
      */
     private _createActionButtons;
+    /**
+     * Creates a back button view that cancels the form.
+     */
+    private _createBackButton;
+    /**
+     * Creates the cell type dropdown definitions.
+     */
+    private _getCellTypeDefinitions;
     /**
      * Provides localized labels for {@link #horizontalAlignmentToolbar} buttons.
      */
@@ -226,4 +257,8 @@ export declare class TableCellPropertiesView extends View {
      * Provides localized labels for {@link #verticalAlignmentToolbar} buttons.
      */
     private get _verticalAlignmentLabels();
+    /**
+     * Provides localized labels for {@link #cellTypeDropdown}.
+     */
+    private get _cellTypeLabels();
 }

package/src/tablecellproperties/ui/tablecellpropertiesview.js

@@ -5,9 +5,9 @@
 /**
  * @module table/tablecellproperties/ui/tablecellpropertiesview
  */
-import { addListToDropdown, ButtonView, createLabeledDropdown, createLabeledInputText, FocusCycler, FormRowView, FormHeaderView, LabeledFieldView, LabelView, submitHandler, ToolbarView, View, ViewCollection } from 'ckeditor5/src/ui.js';
-import { KeystrokeHandler, FocusTracker } from 'ckeditor5/src/utils.js';
-import { IconAlignBottom, IconAlignCenter, IconAlignJustify, IconAlignLeft, IconAlignMiddle, IconAlignRight, IconAlignTop, IconCancel, IconCheck } from 'ckeditor5/src/icons.js';
+import { addListToDropdown, ButtonView, createLabeledDropdown, createLabeledInputText, FocusCycler, FormRowView, FormHeaderView, LabeledFieldView, LabelView, submitHandler, ToolbarView, UIModel, View, ViewCollection } from 'ckeditor5/src/ui.js';
+import { Collection, KeystrokeHandler, FocusTracker } from 'ckeditor5/src/utils.js';
+import { IconAlignBottom, IconAlignCenter, IconAlignJustify, IconAlignLeft, IconAlignMiddle, IconAlignRight, IconAlignTop, 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';
@@ -51,6 +51,10 @@ export class TableCellPropertiesView extends View {
      * An input that allows specifying the table cell background color.
      */
     backgroundInput;
+    /**
+     * A dropdown that allows selecting the type of the table cell (data or header).
+     */
+    cellTypeDropdown;
     /**
      * An input that allows specifying the table cell padding.
      */
@@ -79,6 +83,10 @@ export class TableCellPropertiesView extends View {
      * The "Cancel" button view.
      */
     cancelButtonView;
+    /**
+     * The "Back" button view.
+     */
+    backButtonView;
     /**
      * A collection of views that can be focused in the form.
      */
@@ -107,11 +115,13 @@ export class TableCellPropertiesView extends View {
             width: '',
             height: '',
             horizontalAlignment: '',
-            verticalAlignment: ''
+            verticalAlignment: '',
+            cellType: ''
         });
         this.options = options;
         const { borderStyleDropdown, borderWidthInput, borderColorInput, borderRowLabel } = this._createBorderFields();
         const { backgroundRowLabel, backgroundInput } = this._createBackgroundFields();
+        const { cellTypeRowLabel, cellTypeDropdown } = this._createCellTypeField();
         const { widthInput, operatorLabel, heightInput, dimensionsLabel } = this._createDimensionFields();
         const { horizontalAlignmentToolbar, verticalAlignmentToolbar, alignmentLabel } = this._createAlignmentFields();
         this.focusTracker = new FocusTracker();
@@ -121,6 +131,7 @@ export class TableCellPropertiesView extends View {
         this.borderWidthInput = borderWidthInput;
         this.borderColorInput = borderColorInput;
         this.backgroundInput = backgroundInput;
+        this.cellTypeDropdown = cellTypeDropdown;
         this.paddingInput = this._createPaddingField();
         this.widthInput = widthInput;
         this.heightInput = heightInput;
@@ -132,6 +143,7 @@ export class TableCellPropertiesView 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,
@@ -145,28 +157,42 @@ export class TableCellPropertiesView extends View {
             }
         });
         // Form header.
-        this.children.add(new FormHeaderView(locale, {
+        const header = new FormHeaderView(locale, {
             label: this.t('Cell properties')
-        }));
+        });
+        header.children.add(this.backButtonView, 0);
+        this.children.add(header);
         // Border row.
         this.children.add(new FormRowView(locale, {
             labelView: borderRowLabel,
             children: [
                 borderRowLabel,
                 borderStyleDropdown,
-                borderColorInput,
-                borderWidthInput
+                borderWidthInput,
+                borderColorInput
             ],
             class: 'ck-table-form__border-row'
         }));
-        // Background.
+        // Background and cell type.
         this.children.add(new FormRowView(locale, {
-            labelView: backgroundRowLabel,
             children: [
-                backgroundRowLabel,
-                backgroundInput
-            ],
-            class: 'ck-table-form__background-row'
+                new FormRowView(locale, {
+                    labelView: cellTypeRowLabel,
+                    children: [
+                        cellTypeRowLabel,
+                        cellTypeDropdown
+                    ],
+                    class: 'ck-table-form__cell-type-row'
+                }),
+                new FormRowView(locale, {
+                    labelView: backgroundRowLabel,
+                    children: [
+                        backgroundRowLabel,
+                        backgroundInput
+                    ],
+                    class: 'ck-table-form__background-row'
+                })
+            ]
         }));
         // Dimensions row and padding.
         this.children.add(new FormRowView(locale, {
@@ -204,8 +230,8 @@ export class TableCellPropertiesView extends View {
         // Action row.
         this.children.add(new FormRowView(locale, {
             children: [
-                this.saveButtonView,
-                this.cancelButtonView
+                this.cancelButtonView,
+                this.saveButtonView
             ],
             class: 'ck-table-form__action-row'
         }));
@@ -242,14 +268,16 @@ export class TableCellPropertiesView extends View {
             this.borderStyleDropdown,
             this.borderColorInput,
             this.borderWidthInput,
+            this.cellTypeDropdown,
             this.backgroundInput,
             this.widthInput,
             this.heightInput,
             this.paddingInput,
             this.horizontalAlignmentToolbar,
             this.verticalAlignmentToolbar,
+            this.cancelButtonView,
             this.saveButtonView,
-            this.cancelButtonView
+            this.backButtonView
         ].forEach(view => {
             // Register the view as focusable.
             this._focusables.add(view);
@@ -399,6 +427,47 @@ export class TableCellPropertiesView extends View {
             backgroundInput
         };
     }
+    /**
+     * Create cell type field.
+     *
+     * * {@link #cellTypeDropdown}.
+     *
+     * @internal
+     */
+    _createCellTypeField() {
+        const locale = this.locale;
+        const t = this.t;
+        const cellTypeRowLabel = new LabelView(locale);
+        cellTypeRowLabel.text = t('Cell type');
+        const cellTypeLabels = this._cellTypeLabels;
+        const cellTypeDropdown = new LabeledFieldView(locale, createLabeledDropdown);
+        cellTypeDropdown.set({
+            label: t('Cell type'),
+            class: 'ck-table-cell-properties-form__cell-type'
+        });
+        cellTypeDropdown.fieldView.buttonView.set({
+            ariaLabel: t('Cell type'),
+            ariaLabelledBy: undefined,
+            isOn: false,
+            withText: true,
+            tooltip: t('Cell type')
+        });
+        cellTypeDropdown.fieldView.buttonView.bind('label').to(this, 'cellType', value => {
+            return cellTypeLabels[value || 'data'];
+        });
+        cellTypeDropdown.fieldView.on('execute', evt => {
+            this.cellType = evt.source._cellTypeValue;
+        });
+        cellTypeDropdown.bind('isEmpty').to(this, 'cellType', value => !value);
+        addListToDropdown(cellTypeDropdown.fieldView, this._getCellTypeDefinitions(), {
+            role: 'menu',
+            ariaLabel: t('Cell type')
+        });
+        return {
+            cellTypeRowLabel,
+            cellTypeDropdown
+        };
+    }
     /**
      * Creates the following form fields:
      *
@@ -496,7 +565,8 @@ export class TableCellPropertiesView extends View {
         horizontalAlignmentToolbar.set({
             isCompact: true,
             role: 'radiogroup',
-            ariaLabel: t('Horizontal text alignment toolbar')
+            ariaLabel: t('Horizontal text alignment toolbar'),
+            class: 'ck-table-cell-properties-form__horizontal-alignment-toolbar'
         });
         fillToolbar({
             view: this,
@@ -523,7 +593,8 @@ export class TableCellPropertiesView extends View {
         verticalAlignmentToolbar.set({
             isCompact: true,
             role: 'radiogroup',
-            ariaLabel: t('Vertical text alignment toolbar')
+            ariaLabel: t('Vertical text alignment toolbar'),
+            class: 'ck-table-cell-properties-form__vertical-alignment-toolbar'
         });
         fillToolbar({
             view: this,
@@ -558,8 +629,7 @@ export class TableCellPropertiesView extends View {
         ];
         saveButtonView.set({
             label: t('Save'),
-            icon: IconCheck,
-            class: 'ck-button-save',
+            class: 'ck-button-action',
             type: 'submit',
             withText: true
         });
@@ -568,8 +638,6 @@ export class TableCellPropertiesView extends View {
         });
         cancelButtonView.set({
             label: t('Cancel'),
-            icon: IconCancel,
-            class: 'ck-button-cancel',
             withText: true
         });
         cancelButtonView.delegate('execute').to(this, 'cancel');
@@ -577,6 +645,42 @@ export class TableCellPropertiesView 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;
+    }
+    /**
+     * Creates the cell type dropdown definitions.
+     */
+    _getCellTypeDefinitions() {
+        const itemDefinitions = new Collection();
+        const cellTypeLabels = this._cellTypeLabels;
+        for (const type of ['data', 'header']) {
+            const definition = {
+                type: 'button',
+                model: new UIModel({
+                    _cellTypeValue: type,
+                    label: cellTypeLabels[type],
+                    role: 'menuitemradio',
+                    withText: true
+                })
+            };
+            definition.model.bind('isOn').to(this, 'cellType', value => value === type);
+            itemDefinitions.add(definition);
+        }
+        return itemDefinitions;
+    }
     /**
      * Provides localized labels for {@link #horizontalAlignmentToolbar} buttons.
      */
@@ -606,6 +710,16 @@ export class TableCellPropertiesView extends View {
             bottom: t('Align cell text to the bottom')
         };
     }
+    /**
+     * Provides localized labels for {@link #cellTypeDropdown}.
+     */
+    get _cellTypeLabels() {
+        const t = this.t;
+        return {
+            data: t('Data cell'),
+            header: t('Header cell')
+        };
+    }
 }
 function isBorderStyleSet(value) {
     return value !== 'none';

package/src/tableconfig.d.ts

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