tiny-markdown-editor 0.2.32 → 0.2.33

package/lib/TinyMDECommandBar.js

@@ -128,6 +128,9 @@ class CommandBar {
         this.buttons = {};
         this.state = {};
         this.hotkeys = [];
+        this.cleanupFns = [];
+        this.detachEditor = null;
+        this.destroyed = false;
         this.e = null;
         this.editor = null;
         this.commands = {};
@@ -167,7 +170,7 @@ class CommandBar {
             "insertLink",
             "insertImage",
         ]);
-        document.addEventListener("keydown", (e) => this.handleKeydown(e));
+        this.addListener(document, "keydown", (e) => this.handleKeydown(e));
         if (props.editor)
             this.setEditor(props.editor);
     }
@@ -274,7 +277,7 @@ class CommandBar {
                 this.buttons[commandName].className = "TMCommandButton TMCommandButton_Disabled";
                 this.buttons[commandName].title = title;
                 this.buttons[commandName].innerHTML = this.commands[commandName].innerHTML || "?";
-                this.buttons[commandName].addEventListener("mousedown", (e) => this.handleClick(commandName, e));
+                this.addListener(this.buttons[commandName], "mousedown", (e) => this.handleClick(commandName, e));
                 this.e.appendChild(this.buttons[commandName]);
             }
         }
@@ -304,8 +307,12 @@ class CommandBar {
         }
     }
     setEditor(editor) {
+        if (this.detachEditor)
+            this.detachEditor();
         this.editor = editor;
-        editor.addEventListener("selection", (e) => this.handleSelection(e));
+        const handler = (e) => this.handleSelection(e);
+        editor.addEventListener("selection", handler);
+        this.detachEditor = () => editor.removeEventListener("selection", handler);
     }
     handleSelection(event) {
         if (event.commandState) {
@@ -351,6 +358,33 @@ class CommandBar {
             }
         }
     }
+    addListener(target, type, handler) {
+        target.addEventListener(type, handler);
+        this.cleanupFns.push(() => target.removeEventListener(type, handler));
+    }
+    /**
+     * Removes all listeners registered by this instance, including the document-level keydown
+     * listener and the selection listener on its editor, and detaches the command bar element.
+     * Safe to call multiple times.
+     */
+    destroy() {
+        if (this.destroyed)
+            return;
+        this.destroyed = true;
+        if (this.detachEditor) {
+            this.detachEditor();
+            this.detachEditor = null;
+        }
+        for (const cleanup of this.cleanupFns)
+            cleanup();
+        this.cleanupFns = [];
+        if (this.e && this.e.parentNode) {
+            this.e.parentNode.removeChild(this.e);
+        }
+        this.editor = null;
+        this.e = null;
+        this.buttons = {};
+    }
 }
 exports.CommandBar = CommandBar;
 exports.default = CommandBar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiny-markdown-editor",
-  "version": "0.2.32",
+  "version": "0.2.33",
   "description": "TinyMDE: A tiny, ultra low dependency, embeddable HTML/JavaScript Markdown editor.",
   "main": "lib/index.js",
   "files": [