properly unload widget to prevent memory leaks

Author: lenadax

js/src/bootstrap5/buttons.js

@@ -38,7 +38,7 @@ export class Action {
         if (opts.tooltip) {
             this.container.attr('data-bs-toggle', 'tooltip')
                 .attr('data-bs-title', opts.tooltip);
-            new bootstrap.Tooltip(this.container);
+            this.tooltip = new bootstrap.Tooltip(this.container);
         }
 
         if (opts.icon) {
@@ -85,6 +85,13 @@ export class Action {
     on_click(e) {
         e.preventDefault();
     }
+
+    unload() {
+        if (this.tooltip) {
+            this.tooltip.dispose();
+        }
+        this.elem.off();
+    }
 }
 
 export class Button extends Action {
@@ -162,6 +169,13 @@ export class DropdownButton extends Button {
      */
     unload() {
         $(window).off('resize', this.on_resize);
+        if (this.submit_elem) {
+            this.submit_elem.off();
+        }
+        for (let child of this.children) {
+            child.unload();
+        }
+        super.unload();
     }
 
     /**

js/src/bootstrap5/widget.js

@@ -92,20 +92,33 @@ export class TiptapWidget {
      * Cleans up the widget and removes event listeners.
      */
     destroy() {
+        if (this.editor) {
+            this.editor.off();
+            this.editor.destroy();
+        }
+    
         this.unload_all();
-        this.editor.destroy();
-        this.elem.empty();
-        this.buttons = null;
+    
+        if (this.helpLink && typeof this.helpLink.unload === 'function') {
+            this.helpLink.unload();
+        }
+    
+        // remove from jQuery data cache
+        this.elem.removeData('yafowil-tiptap');
+    
+        // remove event listeners
+        this.editarea.off();
+        this.controls.off();
+        this.textarea.off();
+        this.elem.off();
     }
 
     /**
      * Unloads all action buttons in the widget.
      */
     unload_all() {
         for (let btn in this.buttons) {
-            if (this.buttons[btn].unload) {
-                this.buttons[btn].unload();
-            }
+            this.buttons[btn].unload();
         }
     }
 

src/yafowil/widget/tiptap/resources/bootstrap5/widget.js

@@ -20,7 +20,7 @@ var yafowil_tiptap = (function (exports, $, bootstrap) {
             if (opts.tooltip) {
                 this.container.attr('data-bs-toggle', 'tooltip')
                     .attr('data-bs-title', opts.tooltip);
-                new bootstrap.Tooltip(this.container);
+                this.tooltip = new bootstrap.Tooltip(this.container);
             }
             if (opts.icon) {
                 this.icon = $('<i />')
@@ -47,6 +47,12 @@ var yafowil_tiptap = (function (exports, $, bootstrap) {
         on_click(e) {
             e.preventDefault();
         }
+        unload() {
+            if (this.tooltip) {
+                this.tooltip.dispose();
+            }
+            this.elem.off();
+        }
     }
     class Button extends Action {
         compile(opts) {
@@ -90,6 +96,13 @@ var yafowil_tiptap = (function (exports, $, bootstrap) {
         }
         unload() {
             $(window).off('resize', this.on_resize);
+            if (this.submit_elem) {
+                this.submit_elem.off();
+            }
+            for (let child of this.children) {
+                child.unload();
+            }
+            super.unload();
         }
         on_resize(e) {
             this.active = false;
@@ -627,16 +640,23 @@ var yafowil_tiptap = (function (exports, $, bootstrap) {
             }
         }
         destroy() {
+            if (this.editor) {
+                this.editor.off();
+                this.editor.destroy();
+            }
             this.unload_all();
-            this.editor.destroy();
-            this.elem.empty();
-            this.buttons = null;
+            if (this.helpLink && typeof this.helpLink.unload === 'function') {
+                this.helpLink.unload();
+            }
+            this.elem.removeData('yafowil-tiptap');
+            this.editarea.off();
+            this.controls.off();
+            this.textarea.off();
+            this.elem.off();
         }
         unload_all() {
             for (let btn in this.buttons) {
-                if (this.buttons[btn].unload) {
-                    this.buttons[btn].unload();
-                }
+                this.buttons[btn].unload();
             }
         }
         add_button(name, container) {