Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

PirateDevCom/editorjs-delimiter

Open more actions menu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Delimiter block tool for Editor.js

This 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).

Preview

Block Tool

delimiter

Block Settings

settings

Installation

Using npm

npm install @coolbytes/editorjs-delimiter

Using yarn

yarn add @coolbytes/editorjs-delimiter

Usage

Include it in the tools property of Editor.js config:

const editor = new EditorJS({
  tools: {
    delimiter: Delimiter
  }
});

Config Params

Field Type Optional Default Description
styleOptions string[] Yes ['star', 'dash', 'line'] All supported delimiter styles
defaultStyle string Yes 'star' Preferred delimiter style
lineWidthOptions number[] Yes [8, 15, 25, 35, 50, 60, 100] All supported line width options (%). Applicable for 'line' style only
defaultLineWidth number Yes 25 Preferred line width. Applicable for 'line' style only
lineThicknessOptions number[] Yes [1, 2, 3, 4, 5, 6] All supported line thickness options. Applicable for 'line' style only
defaultLineThickness number Yes 2 Preferred line thickness. Applicable for 'line' style only

 

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,
      }
    }
  }
});

Output data

Field Type Availability Description
style string All Styles Delimiter Style
lineWidth number line Width of line style delimiter
lineThickness number line Thickness of line style delimiter

 

Example:

{
  "time": 1715969561758,
  "blocks": [
    {
      "id": "_K5QcJHHuK",
      "type": "delimiter",
      "data": {
        "style": "line",
        "lineWidth": 25,
        "lineThickness": 2
      }
    }
  ],
  "version": "2.29.1"
}
Morty Proxy This is a proxified and sanitized view of the page, visit original site.