Chore(Eslint): fixed all eslint errors

eslint.config.mjs

@@ -3,9 +3,32 @@ 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-nested-list',
- ignores: ['vite.config.js'],
+ ignores: ['vite.config.js', 'eslint.config.mjs', 'postcss.config.js', '**/json-preview.js'],
  plugins: {
  '@typescript-eslint': TsPlugin,
  },
@@ -31,9 +54,6 @@ export default [
  'n/no-unsupported-features/node-builtins': ['error', {
  version: '>=22.1.0',
  }],
- 'n/no-extraneous-import': ['error', {
- allowModules: ['typescript-eslint'],
- }],
  '@typescript-eslint/no-empty-object-type': ['error', {
  allowInterfaces: 'always',
  }],

example/assets/json-preview.js

@@ -1,43 +1,53 @@
 /**
  * Module to compose output JSON preview
  */
+// eslint-disable-next-line no-unused-vars
 const cPreview = (function (module) {
  /**
  * Shows JSON in pretty preview
+ *
  * @param {object} output - what to show
  * @param {Element} holder - where to show
  */
- module.show = function(output, holder) {
+ module.show = function (output, holder) {
  /** Make JSON pretty */
- output = JSON.stringify( output, null, 4 );
+ output = JSON.stringify(output, null, 4);
  /** Encode HTML entities */
- output = encodeHTMLEntities( output );
+ output = encodeHTMLEntities(output);
  /** Stylize! */
- output = stylize( output );
+ output = stylize(output);
  holder.innerHTML = output;
  };
 
  /**
  * Converts '>', '<', '&' symbols to entities
+ *
+ * @param {string} string - in passed string all html symbols would be converted to the entities
+ * @returns {string} string with encoded html
  */
  function encodeHTMLEntities(string) {
- return string.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+ return string.replace(/&/g, '&amp;').replace(/</g, '&lt;')
+ .replace(/>/g, '&gt;');
  }
 
  /**
  * Some styling magic
+ *
+ * @param {string} string - passed string will be converted to stylized
+ * @returns {string} - passed string converted with stylized html elements
  */
  function stylize(string) {
  /** Stylize JSON keys */
- string = string.replace( /"(\w+)"\s?:/g, '"<span class=sc_key>$1</span>" :');
+ string = string.replace(/"(\w+)"\s?:/g, '"<span class=sc_key>$1</span>" :');
  /** Stylize tool names */
- string = string.replace( /"(paragraph|quote|list|header|link|code|image|delimiter|raw|checklist|table|embed|warning)"/g, '"<span class=sc_toolname>$1</span>"');
+ string = string.replace(/"(paragraph|quote|list|header|link|code|image|delimiter|raw|checklist|table|embed|warning)"/g, '"<span class=sc_toolname>$1</span>"');
  /** Stylize HTML tags */
- string = string.replace( /(&lt;[\/a-z]+(&gt;)?)/gi, '<span class=sc_tag>$1</span>' );
+ string = string.replace(/(&lt;[/a-z]+(&gt;)?)/gi, '<span class=sc_tag>$1</span>');
  /** Stylize strings */
- string = string.replace( /"([^"]+)"/gi, '"<span class=sc_attr>$1</span>"' );
+ string = string.replace(/"([^"]+)"/gi, '"<span class=sc_attr>$1</span>"');
  /** Boolean/Null */
- string = string.replace( /\b(true|false|null)\b/gi, '<span class=sc_bool>$1</span>' );
+ string = string.replace(/\b(true|false|null)\b/gi, '<span class=sc_bool>$1</span>');
+
  return string;
  }
 

postcss.config.js

@@ -1,7 +1,9 @@
+// eslint-disable-next-line no-undef
 module.exports = {
- plugins: [
- require('postcss-nested-ancestors'),
- require('postcss-nested'),
- ],
- };
-
+ plugins: [
+ // eslint-disable-next-line no-undef
+ require('postcss-nested-ancestors'),
+ // eslint-disable-next-line no-undef
+ require('postcss-nested'),
+ ],
+};

src/ListRenderer/ChecklistRenderer.ts

@@ -5,11 +5,33 @@ import * as Dom from '@editorjs/dom';
 import { DefaultListCssClasses, CssPrefix } from './ListRenderer';
 import type { ListCssClasses, ListRendererInterface } from './ListRenderer';
 
+/**
+ * Interface that represents all list used only in unordered list rendering
+ */
 interface ChecklistCssClasses extends ListCssClasses {
+ /**
+ * CSS class of the checklist
+ */
  checklist: string;
+
+ /**
+ * CSS class of the checked checkbox
+ */
  itemChecked: string;
+
+ /**
+ * CSS class for the special hover behavior of the checkboc
+ */
  noHover: string;
+
+ /**
+ * CSS class of the checkbox
+ */
  checkbox: string;
+
+ /**
+ * CSS class of the checkbox container
+ */
  checkboxContainer: string;
 }
 
@@ -27,7 +49,10 @@ export class CheckListRenderer implements ListRendererInterface<ChecklistItemMet
  */
  private readOnly: boolean;
 
- static get CSS(): ChecklistCssClasses {
+ /**
+ * Getter for all CSS classes used in unordered list rendering
+ */
+ private static get CSS(): ChecklistCssClasses {
  return {
  ...DefaultListCssClasses,
  checklist: `${CssPrefix}-checklist`,
@@ -38,6 +63,11 @@ export class CheckListRenderer implements ListRendererInterface<ChecklistItemMet
  };
  }
 
+ /**
+ * Assign passed readonly mode and config to relevant class properties
+ * @param readonly - read-only mode flag
+ * @param config - user config for Tool
+ */
  constructor(readonly: boolean, config?: NestedListConfig) {
  this.config = config;
  this.readOnly = readonly;
@@ -48,7 +78,7 @@ export class CheckListRenderer implements ListRendererInterface<ChecklistItemMet
  * @param isRoot - boolean variable that represents level of the wrappre (root or childList)
  * @returns - created html ul element
  */
- renderWrapper(isRoot: boolean): HTMLUListElement {
+ public renderWrapper(isRoot: boolean): HTMLUListElement {
  let wrapperElement: HTMLUListElement;
 
  /**
@@ -61,7 +91,7 @@ export class CheckListRenderer implements ListRendererInterface<ChecklistItemMet
  * Delegate clicks from wrapper to items
  */
  wrapperElement.addEventListener('click', (event) => {
- const target = event.target as Element;
+ const target = event.target as Element | null;
 
  if (target) {
  const checkbox = target.closest(`.${CheckListRenderer.CSS.checkboxContainer}`);
@@ -80,11 +110,11 @@ export class CheckListRenderer implements ListRendererInterface<ChecklistItemMet
 
  /**
  * Redners list item element
- * @param content - content of the list item
+ * @param content - content used in list item rendering
  * @param meta - meta of the list item used in rendering of the checklist
  * @returns - created html list item element
  */
- renderItem(content: string, meta: ChecklistItemMeta): HTMLLIElement {
+ public renderItem(content: string, meta: ChecklistItemMeta): HTMLLIElement {
  const itemWrapper = Dom.make('li', [CheckListRenderer.CSS.item, CheckListRenderer.CSS.item]);
  const itemContent = Dom.make('div', CheckListRenderer.CSS.itemContent, {
  innerHTML: content,
@@ -94,7 +124,7 @@ export class CheckListRenderer implements ListRendererInterface<ChecklistItemMet
  const checkbox = Dom.make('span', CheckListRenderer.CSS.checkbox);
  const checkboxContainer = Dom.make('div', CheckListRenderer.CSS.checkboxContainer);
 
- if (meta && meta.checked === true) {
+ if (meta.checked === true) {
  checkboxContainer.classList.add(CheckListRenderer.CSS.itemChecked);
  }
 
@@ -112,7 +142,7 @@ export class CheckListRenderer implements ListRendererInterface<ChecklistItemMet
  * @param item - item wrapper (<li>)
  * @returns - item content string
  */
- getItemContent(item: Element): string {
+ public getItemContent(item: Element): string {
  const contentNode = item.querySelector(`.${CheckListRenderer.CSS.itemContent}`);
 
  if (!contentNode) {
@@ -128,10 +158,10 @@ export class CheckListRenderer implements ListRendererInterface<ChecklistItemMet
 
  /**
  * Return meta object of certain element
- * @param item - item of the list to get meta from
+ * @param item - will be returned meta information of this item
  * @returns Item meta object
  */
- getItemMeta(item: Element): ChecklistItemMeta {
+ public getItemMeta(item: Element): ChecklistItemMeta {
  const checkbox = item.querySelector(`.${CheckListRenderer.CSS.checkboxContainer}`);
 
  return {
@@ -142,7 +172,7 @@ export class CheckListRenderer implements ListRendererInterface<ChecklistItemMet
  /**
  * Returns default item meta used on creation of the new item
  */
- composeDefaultMeta(): ChecklistItemMeta {
+ public composeDefaultMeta(): ChecklistItemMeta {
  return { checked: false };
  }
 

src/ListRenderer/ListRenderer.ts

@@ -17,9 +17,24 @@ export const DefaultListCssClasses = {
  * Interface that represents default list css classes
  */
 export interface ListCssClasses {
+ /**
+ * CSS class of the whole nested list wrapper
+ */
  wrapper: string;
+
+ /**
+ * CSS class of the nested list item
+ */
  item: string;
+
+ /**
+ * CSS class of the nested list item content element
+ */
  itemContent: string;
+
+ /**
+ * CSS class of the children item wrapper
+ */
  itemChildren: string;
 }
 

src/ListRenderer/OrderedListRenderer.ts

@@ -5,9 +5,12 @@ import { DefaultListCssClasses, CssPrefix } from './ListRenderer';
 import type { ListCssClasses, ListRendererInterface } from './ListRenderer';
 
 /**
- * CSS classes for the Ordered list
+ * Interface that represents all list used only in unordered list rendering
  */
 interface OrderedListCssClasses extends ListCssClasses {
+ /**
+ * CSS class of the ordered list
+ */
  orderedList: string;
 }
 
@@ -25,13 +28,21 @@ export class OrderedListRenderer implements ListRendererInterface<OrderedListIte
  */
  private readOnly: boolean;
 
- static get CSS(): OrderedListCssClasses {
+ /**
+ * Getter for all CSS classes used in unordered list rendering
+ */
+ private static get CSS(): OrderedListCssClasses {
  return {
  ...DefaultListCssClasses,
  orderedList: `${CssPrefix}-ordered`,
  };
  }
 
+ /**
+ * Assign passed readonly mode and config to relevant class properties
+ * @param readonly - read-only mode flag
+ * @param config - user config for Tool
+ */
  constructor(readonly: boolean, config?: NestedListConfig) {
  this.config = config;
  this.readOnly = readonly;
@@ -42,7 +53,7 @@ export class OrderedListRenderer implements ListRendererInterface<OrderedListIte
  * @param isRoot - boolean variable that represents level of the wrappre (root or childList)
  * @returns - created html ol element
  */
- renderWrapper(isRoot: boolean): HTMLOListElement {
+ public renderWrapper(isRoot: boolean): HTMLOListElement {
  let wrapperElement: HTMLOListElement;
 
  /**
@@ -59,11 +70,11 @@ export class OrderedListRenderer implements ListRendererInterface<OrderedListIte
 
  /**
  * Redners list item element
- * @param content - content of the list item
+ * @param content - content used in list item rendering
  * @param _meta - meta of the list item unused in rendering of the ordered list
  * @returns - created html list item element
  */
- renderItem(content: string, _meta: OrderedListItemMeta): HTMLLIElement {
+ public renderItem(content: string, _meta: OrderedListItemMeta): HTMLLIElement {
  const itemWrapper = Dom.make('li', OrderedListRenderer.CSS.item);
  const itemContent = Dom.make('div', OrderedListRenderer.CSS.itemContent, {
  innerHTML: content,
@@ -80,7 +91,7 @@ export class OrderedListRenderer implements ListRendererInterface<OrderedListIte
  * @param item - item wrapper (<li>)
  * @returns - item content string
  */
- getItemContent(item: Element): string {
+ public getItemContent(item: Element): string {
  const contentNode = item.querySelector(`.${OrderedListRenderer.CSS.itemContent}`);
 
  if (!contentNode) {
@@ -98,14 +109,14 @@ export class OrderedListRenderer implements ListRendererInterface<OrderedListIte
  * Returns item meta, for ordered list
  * @returns item meta object
  */
- getItemMeta(): OrderedListItemMeta {
+ public getItemMeta(): OrderedListItemMeta {
  return {};
  }
 
  /**
  * Returns default item meta used on creation of the new item
  */
- composeDefaultMeta(): OrderedListItemMeta {
+ public composeDefaultMeta(): OrderedListItemMeta {
  return {};
  }
 }