feat: remove eventlistener on destroy

dist/index.d.ts

@@ -1,5 +1,4 @@
 import { API, ConversionConfig, HTMLPasteEvent, PasteConfig, SanitizerConfig, ToolConfig, ToolboxConfig } from '@editorjs/editorjs';
-
 /**
  * Base Paragraph Block for the Editor.js.
  * Represents a regular text block
@@ -112,7 +111,7 @@ export default class Paragraph {
      *
      * @param {KeyboardEvent} e - key up event
      */
-    onKeyUp(e: KeyboardEvent): void;
+    private onKeyUp;
     /**
      * Create Tool's view
      *
@@ -151,6 +150,12 @@ export default class Paragraph {
      * @public
      */
     save(toolsContent: HTMLDivElement): ParagraphData;
+    /**
+     * Method that is being called when the element is being destroyed
+     *
+     * @public
+     */
+    destroy(): void;
     /**
      * On paste callback fired from Editor.
      *

dist/paragraph.mjs

@@ -1,10 +1,10 @@
 (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".ce-paragraph{line-height:1.6em;outline:none}.ce-block:only-of-type .ce-paragraph[data-placeholder-active]:empty:before,.ce-block:only-of-type .ce-paragraph[data-placeholder-active][data-empty=true]:before{content:attr(data-placeholder-active)}.ce-paragraph p:first-of-type{margin-top:0}.ce-paragraph p:last-of-type{margin-bottom:0}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
 const a = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M8 9V7.2C8 7.08954 8.08954 7 8.2 7L12 7M16 9V7.2C16 7.08954 15.9105 7 15.8 7L12 7M12 7L12 17M12 17H10M12 17H14"/></svg>';
-function l(r) {
-  const t = document.createElement("div");
-  t.innerHTML = r.trim();
-  const e = document.createDocumentFragment();
-  return e.append(...Array.from(t.childNodes)), e;
+function o(r) {
+  const e = document.createElement("div");
+  e.innerHTML = r.trim();
+  const t = document.createDocumentFragment();
+  return t.append(...Array.from(e.childNodes)), t;
 }
 /**
  * Base Paragraph Block for the Editor.js.
@@ -33,23 +33,23 @@ class n {
    * @param {object} params.api - editor.js api
    * @param {boolean} readOnly - read only mode flag
    */
-  constructor({ data: t, config: e, api: i, readOnly: s }) {
+  constructor({ data: e, config: t, api: i, readOnly: s }) {
     this.api = i, this.readOnly = s, this._CSS = {
       block: this.api.styles.block,
       wrapper: "ce-paragraph"
-    }, this.readOnly || (this.onKeyUp = this.onKeyUp.bind(this)), this._placeholder = e.placeholder ? e.placeholder : n.DEFAULT_PLACEHOLDER, this._data = t ?? {}, this._element = null, this._preserveBlank = e.preserveBlank ?? !1;
+    }, this.readOnly || (this.onKeyUp = this.onKeyUp.bind(this)), this._placeholder = t.placeholder ? t.placeholder : n.DEFAULT_PLACEHOLDER, this._data = e ?? {}, this._element = null, this._preserveBlank = t.preserveBlank ?? !1;
   }
   /**
    * Check if text content is empty and set empty string to inner html.
    * We need this because some browsers (e.g. Safari) insert <br> into empty contenteditanle elements
    *
    * @param {KeyboardEvent} e - key up event
    */
