To integrate custom tools, utilize thecustomJS
property. This property includes methods for registering tools and properties, such asregisterTool
andregisterProperty
.
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 |
path
specifies the direct location where values are stored.Example 1:
{
toolbar: [
{
name: "color",
label: "Text Color",
path: "style.color",
}
]
}
{
style: {
color: {
value: "#ffffff",
key: "--color-1",
label: "Color 1",
type: "text-color",
}
}
}
{
name: "label",
label: "Label Goes Here",
htmlFor: ""
// ...[other options add here]
}
Option | Required | Description | Default | Type |
---|---|---|---|---|
htmlFor | No | HTML for attribute | string |
{
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 | [] |
{
name: "input",
type: "",
label: "Label Goes Here",
path: "",
responsive: true,
showLabel: true,
showDeviceSelectionMenu: true,
// ...[other options add here]
}
{
name: "datetime",
label: "Label Goes Here",
path: "",
responsive: true,
showLabel: true,
showDeviceSelectionMenu: true,
// ...[other options add here]
}
{
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 |
{
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 |
{
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 |
{
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 |
{
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 |
{
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 |
{
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 |
{
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 |
{
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 |
{
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 |
{
name: "editor",
label: "Label Goes Here",
path: "",
responsive: true,
showLabel: true,
showDeviceSelectionMenu: true,
// ...[other options add here]
}
{
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 |
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:
{
toolbar: [
{
name: "alignment",
label: "Text Alignment",
path: "style",
responsive: true,
propertyKey: "textAlign"
}
]
}
{
style: {
textAlign: 'left'
}
}
Example 2:
{
toolbar: [
{
name: "font",
label: "Font",
path: "style",
responsive: true,
}
]
}
{
style: {
fontFamily: 'Arial, sans-serif'
fontWeight: '400'
}
}
Example 3:
{
toolbar: [
{
name: "border",
label: "Border",
path: "style",
responsive: true,
propertyKey: "border"
}
]
}
{
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",
}
}
}
}
{
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 |
{
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 |
{
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 |
{
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 |
{
name: "font",
label: "Label Goes Here",
path: "",
responsive: true,
showLabel: true,
showDeviceSelectionMenu: true,
// ...[other options add here]
}
{
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 |
{
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 |
{
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 |
{
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 |
{
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 |
{
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 |
{
name: "textSpacing",
label: "Label Goes Here",
path: "",
responsive: true,
showLabel: true,
showDeviceSelectionMenu: true,
// ...[other options add here]
}
{
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 |
{
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 |