Release/2.0

README.md

@@ -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'
@@ -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": []
+          },
         ]
-    }
+      },
+    ]
+  }
 },
 ```

eslint.config.mjs

@@ -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',
+      }],
+    },
+  },
+];