@editorjs/list

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": []
          },
        ]
      },
    ]
  }
},