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
counterTypes	`string[]`	specifies which counter types should be shown in the ordered list style, could be set to `['numeric','upper-roman']`, default is `undefined` which shows all counter types

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.

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

Name		Name	Last commit message	Last commit date
Latest commit History 382 Commits
.github/workflows		.github/workflows
assets		assets
playground		playground
src		src
.editorconfig		.editorconfig
.gitignore		.gitignore
.npmignore		.npmignore
LICENSE		LICENSE
README.md		README.md
eslint.config.mjs		eslint.config.mjs
package.json		package.json
postcss.config.js		postcss.config.js
tsconfig.eslint.json		tsconfig.eslint.json
tsconfig.json		tsconfig.json
vite.config.js		vite.config.js
yarn.lock		yarn.lock

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

Editorjs List Tool

Installation

Usage

Config Params

Output data

Localisation

Other supported keys for `tools.List`

Example of the content for `Unordered List`

Example of the content for `Ordered List`

Example of the content for `Checklist`

About

Uh oh!

Uh oh!

Contributors 13

Uh oh!

Languages

License

editor-js/list

Folders and files

Latest commit

History

Repository files navigation

Editorjs List Tool

Installation

Usage

Config Params

Output data

Localisation

Other supported keys for tools.List

Example of the content for Unordered List

Example of the content for Ordered List

Example of the content for Checklist

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Uh oh!

Contributors 13

Uh oh!

Languages

Other supported keys for `tools.List`

Example of the content for `Unordered List`

Example of the content for `Ordered List`

Example of the content for `Checklist`