Add typescript, vite and vitest

.eslintrc.js

@@ -1,12 +1,12 @@
 module.exports = {
-  extends: 'airbnb-base',
-  plugins: ['jest'],
+  extends: "airbnb-base",
+  plugins: ["jest"],
   rules: {
-    'class-methods-use-this': ['off'],
-    'no-underscore-dangle': ['error', { allowAfterThis: true }],
+    "class-methods-use-this": ["off"],
+    "no-underscore-dangle": ["error", { allowAfterThis: true }],
   },
   env: {
     browser: true,
-    'jest/globals': true,
+    "jest/globals": true,
   },
-};
+}

.gitignore

@@ -4,3 +4,6 @@ npm-debug.log
 .idea/
 .DS_Store
 dist/*.map
+.vscode/*
+!.vscode/settings.json.sample
+!.vscode/extensions.json

.npmignore

@@ -3,7 +3,11 @@ src/
 test/
 assets/
 dev/
+.vscode/
 .eslintrc.js
+.prettierrc.json
 babel.config.json
-webpack.config.js
+vite.config.mts
+vitest.setup.ts
+tsconfig.json
 yarn.lock

.prettierrc.json

@@ -1,6 +1,6 @@
 {
-    "trailingComma": "es5",
-    "tabWidth": 2,
-    "semi": false,
-    "singleQuote": false
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": false
 }

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
+}

.vscode/settings.json.sample

@@ -0,0 +1,12 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.formatOnPaste": true,
+  "editor.formatOnType": false,
+  "files.associations": {
+    "*.json.sample": "json"
+  }
+}

dist/index.d.ts

@@ -0,0 +1,5 @@
+import { default as Undo } from './undo';
+export { type UndoConfig, type UndoConstructor, type UndoSettings } from './undo';
+export * from './observer';
+export * from './types';
+export default Undo;

dist/observer.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @typedef {Object} Observer
+ * @description Custom MutationObserver to detect changes in the editor.
+ * @property {String} holder — Editor.js holder id.
+ * @property {Object} observer - MutationObserver object that detects changes in the editor.
+ * @property {Number} debounceTimer - Delay time for the debouncer.
+ * @property {Function} mutationDebouncer - Debouncer to delay the changes registration.
+ */
+export default class Observer {
+    private debounceTimer;
+    private holder;
+    private mutationDebouncer;
+    private observer;
+    /**
+     * Creates a new instance of the Observer object.
+     * @param {Function} registerChange - Function that register a change in the history stack.
+     * @param {String} holder - Editor.js holder id.
+     * @param {Number} debounceTimer Delay time for the debouncer.
+     */
+    constructor(registerChange: () => void, holder: Element, debounceTimer: number);
+    /**
+     * Sets a mutation observer to catch every change in the editor.
+     */
+    setMutationObserver(): void;
+    /**
+     * Handles the mutations and checks if a new mutation has been produced.
+     * @param {Object} mutationList The registered mutations
+     */
+    mutationHandler(mutationList: MutationRecord[]): void;
+    /**
+     * Delays invoking a function until after wait millis have elapsed.
+     * @param {Function} callback The function to be delayed.
+     * @param {Number} wait The deplay time in millis.
+     */
+    debounce(callback: (...args: unknown[]) => void, wait: number): (...args: unknown[]) => void;
+    onDestroy(): void;
+}

dist/types.d.ts

@@ -0,0 +1,4 @@
+import { default as EditorJS, EditorConfig } from '@editorjs/editorjs';
+export interface EditorJsReady extends EditorJS {
+    configuration: EditorConfig;
+}

dist/undo.d.ts

