CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Module

table/utils/ui/table-properties

@ckeditor/ckeditor5-table/src/utils/ui/table-properties

module

Filtering

Constants

  • defaultColors : Array<ColorOption>

    See source

    A default color palette used by various user interfaces related to tables, for instance, by TableCellPropertiesUI or TablePropertiesUI.

    The color palette follows the table color configuration format and contains the following color definitions:

    const defaultColors = [
  {
    color: 'hsl(0, 0%, 0%)',
    label: 'Black'
  },
  {
    color: 'hsl(0, 0%, 30%)',
    label: 'Dim grey'
  },
  {
    color: 'hsl(0, 0%, 60%)',
    label: 'Grey'
  },
  {
    color: 'hsl(0, 0%, 90%)',
    label: 'Light grey'
  },
  {
    color: 'hsl(0, 0%, 100%)',
    label: 'White',
    hasBorder: true
  },
  {
    color: 'hsl(0, 75%, 60%)',
    label: 'Red'
  },
  {
    color: 'hsl(30, 75%, 60%)',
    label: 'Orange'
  },
  {
    color: 'hsl(60, 75%, 60%)',
    label: 'Yellow'
  },
  {
    color: 'hsl(90, 75%, 60%)',
    label: 'Light green'
  },
  {
    color: 'hsl(120, 75%, 60%)',
    label: 'Green'
  },
  {
    color: 'hsl(150, 75%, 60%)',
    label: 'Aquamarine'
  },
  {
    color: 'hsl(180, 75%, 60%)',
    label: 'Turquoise'
  },
  {
    color: 'hsl(210, 75%, 60%)',
    label: 'Light blue'
  },
  {
    color: 'hsl(240, 75%, 60%)',
    label: 'Blue'
  },
  {
    color: 'hsl(270, 75%, 60%)',
    label: 'Purple'
  }
];

Functions

  • colorFieldValidator( value ) → boolean

    See source

    Returns true when the passed value is an empty string or a valid CSS color expression. Otherwise, false is returned.

    See isColor.

    Parameters

    value : string

    Returns

    boolean

  • fillToolbar( options = { [options.defaultValue], options.icons, options.labels, [options.nameToValue], options.propertyName, options.toolbar, options.view } ) → void

    See source

    A helper that fills a toolbar with buttons that:

    • have some labels,
    • have some icons,
    • set a certain UI view property value upon execution.

    Type parameters

    TView : extends View<HTMLElement, TView>
    TPropertyName

    Parameters

    options : object
    Properties
    [ options.defaultValue ] : string
    options.icons : Record<string, string>
    options.labels : Record<number, string>
    [ options.nameToValue ] : ( string ) => string
    options.propertyName : TPropertyName
    options.toolbar : ToolbarView
    options.view : TView

    Returns

    void

  • getBorderStyleDefinitions( view, defaultStyle ) → Collection<ListDropdownItemDefinition>

    See source

    Generates item definitions for a UI dropdown that allows changing the border style of a table or a table cell.

    Parameters

    view : TablePropertiesView | TableCellPropertiesView
    defaultStyle : string

    The default border.

    Returns

    Collection<ListDropdownItemDefinition>

  • getBorderStyleLabels( t ) → Record<string, string>

    See source

    Returns an object containing pairs of CSS border style values and their localized UI labels. Used by TableCellPropertiesView and TablePropertiesView.

    Parameters

    t : LocaleTranslate

    The "t" function provided by the editor that is used to localize strings.

    Returns

    Record<string, string>

  • internal

    getLabeledColorInputCreator( options = { options.colorConfig, options.colorPickerConfig, options.columns, [options.defaultColorValue] } ) → ( LabeledFieldView<FocusableView>, string, string ) => ColorInputView

    See source

    Returns a creator for a color input with a label.

    For given options, it returns a function that creates an instance of a color input logically related to a labeled view in the DOM.

    The helper does the following:

    • It sets the color input id and ariaDescribedById attributes.
    • It binds the color input isReadOnly to the labeled view.
    • It binds the color input hasError to the labeled view.
    • It enables a logic that cleans up the error when the user starts typing in the color input.

    Usage:

    const colorInputCreator = getLabeledColorInputCreator( {
  colorConfig: [ ... ],
  columns: 3,
} );

const labeledInputView = new LabeledFieldView( locale, colorInputCreator );
console.log( labeledInputView.view ); // A color input instance.

    Parameters

    options : object

    Color input options.

    Properties
    options.colorConfig : Array<NormalizedColorOption>

    The configuration of the color palette displayed in the input's dropdown.

    options.colorPickerConfig : false | ColorPickerConfig

    The configuration of the color picker. You could disable it or define your output format.

    options.columns : number

    The configuration of the number of columns the color palette consists of in the input's dropdown.

    [ options.defaultColorValue ] : string

    If specified, the color input view will replace the "Remove color" button with the "Restore default" button. Instead of clearing the input field, the default color value will be set.

    Returns

    ( LabeledFieldView<FocusableView>, string, string ) => ColorInputView

  • getLocalizedColorErrorText( t ) → string

    See source

    Returns a localized error string that can be displayed next to color (background, border) fields that have an invalid value.

    Parameters

    t : LocaleTranslate

    The "t" function provided by the editor that is used to localize strings.

    Returns

    string

  • getLocalizedLengthErrorText( t ) → string

    See source

    Returns a localized error string that can be displayed next to length (padding, border width) fields that have an invalid value.

    Parameters

    t : LocaleTranslate

    The "t" function provided by the editor that is used to localize strings.

    Returns

    string

  • lengthFieldValidator( value ) → boolean

    See source

    Returns true when the passed value is an empty string, a number without a unit or a valid CSS length expression. Otherwise, false is returned.

    See isLength. See isPercentage.

    Parameters

    value : string

    Returns

    boolean

  • lineWidthFieldValidator( value ) → boolean

    See source

    Returns true when the passed value is an empty string, a number without a unit or a valid CSS length expression. Otherwise, false is returned.

    See isLength.

    Parameters

    value : string

    Returns

    boolean