Toolbar properties

Toolbar properties #

To integrate custom tools, utilize the customJS property. This property includes methods for registering tools and properties, such as registerTool and registerProperty.

Common Options #

All options that available in every properties

Option	Required	Description	Default	Type
name	Yes	Property name	""	string
label	Yes	Property label	""	string
path	Yes	Target path	""	string
placeholder	Yes	Input placeholder	""	string
className	No	Property style classes	""	string
disabled	No	Specifies disabled state	false	boolean
formGroup	No	Input wrapper props support all HTMLElement attributes and events	{ }	object
responsive	No	Enable responsive property	true	boolean
showLabel	No	Show label	true	boolean
showDeviceSelectionMenu	No	Show Devices	true	boolean

General properties #

For general properties, the path specifies the direct location where values are stored.

Example 1:

input

{
    toolbar: [
        {
            name: "color",
            label: "Text Color",
            path: "style.color",
        }
    ]
}

output

{
    style: {
        color: {
            value: "#ffffff",
            key: "--color-1",
            label: "Color 1",
            type: "text-color",
        }
    }
}

Label #

Property Name:

label

{
    name: "label",
    label: "Label Goes Here",
    htmlFor: ""
    // ...[other options add here]
}

Option	Required	Description	Default	Type
htmlFor	No	HTML for attribute		string

Group #

Property Name:

group

{
    name: "group",
    label: "Label Goes Here",
    isOpen: true,
    variant: 'default'
    properties: [
        // Add your properties here
        // e.g. color, font, etc
    ]
    // ...[other options add here]
}

Option	Required	Description	Default	Type
isOpen	No	Group is open or collapsed	false	boolean
variant	No	Group variant	line-lg	default line line-lg
properties	No	Add your properties/ customProperties/ input here	line-lg	[]

General Input #

Only the default option is available; no additional options are provided.

Property Name:

input

{
    name: "input",
    type: "",
    label: "Label Goes Here",
    path: "",
    responsive: true,
    showLabel: true,
    showDeviceSelectionMenu: true,
    // ...[other options add here]
}

Datetime #

Only the default option is available; no additional options are provided.

Property Name:

datetime

{
    name: "datetime",
    label: "Label Goes Here",
    path: "",
    responsive: true,
    showLabel: true,
    showDeviceSelectionMenu: true,
    // ...[other options add here]
}

AI Writing #

Property Name:

aiWriting

{
    name: "aiWriting",
    path: "",
    initialValue: "",
    responsive: true,
    // ...[other options add here]
}

Option	Required	Description	Default	Type
initialValue	No	Initial value of property		any
align	No	AI writing is a dropdown, align defined the dropdown menu alignment	center	left right left-top right-top center
showIcon	No	Show AI stick icon	true	boolean
caret	No	Dropdown caret icon	true	boolean
showCard	No	Enable or disable dropdown wrapper card	false	boolean

Color #

Property Name:

color

{
    name: "color",
    label: "Label Goes Here",
    path: "",
    responsive: true,
    showLabel: true,
    showDeviceSelectionMenu: true,
    initialColorType: "global",
    // ...[other options add here]
}

Option	Required	Description	Default	Type
initialColorType	No	Initial active color type	global	input recent global
showCloseBtn	No	Color input clear button	true	boolean
enableGlobalColorButton	No	Show global colors	true	boolean
onCompleted	No	Event is trigger after color selection		Function

Number #

Property Name:

number

{
    name: "number",
    label: "Label Goes Here",
    path: "",
    responsive: true,
    showLabel: true,
    showDeviceSelectionMenu: true,
    // ...[other options add here]
}

Option	Required	Description	Default	Type
unit	No	Input value unit	px	null % px deg ms rem em
min	No	Specifies the minimum value allowed	0	number
max	No	Specifies the maximum value allowed	100	number
step	No	Specifies the legal number intervals	1	number
initialValue	No	Specifies initial value		string
showClearButton	No	Input clear button	true	boolean

Range #

Property Name:

range

{
    name: "range",
    label: "Label Goes Here",
    path: "",
    responsive: true,
    showLabel: true,
    showDeviceSelectionMenu: true,
    // ...[other options add here]
}

Option	Required	Description	Default	Type
unit	No	Input value unit	px	null % px deg ms rem em
min	No	Specifies the minimum value allowed	0	number
max	No	Specifies the maximum value allowed	100	number
step	No	Specifies the legal number intervals	1	number
initialValue	No	Specifies initial value		string
showClearButton	No	Input clear button	true	boolean

Select #

Property Name:

select

{
    name: "select",
    label: "Label Goes Here",
    path: "",
    options: [{label: "", value: ""}],
    responsive: true,
    showLabel: true,
    showDeviceSelectionMenu: true,
    // ...[other options add here]
}

Option	Required	Description	Default	Type
options	Yes	Options is a array of object like [ {label: "", value: ""} ]		array[]
noWrapper	No	Specifies wrapper is enabled	false	boolean

Select With Search #

Property Name:

selectSearchable

