Merge pull request #83 from editor-js/eslint-setup

Feat(eslint): setup eslint

eslint.config.mjs

@@ -0,0 +1,38 @@
+import CodeX from 'eslint-config-codex';
+import { plugin as TsPlugin, parser as TsParser } from 'typescript-eslint';
+
+export default [
+ ...CodeX,
+ {
+ name: 'editorjs-nested-list',
+ 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: '>=20.11.1',
+ }],
+ 'n/no-extraneous-import': ['error', {
+ allowModules: ['typescript-eslint'],
+ }],
+ },
+ },
+];

package.json

@@ -27,18 +27,18 @@
  "scripts": {
  "dev": "vite",
  "build": "vite build",
- "lint": "eslint src/ --quiet --ext .ts",
- "lint:errors": "eslint src/ --quiet",
- "lint:fix": "eslint src/ --fix"
+ "lint": "eslint",
+ "lint:fix": "eslint --fix"
  },
  "devDependencies": {
  "@editorjs/editorjs": "^2.29.1",
  "@typescript-eslint/eslint-plugin": "^7.13.1",
  "@typescript-eslint/parser": "^7.13.1",
  "@editorjs/caret": "^0.0.7",
  "@editorjs/dom": "^0.0.7",
- "eslint": "^7.22.0",
- "eslint-loader": "^4.0.2",
+ "eslint": "^9.2.0",
+ "eslint-config-codex": "^2.0.0",
+ "eslint-import-resolver-alias": "1.1.2",
  "postcss-nested": "^5.0.3",
  "postcss-nested-ancestors": "^2.0.0",
  "typescript": "^5.4.5",

src/ListRenderer/ChecklistRenderer.ts

@@ -1,9 +1,9 @@
-import { IconCheck } from '@codexteam/icons'
-import type { ChecklistItemMeta } from "../types/ItemMeta";
-import { NestedListConfig } from "../types/ListParams";
+import { IconCheck } from '@codexteam/icons';
+import type { ChecklistItemMeta } from '../types/ItemMeta';
+import type { NestedListConfig } from '../types/ListParams';
 import * as Dom from '@editorjs/dom';
-import { ListRendererInterface, DefaultListCssClasses, CssPrefix } from './ListRenderer';
-import type { ListCssClasses } from './ListRenderer';
+import { DefaultListCssClasses, CssPrefix } from './ListRenderer';
+import type { ListCssClasses, ListRendererInterface } from './ListRenderer';
 
 interface ChecklistCssClasses extends ListCssClasses {
  checklist: string;
@@ -34,8 +34,8 @@ export class CheckListRenderer implements ListRendererInterface<ChecklistItemMet
  itemChecked: `${CssPrefix}__checkbox--checked`,
  noHover: `${CssPrefix}__checkbox--no-hover`,
  checkbox: `${CssPrefix}__checkbox-check`,
- checkboxContainer: `${CssPrefix}__checkbox`
- }
+ checkboxContainer: `${CssPrefix}__checkbox`,
+ };
  }
 
  constructor(readonly: boolean, config?: NestedListConfig) {
@@ -62,7 +62,8 @@ export class CheckListRenderer implements ListRendererInterface<ChecklistItemMet
  */
  wrapperElement.addEventListener('click', (event) => {
  const target = event.target as Element;
- if (target){
+
+ if (target) {
  const checkbox = target.closest(`.${CheckListRenderer.CSS.checkboxContainer}`);
 
  if (checkbox && checkbox.contains(target)) {
@@ -80,9 +81,10 @@ export class CheckListRenderer implements ListRendererInterface<ChecklistItemMet
  /**
  * Redners list item element
  * @param content - content of the list item
+ * @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 {
+ 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,
@@ -107,11 +109,12 @@ export class CheckListRenderer implements ListRendererInterface<ChecklistItemMet
 
  /**
  * Return the item content
- * @param {Element} item - item wrapper (<li>)
- * @returns {string}
+ * @param item - item wrapper (<li>)
+ * @returns - item content string
  */
  getItemContent(item: Element): string {
  const contentNode = item.querySelector(`.${CheckListRenderer.CSS.itemContent}`);
+
  if (!contentNode) {
  return '';
  }
@@ -125,15 +128,15 @@ export class CheckListRenderer implements ListRendererInterface<ChecklistItemMet
 
  /**
  * Return meta object of certain element
- * @param {Element} item - item of the list to get meta from
- * @returns {ItemMeta} Item meta object
+ * @param item - item of the list to get meta from
+ * @returns Item meta object
  */
- getItemMeta(item: Element): ChecklistItemMeta  {
+ getItemMeta(item: Element): ChecklistItemMeta {
  const checkbox = item.querySelector(`.${CheckListRenderer.CSS.checkboxContainer}`);
 
  return {
  checked: checkbox ? checkbox.classList.contains(CheckListRenderer.CSS.itemChecked) : false,
- }
+ };
  }
 
  /**
@@ -145,26 +148,19 @@ export class CheckListRenderer implements ListRendererInterface<ChecklistItemMet
 
  /**
  * Toggle checklist item state
- *
- * @private
- * @param {MouseEvent} event - click
- * @returns {void}
+ * @param checkbox - checkbox element to be toggled
  */
  private toggleCheckbox(checkbox: Element): void {
  checkbox.classList.toggle(CheckListRenderer.CSS.itemChecked);
  checkbox.classList.add(CheckListRenderer.CSS.noHover);
  checkbox.addEventListener('mouseleave', () => this.removeSpecialHoverBehavior(checkbox), { once: true });
-  }
+ }
 
  /**
  * Removes class responsible for special hover behavior on an item
- *
- * @private
- * @param {Element} el - item wrapper
- * @returns {Element}
+ * @param el - item wrapper
  */
- private removeSpecialHoverBehavior(el: Element) {
+ private removeSpecialHoverBehavior(el: Element): void {
  el.classList.remove(CheckListRenderer.CSS.noHover);
  }
 }
-

src/ListRenderer/ListRenderer.ts

@@ -1,4 +1,3 @@
-
 /**
  * Default css prefix for list
  */
@@ -12,7 +11,7 @@ export const DefaultListCssClasses = {
  item: `${CssPrefix}__item`,
  itemContent: `${CssPrefix}__item-content`,
  itemChildren: `${CssPrefix}__item-children`,
-}
+};
 
 /**
  * Interface that represents default list css classes

src/ListRenderer/OrderedListRenderer.ts

@@ -1,8 +1,8 @@
-import type { OrderedListItemMeta } from "../types/ItemMeta";
-import { NestedListConfig } from "../types/ListParams";
+import type { OrderedListItemMeta } from '../types/ItemMeta';
+import type { NestedListConfig } from '../types/ListParams';
 import * as Dom from '@editorjs/dom';
-import { ListRendererInterface, DefaultListCssClasses, CssPrefix } from './ListRenderer';
-import type { ListCssClasses } from './ListRenderer';
+import { DefaultListCssClasses, CssPrefix } from './ListRenderer';
+import type { ListCssClasses, ListRendererInterface } from './ListRenderer';
 
 /**
  * CSS classes for the Ordered list
@@ -29,7 +29,7 @@ export class OrderedListRenderer implements ListRendererInterface<OrderedListIte
  return {
  ...DefaultListCssClasses,
  orderedList: `${CssPrefix}-ordered`,
- }
+ };
  }
 
  constructor(readonly: boolean, config?: NestedListConfig) {
@@ -56,12 +56,14 @@ export class OrderedListRenderer implements ListRendererInterface<OrderedListIte
 
  return wrapperElement;
  }
+
  /**
  * Redners list item element
  * @param content - content of the list item
+ * @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 {
+ renderItem(content: string, _meta: OrderedListItemMeta): HTMLLIElement {
  const itemWrapper = Dom.make('li', OrderedListRenderer.CSS.item);
  const itemContent = Dom.make('div', OrderedListRenderer.CSS.itemContent, {
  innerHTML: content,
@@ -75,12 +77,12 @@ export class OrderedListRenderer implements ListRendererInterface<OrderedListIte
 
  /**
  * Return the item content
- *
- * @param {Element} item - item wrapper (<li>)
- * @returns {string}
+ * @param item - item wrapper (<li>)
+ * @returns - item content string
  */
  getItemContent(item: Element): string {
  const contentNode = item.querySelector(`.${OrderedListRenderer.CSS.itemContent}`);
+
  if (!contentNode) {
  return '';
  }
@@ -96,8 +98,8 @@ export class OrderedListRenderer implements ListRendererInterface<OrderedListIte
  * Returns item meta, for ordered list
  * @returns item meta object
  */
- getItemMeta(): OrderedListItemMeta  {
- return {}
+ getItemMeta(): OrderedListItemMeta {
+ return {};
  }
 
  /**

src/ListRenderer/UnorderedListRenderer.ts

@@ -1,8 +1,8 @@
-import type { UnorderedListItemMeta } from "../types/ItemMeta";
-import { NestedListConfig } from "../types/ListParams";
+import type { UnorderedListItemMeta } from '../types/ItemMeta';
+import type { NestedListConfig } from '../types/ListParams';
 import * as Dom from '@editorjs/dom';
-import { ListRendererInterface, DefaultListCssClasses, CssPrefix } from './ListRenderer';
-import type { ListCssClasses } from './ListRenderer';
+import { DefaultListCssClasses, CssPrefix } from './ListRenderer';
+import type { ListCssClasses, ListRendererInterface } from './ListRenderer';
 
 interface UnoderedListCssClasses extends ListCssClasses {
  unorderedList: string;
@@ -29,7 +29,7 @@ export class UnorderedListRenderer implements ListRendererInterface<UnorderedLis
  return {
  ...DefaultListCssClasses,
  unorderedList: `${CssPrefix}-unordered`,
- }
+ };
  }
 
  constructor(readonly: boolean, config?: NestedListConfig) {
@@ -60,9 +60,10 @@ export class UnorderedListRenderer implements ListRendererInterface<UnorderedLis
  /**
  * Redners list item element
  * @param content - content of the list item
+ * @param _meta - meta of the list item unused in rendering of the unordered list
  * @returns - created html list item element
  */
- renderItem(content: string, meta: UnorderedListItemMeta): HTMLLIElement {
+ renderItem(content: string, _meta: UnorderedListItemMeta): HTMLLIElement {
  const itemWrapper = Dom.make('li', UnorderedListRenderer.CSS.item);
  const itemContent = Dom.make('div', UnorderedListRenderer.CSS.itemContent, {
  innerHTML: content,
@@ -76,12 +77,12 @@ export class UnorderedListRenderer implements ListRendererInterface<UnorderedLis
 
  /**
  * Return the item content
- *
- * @param {Element} item - item wrapper (<li>)
- * @returns {string}
+ * @param item - item wrapper (<li>)
+ * @returns - item content string
  */
  getItemContent(item: Element): string {
  const contentNode = item.querySelector(`.${UnorderedListRenderer.CSS.itemContent}`);
+
  if (!contentNode) {
  return '';
  }
@@ -97,8 +98,8 @@ export class UnorderedListRenderer implements ListRendererInterface<UnorderedLis
  * Returns item meta, for unordered list
  * @returns Item meta object
  */
- getItemMeta(): UnorderedListItemMeta  {
- return {}
+ getItemMeta(): UnorderedListItemMeta {
+ return {};
  }
 
  /**

src/ListRenderer/index.ts

@@ -1,6 +1,6 @@
-import { CheckListRenderer } from "./ChecklistRenderer";
-import { OrderedListRenderer } from "./OrderedListRenderer";
-import { UnorderedListRenderer } from "./UnorderedListRenderer";
+import { CheckListRenderer } from './ChecklistRenderer';
+import { OrderedListRenderer } from './OrderedListRenderer';
+import { UnorderedListRenderer } from './UnorderedListRenderer';
 import { DefaultListCssClasses, CssPrefix } from './ListRenderer';
 
 export { CheckListRenderer, OrderedListRenderer, UnorderedListRenderer, DefaultListCssClasses, CssPrefix };