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

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, 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 { 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 { 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,10 +51,6 @@ 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.
      */
@@ -83,10 +79,6 @@ 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.
      */
@@ -115,13 +107,11 @@ export class TableCellPropertiesView extends View {
             width: '',
             height: '',
             horizontalAlignment: '',
-            verticalAlignment: '',
-            cellType: ''
+            verticalAlignment: ''
         });
         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();
@@ -131,7 +121,6 @@ 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;
@@ -143,7 +132,6 @@ 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,
@@ -157,42 +145,28 @@ export class TableCellPropertiesView extends View {
             }
         });
         // Form header.
-        const header = new FormHeaderView(locale, {
+        this.children.add(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,
-                borderWidthInput,
-                borderColorInput
+                borderColorInput,
+                borderWidthInput
             ],
             class: 'ck-table-form__border-row'
         }));
-        // Background and cell type.
+        // Background.
         this.children.add(new FormRowView(locale, {
+            labelView: backgroundRowLabel,
             children: [
-                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'
-                })
-            ]
+                backgroundRowLabel,
+                backgroundInput
+            ],
+            class: 'ck-table-form__background-row'
         }));
         // Dimensions row and padding.
         this.children.add(new FormRowView(locale, {
@@ -230,8 +204,8 @@ export class TableCellPropertiesView extends View {
         // Action row.
         this.children.add(new FormRowView(locale, {
             children: [
-                this.cancelButtonView,
-                this.saveButtonView
+                this.saveButtonView,
+                this.cancelButtonView
             ],
             class: 'ck-table-form__action-row'
         }));
@@ -268,16 +242,14 @@ 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.backButtonView
+            this.cancelButtonView
         ].forEach(view => {
             // Register the view as focusable.
             this._focusables.add(view);
@@ -427,47 +399,6 @@ 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:
      *
@@ -565,8 +496,7 @@ export class TableCellPropertiesView extends View {
         horizontalAlignmentToolbar.set({
             isCompact: true,
             role: 'radiogroup',
-            ariaLabel: t('Horizontal text alignment toolbar'),
-            class: 'ck-table-cell-properties-form__horizontal-alignment-toolbar'
+            ariaLabel: t('Horizontal text alignment toolbar')
         });
         fillToolbar({
             view: this,
@@ -593,8 +523,7 @@ export class TableCellPropertiesView extends View {
         verticalAlignmentToolbar.set({
             isCompact: true,
             role: 'radiogroup',
-            ariaLabel: t('Vertical text alignment toolbar'),
-            class: 'ck-table-cell-properties-form__vertical-alignment-toolbar'
+            ariaLabel: t('Vertical text alignment toolbar')
         });
         fillToolbar({
             view: this,
@@ -629,7 +558,8 @@ export class TableCellPropertiesView extends View {
         ];
         saveButtonView.set({
             label: t('Save'),
-            class: 'ck-button-action',
+            icon: IconCheck,
+            class: 'ck-button-save',
             type: 'submit',
             withText: true
         });
@@ -638,6 +568,8 @@ export class TableCellPropertiesView extends View {
         });
         cancelButtonView.set({
             label: t('Cancel'),
+            icon: IconCancel,
+            class: 'ck-button-cancel',
             withText: true
         });
         cancelButtonView.delegate('execute').to(this, 'cancel');
@@ -645,42 +577,6 @@ 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.
      */
@@ -710,16 +606,6 @@ 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/tablecellproperties/ui/tablecellpropertiesviewexperimental.d.ts

@@ -0,0 +1,266 @@
+/**
+ * @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/ui/tablecellpropertiesviewexperimental
+ */
+import { ButtonView, FocusCycler, LabeledFieldView, ToolbarView, View, ViewCollection, type FocusableView, type NormalizedColorOption, type ColorPickerConfig } from 'ckeditor5/src/ui.js';
+import { KeystrokeHandler, FocusTracker, type Locale } from 'ckeditor5/src/utils.js';
+import { type ColorInputView } from '../../ui/colorinputview.js';
+import type { TableCellPropertiesOptions } from '../../tableconfig.js';
+import '@ckeditor/ckeditor5-ui/theme/components/form/form.css';
+import '../../../theme/formrow-experimental.css';
+import '../../../theme/tableform-experimental.css';
+import '../../../theme/tablecellproperties-experimental.css';
+export interface TableCellPropertiesViewOptionsExperimental {
+    borderColors: Array<NormalizedColorOption>;
+    backgroundColors: Array<NormalizedColorOption>;
+    defaultTableCellProperties: TableCellPropertiesOptions;
+    colorPickerConfig: false | ColorPickerConfig;
+    isTableCellTypeSupported: boolean;
+}
+/**
+ * The class representing a table cell properties form, allowing users to customize
+ * certain style aspects of a table cell, for instance, border, padding, text alignment, etc..
+ */
+export declare class TableCellPropertiesViewExperimental extends View {
+    /**
+     * The value of the cell border style.
+     *
+     * @observable
+     * @default ''
+     */
+    borderStyle: string;
+    /**
+     * The value of the cell border width style.
+     *
+     * @observable
+     * @default ''
+     */
+    borderWidth: string;
+    /**
+     * The value of the cell border color style.
+     *
+     * @observable
+     * @default ''
+     */
+    borderColor: string;
+    /**
+     * The value of the cell padding style.
+     *
+     * @observable
+     * @default ''
+     */
+    padding: string;
+    /**
+     * The value of the cell background color style.
+     *
+     * @observable
+     * @default ''
+     */
+    backgroundColor: string;
+    /**
+     * The value of the table cell width style.
+     *
+     * @observable
+     * @default ''
+     */
+    width: string;
+    /**
+     * The value of the table cell height style.
+     *
+     * @observable
+     * @default ''
+     */
+    height: string;
+    /**
+     * The value of the horizontal text alignment style.
+     *
+     * @observable
+     * @default ''
+     */
+    horizontalAlignment: string;
+    /**
+     * The value of the vertical text alignment style.
+     *
+     * @observable
+     * @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.
+     */
+    readonly options: TableCellPropertiesViewOptionsExperimental;
+    /**
+     * Tracks information about the DOM focus in the form.
+     */
+    readonly focusTracker: FocusTracker;
+    /**
+     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     */
+    readonly keystrokes: KeystrokeHandler;
+    /**
+     * A collection of child views in the form.
+     */
+    readonly children: ViewCollection;
+    /**
+     * A dropdown that allows selecting the style of the table cell border.
+     */
+    readonly borderStyleDropdown: LabeledFieldView<FocusableView>;
+    /**
+     * An input that allows specifying the width of the table cell border.
+     */
+    readonly borderWidthInput: LabeledFieldView<FocusableView>;
+    /**
+     * An input that allows specifying the color of the table cell border.
+     */
+    readonly borderColorInput: LabeledFieldView<ColorInputView>;
+    /**
+     * 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.
+     */
+    readonly paddingInput: LabeledFieldView;
+    /**
+     * An input that allows specifying the table cell width.
+     */
+    readonly widthInput: LabeledFieldView<FocusableView>;
+    /**
+     * An input that allows specifying the table cell height.
+     */
+    readonly heightInput: LabeledFieldView<FocusableView>;
+    /**
+     * A toolbar with buttons that allow changing the horizontal text alignment in a table cell.
+     */
+    readonly horizontalAlignmentToolbar: ToolbarView;
+    /**
+     * A toolbar with buttons that allow changing the vertical text alignment in a table cell.
+     */
+    readonly verticalAlignmentToolbar: ToolbarView;
+    /**
+     * The "Save" button view.
+     */
+    saveButtonView: ButtonView;
+    /**
+     * The "Cancel" button view.
+     */
+    cancelButtonView: ButtonView;
+    /**
+     * The "Back" button view.
+     */
+    backButtonView: ButtonView;
+    /**
+     * A collection of views that can be focused in the form.
+     */
+    protected readonly _focusables: ViewCollection<FocusableView>;
+    /**
+     * Helps cycling over {@link #_focusables} in the form.
+     */
+    protected readonly _focusCycler: FocusCycler;
+    /**
+     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
+     * @param options Additional configuration of the view.
+     * @param options.borderColors A configuration of the border color palette used by the
+     * {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView#borderColorInput}.
+     * @param options.backgroundColors A configuration of the background color palette used by the
+     * {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView#backgroundInput}.
+     * @param options.defaultTableCellProperties The default table cell properties.
+     * @param options.isTableCellTypeSupported A flag indicating whether the table cell type is supported.
+     */
+    constructor(locale: Locale, options: TableCellPropertiesViewOptionsExperimental);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Focuses the fist focusable field in the form.
+     */
+    focus(): void;
+    /**
+     * Creates the following form fields:
+     *
+     * * {@link #borderStyleDropdown},
+     * * {@link #borderWidthInput},
+     * * {@link #borderColorInput}.
+     */
+    private _createBorderFields;
+    /**
+     * Creates the following form fields:
+     *
+     * * {@link #backgroundInput}.
+     */
+    private _createBackgroundFields;
+    /**
+     * Create cell type field.
+     *
+     * * {@link #cellTypeDropdown}.
+     *
+     * @internal
+     */
+    private _createCellTypeField;
+    /**
+     * Creates the following form fields:
+     *
+     * * {@link #widthInput}.
+     * * {@link #heightInput}.
+     */
+    private _createDimensionFields;
+    /**
+     * Creates the following form fields:
+     *
+     * * {@link #paddingInput}.
+     */
+    private _createPaddingField;
+    /**
+     * Creates the following form fields:
+     *
+     * * {@link #horizontalAlignmentToolbar},
+     * * {@link #verticalAlignmentToolbar}.
+     */
+    private _createAlignmentFields;
+    /**
+     * Creates the following form controls:
+     *
+     * * {@link #saveButtonView},
+     * * {@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.
+     */
+    private get _horizontalAlignmentLabels();
+    /**
+     * Provides localized labels for {@link #verticalAlignmentToolbar} buttons.
+     */
+    private get _verticalAlignmentLabels();
+    /**
+     * Provides localized labels for {@link #cellTypeDropdown}.
+     */
+    private get _cellTypeLabels();
+}