Migrate to TypeScript

.eslintrc

@@ -1,83 +1,8 @@
 {
-    /** Enable ES6 features */
-    "parserOptions": {
-        "ecmaVersion": 6,
-        "sourceType": "module",
-        "ecmaFeatures": {
-            "classes": true
-        }
-    },
-    "rules": {
-
-        "arrow-spacing": [2, {
-            "before": true,
-            "after": true
-        }],
-
-        /** Variables */
-        "no-catch-shadow": 2,
-        "no-delete-var": 2,
-        "no-label-var": 2,
-        "no-shadow-restricted-names": 2,
-        "no-shadow": 2,
-        "no-undef-init": 2,
-        "no-undef": 2,
-        "no-unused-vars": 1,
-
-        /** Style */
-        "array-bracket-spacing": [2, "never", {
-            "singleValue": true,
-            "objectsInArrays": true,
-            "arraysInArrays": true
-        }],
-        "quotes": [1, "single", "avoid-escape"],
-        "eqeqeq": 0,
-        "brace-style": [2, "1tbs"],
-
-        "comma-spacing": [2, {
-            "before": false,
-            "after": true
-        }],
-        "comma-style": [2, "last"],
-        "eol-last": 0,
-        "no-nested-ternary": 1,
-        "no-trailing-spaces": 2,
-        "no-mixed-spaces-and-tabs": 2,
-        "padded-blocks": [2, "never"],
-        "space-before-blocks": 1,
-        "space-before-function-paren": [1, {
-            "anonymous": "always",
-            "named": "never"
-        }],
-        "spaced-comment": [2, "always", {
-            "exceptions": ["-", "+"],
-            "markers": ["=", "!"]
-        }],
-        "semi": [2, "always"],
-        "indent": [2, 2, {
-            "SwitchCase": 1,
-            "VariableDeclarator": 2
-        }],
-        "camelcase": [2, {
-            "properties": "always"
-        }],
-        "newline-after-var": [1, "always"],
-        "require-jsdoc": ["error", {
-            "require": {
-                "FunctionDeclaration": true,
-                "MethodDefinition": true,
-                "ClassDeclaration": true,
-                "ArrowFunctionExpression": false
-            }
-        }]
-
-    },
-    "globals": {
-        "document": true,
-        "module": true,
-        "require": true,
-        "window": true,
-        "console": true,
-        "define": true
-    }
+  "globals": {},
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": 2020
+  },
+  "parser": "@typescript-eslint/parser"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/code",
-  "version": "2.9.0",
+  "version": "2.9.1",
   "keywords": [
     "codex editor",
     "code",
@@ -15,25 +15,36 @@
   ],
   "main": "./dist/code.umd.js",
   "module": "./dist/code.mjs",
+  "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/code.mjs",
-      "require": "./dist/code.umd.js"
+      "require": "./dist/code.umd.js",
+      "types": "./dist/index.d.ts"
     }
   },
   "scripts": {
     "dev": "vite",
-    "build": "vite build"
+    "build": "vite build",
+    "lint": "eslint src/**.ts --ext .ts",
+    "lint:errors": "eslint src/**.ts --quiet",
+    "lint:fix": "eslint src/**.ts --fix"
   },
   "author": {
     "name": "CodeX Team",
     "email": "team@codex.so"
   },
   "devDependencies": {
+    "@editorjs/editorjs": "^2.30.2",
+    "@typescript-eslint/eslint-plugin": "^7.16.1",
+    "@typescript-eslint/parser": "^7.16.1",
+    "eslint": "^8.57.0",
+    "typescript": "^5.5.3",
     "vite": "^4.5.0",
-    "vite-plugin-css-injected-by-js": "^3.3.0"
+    "vite-plugin-css-injected-by-js": "^3.3.0",
+    "vite-plugin-dts": "^3.9.1"
   },
   "dependencies": {
-    "@codexteam/icons": "^0.0.5"
+    "@codexteam/icons": "^0.3.2"
   }
 }

src/index.js → src/index.ts

@@ -1,32 +1,82 @@
-/**
- * Build styles
- */
 import './index.css';
 import { getLineStartPosition } from './utils/string';
 import { IconBrackets } from '@codexteam/icons';
-
+import { API, BlockTool, BlockToolConstructorOptions, PasteEvent, SanitizerConfig } from '@editorjs/editorjs';
 
 /**
  * CodeTool for Editor.js
  *
- * @author CodeX (team@ifmo.su)
- * @copyright CodeX 2018
- * @license MIT
  * @version 2.0.0
+ * @license MIT
  */
 
-/* global PasteEvent */
+/**
+ * CodeTool generates data in this format
+ */
+export interface CodeData {
+  code: string;
+}
+
+/**
+ * CodeTool's config from User
+ */
+export interface CodeConfig {
+  placeholder: string
+}
+
+interface CodeToolCSS {
+  /** Block Styling from Editor.js API */
+  baseClass: string;
+  /** Input Styling from Editor.js API */
+  input: string;
+  /** Wrapper styling */
+  wrapper: string;
+  /** Textarea styling */
+  textarea: string;
+}
+
+interface CodeToolNodes {
+  /** Main container or Wrapper for CodeTool */
+  holder: HTMLDivElement | null;
+  /** Textarea where user inputs their code */
+  textarea: HTMLTextAreaElement | null;
+}
 
 /**
  * Code Tool for the Editor.js allows to include code examples in your articles.
  */
