feat(migration): migrate codebase to TypeScript

closes #42

Author: idebenone

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/inline-code",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "keywords": [
     "codex editor",
     "inline",
@@ -16,10 +16,12 @@
   ],
   "main": "./dist/inline-code.umd.js",
   "module": "./dist/inline-code.mjs",
+  "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/inline-code.mjs",
-      "require": "./dist/inline-code.umd.js"
+      "require": "./dist/inline-code.umd.js",
+      "types": "./dist/index.d.ts"
     }
   },
   "scripts": {
@@ -31,10 +33,13 @@
     "email": "[email protected]"
   },
   "devDependencies": {
+    "@editorjs/editorjs": "^2.30.2",
+    "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": "^4.0.0-beta.1"
   },
   "dependencies": {
-    "@codexteam/icons": "^0.0.5"
+    "@codexteam/icons": "^0.3.2"
   }
 }

src/index.js src/index.tssrc/index.js renamed to src/index.ts

@@ -1,49 +1,57 @@
 /**
  * Build styles
  */
- import './index.css';
- import { IconInlineCode } from '@codexteam/icons'
+import './index.css';
+import { IconBrackets } from '@codexteam/icons';
+import { API, InlineTool, InlineToolConstructorOptions, SanitizerConfig } from "@editorjs/editorjs";
+
+interface IconClasses {
+  base: string;
+  active: string;
+}
 
 /**
  * Inline Code Tool for the Editor.js
  *
  * Allows to wrap inline fragment and style it somehow.
  */
-export default class InlineCode {
+export default class InlineCode implements InlineTool {
+  /**
+   * Editor.js API
+   */
+  private api: API;
+  /**
+   * Button element for the toolbar
+   */
+  private button: HTMLButtonElement | null;
+  /**
+   * Tag representing the term
+   */
+  private tag: string;
+  /**
+   * CSS classes for the icon
+   */
+  private iconClasses: IconClasses;
+
   /**
    * Class name for term-tag
    *
    * @type {string}
    */
-  static get CSS() {
+  static get CSS(): string {
     return 'inline-code';
-  };
+  }
 
-  /**
-   */
-  constructor({api}) {
+  constructor({ api }: InlineToolConstructorOptions) {
     this.api = api;
 
-    /**
-     * Toolbar Button
-     *
-     * @type {HTMLElement|null}
-     */
     this.button = null;
 
-    /**
-     * Tag represented the term
-     *
-     * @type {string}
-     */
     this.tag = 'CODE';
 
-    /**
-     * CSS classes
-     */
     this.iconClasses = {
       base: this.api.styles.inlineToolButton,
-      active: this.api.styles.inlineToolButtonActive
+      active: this.api.styles.inlineToolButtonActive,
     };
   }
 
@@ -52,7 +60,7 @@ export default class InlineCode {
    *
    * @return {boolean}
    */
-  static get isInline() {
+  static get isInline(): boolean {
     return true;
   }
 
@@ -61,7 +69,7 @@ export default class InlineCode {
    *
    * @return {HTMLElement}
    */
-  render() {
+  render(): HTMLElement {
     this.button = document.createElement('button');
     this.button.type = 'button';
     this.button.classList.add(this.iconClasses.base);
@@ -75,12 +83,12 @@ export default class InlineCode {
    *
    * @param {Range} range - selected fragment
    */
-  surround(range) {
+  surround(range: Range): void {
     if (!range) {
       return;
     }
 
-    let termWrapper = this.api.selection.findParentTag(this.tag, InlineCode.CSS);
+    let termWrapper = this.api.selection.findParentTag(this.tag, InlineCode.CSS) as HTMLElement;
 
     /**
      * If start or end of selection is in the highlighted block
@@ -97,7 +105,7 @@ export default class InlineCode {
    *
    * @param {Range} range - selected fragment
    */
-  wrap(range) {
+  wrap(range: Range): void {
     /**
      * Create a wrapper for highlighting
      */
@@ -125,21 +133,22 @@ export default class InlineCode {
    *
    * @param {HTMLElement} termWrapper - term wrapper tag
    */
-  unwrap(termWrapper) {
+  unwrap(termWrapper: HTMLElement): void {
     /**
      * Expand selection to all term-tag
      */
     this.api.selection.expandToTag(termWrapper);
 
-    let sel = window.getSelection();
-    let range = sel.getRangeAt(0);
+    const sel = window.getSelection();
+    if (!sel) return;
 
-    let unwrappedContent = range.extractContents();
+    const range = sel.getRangeAt(0);
+    const unwrappedContent = range.extractContents();
 
     /**
      * Remove empty term-tag
      */
-    termWrapper.parentNode.removeChild(termWrapper);
+    termWrapper.parentNode?.removeChild(termWrapper);
 
     /**
      * Insert extracted content
@@ -155,30 +164,37 @@ export default class InlineCode {
 
   /**
    * Check and change Term's state for current selection
+   * 
+   * @return {boolean}
    */
-  checkState() {
+  checkState(): boolean {
     const termTag = this.api.selection.findParentTag(this.tag, InlineCode.CSS);
 
-    this.button.classList.toggle(this.iconClasses.active, !!termTag);
+    if (this.button) {
+      this.button.classList.toggle(this.iconClasses.active, !!termTag);
+    }
+
+    return !!termTag;
   }
 
+
   /**
    * Get Tool icon's SVG
    * @return {string}
    */
-  get toolboxIcon() {
-    return IconInlineCode;
+  get toolboxIcon(): string {
+    return IconBrackets;
   }
 
   /**
    * Sanitizer rule
-   * @return {{span: {class: string}}}
+   * @return {SanitizerConfig}
    */
-  static get sanitize() {
+  static get sanitize(): SanitizerConfig {
     return {
       code: {
-        class: InlineCode.CSS
-      }
+        class: InlineCode.CSS,
+      },
     };
   }
 }

tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    /* Language and Environment */
+    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    /* Modules */
+    "module": "CommonJS" /* Specify what module code is generated. */,
+    "typeRoots": [
+      "./node_modules/@types",
+      "./types"
+    ] /* Specify multiple folders that act like './node_modules/@types'. */,
+    /* Interop Constraints */
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+    /* Type Checking */
+    "strict": true /* Enable all strict type-checking options. */
+  },
+  "include": ["src/*", "src/types/**/*"]
+}

vite.config.js

@@ -1,6 +1,7 @@
 import path from "path";
 import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
 import * as pkg from "./package.json";
+import dts from 'vite-plugin-dts';
 
 const NODE_ENV = process.argv.mode || "development";
 const VERSION = pkg.version;
@@ -9,7 +10,7 @@ export default {
   build: {
     copyPublicDir: false,
     lib: {
-      entry: path.resolve(__dirname, "src", "index.js"),
+      entry: path.resolve(__dirname, "src", "index.ts"),
       name: "InlineCode",
       fileName: "inline-code",
     },
@@ -19,5 +20,8 @@ export default {
     VERSION: JSON.stringify(VERSION),
   },
 
-  plugins: [cssInjectedByJsPlugin()],
-};
+  plugins: [cssInjectedByJsPlugin(),
+  dts({
+    tsconfigPath: './tsconfig.json'
+  })],
+}