- 🤩 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.
Get the package
yarn add @editorjs/listInclude module at your application
import EditorjsList from '@editorjs/list';Optionally, you can load this tool from CDN JsDelivr CDN
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.
| 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 |
| 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.
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',
}
},
},
},Start withCounter typeNumericLower RomanUpper RomanLower AlphaUpper Alpha
{
"type" : "list",
"data" : {
"style": "unordered",
"items": [
{
"content": "Apples",
"meta": {},
"items": [
{
"content": "Red",
"meta": {},
"items": []
},
]
},
]
}
},{
"type" : "list",
"data" : {
"style": "ordered",
"meta": {
"start": 2,
"counterType": "upper-roman",
},
"items" : [
{
"content": "Apples",
"meta": {},
"items": [
{
"content": "Red",
"meta": {},
"items": []
},
]
},
]
}
},{
"type" : "list",
"data" : {
"style": "checklist",
"items" : [
{
"content": "Apples",
"meta": {
"checked": false
},
"items": [
{
"content": "Red",
"meta": {
"checked": true
},
"items": []
},
]
},
]
}
},