marktext · unclekitty · Oct 31, 2024
diff --git a/examples/index.html b/examples/index.html
@@ -1,27 +1,28 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/logo.jpg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Muya Example</title>
-</head>
-<body>
-  <div class="tools">
-    <button id="undo">UNDO</button>
-    <button id="redo">REDO</button>
-    <input id="search" type="text" placeholder="Search text...">
-    <button id="previous">Previous</button>
-    <button id="next">Next</button>
-    <input id="replace" type="text" placeholder="Replace text...">
-    <button id="single">Single</button>
-    <button id="all">All</button>
-    <button id="set-content">Set Content</button>
-    <button id="select-all">Select All</button>
-  </div>
-  <div class="editor-container">
-    <div id="editor"></div>
-  </div>
-  <script type="module" src="/src/main.ts"></script>
-</body>
-</html>
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/logo.jpg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Muya Example</title>
+    </head>
+    <body>
+        <div class="tools">
+            <button id="undo">UNDO</button>
+            <button id="redo">REDO</button>
+            <input id="search" type="text" placeholder="Search text..." />
+            <button id="previous">Previous</button>
+            <button id="next">Next</button>
+            <input id="replace" type="text" placeholder="Replace text..." />
+            <button id="single">Single</button>
+            <button id="all">All</button>
+            <button id="set-content">Set Content</button>
+            <button id="select-all">Select All</button>
+            <button id="destroy">Destroy</button>
+        </div>
+        <div class="editor-container">
+            <div id="editor"></div>
+        </div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>
diff --git a/examples/package.json b/examples/package.json
@@ -1,15 +1,15 @@
 {
-  "name": "muya-examples",
-  "version": "0.0.1",
-  "description": "Muya vanilla ts demo project",
-  "author": "jocs <[email protected]>",
-  "scripts": {
-    "dev:demo": "vite"
-  },
-  "keywords": [],
-  "license": "MIT",
-  "dependencies": {
-    "@muyajs/core": "workspace:*",
-    "intl-segmenter-polyfill": "^0.4.4"
-  }
-}
+    "name": "muya-examples",
+    "version": "0.0.1",
+    "description": "Muya vanilla ts demo project",
+    "author": "jocs <[email protected]>",
+    "license": "MIT",
+    "keywords": [],
+    "scripts": {
+        "dev:demo": "vite"
+    },
+    "dependencies": {
+        "@muyajs/core": "workspace:*",
+        "intl-segmenter-polyfill": "^0.4.4"
+    }
+}
diff --git a/examples/src/main.ts b/examples/src/main.ts
@@ -72,6 +72,7 @@ const allBtn: HTMLButtonElement = document.querySelector('#all')!;
 const setContentBtn: HTMLButtonElement
   = document.querySelector('#set-content')!;
 const selectAllBtn: HTMLButtonElement = document.querySelector('#select-all')!;
+const destroyBtn: HTMLButtonElement = document.querySelector('#destroy')!;
 
 const muya = new Muya(container, {
     markdown: DEFAULT_MARKDOWN,
@@ -115,6 +116,10 @@ selectAllBtn.addEventListener('click', () => {
     muya.selectAll();
 });
 
+destroyBtn.addEventListener('click', () => {
+    muya.destroy();
+});
+
 const content = [
     {
         name: 'paragraph',

diff --git a/packages/core/src/muya.ts b/packages/core/src/muya.ts
@@ -142,8 +142,14 @@ export class Muya {
             this.domNode.remove();
 
         // Hide all float tools.
-        if (this.ui)
+        if (this.ui) {
             this.ui.hideAllFloatTools();
+            this.ui.destroy();
+        }
+
+        for (const plugin of Object.values(this._uiPlugins)) {
+            plugin?.destroy?.();
+        }
     }
 }
 

diff --git a/packages/core/src/ui/imageResizeBar/index.ts b/packages/core/src/ui/imageResizeBar/index.ts
@@ -50,7 +50,8 @@ export class ImageResizeBar {
             if (
                 !this.resizing
                 && this.status
-                && Math.abs((event.target as HTMLElement).scrollTop - this.lastScrollTop) > 50
+                && Math.abs((event.target as HTMLElement).scrollTop - this.lastScrollTop)
+                > 50
             ) {
                 this.hide();
             }
@@ -181,8 +182,7 @@ export class ImageResizeBar {
         event.preventDefault();
         const { eventCenter } = this.muya;
         if (this.eventId.length) {
-            for (const id of this.eventId)
-                eventCenter.detachDOMEvent(id);
+            for (const id of this.eventId) eventCenter.detachDOMEvent(id);
 
             this.eventId = [];
         }
@@ -204,4 +204,9 @@ export class ImageResizeBar {
         this.status = false;
         eventCenter.emit('muya-float', this, false);
     }
+
+    destroy() {
+        if (this.container)
+            this.container?.remove();
+    }
 }
diff --git a/packages/core/src/ui/ui.ts b/packages/core/src/ui/ui.ts
@@ -27,4 +27,12 @@ export class Ui {
         for (const btn of this.shownButton)
             btn.hide();
     }
+
+    destroy() {
+        for (const tool of this.shownFloat)
+            tool.destroy();
+
+        for (const btn of this.shownButton)
+            btn.destroy();
+    }
 }