Add eslint

Author: jorgemanrubia

.github/workflows/ci.yml

@@ -18,9 +18,21 @@ jobs:
           ruby-version: ruby-3.3.7
           bundler-cache: true
 
-      - name: Lint code for consistent style
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'yarn'
+
+      - name: Install JavaScript dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Lint Ruby code for consistent style
         run: bin/rubocop -f github
 
+      - name: Lint JavaScript code for consistent style
+        run: yarn lint
+
   test:
     runs-on: ubuntu-latest
 

package.json

@@ -12,15 +12,18 @@
   "author": "Jorge Manrubia <[email protected]>",
   "license": "MIT",
   "devDependencies": {
+    "@eslint/js": "^9.15.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-terser": "^0.4.4",
+    "eslint": "^9.15.0",
     "rollup": "^4.44.1",
     "rollup-plugin-gzip": "^4.1.1"
   },
   "scripts": {
     "build": "rollup -c",
     "build:npm": "rollup -c rollup.config.npm.mjs",
     "watch": "rollup -wc",
+    "lint": "eslint",
     "prerelease": "yarn build:npm",
     "release": "yarn build:npm && yarn publish"
   },

src/config/dom_purify.js

@@ -1,7 +1,7 @@
-import DOMPurify from 'dompurify'
+import DOMPurify from "dompurify"
 
 DOMPurify.addHook("uponSanitizeElement", (node, data) => {
   if (data.tagName === "strong" || data.tagName === "em") {
-    node.removeAttribute('class');
+    node.removeAttribute("class")
   }
-});
+})

src/config/theme.js

@@ -6,47 +6,47 @@ export default {
     underline: "lexxy-content__underline",
   },
   codeHighlight: {
-    atrule: 'code-token__attr',
-    attr: 'code-token__attr',
-    'attr-name': 'code-token__attr',
-    'attr-value': 'code-token__selector',
-    boolean: 'code-token__property',
-    bold: 'code-token__variable',
-    builtin: 'code-token__selector',
-    cdata: 'code-token__comment',
-    char: 'code-token__selector',
-    class: 'code-token__function',
-    'class-name': 'code-token__function',
-    color: 'code-token__property',
-    comment: 'code-token__comment',
-    constant: 'code-token__property',
-    coord: 'code-token__property',
-    decorator: 'code-token__function',
-    deleted: 'code-token__property',
-    doctype: 'code-token__comment',
-    entity: 'code-token__operator',
-    function: 'code-token__function',
-    hexcode: 'code-token__property',
-    important: 'code-token__variable',
-    inserted: 'code-token__selector',
-    italic: 'code-token__comment',
-    keyword: 'code-token__attr',
-    namespace: 'code-token__variable',
-    number: 'code-token__property',
-    operator: 'code-token__operator',
-    parameter: 'code-token__variable',
-    prolog: 'code-token__comment',
-    property: 'code-token__property',
-    punctuation: 'code-token__punctuation',
-    regex: 'code-token__variable',
-    script: 'code-token__function',
-    selector: 'code-token__selector',
-    string: 'code-token__selector',
-    style: 'code-token__function',
-    symbol: 'code-token__property',
-    tag: 'code-token__property',
-    title: 'code-token__function',
-    url: 'code-token__operator',
-    variable: 'code-token__variable',
+    atrule: "code-token__attr",
+    attr: "code-token__attr",
+    "attr-name": "code-token__attr",
+    "attr-value": "code-token__selector",
+    boolean: "code-token__property",
+    bold: "code-token__variable",
+    builtin: "code-token__selector",
+    cdata: "code-token__comment",
+    char: "code-token__selector",
+    class: "code-token__function",
+    "class-name": "code-token__function",
+    color: "code-token__property",
+    comment: "code-token__comment",
+    constant: "code-token__property",
+    coord: "code-token__property",
+    decorator: "code-token__function",
+    deleted: "code-token__property",
+    doctype: "code-token__comment",
+    entity: "code-token__operator",
+    function: "code-token__function",
+    hexcode: "code-token__property",
+    important: "code-token__variable",
+    inserted: "code-token__selector",
+    italic: "code-token__comment",
+    keyword: "code-token__attr",
+    namespace: "code-token__variable",
+    number: "code-token__property",
+    operator: "code-token__operator",
+    parameter: "code-token__variable",
+    prolog: "code-token__comment",
+    property: "code-token__property",
+    punctuation: "code-token__punctuation",
+    regex: "code-token__variable",
+    script: "code-token__function",
+    selector: "code-token__selector",
+    string: "code-token__selector",
+    style: "code-token__function",
+    symbol: "code-token__property",
+    tag: "code-token__property",
+    title: "code-token__function",
+    url: "code-token__operator",
+    variable: "code-token__variable",
   }
 }

