Awesome

Editorjs List Tool

🤩 Part of Editor.js ecosystem.
📂 Nesting.
🔥 Ordered and Unordered lists.
✅ Checklists.
🔢 Customizable start number.
🏛️ Customizable counter type (e.g. lower-roman).
🪜 Max nesting level configuration.
📝 Compatible with List and Checklist.

Use Tab and Shift+Tab keys to create or remove sublist with a padding.

Installation

Get the package

yarn add @editorjs/list

Include module at your application

import EditorjsList from '@editorjs/list';

Optionally, you can load this tool from CDN JsDelivr CDN

Usage

Add the List Tool to the tools property of the Editor.js initial config.

import EditorJS from '@editorjs/editorjs';
import EditorjsList from '@editorjs/list';

var editor = EditorJS({
  // ...
  tools: {
    ...
    list: {
      class: EditorjsList,
      inlineToolbar: true,
      config: {
        defaultStyle: 'unordered'
      },
    },
  },
});

[!IMPORTANT] Note that in List 2.0 class name changed from List to EditorjsList.

Config Params

Field	Type	Description
defaultStyle	`string`	default list style: `ordered`, `unordered` or `checklist`, default is `unordered`
maxLevel	`number`	maximum level of the list nesting, could be set to `1` to disable nesting, unlimited by default

Output data

Field	Type	Description
style	`string`	list will be rendered with this style: `ordered`, `unordered` or `checklist`, default is `defaultStyle` from tool config
meta	`ItemMeta`	Item meta based on the list style
items	`Item[]`	the array of list's items

Object Item:

Field	Type	Description
content	`string`	item's string content
meta	`ItemMeta`	meta information about item
items	`Item[]`	the array of list's items

Object ItemMeta for Checklist:

Field	Type	Description
checked	`boolean`	state of the checkbox

Object ItemMeta for Ordered list

Field	Type	Description
start	`number`	number for list to start with, default is 1
counterType	`string`	counter type for list, it could be `numeric`, `lower-roman`, `upper-roman`, `lower-alpha`, `upper-alpha`, default is `numeric`

Object ItemMeta for Unordered list would be empty.

Example of the content for `Unordered List`

{
  "type" : "list",
  "data" : {
    "style": "unordered",
    "items": [
      {
        "content": "Apples",
        "meta": {},
        "items": [
          {
            "content": "Red",
            "meta": {},
            "items": []
          },
        ]
      },
    ]
  }
},

Example of the content for `Ordered List`

{
  "type" : "list",
  "data" : {
    "style": "ordered",
    "meta": {
      "start": 2,
      "counterType": "upper-roman",
    },
    "items" : [
      {
        "content": "Apples",
        "meta": {},
        "items": [
          {
            "content": "Red",
            "meta": {},
            "items": []
          },
        ]
      },
    ]
  }
},

Example of the content for `Checklist`

{
  "type" : "list",
  "data" : {
    "style": "checklist",
    "items" : [
      {
        "content": "Apples",
        "meta": {
          "checked": false
        },
        "items": [
          {
            "content": "Red",
            "meta": {
              "checked": true
            },
            "items": []
          },
        ]
      },
    ]
  }
},