Merge pull request #107 from editor-js/rename-to-list

Chore (): rename Nested List tool to the Editorjs List tool

README.md

@@ -1,6 +1,6 @@
 ![](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).
 
@@ -24,31 +24,31 @@ Use `Tab` and `Shift+Tab` keys to create or remove sublist with a padding.
 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'

eslint.config.mjs

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

example/example.html

@@ -59,7 +59,7 @@
   <script src="https://cdn.jsdelivr.net/npm/@editorjs/simple-image@latest"></script><!-- Image -->
   <script src="https://cdn.jsdelivr.net/npm/@editorjs/delimiter@latest"></script><!-- Delimiter -->
 <!--  <script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>&lt;!&ndash; List &ndash;&gt;-->
-  <script src="../dist/nested-list.js"></script><!-- Nested List -->
+  <script src="../dist/editorjs-list.js"></script><!-- Editorjs List -->
   <script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist@latest"></script><!-- Checklist -->
   <script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script><!-- Quote -->
   <script src="https://cdn.jsdelivr.net/npm/@editorjs/code@latest"></script><!-- Code -->
@@ -120,8 +120,8 @@
          */
         image: SimpleImage,
 
-        nestedList: {
-          class: NestedList,
+        List: {
+          class: List,
           inlineToolbar: true,
           shortcut: 'CMD+SHIFT+L'
         },
@@ -189,7 +189,7 @@
       data: {
         blocks: [
           {
-            type : 'nestedList',
+            type : 'List',
             data : {
               items : [
                 {

index.html

@@ -197,9 +197,9 @@
             data : {
             style : "checklist",
             items : [
-              "This is List tool data",
+              "This is old List tool data",
               "That would be displayed",
-              "In Nested List tool"
+              "In new List tool"
               ],
             },
           },
@@ -216,7 +216,7 @@
                   checked: false
                 },
                 {
-                  text: "In Nested List tool",
+                  text: "In new List tool",
                   checked: true
                 }
               ]

package.json

@@ -1,25 +1,25 @@
 {
-  "name": "@editorjs/nested-list",
-  "version": "1.4.3",
+  "name": "@editorjs/list",
+  "version": "2.0.0",
   "keywords": [
     "codex editor",
-    "nested-list",
+    "list",
     "editor.js",
     "editorjs"
   ],
-  "description": "Nested list Tool for EditorJS",
-  "repository": "https://github.com/editor-js/nested-list.git",
+  "description": "List Tool for EditorJS",
+  "repository": "https://github.com/editor-js/list.git",
   "author": "CodeX <[email protected]>",
   "license": "MIT",
   "files": [
     "dist"
   ],
-  "main": "./dist/nested-list.umd.js",
-  "module": "./dist/nested-list.mjs",
+  "main": "./dist/editorjs-list.umd.js",
+  "module": "./dist/editorjs-list.mjs",
   "exports": {
     ".": {
-      "import": "./dist/nested-list.mjs",
-      "require": "./dist/nested-list.umd.js",
+      "import": "./dist/editorjs-list.mjs",
+      "require": "./dist/editorjs-list.umd.js",
       "types": "./dist/index.d.ts"
     }
   },

src/ListRenderer/ChecklistRenderer.ts

@@ -1,6 +1,6 @@
 import { IconCheck } from '@codexteam/icons';
 import type { ChecklistItemMeta } from '../types/ItemMeta';
-import type { NestedListConfig } from '../types/ListParams';
+import type { ListConfig } from '../types/ListParams';
 import { isEmpty, make } from '@editorjs/dom';
 import { DefaultListCssClasses } from './ListRenderer';
 import type { ListCssClasses, ListRendererInterface } from './ListRenderer';
@@ -43,7 +43,7 @@ export class CheckListRenderer implements ListRendererInterface<ChecklistItemMet
   /**
    * Tool's configuration
    */
-  protected config?: NestedListConfig;
+  protected config?: ListConfig;
 
   /**
    * Is NestedList Tool read-only option
@@ -69,7 +69,7 @@ export class CheckListRenderer implements ListRendererInterface<ChecklistItemMet
    * @param readonly - read-only mode flag
    * @param config - user config for Tool
    */
-  constructor(readonly: boolean, config?: NestedListConfig) {
+  constructor(readonly: boolean, config?: ListConfig) {
     this.config = config;
     this.readOnly = readonly;
   }

src/ListRenderer/ListRenderer.ts

@@ -14,17 +14,17 @@ export const DefaultListCssClasses = {
  */
 export interface ListCssClasses {
   /**
-   * CSS class of the whole nested list wrapper
+   * CSS class of the whole list wrapper
    */
   wrapper: string;
 
   /**
-   * CSS class of the nested list item
+   * CSS class of the list item
    */
   item: string;
 
   /**
-   * CSS class of the nested list item content element
+   * CSS class of the list item content element
    */
   itemContent: string;
 

src/ListRenderer/OrderedListRenderer.ts

@@ -1,5 +1,5 @@
 import type { OrderedListItemMeta } from '../types/ItemMeta';
-import type { NestedListConfig } from '../types/ListParams';
+import type { ListConfig } from '../types/ListParams';
 import { isEmpty, make } from '@editorjs/dom';
 import { DefaultListCssClasses } from './ListRenderer';
 import type { ListCssClasses, ListRendererInterface } from './ListRenderer';
@@ -22,10 +22,10 @@ export class OrderedListRenderer implements ListRendererInterface<OrderedListIte
   /**
    * Tool's configuration
    */
-  protected config?: NestedListConfig;
+  protected config?: ListConfig;
 
   /**
-   * Is NestedList Tool read-only option
+   * Is Editorjs List Tool read-only option
    */
   private readOnly: boolean;
 
@@ -44,7 +44,7 @@ export class OrderedListRenderer implements ListRendererInterface<OrderedListIte
    * @param readonly - read-only mode flag
    * @param config - user config for Tool
    */
-  constructor(readonly: boolean, config?: NestedListConfig) {
+  constructor(readonly: boolean, config?: ListConfig) {
     this.config = config;
     this.readOnly = readonly;
   }

src/ListRenderer/UnorderedListRenderer.ts

@@ -1,5 +1,5 @@
 import type { UnorderedListItemMeta } from '../types/ItemMeta';
-import type { NestedListConfig } from '../types/ListParams';
+import type { ListConfig } from '../types/ListParams';
 import { make, isEmpty } from '@editorjs/dom';
 import { DefaultListCssClasses } from './ListRenderer';
 import type { ListCssClasses, ListRendererInterface } from './ListRenderer';
@@ -22,10 +22,10 @@ export class UnorderedListRenderer implements ListRendererInterface<UnorderedLis
   /**
    * Tool's configuration
    */
-  protected config?: NestedListConfig;
+  protected config?: ListConfig;
 
   /**
-   * Is NestedList Tool read-only option
+   * Is Editorjs List Tool read-only option
    */
   private readOnly: boolean;
 
@@ -44,7 +44,7 @@ export class UnorderedListRenderer implements ListRendererInterface<UnorderedLis
    * @param readonly - read-only mode flag
    * @param config - user config for Tool
    */
-  constructor(readonly: boolean, config?: NestedListConfig) {
+  constructor(readonly: boolean, config?: ListConfig) {
     this.config = config;
     this.readOnly = readonly;
   }

src/ListTabulator/index.ts

@@ -1,6 +1,6 @@
 import { OrderedListRenderer } from '../ListRenderer/OrderedListRenderer';
 import { UnorderedListRenderer } from '../ListRenderer/UnorderedListRenderer';
-import type { NestedListConfig, ListData, ListDataStyle } from '../types/ListParams';
+import type { ListConfig, ListData, ListDataStyle } from '../types/ListParams';
 import type { ListItem } from '../types/ListParams';
 import type { ItemElement, ItemChildWrapperElement } from '../types/Elements';
 import { isHtmlElement } from '../utils/type-guards';
@@ -31,14 +31,14 @@ export default class ListTabulator<Renderer extends ListRenderer> {
   private api: API;
 
   /**
-   * Is NestedList Tool read-only option
+   * Is Editorjs List Tool read-only option
    */
   private readOnly: boolean;
 
   /**
    * Tool's configuration
    */
-  private config?: NestedListConfig;
+  private config?: ListConfig;
 
   /**
    * Full content of the list
@@ -138,7 +138,7 @@ export default class ListTabulator<Renderer extends ListRenderer> {
   }
 
   /**
-   * Function that is responsible for rendering nested list with contents
+   * Function that is responsible for rendering list with contents
    * @returns Filled with content wrapper element of the list
    */
   public render(): ItemChildWrapperElement {
@@ -252,7 +252,7 @@ export default class ListTabulator<Renderer extends ListRenderer> {
   /**
    * On paste sanitzation config. Allow only tags that are allowed in the Tool.
    * @returns - config that determines tags supposted by paste handler
-   * @todo - refactor and move to nested list instance
+   * @todo - refactor and move to list instance
    */
   public static get pasteConfig(): PasteConfig {
     return {
@@ -340,7 +340,7 @@ export default class ListTabulator<Renderer extends ListRenderer> {
   /**
    * On paste callback that is fired from Editor.
    * @param event - event with pasted data
-   * @todo - refactor and move to nested list instance
+   * @todo - refactor and move to list instance
    */
   public onPaste(event: PasteEvent): void {
     const list = event.detail.data;
@@ -358,7 +358,7 @@ export default class ListTabulator<Renderer extends ListRenderer> {
   /**
    * Handle UL, OL and LI tags paste and returns List data
    * @param element - html element that contains whole list
-   * @todo - refactor and move to nested list instance
+   * @todo - refactor and move to list instance
    */
   public pasteHandler(element: PasteEvent['detail']['data']): ListData {
     const { tagName: tag } = element;

src/index.ts

@@ -5,7 +5,7 @@ import type {
   ToolConfig
 } from '@editorjs/editorjs/types/tools';
 import { IconListBulleted, IconListNumbered, IconChecklist } from '@codexteam/icons';
-import type { NestedListConfig, ListData, ListDataStyle, ListItem, OldListData } from './types/ListParams';
+import type { ListConfig, ListData, ListDataStyle, ListItem, OldListData } from './types/ListParams';
 import ListTabulator from './ListTabulator';
 import { CheckListRenderer, OrderedListRenderer, UnorderedListRenderer } from './ListRenderer';
 import type { ListRenderer } from './types/ListRenderer';
@@ -22,14 +22,14 @@ import normalizeData from './utils/normalizeData';
 import type { PasteEvent } from './types';
 
 /**
- * Constructor Params for Nested List Tool, use to pass initial data and settings
+ * Constructor Params for Editorjs List Tool, use to pass initial data and settings
  */
-export type ListParams = BlockToolConstructorOptions<ListData | OldListData, NestedListConfig>;
+export type ListParams = BlockToolConstructorOptions<ListData | OldListData, ListConfig>;
 
 /**
  * Default class of the component used in editor
  */
-export default class NestedList {
+export default class EditorjsList {
   /**
    * Notify core that read-only mode is supported
    */
@@ -101,11 +101,11 @@ export default class NestedList {
      * @param content - contents string
      * @returns - list data formed from contents string
      */
-    import: (content: string, config: ToolConfig<NestedListConfig>) => ListData;
+    import: (content: string, config: ToolConfig<ListConfig>) => ListData;
   } {
     return {
       export: (data) => {
-        return NestedList.joinRecursive(data);
+        return EditorjsList.joinRecursive(data);
       },
       import: (content, config) => {
         return {
@@ -154,19 +154,19 @@ export default class NestedList {
   private api: API;
 
   /**
-   * Is NestedList Tool read-only
+   * Is Ediotrjs List Tool read-only
    */
   private readOnly: boolean;
 
   /**
    * Tool's configuration
    */
-  private config: NestedListConfig | undefined;
+  private config: ListConfig | undefined;
 
   /**
    * Default list style formes as passed default list style from config or 'ordered' as default
    */
-  private defaultListStyle?: NestedListConfig['defaultStyle'];
+  private defaultListStyle?: ListConfig['defaultStyle'];
 
   /**
    * Tool's data
@@ -231,7 +231,7 @@ export default class NestedList {
    */
   private static joinRecursive(data: ListData | ListItem): string {
     return data.items
-      .map(item => `${item.content} ${NestedList.joinRecursive(item)}`)
+      .map(item => `${item.content} ${EditorjsList.joinRecursive(item)}`)
       .join('');
   }
 
@@ -356,7 +356,6 @@ export default class NestedList {
   /**
    * On paste callback that is fired from Editor.
    * @param event - event with pasted data
-   * @todo - refactor and move to nested list instance
    */
   public onPaste(event: PasteEvent): void {
     const { tagName: tag } = event.detail.data;
@@ -376,7 +375,6 @@ export default class NestedList {
   /**
    * Handle UL, OL and LI tags paste and returns List data
    * @param element - html element that contains whole list
-   * @todo - refactor and move to nested list instance
    */
   public pasteHandler(element: PasteEvent['detail']['data']): ListData {
     const data = this.list!.pasteHandler(element);