search

editor-js / list

Advanced List tool for the Editor.js.
MIT License
48 stars 47 forks source link

readme

Editorjs List Tool

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