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

package/lang/contexts.json

@@ -33,7 +33,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.",
@@ -58,9 +57,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-20251215.0",
+  "version": "0.0.0-nightly-next-20251215.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-20251215.0",
-    "@ckeditor/ckeditor5-clipboard": "0.0.0-nightly-20251215.0",
-    "@ckeditor/ckeditor5-core": "0.0.0-nightly-20251215.0",
-    "@ckeditor/ckeditor5-engine": "0.0.0-nightly-20251215.0",
-    "@ckeditor/ckeditor5-icons": "0.0.0-nightly-20251215.0",
-    "@ckeditor/ckeditor5-ui": "0.0.0-nightly-20251215.0",
-    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-20251215.0",
-    "@ckeditor/ckeditor5-widget": "0.0.0-nightly-20251215.0",
+    "ckeditor5": "0.0.0-nightly-next-20251215.0",
+    "@ckeditor/ckeditor5-clipboard": "0.0.0-nightly-next-20251215.0",
+    "@ckeditor/ckeditor5-core": "0.0.0-nightly-next-20251215.0",
+    "@ckeditor/ckeditor5-engine": "0.0.0-nightly-next-20251215.0",
+    "@ckeditor/ckeditor5-icons": "0.0.0-nightly-next-20251215.0",
+    "@ckeditor/ckeditor5-ui": "0.0.0-nightly-next-20251215.0",
+    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-next-20251215.0",
+    "@ckeditor/ckeditor5-widget": "0.0.0-nightly-next-20251215.0",
     "es-toolkit": "1.39.5"
   },
   "author": "CKSource (http://cksource.com/)",

package/src/augmentation.d.ts

@@ -15,13 +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;
     }
 }
 declare module '@ckeditor/ckeditor5-core' {

package/src/converters/downcast.js

@@ -162,10 +162,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);
@@ -176,10 +173,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') {
@@ -264,10 +258,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/ui/tablecellpropertiesview.d.ts

@@ -147,6 +147,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.
      */
@@ -218,6 +222,10 @@ export declare class TableCellPropertiesView extends View {
      * * {@link #cancelButtonView}.
      */
     private _createActionButtons;
+    /**
+     * Creates a back button view that cancels the form.
+     */
+    private _createBackButton;
     /**
      * Provides localized labels for {@link #horizontalAlignmentToolbar} buttons.
      */

package/src/tablecellproperties/ui/tablecellpropertiesview.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 { KeystrokeHandler, FocusTracker } from 'ckeditor5/src/utils.js';
-import { IconAlignBottom, IconAlignCenter, IconAlignJustify, IconAlignLeft, IconAlignMiddle, IconAlignRight, IconAlignTop, IconCancel, IconCheck } from 'ckeditor5/src/icons.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';
@@ -79,6 +79,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.
      */
@@ -132,6 +136,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,9 +150,11 @@ 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,
@@ -204,8 +211,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'
         }));
@@ -248,8 +255,9 @@ export class TableCellPropertiesView extends View {
             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);
@@ -558,8 +566,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 +575,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 +582,21 @@ 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;
+    }
     /**
      * Provides localized labels for {@link #horizontalAlignmentToolbar} buttons.
      */

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;
 }

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.
      */