src/editor/clipboard.js

@@ -1,6 +1,6 @@
 import { marked } from "marked"
-import { isUrl } from "../helpers/string_helper";
-import { nextFrame } from "../helpers/timing_helpers";
+import { isUrl } from "../helpers/string_helper"
+import { nextFrame } from "../helpers/timing_helpers"
 import { dispatch } from "../helpers/html_helper"
 
 export default class Clipboard {
@@ -63,7 +63,7 @@ export default class Clipboard {
   #handlePastedFiles(clipboardData) {
     if (!this.editorElement.supportsAttachments) return
 
-    const html = clipboardData.getData('text/html')
+    const html = clipboardData.getData("text/html")
     if (html) return // Ignore if image copied from browser since we will load it as a remote image
 
     this.#preservingScrollPosition(() => {

src/editor/command_dispatcher.js

@@ -1,16 +1,16 @@
 import {
   $getSelection,
   $isRangeSelection,
-  PASTE_COMMAND,
   COMMAND_PRIORITY_LOW,
   FORMAT_TEXT_COMMAND,
-  UNDO_COMMAND,
-  REDO_COMMAND
+  PASTE_COMMAND,
+  REDO_COMMAND,
+  UNDO_COMMAND
 } from "lexical"
 
 import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from "@lexical/list"
 import { $createHeadingNode, $createQuoteNode, $isHeadingNode, $isQuoteNode } from "@lexical/rich-text"
-import { CodeNode, $isCodeNode } from "@lexical/code"
+import { $isCodeNode, CodeNode } from "@lexical/code"
 import { $toggleLink } from "@lexical/link"
 import { createElement } from "../helpers/html_helper"
 import { getListType } from "../helpers/lexical_helper"
@@ -75,7 +75,7 @@ export class CommandDispatcher {
 
   dispatchInsertUnorderedList() {
     const selection = $getSelection()
-    if (!selection) return;
+    if (!selection) return
 
     const anchorNode = selection.anchor.getNode()
 
@@ -88,7 +88,7 @@ export class CommandDispatcher {
 
   dispatchInsertOrderedList() {
     const selection = $getSelection()
-    if (!selection) return;
+    if (!selection) return
 
     const anchorNode = selection.anchor.getNode()
 

src/editor/contents.js

@@ -1,16 +1,16 @@
 import {
-  $createParagraphNode, $getSelection, $setSelection, $insertNodes, $isElementNode, $isParagraphNode, $isTextNode,
-  $isRangeSelection, $createLineBreakNode, $createTextNode, HISTORY_MERGE_TAG, $isNodeSelection, $getNodeByKey, $getRoot
+  $createLineBreakNode, $createParagraphNode, $createTextNode, $getNodeByKey, $getRoot, $getSelection, $insertNodes,
+  $isElementNode, $isNodeSelection, $isParagraphNode, $isRangeSelection, $isTextNode, $setSelection, HISTORY_MERGE_TAG
 } from "lexical"
 
 import { $generateNodesFromDOM } from "@lexical/html"
 import { ActionTextAttachmentUploadNode } from "../nodes/action_text_attachment_upload_node"
 import { CustomActionTextAttachmentNode } from "../nodes/custom_action_text_attachment_node"
-import { $toggleLink, $createLinkNode } from "@lexical/link"
+import { $createLinkNode, $toggleLink } from "@lexical/link"
 import { dispatch, parseHtml } from "../helpers/html_helper"
-import { $isListItemNode, $isListNode } from "@lexical/list"
+import { $isListNode } from "@lexical/list"
 import { getNearestListItemNode } from "../helpers/lexical_helper"
-import { nextFrame } from "../helpers/timing_helpers.js";
+import { nextFrame } from "../helpers/timing_helpers.js"
 
 export default class Contents {
   constructor(editorElement) {
@@ -546,8 +546,8 @@ export default class Contents {
     firstParagraph.selectStart()
     const currentSelection = $getSelection()
     if (currentSelection && $isRangeSelection(currentSelection)) {
-      currentSelection.anchor.set(firstParagraph.getKey(), 0, 'element')
-      currentSelection.focus.set(lastParagraph.getKey(), lastParagraph.getChildrenSize(), 'element')
+      currentSelection.anchor.set(firstParagraph.getKey(), 0, "element")
+      currentSelection.focus.set(lastParagraph.getKey(), lastParagraph.getChildrenSize(), "element")
     }
   }
 
@@ -601,14 +601,14 @@ export default class Contents {
       const last = children[children.length - 1]
       const beforeLast = children[children.length - 2]
 
-      if (($isTextNode(last) && last.getTextContent() === "") && (beforeLast && !$isTextNode(beforeLast))) {
+      if ($isTextNode(last) && last.getTextContent() === "" && (beforeLast && !$isTextNode(beforeLast))) {
         paragraph.append($createLineBreakNode())
       }
     }
   }
 
   #createCustomAttachmentNodeWithHtml(html, options = {}) {
-    const attachmentConfig = typeof options === 'object' ? options : {}
+    const attachmentConfig = typeof options === "object" ? options : {}
 
     return new CustomActionTextAttachmentNode({
       sgid: attachmentConfig.sgid || null,
@@ -623,6 +623,6 @@ export default class Contents {
   }
 
   #shouldUploadFile(file) {
-    return dispatch(this.editorElement, 'lexxy:file-accept', { file }, true)
+    return dispatch(this.editorElement, "lexxy:file-accept", { file }, true)
   }
 }

src/editor/prompt/local_filter_source.js

@@ -1,5 +1,5 @@
 import BaseSource from "./base_source"
-import { filterMatches } from "../../helpers/string_helper";
+import { filterMatches } from "../../helpers/string_helper"
 
 export default class LocalFilterSource extends BaseSource {
   async buildListItems(filter = "") {

src/editor/prompt/remote_filter_source.js

@@ -1,5 +1,5 @@
 import BaseSource from "./base_source"
-import { debounceAsync } from "../../helpers/timing_helpers";
+import { debounceAsync } from "../../helpers/timing_helpers"
 
 const DEBOUNCE_INTERVAL = 200
 

src/editor/selection.js

@@ -1,8 +1,8 @@
 import {
-  $createNodeSelection, $isElementNode, $isRangeSelection, $getNodeByKey, $getSelection, $isNodeSelection,
-  $setSelection, $getRoot, $isTextNode, $isLineBreakNode, COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND, KEY_ARROW_LEFT_COMMAND,
-  KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_DELETE_COMMAND,
-  KEY_BACKSPACE_COMMAND, DecoratorNode, $createParagraphNode
+  $createNodeSelection, $createParagraphNode, $getNodeByKey, $getRoot, $getSelection, $isElementNode,
+  $isLineBreakNode, $isNodeSelection, $isRangeSelection, $isTextNode, $setSelection, COMMAND_PRIORITY_LOW, DecoratorNode,
+  KEY_ARROW_DOWN_COMMAND, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND,
+  KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, SELECTION_CHANGE_COMMAND
 } from "lexical"
 import { nextFrame } from "../helpers/timing_helpers"
 import { getNonce } from "../helpers/csp_helper"
@@ -266,11 +266,11 @@ export default class Selection {
     // above when navigating UP/DOWN when Lexical shows its fake cursor on custom decorator nodes.
     this.editorContentElement.addEventListener("keydown", (event) => {
       if (event.key === "ArrowUp") {
-        const lexicalCursor = this.editor.getRootElement().querySelector('[data-lexical-cursor]')
+        const lexicalCursor = this.editor.getRootElement().querySelector("[data-lexical-cursor]")
 
         if (lexicalCursor) {
           let currentElement = lexicalCursor.previousElementSibling
-          while (currentElement && currentElement.hasAttribute('data-lexical-cursor')) {
+          while (currentElement && currentElement.hasAttribute("data-lexical-cursor")) {
             currentElement = currentElement.previousElementSibling
           }
 
@@ -281,11 +281,11 @@ export default class Selection {
       }
 
       if (event.key === "ArrowDown") {
-        const lexicalCursor = this.editor.getRootElement().querySelector('[data-lexical-cursor]')
+        const lexicalCursor = this.editor.getRootElement().querySelector("[data-lexical-cursor]")
 
         if (lexicalCursor) {
           let currentElement = lexicalCursor.nextElementSibling
-          while (currentElement && currentElement.hasAttribute('data-lexical-cursor')) {
+          while (currentElement && currentElement.hasAttribute("data-lexical-cursor")) {
             currentElement = currentElement.nextElementSibling
           }
 
@@ -473,7 +473,7 @@ export default class Selection {
   }
 
   #isRectUnreliable(rect) {
-    return (rect.width === 0 && rect.height === 0) || (rect.top === 0 && rect.left === 0)
+    return rect.width === 0 && rect.height === 0 || rect.top === 0 && rect.left === 0
   }
 
   #createAndInsertMarker(range) {
@@ -504,7 +504,7 @@ export default class Selection {
 
   #calculateCursorPosition(rect, range) {
     const rootRect = this.editor.getRootElement().getBoundingClientRect()
-    let x = rect.left - rootRect.left
+    const x = rect.left - rootRect.left
     let y = rect.top - rootRect.top
 
     const fontSize = this.#getFontSizeForCursor(range)