Delimiter block tool for Editor.js
npm install @coolbytes/editorjs-delimiterThis Editor.js block tool extends @editorjs/delimiter to include more styles - dash and line. For line style, more options are also available under block settings menu (see Preview).
#### Block Tool
!delimiter
#### Block Settings
!settings
Using npm
``sh`
npm install @coolbytes/editorjs-delimiter
Using yarn
`sh`
yarn add @coolbytes/editorjs-delimiter
Include it in the tools property of Editor.js config:
`js`
const editor = new EditorJS({
tools: {
delimiter: Delimiter
}
});
|Field|Type|Optional|Default|Description|
|---|---|---|---|---|
|styleOptions|string[]|Yes|['star', 'dash', 'line']|All supported delimiter styles|string
|defaultStyle||Yes|'star'|Preferred delimiter style|number[]
|lineWidthOptions||Yes|[8, 15, 25, 35, 50, 60, 100]|All supported line width options (%). Applicable for 'line' style only|number
|defaultLineWidth||Yes|25|Preferred line width. Applicable for 'line' style only|number[]
|lineThicknessOptions||Yes|[1, 2, 3, 4, 5, 6]|All supported line thickness options. Applicable for 'line' style only|number
|defaultLineThickness||Yes|2|Preferred line thickness. Applicable for 'line' style only|
`js`
const editor = EditorJS({
tools: {
delimiter: {
class: Delimiter,
config: {
styleOptions: ['star', 'dash', 'line'],
defaultStyle: 'star',
lineWidthOptions: [8, 15, 25, 35, 50, 60, 100],
defaultLineWidth: 25,
lineThicknessOptions: [1, 2, 3, 4, 5, 6],
defaultLineThickness: 2,
}
}
}
});
|Field|Type|Availability|Description|
|---|---|---|---|
|style|string|All Styles|Delimiter Style|number
|lineWidth||line|Width of line style delimiter|number
|lineThickness||line|Thickness of line style delimiter|
Example:
`json``
{
"time": 1715969561758,
"blocks": [
{
"id": "_K5QcJHHuK",
"type": "delimiter",
"data": {
"style": "line",
"lineWidth": 25,
"lineThickness": 2
}
}
],
"version": "2.29.1"
}