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

package/lang/contexts.json

@@ -36,6 +36,7 @@
 	"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.",
@@ -60,6 +61,9 @@
 	"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-next-20251222.0",
+  "version": "0.0.0-nightly-20251223.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-next-20251222.0",
-    "@ckeditor/ckeditor5-clipboard": "0.0.0-nightly-next-20251222.0",
-    "@ckeditor/ckeditor5-core": "0.0.0-nightly-next-20251222.0",
-    "@ckeditor/ckeditor5-engine": "0.0.0-nightly-next-20251222.0",
-    "@ckeditor/ckeditor5-icons": "0.0.0-nightly-next-20251222.0",
-    "@ckeditor/ckeditor5-ui": "0.0.0-nightly-next-20251222.0",
-    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-next-20251222.0",
-    "@ckeditor/ckeditor5-widget": "0.0.0-nightly-next-20251222.0",
+    "ckeditor5": "0.0.0-nightly-20251223.0",
+    "@ckeditor/ckeditor5-clipboard": "0.0.0-nightly-20251223.0",
+    "@ckeditor/ckeditor5-core": "0.0.0-nightly-20251223.0",
+    "@ckeditor/ckeditor5-engine": "0.0.0-nightly-20251223.0",
+    "@ckeditor/ckeditor5-icons": "0.0.0-nightly-20251223.0",
+    "@ckeditor/ckeditor5-ui": "0.0.0-nightly-20251223.0",
+    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-20251223.0",
+    "@ckeditor/ckeditor5-widget": "0.0.0-nightly-20251223.0",
     "es-toolkit": "1.39.5"
   },
   "author": "CKSource (http://cksource.com/)",

package/src/augmentation.d.ts

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

package/src/index.d.ts

@@ -34,6 +34,10 @@ 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,6 +34,11 @@ 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,8 +129,10 @@ 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));
-        enableCellTypeProperty(editor);
-        editor.commands.add('tableCellType', new TableCellTypeCommand(editor));
+        if (editor.config.get('experimentalFlags.tableCellTypeSupport')) {
+            enableCellTypeProperty(editor);
+            editor.commands.add('tableCellType', new TableCellTypeCommand(editor));
+        }
     }
 }
 /**

package/src/tablecellproperties/tablecellpropertiesui.js

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

package/src/tablecellproperties/tablecellpropertiesuiexperimental.d.ts

@@ -0,0 +1,128 @@
+/**
+ * @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;
+}