@ckeditor/ckeditor5-table 47.6.1 → 48.0.0-alpha.0

package/src/tablecellproperties/tablecellpropertiesuiexperimental.js

@@ -1,408 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, 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
- */
-/* istanbul ignore file -- @preserve */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { IconTableCellProperties } from 'ckeditor5/src/icons.js';
-import { ButtonView, clickOutsideHandler, ContextualBalloon, getLocalizedColorOptions, normalizeColorOptions } from 'ckeditor5/src/ui.js';
-import { TableCellPropertiesViewExperimental } from './ui/tablecellpropertiesviewexperimental.js';
-import { colorFieldValidator, getLocalizedColorErrorText, getLocalizedLengthErrorText, defaultColors, lengthFieldValidator, lineWidthFieldValidator } from '../utils/ui/table-properties.js';
-import { debounce } from 'es-toolkit/compat';
-import { getSelectionAffectedTableWidget, getTableWidgetAncestor } from '../utils/ui/widget.js';
-import { getBalloonCellPositionData, repositionContextualBalloon } from '../utils/ui/contextualballoon.js';
-import { getNormalizedDefaultCellProperties, getNormalizedDefaultProperties } from '../utils/table-properties.js';
-const ERROR_TEXT_TIMEOUT = 500;
-// Map of view properties and related commands.
-const propertyToCommandMap = {
-    borderStyle: 'tableCellBorderStyle',
-    borderColor: 'tableCellBorderColor',
-    borderWidth: 'tableCellBorderWidth',
-    height: 'tableCellHeight',
-    width: 'tableCellWidth',
-    padding: 'tableCellPadding',
-    backgroundColor: 'tableCellBackgroundColor',
-    horizontalAlignment: 'tableCellHorizontalAlignment',
-    verticalAlignment: 'tableCellVerticalAlignment',
-    cellType: 'tableCellType'
-};
-/**
- * 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 class TableCellPropertiesUIExperimental extends Plugin {
-    /**
-     * The default table cell properties.
-     */
-    _defaultContentTableCellProperties;
-    /**
-     * The default layout table cell properties.
-     */
-    _defaultLayoutTableCellProperties;
-    /**
-     * The contextual balloon plugin instance.
-     */
-    _balloon;
-    /**
-     * The cell properties form view displayed inside the balloon.
-     */
-    view;
-    /**
-     * The cell properties form view displayed inside the balloon (content table).
-     */
-    _viewWithContentTableDefaults;
-    /**
-     * The cell properties form view displayed inside the balloon (layout table).
-     */
-    _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.
-     */
-    _undoStepBatch;
-    /**
-     * Flag used to indicate whether view is ready to execute update commands
-     * (it finished loading initial data).
-     */
-    _isReady;
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [ContextualBalloon];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'TableCellPropertiesUIExperimental';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    constructor(editor) {
-        super(editor);
-        editor.config.define('table.tableCellProperties', {
-            borderColors: defaultColors,
-            backgroundColors: defaultColors
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        const t = editor.t;
-        this._defaultContentTableCellProperties = getNormalizedDefaultCellProperties(editor.config.get('table.tableCellProperties.defaultProperties'), {
-            includeVerticalAlignmentProperty: true,
-            includeHorizontalAlignmentProperty: true,
-            includePaddingProperty: true,
-            isRightToLeftContent: editor.locale.contentLanguageDirection === 'rtl'
-        });
-        this._defaultLayoutTableCellProperties = getNormalizedDefaultProperties(undefined, {
-            includeVerticalAlignmentProperty: true,
-            includeHorizontalAlignmentProperty: true,
-            isRightToLeftContent: editor.locale.contentLanguageDirection === 'rtl'
-        });
-        this._balloon = editor.plugins.get(ContextualBalloon);
-        this.view = null;
-        this._isReady = false;
-        editor.ui.componentFactory.add('tableCellProperties', locale => {
-            const view = new ButtonView(locale);
-            view.set({
-                label: t('Cell properties'),
-                icon: IconTableCellProperties,
-                tooltip: true
-            });
-            this.listenTo(view, 'execute', () => this._showView());
-            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;
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        super.destroy();
-        // Destroy created UI components as they are not automatically destroyed.
-        // See https://github.com/ckeditor/ckeditor5/issues/1341.
-        if (this.view) {
-            this.view.destroy();
-        }
-    }
-    /**
-     * Creates the {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView} instance.
-     *
-     * @returns The cell properties form view instance.
-     */
-    _createPropertiesView(defaultTableCellProperties) {
-        const editor = this.editor;
-        const config = editor.config.get('table.tableCellProperties');
-        const borderColorsConfig = normalizeColorOptions(config.borderColors);
-        const localizedBorderColors = getLocalizedColorOptions(editor.locale, borderColorsConfig);
-        const backgroundColorsConfig = normalizeColorOptions(config.backgroundColors);
-        const localizedBackgroundColors = getLocalizedColorOptions(editor.locale, backgroundColorsConfig);
-        const hasColorPicker = config.colorPicker !== false;
-        const isTableCellTypeSupported = !!editor.config.get('experimentalFlags.tableCellTypeSupport');
-        const view = new TableCellPropertiesViewExperimental(editor.locale, {
-            borderColors: localizedBorderColors,
-            backgroundColors: localizedBackgroundColors,
-            defaultTableCellProperties,
-            colorPickerConfig: hasColorPicker ? (config.colorPicker || {}) : false,
-            isTableCellTypeSupported
-        });
-        const t = editor.t;
-        // Render the view so its #element is available for the clickOutsideHandler.
-        view.render();
-        this.listenTo(view, 'submit', () => {
-            this._hideView();
-        });
-        this.listenTo(view, 'cancel', () => {
-            // https://github.com/ckeditor/ckeditor5/issues/6180
-            if (this._undoStepBatch.operations.length) {
-                editor.execute('undo', this._undoStepBatch);
-            }
-            this._hideView();
-        });
-        // Close the balloon on Esc key press.
-        view.keystrokes.set('Esc', (data, cancel) => {
-            this._hideView();
-            cancel();
-        });
-        // Close on click outside of balloon panel element.
-        clickOutsideHandler({
-            emitter: view,
-            activator: () => this._isViewInBalloon,
-            contextElements: [this._balloon.view.element],
-            callback: () => this._hideView()
-        });
-        const colorErrorText = getLocalizedColorErrorText(t);
-        const lengthErrorText = getLocalizedLengthErrorText(t);
-        // Create the "UI -> editor data" binding.
-        // These listeners update the editor data (via table commands) when any observable
-        // property of the view has changed. They also validate the value and display errors in the UI
-        // when necessary. This makes the view live, which means the changes are
-        // visible in the editing as soon as the user types or changes fields' values.
-        view.on('change:borderStyle', this._getPropertyChangeCallback('tableCellBorderStyle'));
-        view.on('change:borderColor', this._getValidatedPropertyChangeCallback({
-            viewField: view.borderColorInput,
-            commandName: 'tableCellBorderColor',
-            errorText: colorErrorText,
-            validator: colorFieldValidator
-        }));
-        view.on('change:borderWidth', this._getValidatedPropertyChangeCallback({
-            viewField: view.borderWidthInput,
-            commandName: 'tableCellBorderWidth',
-            errorText: lengthErrorText,
-            validator: lineWidthFieldValidator
-        }));
-        view.on('change:padding', this._getValidatedPropertyChangeCallback({
-            viewField: view.paddingInput,
-            commandName: 'tableCellPadding',
-            errorText: lengthErrorText,
-            validator: lengthFieldValidator
-        }));
-        view.on('change:width', this._getValidatedPropertyChangeCallback({
-            viewField: view.widthInput,
-            commandName: 'tableCellWidth',
-            errorText: lengthErrorText,
-            validator: lengthFieldValidator
-        }));
-        view.on('change:height', this._getValidatedPropertyChangeCallback({
-            viewField: view.heightInput,
-            commandName: 'tableCellHeight',
-            errorText: lengthErrorText,
-            validator: lengthFieldValidator
-        }));
-        view.on('change:backgroundColor', this._getValidatedPropertyChangeCallback({
-            viewField: view.backgroundInput,
-            commandName: 'tableCellBackgroundColor',
-            errorText: colorErrorText,
-            validator: colorFieldValidator
-        }));
-        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;
-    }
-    /**
-     * 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.
-     */
-    _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 [];
-            }
-            const propertyKey = property;
-            let defaultValue;
-            if (propertyKey === 'cellType') {
-                defaultValue = '';
-            }
-            else {
-                defaultValue = this.view === this._viewWithContentTableDefaults ?
-                    this._defaultContentTableCellProperties[propertyKey] || '' :
-                    this._defaultLayoutTableCellProperties[propertyKey] || '';
-            }
-            const entry = [
-                property,
-                command.value || defaultValue
-            ];
-            return [entry];
-        })
-            .forEach(([property, value]) => {
-            // Do not set the `border-color` and `border-width` fields if `border-style:none`.
-            if ((property === 'borderColor' || property === 'borderWidth') && borderStyleCommand.value === 'none') {
-                return;
-            }
-            this.view.set(property, value);
-        });
-        this._isReady = true;
-    }
-    /**
-     * 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.
-     */
-    _showView() {
-        const editor = this.editor;
-        const viewTable = getSelectionAffectedTableWidget(editor.editing.view.document.selection);
-        const modelTable = viewTable && editor.editing.mapper.toModelElement(viewTable);
-        const useDefaults = !modelTable || modelTable.getAttribute('tableType') !== 'layout';
-        if (useDefaults && !this._viewWithContentTableDefaults) {
-            this._viewWithContentTableDefaults = this._createPropertiesView(this._defaultContentTableCellProperties);
-        }
-        else if (!useDefaults && !this._viewWithLayoutTableDefaults) {
-            this._viewWithLayoutTableDefaults = this._createPropertiesView(this._defaultLayoutTableCellProperties);
-        }
-        this.view = useDefaults ? this._viewWithContentTableDefaults : this._viewWithLayoutTableDefaults;
-        this.listenTo(editor.ui, 'update', () => {
-            this._updateView();
-        });
-        // Update the view with the model values.
-        this._fillViewFormFromCommandValues();
-        this._balloon.add({
-            view: this.view,
-            position: getBalloonCellPositionData(editor)
-        });
-        // Create a new batch. Clicking "Cancel" will undo this batch.
-        this._undoStepBatch = editor.model.createBatch();
-        // Basic a11y.
-        this.view.focus();
-    }
-    /**
-     * Removes the {@link #view} from the {@link #_balloon}.
-     */
-    _hideView() {
-        const editor = this.editor;
-        this.stopListening(editor.ui, 'update');
-        this._isReady = false;
-        // Blur any input element before removing it from DOM to prevent issues in some browsers.
-        // See https://github.com/ckeditor/ckeditor5/issues/1501.
-        this.view.saveButtonView.focus();
-        this._balloon.remove(this.view);
-        // Make sure the focus is not lost in the process by putting it directly
-        // into the editing view.
-        this.editor.editing.view.focus();
-    }
-    /**
-     * Repositions the {@link #_balloon} or hides the {@link #view} if a table cell is no longer selected.
-     */
-    _updateView() {
-        const editor = this.editor;
-        const viewDocument = editor.editing.view.document;
-        if (!getTableWidgetAncestor(viewDocument.selection)) {
-            this._hideView();
-        }
-        else if (this._isViewVisible) {
-            repositionContextualBalloon(editor, 'cell');
-        }
-    }
-    /**
-     * Returns `true` when the {@link #view} is visible in the {@link #_balloon}.
-     */
-    get _isViewVisible() {
-        return !!this.view && this._balloon.visibleView === this.view;
-    }
-    /**
-     * Returns `true` when the {@link #view} is in the {@link #_balloon}.
-     */
-    get _isViewInBalloon() {
-        return !!this.view && this._balloon.hasView(this.view);
-    }
-    /**
-     * 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.
-     */
-    _getPropertyChangeCallback(commandName) {
-        return (evt, propertyName, newValue) => {
-            if (!this._isReady) {
-                return;
-            }
-            this.editor.execute(commandName, {
-                value: newValue,
-                batch: this._undoStepBatch
-            });
-        };
-    }
-    /**
-     * 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.
-     */
-    _getValidatedPropertyChangeCallback(options) {
-        const { commandName, viewField, validator, errorText } = options;
-        const setErrorTextDebounced = debounce(() => {
-            viewField.errorText = errorText;
-        }, ERROR_TEXT_TIMEOUT);
-        return (evt, propertyName, newValue) => {
-            setErrorTextDebounced.cancel();
-            // Do not execute the command on initial call (opening the table properties view).
-            if (!this._isReady) {
-                return;
-            }
-            if (validator(newValue)) {
-                this.editor.execute(commandName, {
-                    value: newValue,
-                    batch: this._undoStepBatch
-                });
-                viewField.errorText = null;
-            }
-            else {
-                setErrorTextDebounced();
-            }
-        };
-    }
-}

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

@@ -1,229 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, 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/tablecellpropertiesview
- */
-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 TableCellPropertiesViewOptions {
-    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 TableCellPropertiesView 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: TableCellPropertiesViewOptions;
-    /**
-     * 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;
-    /**
-     * 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: TableCellPropertiesViewOptions);
-    /**
-     * @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;
-    /**
-     * Provides localized labels for {@link #horizontalAlignmentToolbar} buttons.
-     */
-    private get _horizontalAlignmentLabels();
-    /**
-     * Provides localized labels for {@link #verticalAlignmentToolbar} buttons.
-     */
-    private get _verticalAlignmentLabels();
-}