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
ListtoEditorjsList.
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 withCounter typeNumericLower RomanUpper RomanLower AlphaUpper 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": []
},
]
},
]
}
},