@editorjs/list v2.0.8

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

Output data

Object Item:

Object ItemMeta for Checklist:

Object ItemMeta for Ordered list

Object ItemMeta for Unordered list would be empty.

Localisation

If you want to use your language for toolbox items, you can pass i18n dictionary to the editorjs instance below the tools block:

i18n: { 
  messages: {
    "toolNames": {
      "Ordered List": "Nummerierte Liste",
      "Unordered List": "Unnummeriert Liste",
      "Checklist": "Checkliste",
    },
    "tools": {
      "List": {
        'Unordered': 'Unnummeriert',
        'Ordered': 'Nummerierte',
        'Checklist': 'Checkliste',
      }
    },
  },
},

Other supported keys for tools.List

• Start with
• Counter type
• Numeric
• Lower Roman
• Upper Roman
• Lower Alpha
• Upper Alpha

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