{
    name: "selectSearchable",
    label: "Label Goes Here",
    path: "",
    options: [{label: "", value: ""}],
    responsive: true,
    showLabel: true,
    showDeviceSelectionMenu: true,
    // ...[other options add here]
}

Option	Required	Description	Default	Type
options	Yes	Options is a array of object like [ {label: "", value: ""} ]		array[]
noWrapper	No	Specifies wrapper is enabled	false	boolean

Grid #

Property Name:

grid

{
    name: "grid",
    label: "Label Goes Here",
    path: "",
    options: [{label: "", value: "", tooltip: ""}],
    numberOfColumns: 2,
    responsive: true,
    showLabel: true,
    showDeviceSelectionMenu: true,
    // ...[other options add here]
}

Option	Required	Description	Default	Type
options	Yes	Options is a array of object like [ {label: "", value: ""} ]		array[]
numberOfColumns	No	Specifies the number of columns	1	number
noWrapper	No	Specifies wrapper is enabled	false	boolean

Switch #

Property Name:

switch

{
    name: "switch",
    label: "Label Goes Here",
    path: "",
    responsive: true,
    showLabel: true,
    showDeviceSelectionMenu: true,
    // ...[other options add here]
}

Option	Required	Description	Default	Type
onLabel	No	Specifies switch on label	ON	string
offLabel	No	Specifies switch off label	OFF	string

Tab #

Property Name:

tab

{
    name: "switch",
    label: "Label Goes Here",
    path: "",
    tabs: [ { value: "", label: "", icon: () => {} } ],
    responsive: true,
    showLabel: true,
    showDeviceSelectionMenu: true,
    // ...[other options add here]
}

Option	Required	Description	Default	Type
tabs	Yes	Tabs is a array of object like [ { value: "", label: "", icon: ReactIcon } ]	[ ]	array[]
variant	No	Specifies tab variant	radioButton	line button radioButton tab tabColored
initialActiveTab	No	Specifies initial tab	""	string

Checkbox #

Property Name:

checkbox

{
    name: "checkbox",
    label: "Label Goes Here",
    path: "",
    options: [ { value: "", label: "" } ],
    initialValue: "",
    responsive: true,
    showLabel: true,
    showDeviceSelectionMenu: true,
    // ...[other options add here]
}

Option	Required	Description	Default	Type
options	Yes	Options is a array of object like [ {label: "", value: ""} ]		array[]
initialValue	No	Specifies initial value		string \| number \| boolean
noWrapper	No	Specifies wrapper is enabled	false	boolean

Editor #

Only the default option is available; no additional options are provided.

Property Name:

editor

{
    name: "editor",
    label: "Label Goes Here",
    path: "",
    responsive: true,
    showLabel: true,
    showDeviceSelectionMenu: true,
    // ...[other options add here]
}

Image Uploader #

Property Name:

imageUploader

{
    name: "imageUploader",
    label: "Label Goes Here",
    path: "",
    mediaType: "image",
    showAltInput: true,
    // ...[other options add here]
}

Option	Required	Description	Default	Type
mediaType	No	Specifies media type	image	image icon
showAltInput	No	Specifies show alt input	true	boolean

CSS Properties #

In CSS properties, either a single input or multiple inputs can be accepted. Each CSS property prefers a path that points to the closest object, and some properties also use a propertyKey to specify where the data is stored. For example, the "alignment" CSS property is a single input. If we want to store all CSS properties in a style object, the path would be styleand the propertyKey would be textAlign. The allowed keys for this property aretextAlign and align.

Example 1:

input

{
    toolbar: [
        {
            name: "alignment",
            label: "Text Alignment",
            path: "style",
            responsive: true,
            propertyKey: "textAlign"
        }
    ]
}

output

{
    style: {
        textAlign: 'left'
    }
}

Example 2:

input

{
    toolbar: [
        {
            name: "font",
            label: "Font",
            path: "style",
            responsive: true,
        }
    ]
}

output

{
    style: {
        fontFamily: 'Arial, sans-serif'
        fontWeight: '400'
    }
}

Example 3:

input

{
    toolbar: [
        {
            name: "border",
            label: "Border",
            path: "style",
            responsive: true,
            propertyKey: "border"
        }
    ]
}

output

{
    style: {
        border: {
            borderLeft: {
                width: "1px",
                style: "solid",
                color: "#ddd",
            },
            borderRight: {
                width: "1px",
                style: "solid",
                color: "#ddd",
            },
            borderTop: {
                width: "1px",
                style: "solid",
                color: "#ddd",
            },
            borderBottom: {
                width: "1px",
                style: "solid",
                color: "#ddd",
            }
        }
    }
}

Alignment #

Property Name:

alignment

{
    name: "alignment",
    label: "Label Goes Here",
    path: "",
    propertyKey: "textAlign",
    hasJustifyMode: true,
    responsive: true,
    showLabel: true,
    showDeviceSelectionMenu: true,
    // ...[other options add here]
}

Option	Required	Description	Default	Type
initialValue	No	Specifies the initial value	left	string
hasJustifyMode	No	Specifies justify mode is enabled	true	boolean
propertyKey	No	Specifies property key	textAlign	textAlign align

