Merge pull request #36 from Sozialarchiv/ts

typescript and vite added, closes #35

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/underline",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "keywords": [
     "underline",
     "tool",
@@ -11,10 +11,19 @@
   "description": "Inline tool for underlining text fragments",
   "license": "MIT",
   "repository": "https://github.com/editor-js/underline",
-  "main": "./dist/bundle.js",
+  "main": "./dist/underline.umd.js",
+  "module": "./dist/underline.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/underline.mjs",
+      "require": "./dist/underline.umd.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "scripts": {
-    "build": "webpack --mode production",
-    "build:dev": "webpack --mode development --watch"
+    "dev": "vite",
+    "build": "vite build"
   },
   "author": {
     "name": "fajardm",
@@ -25,16 +34,13 @@
   },
   "homepage": "https://github.com/editor-js/underline#readme",
   "devDependencies": {
-    "@babel/core": "^7.9.6",
-    "@babel/preset-env": "^7.9.6",
-    "babel-loader": "^8.1.0",
-    "css-loader": "^3.5.3",
-    "raw-loader": "^4.0.1",
-    "style-loader": "^1.2.1",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "typescript": "^5.5.4",
+    "vite": "^5.3.5",
+    "vite-plugin-css-injected-by-js": "^3.5.1",
+    "vite-plugin-dts": "^3.9.1",
+    "@editorjs/editorjs": "^2.30.2"
   },
   "dependencies": {
-    "@codexteam/icons": "^0.0.6"
+    "@codexteam/icons": "^0.3.2"
   }
 }

src/index.js → src/index.ts

@@ -1,43 +1,59 @@
 /**
  * Build styles
  */
- import './index.css';
- import { IconUnderline } from '@codexteam/icons'
+import './index.css';
+import {IconUnderline} from '@codexteam/icons'
+import {type API, type InlineTool, type SanitizerConfig} from "@editorjs/editorjs";
+import {type InlineToolConstructorOptions} from "@editorjs/editorjs/types/tools/inline-tool";
 
- /**
+/**
  * Underline Tool for the Editor.js
  *
  * Allows to wrap inline fragment and style it somehow.
  */
-export default class Underline {
+export default class Underline implements InlineTool {
   /**
    * Class name for term-tag
    *
    * @type {string}
    */
-  static get CSS() {
+  static get CSS(): string {
     return 'cdx-underline';
   };
 
   /**
-   * @param {{api: object}}  - Editor.js API
+   * Toolbar Button
+   *
+   * @type {HTMLButtonElement}
    */
-  constructor({ api }) {
-    this.api = api;
+  private button: HTMLButtonElement | undefined
 
-    /**
-     * Toolbar Button
-     *
-     * @type {HTMLElement|null}
-     */
-    this.button = null;
+  /**
+   * Tag represented the term
+   *
+   * @type {string}
+   */
+  private tag: string = 'U';
 
-    /**
-     * Tag represented the term
-     *
-     * @type {string}
-     */
-    this.tag = 'U';
+  /**
+   * API InlineToolConstructorOptions
+   *
+   * @type {API}
+   */
+  private api: API
+
+  /**
+   * CSS classes
+   *
+   * @type {object}
+   */
+  private iconClasses: {base: string, active: string}
+
+  /**
+   * @param options InlineToolConstructorOptions
+   */
+  public constructor(options: InlineToolConstructorOptions) {
+    this.api = options.api;
 
     /**
      * CSS classes
@@ -53,16 +69,14 @@ export default class Underline {
    *
    * @returns {boolean}
    */
-  static get isInline() {
-    return true;
-  }
+  public static isInline = true;
 
   /**
    * Create button element for Toolbar
    *
    * @returns {HTMLElement}
    */
-  render() {
+  public render(): HTMLElement {
     this.button = document.createElement('button');
     this.button.type = 'button';
     this.button.classList.add(this.iconClasses.base);
@@ -76,7 +90,7 @@ export default class Underline {
    *
    * @param {Range} range - selected fragment
    */
-  surround(range) {
+  public surround(range: Range): void {
     if (!range) {
       return;
     }
@@ -98,7 +112,7 @@ export default class Underline {
    *
    * @param {Range} range - selected fragment
    */
-  wrap(range) {
+  public wrap(range: Range) {
     /**
      * Create a wrapper for highlighting
      */
@@ -127,21 +141,30 @@ export default class Underline {
    *
    * @param {HTMLElement} termWrapper - term wrapper tag
    */
-  unwrap(termWrapper) {
+  public unwrap(termWrapper: HTMLElement): void {
     /**
      * Expand selection to all term-tag
      */
     this.api.selection.expandToTag(termWrapper);
 
     const sel = window.getSelection();
+    if (!sel) {
+      return;
+    }
     const range = sel.getRangeAt(0);
+    if (!range) {
+      return
+    }
 
     const unwrappedContent = range.extractContents();
+    if (!unwrappedContent) {
+      return
+    }
 
     /**
      * Remove empty term-tag
      */
-    termWrapper.parentNode.removeChild(termWrapper);
+    termWrapper.parentNode?.removeChild(termWrapper);
 
     /**
      * Insert extracted content
@@ -158,18 +181,20 @@ export default class Underline {
   /**
    * Check and change Term's state for current selection
    */
-  checkState() {
+  public checkState(): boolean {
     const termTag = this.api.selection.findParentTag(this.tag, Underline.CSS);
 
-    this.button.classList.toggle(this.iconClasses.active, !!termTag);
+    this.button?.classList.toggle(this.iconClasses.active, !!termTag);
+
+    return !!termTag
   }
 
   /**
    * Get Tool icon's SVG
    *
    * @returns {string}
    */
-  get toolboxIcon() {
+  public get toolboxIcon(): string {
     return IconUnderline;
   }
 
@@ -178,7 +203,7 @@ export default class Underline {
    *
    * @returns {{u: {class: string}}}
    */
-  static get sanitize() {
+  public static get sanitize(): SanitizerConfig {
     return {
       u: {
         class: Underline.CSS,

tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "include": ["src/**/*"],
+  "compilerOptions": {
+    "allowJs": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "strict": true,
+    "outDir": "dist",
+    "moduleResolution": "nodenext"
+  }
+}

vite.config.js

@@ -0,0 +1,30 @@
+import path from "node:path";
+import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
+import dts from "vite-plugin-dts";
+import * as pkg from "./package.json";
+
+const NODE_ENV = process.argv.mode || "development";
+const VERSION = pkg.version;
+
+export default {
+    build: {
+        copyPublicDir: false,
+        lib: {
+            entry: path.resolve(__dirname, "src", "index.ts"),
+            name: "Underline",
+            fileName: "underline",
+        },
+    },
+    define: {
+        NODE_ENV: JSON.stringify(NODE_ENV),
+        VERSION: JSON.stringify(VERSION),
+    },
+
+    plugins: [
+        cssInjectedByJsPlugin(),
+        dts({
+            //insertTypesEntry: true,
+            tsconfigPath: './tsconfig.json'
+        }),
+    ],
+};