Skip to content

Commit

Permalink
Merge pull request #104 from editor-js/release/2.0
Browse files Browse the repository at this point in the history
Release/2.0
  • Loading branch information
e11sy authored Nov 13, 2024
2 parents 591bd2c + 1b0346c commit a91662b
Show file tree
Hide file tree
Showing 50 changed files with 5,002 additions and 2,400 deletions.
11 changes: 0 additions & 11 deletions .eslintrc

This file was deleted.

160 changes: 112 additions & 48 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,43 +1,50 @@
![](https://badgen.net/badge/Editor.js/v2.19.2/blue)

# Nested List Tool for Editor.js
# Editorjs List Tool

Multi-leveled lists for the [Editor.js](https://editorjs.io).
- 🤩 Part of [Editor.js](https://editorjs.io/) ecosystem.
- 📂 Nesting.
- 🔥 Ordered and Unordered lists.
- ✅ Checklists.
- 🔢 Customizable start number.
- 🏛️ Customizable counter type (e.g. `lower-roman`).
- 🪜 Max nesting level configuration.
- 📝 Compatible with [List](https://github.com/editor-js/list) and [Checklist](https://github.com/editor-js/checklist).

Use `Tab` and `Shift+Tab` keys to create or remove sublist with a padding.
![](assets/demo.gif)

![](assets/example.gif)
Use `Tab` and `Shift+Tab` keys to create or remove sublist with a padding.

## Installation

Get the package

```shell
yarn add @editorjs/nested-list
yarn add @editorjs/list
```

Include module at your application

```javascript
import NestedList from '@editorjs/nested-list';
import List from '@editorjs/list';
```

Optionally, you can load this tool from CDN [JsDelivr CDN](https://cdn.jsdelivr.net/npm/@editorjs/nested-list@latest)
Optionally, you can load this tool from CDN [JsDelivr CDN](https://cdn.jsdelivr.net/npm/@editorjs/list@latest)

## Usage

Add the NestedList Tool to the `tools` property of the Editor.js initial config.
Add the List Tool to the `tools` property of the Editor.js initial config.

```javascript
import EditorJS from '@editorjs/editorjs';
import NestedList from '@editorjs/nested-list';
import List from '@editorjs/list';

var editor = EditorJS({
// ...
tools: {
...
list: {
class: NestedList,
class: List,
inlineToolbar: true,
config: {
defaultStyle: 'unordered'
Expand All @@ -51,58 +58,115 @@ var editor = EditorJS({

| Field | Type | Description |
|--------------|----------|----------------------------------------------------------------|
| defaultStyle | `string` | default list style: `ordered` or `unordered`, default is `unordered` |
| 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 |

## Tool's settings
## Output data

![](assets/bf5a42e4-1350-499d-a728-493b0fcaeda4.jpg)
| 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 |

You can choose list`s type.
Object `Item`:

## Output data
| Field | Type | Description |
| ------- | ---------- | --------------------------- |
| content | `string` | item's string content |
| meta | `ItemMeta` | meta information about item |
| items | `Item[]` | the array of list's items |

| Field | Type | Description |
| ----- | --------- | ---------------------------------------- |
| style | `string` | type of a list: `ordered` or `unordered` |
| items | `Item[]` | the array of list's items |
Object `ItemMeta` for Checklist:

Object `Item`:
| Field | Type | Description |
| ------- | --------- | ------------------------- |
| checked | `boolean` | state of the checkbox |

Object `ItemMeta` for Ordered list

| Field | Type | Description |
| ------- | --------- | ------------------------- |
| content | `string` | item's string content |
| items | `Item[]` | the array of list's items |
| 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`
```json
{
"type" : "list",
"data" : {
"style" : "unordered",
"items" : [
{
"content": "Apples",
"items": [
{
"content": "Red",
"items": []
},
{
"content": "Green",
"items": []
},
]
},
{
"content": "Bananas",
"items": [
{
"content": "Yellow",
"items": []
},
]
"type" : "list",
"data" : {
"style": "unordered",
"items": [
{
"content": "Apples",
"meta": {},
"items": [
{
"content": "Red",
"meta": {},
"items": []
},
]
},
]
}
},
```

## Example of the content for `Ordered List`
```json
{
"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`
```json
{
"type" : "list",
"data" : {
"style": "checklist",
"items" : [
{
"content": "Apples",
"meta": {
"checked": false
},
"items": [
{
"content": "Red",
"meta": {
"checked": true
},
"items": []
},
]
}
},
]
}
},
```
Binary file removed assets/bf5a42e4-1350-499d-a728-493b0fcaeda4.jpg
Binary file not shown.
Binary file added assets/demo.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed assets/example.gif
Binary file not shown.
62 changes: 62 additions & 0 deletions eslint.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import CodeX from 'eslint-config-codex';
import { plugin as TsPlugin, parser as TsParser } from 'typescript-eslint';

export default [
...CodeX,

/**
* Redefine language options and some of the rules of CodeX eslint config for javascript config
*/
{
files: ['vite.config.js', 'eslint.config.mjs', 'postcss.config.js', '**/json-preview.js'],
languageOptions: {
parserOptions: {
project: './tsconfig.eslint.json',
ecmaVersion: 2022,
sourceType: 'module',
},
},
rules: {
'n/no-extraneous-import': ['error', {
allowModules: ['typescript-eslint'],
}],
},
},

/**
* Redefine language oprions and some of the rules of the CodeX eslint config for typescript config
*/
{
name: 'editorjs-list',
ignores: ['vite.config.js', 'eslint.config.mjs', 'postcss.config.js', '**/json-preview.js'],
plugins: {
'@typescript-eslint': TsPlugin,
},

/**
* This are the options for typescript files
*/
languageOptions: {
parser: TsParser,
parserOptions: {
project: './tsconfig.eslint.json',
tsconfigRootDir: './',
sourceType: 'module', // Allows for the use of imports
},
},

rules: {
'n/no-missing-import': ['off'],
'n/no-unpublished-import': ['error', {
allowModules: ['eslint-config-codex'],
ignoreTypeImport: true,
}],
'n/no-unsupported-features/node-builtins': ['error', {
version: '>=22.1.0',
}],
'@typescript-eslint/no-empty-object-type': ['error', {
allowInterfaces: 'always',
}],
},
},
];
45 changes: 0 additions & 45 deletions example/assets/json-preview.js

This file was deleted.

Loading

0 comments on commit a91662b

Please sign in to comment.