-  onKeyUp(t) {
-    if (t.code !== "Backspace" && t.code !== "Delete" || !this._element)
+  onKeyUp(e) {
+    if (e.code !== "Backspace" && e.code !== "Delete" || !this._element)
       return;
-    const { textContent: e } = this._element;
-    e === "" && (this._element.innerHTML = "");
+    const { textContent: t } = this._element;
+    t === "" && (this._element.innerHTML = "");
   }
   /**
    * Create Tool's view
@@ -58,8 +58,8 @@ class n {
    * @private
    */
   drawView() {
-    const t = document.createElement("DIV");
-    return t.classList.add(this._CSS.wrapper, this._CSS.block), t.contentEditable = "false", t.dataset.placeholderActive = this.api.i18n.t(this._placeholder), this._data.text && (t.innerHTML = this._data.text), this.readOnly || (t.contentEditable = "true", t.addEventListener("keyup", this.onKeyUp)), t;
+    const e = document.createElement("DIV");
+    return e.classList.add(this._CSS.wrapper, this._CSS.block), e.contentEditable = "false", e.dataset.placeholderActive = this.api.i18n.t(this._placeholder), this._data.text && (e.innerHTML = this._data.text), this.readOnly || (e.contentEditable = "true", e.addEventListener("keyup", this.onKeyUp)), e;
   }
   /**
    * Return Tool's view
@@ -76,12 +76,12 @@ class n {
    * @param {ParagraphData} data
    * @public
    */
-  merge(t) {
+  merge(e) {
     if (!this._element)
       return;
-    this._data.text += t.text;
-    const e = l(t.text);
-    this._element.appendChild(e), this._element.normalize();
+    this._data.text += e.text;
+    const t = o(e.text);
+    this._element.appendChild(t), this._element.normalize();
   }
   /**
    * Validate Paragraph block data:
@@ -91,8 +91,8 @@ class n {
    * @returns {boolean} false if saved data is not correct, otherwise true
    * @public
    */
-  validate(t) {
-    return !(t.text.trim() === "" && !this._preserveBlank);
+  validate(e) {
+    return !(e.text.trim() === "" && !this._preserveBlank);
   }
   /**
    * Extract Tool's data from the view
@@ -101,21 +101,30 @@ class n {
    * @returns {ParagraphData} - saved data
    * @public
    */
-  save(t) {
+  save(e) {
     return {
-      text: t.innerHTML
+      text: e.innerHTML
     };
   }
+  /**
+   * Method that is being called when the element is being destroyed
+   *
+   * @public
+   */
+  destroy() {
+    var e;
+    (e = this._element) == null || e.removeEventListener("keyup", this.onKeyUp);
+  }
   /**
    * On paste callback fired from Editor.
    *
    * @param {HTMLPasteEvent} event - event with pasted data
    */
-  onPaste(t) {
-    const e = {
-      text: t.detail.data.innerHTML
+  onPaste(e) {
+    const t = {
+      text: e.detail.data.innerHTML
     };
-    this._data = e, window.requestAnimationFrame(() => {
+    this._data = t, window.requestAnimationFrame(() => {
       this._element && (this._element.innerHTML = this._data.text || "");
     });
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/paragraph",
-  "version": "2.11.6",
+  "version": "2.11.7",
   "keywords": [
     "codex editor",
     "paragraph",
@@ -32,13 +32,13 @@
     "email": "[email protected]"
   },
   "devDependencies": {
-    "@editorjs/editorjs": "^2.29.1",
-    "typescript": "^5.4.5",
-    "vite": "^4.4.11",
-    "vite-plugin-css-injected-by-js": "^3.3.0",
-    "vite-plugin-dts": "^3.9.1"
+    "@editorjs/editorjs": "^2.30.6",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.8",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vite-plugin-dts": "^4.2.3"
   },
   "dependencies": {
-    "@codexteam/icons": "^0.0.4"
+    "@codexteam/icons": "^0.3.2"
   }
 }

src/index.ts

@@ -185,7 +185,7 @@ export default class Paragraph {
    *
    * @param {KeyboardEvent} e - key up event
    */
-  onKeyUp(e: KeyboardEvent): void {
+  private onKeyUp(e: KeyboardEvent): void {
     if (e.code !== 'Backspace' && e.code !== 'Delete') {
       return;
     }
@@ -294,6 +294,15 @@ export default class Paragraph {
     };
   }
 
+  /**
+   * Method that is being called when the element is being destroyed
+   *
+   * @public
+   */
+  public destroy(): void {
+    this._element?.removeEventListener('keyup', this.onKeyUp)
+  }
+
   /**
    * On paste callback fired from Editor.
    *