@ckeditor/ckeditor5-table 0.0.0-nightly-next-20251209.0 → 0.0.0-nightly-20251210.0

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, IconPreviousArrow } from 'ckeditor5/src/icons.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';
@@ -79,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.
      */
@@ -136,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,
@@ -150,11 +145,9 @@ 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,
@@ -211,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'
         }));
@@ -255,9 +248,8 @@ export class TableCellPropertiesView extends View {
             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);
@@ -566,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
         });
@@ -575,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');
@@ -582,21 +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;
-    }
     /**
      * Provides localized labels for {@link #horizontalAlignmentToolbar} buttons.
      */

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

@@ -0,0 +1,237 @@
+/**
+ * @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.css';
+import '../../../theme/tableform.css';
+import '../../../theme/tablecellproperties.css';
+export interface TableCellPropertiesViewOptionsExperimental {
+    borderColors: Array<NormalizedColorOption>;
+    backgroundColors: Array<NormalizedColorOption>;
+    defaultTableCellProperties: TableCellPropertiesOptions;
+    colorPickerConfig: false | ColorPickerConfig;
+}
+/**
+ * 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;
+    /**
+     * 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>;
+    /**
+     * 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.
+     */
+    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;
+    /**
+     * 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;
+    /**
+     * Provides localized labels for {@link #horizontalAlignmentToolbar} buttons.
+     */
+    private get _horizontalAlignmentLabels();
+    /**
+     * Provides localized labels for {@link #verticalAlignmentToolbar} buttons.
+     */
+    private get _verticalAlignmentLabels();
+}