-export default class CodeTool {
+export default class CodeTool implements BlockTool {
+  /** 
+  * Editor.js API
+  */
+  private api: API;
+  /**
+  * Read-only mode flag
+  */
+  private readOnly: boolean;
+  /**
+   * CodeTool's placeholder
+   */
+  private placeholder: string;
+  /**
+   * CodeTool's CSS
+   */
+  private CSS: CodeToolCSS;
+  /**
+   * CodeTool nodes
+   */
+  private nodes: CodeToolNodes;
+  /**
+  * CodeTool's data
+  */
+  private _data!: CodeData;
+
   /**
    * Notify core that read-only mode is supported
    *
    * @returns {boolean}
    */
-  static get isReadOnlySupported() {
+  static get isReadOnlySupported(): boolean {
     return true;
   }
 
@@ -36,7 +86,7 @@ export default class CodeTool {
    * @returns {boolean}
    * @public
    */
-  static get enableLineBreaks() {
+  static get enableLineBreaks(): boolean {
     return true;
   }
 
@@ -54,7 +104,7 @@ export default class CodeTool {
    * @param {object} options.api - Editor.js API
    * @param {boolean} options.readOnly - read only mode flag
    */
-  constructor({ data, config, api, readOnly }) {
+  constructor({ data, config, api, readOnly }: BlockToolConstructorOptions) {
     this.api = api;
     this.readOnly = readOnly;
 
@@ -82,12 +132,12 @@ export default class CodeTool {
   /**
    * Create Tool's view
    *
-   * @returns {HTMLElement}
+   * @returns {HTMLDivElement}
    * @private
    */
-  drawView() {
-    const wrapper = document.createElement('div'),
-        textarea = document.createElement('textarea');
+  private drawView(): HTMLDivElement {
+    const wrapper = document.createElement('div') as HTMLDivElement;
+    const textarea = document.createElement('textarea');
 
     wrapper.classList.add(this.CSS.baseClass, this.CSS.wrapper);
     textarea.classList.add(this.CSS.textarea, this.CSS.input);
@@ -123,8 +173,8 @@ export default class CodeTool {
    * @returns {HTMLDivElement} this.nodes.holder - Code's wrapper
    * @public
    */
-  render() {
-    return this.nodes.holder;
+  public render(): HTMLDivElement {
+    return this.nodes.holder!;
   }
 
   /**
@@ -134,9 +184,9 @@ export default class CodeTool {
    * @returns {CodeData} - saved plugin code
    * @public
    */
-  save(codeWrapper) {
+  public save(codeWrapper: HTMLDivElement): CodeData {
     return {
-      code: codeWrapper.querySelector('textarea').value,
+      code: codeWrapper.querySelector('textarea')!.value,
     };
   }
 
@@ -145,20 +195,23 @@ export default class CodeTool {
    *
    * @param {PasteEvent} event - event with pasted content
    */
-  onPaste(event) {
-    const content = event.detail.data;
-
-    this.data = {
-      code: content.textContent,
-    };
+  public onPaste(event: PasteEvent): void {
+    const detail = event.detail;
+
+    if ('data' in detail) {
+      const content = detail.data as string;
+      this.data = {
+        code: content || '',
+      };
+    }
   }
 
   /**
    * Returns Tool`s data from private property
    *
    * @returns {CodeData}
    */
-  get data() {
+  public get data(): CodeData {
     return this._data;
   }
 
@@ -167,7 +220,7 @@ export default class CodeTool {
    *
    * @param {CodeData} data - saved tool data
    */
-  set data(data) {
+  public set data(data: CodeData) {
     this._data = data;
 
     if (this.nodes.textarea) {
@@ -182,7 +235,7 @@ export default class CodeTool {
    *
    * @returns {{icon: string, title: string}}
    */
-  static get toolbox() {
+  static get toolbox(): { icon: string; title: string } {
     return {
       icon: IconBrackets,
       title: 'Code',
@@ -195,7 +248,7 @@ export default class CodeTool {
    * @public
    * @returns {string}
    */
-  static get DEFAULT_PLACEHOLDER() {
+  static get DEFAULT_PLACEHOLDER(): string {
     return 'Enter a code';
   }
 
@@ -206,9 +259,9 @@ export default class CodeTool {
    * @static
    * @returns {{tags: string[]}}
    */
-  static get pasteConfig() {
+  static get pasteConfig(): { tags: string[] } {
     return {
-      tags: [ 'pre' ],
+      tags: ['pre'],
     };
   }
 
@@ -217,7 +270,7 @@ export default class CodeTool {
    *
    * @returns {{code: boolean}}
    */
-  static get sanitize() {
+  static get sanitize(): SanitizerConfig {
     return {
       code: true, // Allow HTML tags
     };
@@ -230,7 +283,7 @@ export default class CodeTool {
    * @param {KeyboardEvent} event - keydown
    * @returns {void}
    */
-  tabHandler(event) {
+  private tabHandler(event: KeyboardEvent): void {
     /**
      * Prevent editor.js tab handler
      */
@@ -241,7 +294,7 @@ export default class CodeTool {
      */
     event.preventDefault();
 
-    const textarea = event.target;
+    const textarea = event.target as HTMLTextAreaElement;
     const isShiftPressed = event.shiftKey;
     const caretPosition = textarea.selectionStart;
     const value = textarea.value;

src/utils/string.js → src/utils/string.ts

@@ -10,7 +10,7 @@
  * @param {number} position - search starting position
  * @returns {number}
  */
-export function getLineStartPosition(string, position) {
+export function getLineStartPosition(string: string, position: number): number {
   const charLength = 1;
   let char = '';