Chore (eslint): src/index + utils eslint fixes

eslint.config.mjs

@@ -5,6 +5,7 @@ export default [
   ...CodeX,
   {
     name: 'editorjs-nested-list',
+    ignores: ['vite.config.js'],
     plugins: {
       '@typescript-eslint': TsPlugin,
     },
@@ -28,11 +29,14 @@ export default [
         ignoreTypeImport: true,
       }],
       'n/no-unsupported-features/node-builtins': ['error', {
-        version: '>=20.11.1',
+        version: '>=22.1.0',
       }],
       'n/no-extraneous-import': ['error', {
         allowModules: ['typescript-eslint'],
       }],
+      '@typescript-eslint/no-empty-object-type': ['error', {
+        allowInterfaces: 'always',
+      }],
     },
   },
 ];

src/index.ts

@@ -26,14 +26,14 @@ export default class NestedList {
   /**
    * Notify core that read-only mode is supported
    */
-  static get isReadOnlySupported(): boolean {
+  public static get isReadOnlySupported(): boolean {
     return true;
   }
 
   /**
    * Allow to use native Enter behaviour
    */
-  static get enableLineBreaks(): boolean {
+  public static get enableLineBreaks(): boolean {
     return true;
   }
 
@@ -42,25 +42,72 @@ export default class NestedList {
    * icon - Tool icon's SVG
    * title - title to show in toolbox
    */
-  static get toolbox(): ToolboxConfig {
+  public static get toolbox(): ToolboxConfig {
     return {
       icon: IconListNumbered,
       title: 'List',
     };
   }
 
+  /**
+   * On paste sanitzation config. Allow only tags that are allowed in the Tool.
+   * @returns - paste config object used in editor
+   */
+  public static get pasteConfig(): PasteConfig {
+    return {
+      tags: ['OL', 'UL', 'LI'],
+    };
+  }
+
+  /**
+   * Convert from text to list with import and export list to text
+   */
+  public static get conversionConfig(): {
+    /**
+     * Method that is responsible for conversion from data to string
+     * @param data - current list data
+     * @returns - contents string formed from list data
+     */
+    export: (data: ListData) => string;
+
+    /**
+     * Method that is responsible for conversion from string to data
+     * @param content - contents string
+     * @returns - list data formed from contents string
+     */
+    import: (content: string) => ListData;
+  } {
+    return {
+      export: (data) => {
+        return NestedList.joinRecursive(data);
+      },
+      import: (content) => {
+        return {
+          items: [
+            {
+              content,
+              meta: {},
+              items: [],
+            },
+          ],
+          style: 'unordered',
+        };
+      },
+    };
+  }
+
   /**
    * Get list style name
    */
-  get listStyle(): ListDataStyle {
+  private get listStyle(): ListDataStyle {
     return this.data.style || this.defaultListStyle;
   }
 
   /**
    * Set list style
    * @param style - new style to set
    */
-  set listStyle(style: ListDataStyle) {
+  private set listStyle(style: ListDataStyle) {
     this.data.style = style;
 
     this.changeTabulatorByStyle();
@@ -91,7 +138,7 @@ export default class NestedList {
   private config: NestedListConfig;
 
   /**
-   * Default list style
+   * Default list style formes as passed default list style from config or 'ordered' as default
    */
   private defaultListStyle?: NestedListConfig['defaultStyle'];
 
@@ -106,14 +153,14 @@ export default class NestedList {
   private block: BlockAPI;
 
   /**
-   * Class that is responsible for list complete list rendering and saving
+   * Class that is responsible for complete list rendering and saving
    */
-  list: ListTabulator<ListRenderer> | undefined;
+  private list: ListTabulator<ListRenderer> | undefined;
 
   /**
    * Main constant wrapper of the whole list
    */
-  listElement: HTMLElement | undefined;
+  private listElement: HTMLElement | undefined;
 
   /**
    * Render plugin`s main Element and fill it with saved data
@@ -139,16 +186,27 @@ export default class NestedList {
       items: [],
     };
 
-    this.data = data && Object.keys(data).length ? data : initialData;
+    this.data = Object.keys(data).length ? data : initialData;
 
     this.changeTabulatorByStyle();
   }
 
+  /**
+   * Convert from list to text for conversionConfig
+   * @param data - current data of the list
+   * @returns - string of the recursively merged contents of the items of the list
+   */
+  private static joinRecursive(data: ListData | ListItem): string {
+    return data.items
+      .map(item => `${item.content} ${NestedList.joinRecursive(item)}`)
+      .join('');
+  }
+
   /**
    * Function that is responsible for content rendering
    * @returns rendered list wrapper with all contents
    */
-  render() {
+  public render(): HTMLElement {
     this.listElement = this.list!.render();
 
     return this.listElement;
@@ -158,21 +216,25 @@ export default class NestedList {
    * Function that is responsible for content saving
    * @returns formatted content used in editor
    */
-  save() {
+  public save(): ListData {
     this.data = this.list!.save();
 
     return this.data;
   }
 
-  merge(data: ListData) {
+  /**
+   * Function that is responsible for mergind two lists into one
+   * @param data - data of the next standing list, that should be merged with current
+   */
+  public merge(data: ListData): void {
     this.list!.merge(data);
   }
 
   /**
    * Creates Block Tune allowing to change the list style
    * @returns array of tune configs
    */
-  renderSettings(): TunesMenuConfig {
+  public renderSettings(): TunesMenuConfig {
     const tunes = [
       {
         name: 'unordered' as const,
@@ -206,7 +268,7 @@ export default class NestedList {
   /**
    * This method allows changing tabulator respectfully to passed style
    */
-  changeTabulatorByStyle() {
+  private changeTabulatorByStyle(): void {
     switch (this.listStyle) {
       case 'ordered':
         this.list = new ListTabulator<OrderedListRenderer>({
@@ -248,51 +310,4 @@ export default class NestedList {
         break;
     }
   }
-
-  /**
-   * On paste sanitzation config. Allow only tags that are allowed in the Tool.
-   * @returns - paste config.
-   */
-  static get pasteConfig(): PasteConfig {
-    return {
-      tags: ['OL', 'UL', 'LI'],
-    };
-  }
-
-  /**
-   * Convert from list to text for conversionConfig
-   * @param data - current data of the list
-   * @returns - string of the recursively merged contents of the items of the list
-   */
-  static joinRecursive(data: ListData | ListItem): string {
-    return data.items
-      .map(item => `${item.content} ${NestedList.joinRecursive(item)}`)
-      .join('');
-  }
-
-  /**
-   * Convert from text to list with import and export list to text
-   */
-  static get conversionConfig(): {
-    export: (data: ListData) => string;
-    import: (content: string) => ListData;
-  } {
-    return {
-      export: (data) => {
-        return NestedList.joinRecursive(data);
-      },
-      import: (content) => {
-        return {
-          items: [
-            {
-              content,
-              meta: {},
-              items: [],
-            },
-          ],
-          style: 'unordered',
-        };
-      },
-    };
-  }
 }

src/types/index.ts

@@ -6,6 +6,9 @@ export interface PasteEvent extends CustomEvent {
    * Pasted element
    */
   detail: {
+    /**
+     * Supported elements fir the paste event
+     */
     data: HTMLUListElement | HTMLOListElement | HTMLLIElement;
   };
 }

src/utils/getChildItems.ts

@@ -3,10 +3,11 @@ import type { ItemChildWrapperElement, ItemElement } from '../types/Elements';
 
 /**
  * Get child items of the passed element
- * @param element - element to get child items
+ * @param element - child items would be got from this element
  * @param firstLevelChildren - if method should return all level child items or only first level ones
  */
-export function getChildItems(element: ItemElement, firstLevelChildren: boolean = true): ItemElement[] {
+// eslint-disable-next-line @typescript-eslint/no-duplicate-type-constituents
+export function getChildItems(element: ItemElement | ItemChildWrapperElement, firstLevelChildren: boolean = true): ItemElement[] {
   let itemChildWrapper: HTMLElement = element;
 
   /**

src/utils/getItemChildWrapper.ts

@@ -3,7 +3,7 @@ import { DefaultListCssClasses } from '../ListRenderer';
 
 /**
  * Returns child wrapper element of the passed item
- * @param item - item to get wrapper from
+ * @param item - wrapper element would be got from this item
  */
 export function getItemChildWrapper(item: ItemElement): ItemChildWrapperElement | null {
   return item.querySelector(`.${DefaultListCssClasses.itemChildren}`);

src/utils/getItemContentElement.ts

@@ -3,7 +3,7 @@ import { DefaultListCssClasses } from '../ListRenderer';
 
 /**
  * Returns content element of the passed item
- * @param item - item to get content element from
+ * @param item - content element would be got from this item
  */
 export function getItemContentElement(item: ItemElement): ItemContentElement | null {
   return item.querySelector(`.${DefaultListCssClasses.itemContent}`);

src/utils/getSiblings.ts

@@ -8,16 +8,21 @@ export function getSiblings(element: HTMLElement, direction: 'after' | 'before'
 
   let nextElementSibling: HTMLElement;
 
-  function getNextElementSibling(element: HTMLElement): HTMLElement {
+  /**
+   * Method that is responsible for getting next element sibling responsible to the direction variable
+   * @param el - current element
+   * @returns HTML element of the sibling
+   */
+  function getNextElementSibling(el: HTMLElement): HTMLElement {
     /**
      * Get first sibling element respectfully to passed direction
      */
     switch (direction) {
       case 'after':
-        return element.nextElementSibling as HTMLElement;
+        return el.nextElementSibling as HTMLElement;
 
       case 'before':
-        return element.previousElementSibling as HTMLElement;
+        return el.previousElementSibling as HTMLElement;
     }
   }
 

tsconfig.json

@@ -14,5 +14,5 @@
     "isolatedModules": true
   },
   "include": ["src"],
-  "exclude": ["node_modules", "**/*.spec.ts"]
+  "exclude": ["node_modules"]
 }