CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Module

table/ui/utils

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

module

Filtering

Constants

  • defaultColors

    static

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

    See source

    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

    static

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

    See source

    See isColor.

    Parameters

    value : String

    Returns

    Boolean

  • fillToolbar( options = { options.view, options.icons, options.toolbar }, labels, propertyName, nameToValue )

    static

    A helper that fills a toolbar with buttons that:

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

    Parameters

    options : Object
    Properties
    options.view : TableCellPropertiesView | TablePropertiesView
    options.icons : Array.<String>
    options.toolbar : ToolbarView
    labels : Object.<String, String>
    propertyName : String
    nameToValue : function

    A function that maps a button name to a value. By default names are the same as values.

  • getBalloonCellPositionData( editor ) → Options

    static

    Returns the positioning options that control the geometry of the contextual balloon with respect to the selected table cell in the editor content.

    See source

    Parameters

    editor : Editor

    The editor instance.

    Returns

    Options

  • getBalloonTablePositionData( editor ) → Options

    static

    Returns the positioning options that control the geometry of the contextual balloon with respect to the selected table in the editor content.

    See source

    Parameters

    editor : Editor

    The editor instance.

    Returns

    Options

  • getBorderStyleDefinitions( view ) → Iterable.<ListDropdownItemDefinition>

    static

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

    See source

    Parameters

    view : TableCellPropertiesView | TablePropertiesView

    Returns

    Iterable.<ListDropdownItemDefinition>

  • getBorderStyleLabels( t ) → Object.<String, String>

    static

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

    See source

    Parameters

    t : Locale#t

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

    Returns

    Object.<String, String>

  • getLabeledColorInputCreator( options, options.colorConfig, options.columns ) → function

    private static

    Returns a creator for a color input with a label.

    See source

    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

    Color input options.

    options.colorConfig : TableColorConfig

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

    options.columns : Number

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

    Returns

    function

  • getLocalizedColorErrorText( t ) → String

    static

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

    See source

    Parameters

    t : Locale#t

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

    Returns

    String

  • getLocalizedLengthErrorText( t ) → String

    static

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

    See source

    Parameters

    t : Locale#t

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

    Returns

    String

  • lengthFieldValidator( value ) → Boolean

    static

    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 source

    See isLength. See isPercentage.

    Parameters

    value : String

    Returns

    Boolean

  • lineWidthFieldValidator( value ) → Boolean

    static

    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 source

    See isLength.

    Parameters

    value : String

    Returns

    Boolean

  • repositionContextualBalloon( editor, target )

    static

    A helper utility that positions the contextual balloon instance with respect to the table in the editor content, if one is selected.

    See source

    Parameters

    editor : Editor

    The editor instance.

    target : String

    Either "cell" or "table". Determines the target the balloon will be attached to.