UNPKG

@ckeditor/ckeditor5-table

Version:

Table feature for CKEditor 5.

229 lines (228 loc) • 7.03 kB
/** * @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/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 '../../../theme/form.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 default 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(); }