Header block tool for Editor.js

This Editor.js block tool extends @editorjs/header to include alignment options (see Preview).

Preview

Block Tool

Block Settings

Installation

Using npm

npm install @coolbytes/editorjs-header

Using yarn

yarn add @coolbytes/editorjs-header

Usage

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

const editor = new EditorJS({
  tools: {
    header: Header
  }
});

Config Params

|Field|Type|Optional|Default|Description| |---|---|---|---|---| |placeholder|string|Yes|''|Placeholder text when empty| |levels|number[]|Yes|[1, 2, 3, 4, 5, 6]|All supported header levels| |defaultLevel|number|Yes|1|Preferred header level| |alignTypes|string[]|Yes|['left', 'center', 'right', 'justify']|All supported alignment options| |defaultAlignType|string|Yes|'left'|Preferred alignment type|

const editor = EditorJS({
  tools: {
    header: {
      class: Header,
      config: {
        placeholder: 'Start Typing...',
        levels: [1, 2, 3, 4, 5, 6],
        defaultLevel: 1,
        alignTypes: ['left', 'center', 'right', 'justify'],
        defaultAlignType: 'left'
      }
    }
  }
});

Output data

|Field|Type|Description| |---|---|---| |text|string|Header's text| |level|number|Header level| |align|string|Alignment type|

Example:

{
  "time": 1715969561758,
  "blocks": [
    {
      "id": "_K5QcJHHuK",
      "type": "header",
      "data": {
        "text": "Cool Bytes",
        "level": 1,
        "align": "center"
      }
    }
  ],
  "version": "2.29.1"
}