@@ -0,0 +1,165 @@
+import { default as EditorJS, OutputBlockData, OutputData } from '@editorjs/editorjs';
+import { EditorJsReady } from './types';
+import { Blocks, Caret } from '@editorjs/editorjs/types/api';
+export type UndoConfig = {
+    debounceTimer: number;
+    shortcuts: {
+        redo: string[];
+        undo: string[];
+    };
+};
+export type UndoSettings = {
+    debounceTimer?: number;
+    shortcuts?: {
+        redo?: string[] | string;
+        undo?: string[] | string;
+    };
+};
+interface StackStated {
+    caretIndex?: null | number;
+    index: number;
+    state: OutputBlockData[];
+}
+export type UndoConstructor = {
+    config?: UndoSettings;
+    maxLength?: number;
+    onUpdate?: () => void;
+    editor: EditorJS;
+};
+/**
+ * Undo/Redo feature for Editor.js.
+ *
+ * @typedef {Object} Undo
+ * @description Feature's initialization class.
+ * @property {Object} editor — Editor.js instance object.
+ * @property {Number} maxLength - Max amount of changes recorded by the history stack.
+ * @property {Function} onUpdate - Callback called when the user performs an undo or redo action.
+ * @property {Boolean} shouldSaveHistory - Defines if the plugin should save the change in the stack
+ * @property {Object} initialItem - Initial data object.
+ */
+export default class Undo {
+    blocks: Blocks;
+    caret: Caret;
+    config: UndoConfig;
+    defaultBlock: string | undefined;
+    editor: EditorJsReady;
+    holder: HTMLElement | null | undefined;
+    initialItem: null | StackStated;
+    maxLength: number;
+    onUpdate: () => void;
+    position: number;
+    readOnly: boolean | undefined;
+    shouldSaveHistory: boolean;
+    stack: StackStated[];
+    /**
+     * @param options — Plugin custom options.
+     */
+    constructor({ editor, config, onUpdate, maxLength }: UndoConstructor);
+    /**
+     * Notify core that read-only mode is suppoorted
+     *
+     * @returns {boolean}
+     */
+    static get isReadOnlySupported(): boolean;
+    /**
+     * Truncates the history stack when it excedes the limit of changes.
+     *
+     * @param {Object} stack  Changes history stack.
+     * @param {Number} stack  Limit of changes recorded by the history stack.
+     */
+    truncate(stack: StackStated[], limit: number): void;
+    /**
+     * Initializes the stack when the user provides initial data.
+     *
+     * @param {Object} initialItem  Initial data provided by the user.
+     */
+    initialize(initialItem: OutputData | OutputBlockData[]): void;
+    /**
+     * Clears the history stack.
+     */
+    clear(): void;
+    /**
+     * Returns true if readOnly was toggled to true
+     * @returns {Node} Indirectly shows if readOnly was set to true or false
+     */
+    setReadOnly(): void;
+    /**
+     * Registers the data returned by API's save method into the history stack.
+     */
+    registerChange(): void;
+    /**
+     * Checks if the saved data has to be added to the history stack.
+     *
+     * @param {Object} newData  New data to be saved in the history stack.
+     * @returns {Boolean}
+     */
+    editorDidUpdate(newData: OutputBlockData[]): boolean;
+    /**
+     * Adds the saved data in the history stack and updates current position.
+     */
+    save(state: OutputBlockData[]): void;
+    /**
+     * Gets the caret position.
+     * @param {Number} index is the block index
+     * @returns The caret position
+     */
+    getCaretIndex(index: number): number | null;
+    /**
+     * Decreases the current position and update the respective block in the editor.
+     */
+    undo(): Promise<void>;
+    /**
+     * Sets the caret position.
+     * @param {Number} index is the block index
+     * @param {Number} caretIndex is the caret position
+     * @param {Array} state is the current state according to this.position.
+     */
+    setCaretIndex(index: number, caretIndex: number): void;
+    /**
+     * Inserts new block
+     * @param {Array} state is the current state according to this.position.
+     * @param {Number} index is the block index
+     */
+    insertBlock(state: OutputBlockData[], index: number): void;
+    /**
+     * Updates the passed block or render the state when the content was copied.
+     * @param {Array} state is the current state according to this.position.
+     * @param {Number} index is the block index.
+     */
+    updateModifiedBlock(state: OutputBlockData[], index: number): Promise<void | import('@editorjs/editorjs').BlockAPI>;
+    /**
+     * Increases the current position and update the respective block in the editor.
+     */
+    redo(): Promise<void>;
+    switchState(stateToApply: OutputBlockData[], stateToCompare: OutputBlockData[]): Promise<void>;
+    /**
+     * Checks if the history stack can perform an undo action.
+     *
+     * @returns {Boolean}
+     */
+    canUndo(): boolean;
+    /**
+     * Checks if the history stack can perform a redo action.
+     *
+     * @returns {Boolean}
+     */
+    canRedo(): boolean;
+    /**
+     * Returns the number of changes recorded in the history stack.
+     *
+     * @returns {Number}
+     */
+    count(): number;
+    /**
+     * Parses the keys passed in the shortcut property to accept CMD,ALT and SHIFT
+     *
+     * @param {Array} keys are the keys passed in shortcuts in config
+     * @returns {Array}
+     */
+    parseKeys(keys: string[]): string[];
+    /**
+     * Sets events listeners to allow keyboard actions support
+     */
+    setEventListeners(): void;
+}
+export {};

package.json

@@ -9,15 +9,18 @@
   ],
   "description": "Undo tool for Editor.js",
   "main": "./dist/bundle.js",
+  "types": "./dist/index.d.ts",
   "scripts": {
-    "build": "webpack --mode production",
-    "build:dev": "webpack --mode development --watch",
-    "test": "jest"
+    "build": "vite build --mode production",
+    "build:dev": "vite",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/kommitters/editorjs-undo"
   },
+  "type": "module",
   "author": {
     "name": "kommitters Open Source",
     "email": "[email protected]"
@@ -28,28 +31,28 @@
   },
   "homepage": "https://github.com/kommitters/editorjs-undo#readme",
   "devDependencies": {
-    "@babel/core": "^7.10.2",
-    "@babel/plugin-transform-runtime": "^7.23.2",
-    "@babel/preset-env": "^7.10.2",
-    "babel-jest": "^29.0.0",
-    "babel-loader": "^9.0.0",
+    "@editorjs/editorjs": "^2.30.8",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@types/deep-equal": "^1.0.4",
     "eslint": "^8.3.0",
     "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^10.0.2",
     "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-jest": "^27.0.0",
     "jest": "^29.0.0",
     "jest-environment-jsdom": "^29.3.1",
-    "webpack": "^5.52.0",
-    "webpack-cli": "^5.0.0"
-  },
-  "jest": {
-    "transform": {
-      "^.+\\.jsx?$": "babel-jest",
-      "^.+\\.(css|svg)$": "<rootDir>/test/config/assetsTransform.js"
-    }
+    "rollup-plugin-node-externals": "^8.0.0",
+    "typescript": "^5.7.3",
+    "vite": "^6.1.0",
+    "vite-plugin-dts": "^4.5.0",
+    "vitest": "^3.0.5"
   },
   "dependencies": {
     "deep-equal": "^2.2.3",
     "vanilla-caret-js": "^1.0.1"
+  },
+  "peerDependencies": {
+    "@editorjs/editorjs": ">=2"
   }
 }

renovate.json

@@ -1,6 +1,4 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:semverAllMonthly"
-  ]
+  "extends": ["config:semverAllMonthly"]
 }