feat(devkit): Add functionality to destroy all modals with the editor

taskid #44922

.gitignore

@@ -71,3 +71,6 @@ app.*.js
 **/environments/environment.prod.ts
 **/git-data.json
 .env
+
+# Ignores all .hot-update.js files
+**.hot-update.js

packages/ckeditor4/plugin.src.js

@@ -67,6 +67,10 @@ export class CKEditor4Integration extends IntegrationModel {
         "cke_button__ckeditor_wiris_formulaeditorchemistry",
       )[0].style.display = "none";
     }
+    // Change the destroy behavior to also destroy the Mathtype instance.
+    editor.on('destroy', () => {
+      this.destroy();
+    });
   }
 
   /**

packages/devkit/src/integrationmodel.js

@@ -726,17 +726,30 @@ export default class IntegrationModel {
    * Remove events to formulas in the DOM target.
    */
   removeEvents() {
-    const eventTarget = this.isIframe
-      ? this.target.contentWindow.document
-      : this.target;
+    const eventTarget = this.isIframe && this.target.contentWindow?.document ? this.target.contentWindow.document : this.target;
+
+    if (!eventTarget) {
+      return;
+    }
+
     Util.removeElementEvents(eventTarget);
   }
 
   /**
-   * Remove events and set this.editorObject to null in order to prevent memory leaks.
+   * Remove events, modals and set this.editorObject to null in order to prevent memory leaks.
    */
   destroy() {
     this.removeEvents();
+    // Destroy modal dialog if exists.
+    if (this.core.modalDialog) {
+      this.core.modalDialog.destroy();
+    }
+
+    // Remove offline modal dialog if exists.
+    if (this.offlineModal) {
+      this.offlineModal.remove();
+    }
+
     this.editorObject = null;
   }
 

packages/devkit/src/modal.js

@@ -612,6 +612,19 @@ export default class ModalDialog {
 
     Core.globalListeners.fire("onModalClose", {});
   }
+  /**
+    * Closes modal window and destroys the object.
+    */
+  destroy() {
+    // Close modal window.
+    this.close();
+    // Remove listeners and destroy the object.
+    this.removeListeners();
+    this.overlay.remove();
+    this.container.remove();
+    // Reset properties to allow open again.
+    this.properties.created = false;
+  }
 
   /**
    * Sets the website scale to one.

packages/froala/wiris.src.js

@@ -66,6 +66,12 @@ export class FroalaIntegration extends IntegrationModel {
       }.bind(this, this.editorObject),
     );
 
+    // Change the destroy behavior to also destroy the Mathtype instance.
+    this.editorObject.events.on('destroy', () => {
+      // Destroy the MathType plugin.
+      this.destroy();
+    });
+
     /**
      * Update editor parameters.
      * The integration could contain an object with editor parameters.
@@ -390,17 +396,10 @@ export class FroalaIntegration extends IntegrationModel {
     const selectedImage = this.image.get();
     // Value can be undefined.
     if (selectedImage) {
-      if (
-        ($btn.parent()[0].hasAttribute("class") &&
-          $btn.parent()[0].getAttribute("class").indexOf("fr-buttons") ===
-            -1) ||
-        (selectedImage[0] &&
-          (selectedImage[0].classList.contains(
-            Configuration.get("imageClassName"),
-          ) ||
-            selectedImage.hasClass(Configuration.get("imageClassName"))))
-      ) {
-        // Is a MathType image.
+      if (($btn.parent()[0].hasAttribute('class') && $btn.parent()[0].getAttribute('class').indexOf('fr-buttons') === -1) ||
+      (selectedImage[0] && (selectedImage[0].classList.contains(Configuration.get('imageClassName')) ||
+      // Is a MathType image.
+      selectedImage.hasClass(Configuration.get('imageClassName'))))) {
         // Show MathType icons if previously were hidden.
         $btn.removeClass("fr-hidden");
         // Disable resize box.

packages/generic/wirisplugin-generic.src.js

@@ -44,6 +44,16 @@ export function wrsInitEditor(target, toolbar, mathtypeProperties) {
   WirisPlugin.currentInstance = genericIntegrationInstance;
 }
 
+/**
+ * Destroys the current instance of the editor and the toolbar.
+ * @param instance - The current instance of the editor.
+ * @returns {void}
+ */
+export function wrsDestroyEditor(instance) {
+  instance.toolbar.innerHTML = '';
+  instance.destroy();
+}
+
 /**
  * Gets the html content of the Generic editor and parses it to transform the latex
  * $$$$ into a mathml image

packages/tinymce5/editor_plugin.src.js

@@ -413,7 +413,18 @@ export const currentInstance = null;
         WirisPlugin.instances[editor.id].initParsed = true;
       };
 
-      if ("onInit" in editor) {
+      // Change the destroy behavior to also destroy the MathType instance.
+      const destroy = editor.destroy;
+
+      editor.destroy = function () {
+        WirisPlugin.instances[editor.id].listeners.fire('onDestroy', {});
+
+        // Destroy the Mathtype instance.
+        WirisPlugin.instances[editor.id].destroy();
+        destroy.call(editor);
+      };
+
+      if ('onInit' in editor) {
         editor.onInit.add(onInit);
       } else {
         editor.on("init", () => {

packages/tinymce6/editor_plugin.src.js

@@ -408,6 +408,17 @@ export const currentInstance = null;
         // PLUGINS-1070: We set this variable out of condition to parse content after.
         WirisPlugin.instances[editor.id].initParsed = true;
       };
+
+      // Change the destroy behavior to also destroy the MathType instance.
+      const destroy = editor.destroy;
+
+      editor.destroy = function () {
+        WirisPlugin.instances[editor.id].listeners.fire('onDestroy', {});
+
+        // Destroy the Mathtype instance.
+        WirisPlugin.instances[editor.id].destroy();
+        destroy.call(editor);
+      };
 
       if ("onInit" in editor) {
         editor.onInit.add(onInit);