Border #

Property Name:

border

{
    name: "border",
    label: "Label Goes Here",
    path: "",
    propertyKey: "border",
    responsive: true,
    showLabel: true,
    showDeviceSelectionMenu: true,
    // ...[other options add here]
}

Option	Required	Description	Default	Type
propertyKey	No	Specifies property key	border	string

Border Radius #

Property Name:

borderRadius

{
    name: "borderRadius",
    label: "Label Goes Here",
    path: "",
    propertyKey: "borderRadius",
    responsive: true,
    showLabel: true,
    showDeviceSelectionMenu: true,
    // ...[other options add here]
}

Option	Required	Description	Default	Type
propertyKey	No	Specifies property key	borderRadius	string

Box Shadow #

Property Name:

boxShadow

{
    name: "boxShadow",
    label: "Label Goes Here",
    path: "",
    propertyKey: "boxShadow",
    responsive: true,
    showLabel: true,
    showDeviceSelectionMenu: true,
    // ...[other options add here]
}

Option	Required	Description	Default	Type
propertyKey	No	Specifies property key	boxShadow	string

Font #

Only the default option is available; no additional options are provided.

Property Name:

font

{
    name: "font",
    label: "Label Goes Here",
    path: "",
    responsive: true,
    showLabel: true,
    showDeviceSelectionMenu: true,
    // ...[other options add here]
}

Font Weight #

Property Name:

fontWeight

{
    name: "fontWeight",
    label: "Label Goes Here",
    path: "",
    propertyKey: "fontWeight",
    responsive: true,
    showLabel: true,
    showDeviceSelectionMenu: true,
    // ...[other options add here]
}

Option	Required	Description	Default	Type
propertyKey	No	Specifies property key	fontWeight	string

Align Items #

Property Name:

itemsAlignment

{
    name: "itemsAlignment",
    label: "Label Goes Here",
    path: "",
    propertyKey: "align",
    responsive: true,
    showLabel: true,
    showDeviceSelectionMenu: true,
    // ...[other options add here]
}

Option	Required	Description	Default	Type
initialValue	No	Specifies the initial value	left	string
propertyKey	No	Specifies property key	align	textAlign align justifyContent

Margin #

Property Name:

margin

{
    name: "margin",
    label: "Label Goes Here",
    path: "",
    propertyKey: "margin",
    responsive: true,
    showLabel: true,
    showDeviceSelectionMenu: true,
    // ...[other options add here]
}

Option	Required	Description	Default	Type
propertyKey	No	Specifies property key	margin	string

Padding #

Property Name:

padding

{
    name: "padding",
    label: "Label Goes Here",
    path: "",
    propertyKey: "padding",
    responsive: true,
    showLabel: true,
    showDeviceSelectionMenu: true,
    // ...[other options add here]
}

Option	Required	Description	Default	Type
propertyKey	No	Specifies property key	padding	string

Text Decoration #

Property Name:

textDecoration

{
    name: "textDecoration",
    label: "Label Goes Here",
    path: "",
    propertyKey: "textDecoration",
    responsive: true,
    showLabel: true,
    showDeviceSelectionMenu: true,
    // ...[other options add here]
}

Option	Required	Description	Default	Type
initialValue	No	Specifies the initial value		string
propertyKey	No	Specifies property key	textDecoration	string

Text Shadow #

Property Name:

textShadow

{
    name: "textShadow",
    label: "Label Goes Here",
    path: "",
    propertyKey: "textShadow",
    responsive: true,
    showLabel: true,
    showDeviceSelectionMenu: true,
    // ...[other options add here]
}

Option	Required	Description	Default	Type
initialValue	No	Specifies the initial value	none	string
propertyKey	No	Specifies property key	textShadow	string

Text Spacing #

Only the default option is available; no additional options are provided.

Property Name:

textSpacing

{
    name: "textSpacing",
    label: "Label Goes Here",
    path: "",
    responsive: true,
    showLabel: true,
    showDeviceSelectionMenu: true,
    // ...[other options add here]
}

Text Transform #

Property Name:

textTransform

{
    name: "textTransform",
    label: "Label Goes Here",
    path: "",
    propertyKey: "textTransform",
    responsive: true,
    showLabel: true,
    showDeviceSelectionMenu: true,
    // ...[other options add here]
}

Option	Required	Description	Default	Type
initialValue	No	Specifies the initial value	none	string
propertyKey	No	Specifies property key	textTransform	string

Align X & Y #

Property Name:

verticalHorizontalAlignment

{
    name: "verticalHorizontalAlignment",
    label: "Label Goes Here",
    path: "",
    responsive: true,
    showLabel: true,
    showDeviceSelectionMenu: true,
    // ...[other options add here]
}

Option	Required	Description	Default	Type
initialValue	No	Specifies the initial value {vertical: "top", horizontal: "align"}	{vertical: "top", horizontal: "align"}	object
propertyKey	No	Specifies property key for {vertical: "valign", horizontal: "valign"}	{vertical: "valign", horizontal: "align"}	object

Toolbar properties