PB-166: Page Builder doesn't implement destroy method

Author: omiroshnichenko

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type-collection.js

@@ -71,6 +71,16 @@ export default class ContentTypeCollection<P extends PreviewCollection = Preview
         this.collection.removeChild(child);
     }
 
+    /**
+     * Destroys current instance and all children
+     */
+    public destroy(): void {
+        [...this.getChildren()()].forEach((elem: ContentTypeInterface) => {
+            elem.destroy();
+        });
+        super.destroy();
+    }
+
     /**
      * Set the children observable array into the class
      *

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type.js

@@ -41,6 +41,23 @@ export default class ContentType<P extends Preview = Preview, M extends Master =
         this.bindEvents();
     }
 
+    /**
+     * Destroys current instance
+     */
+    public destroy(): void {
+        const params = {
+            contentType: this,
+            index: (this.parentContentType as ContentTypeCollectionInterface)
+                .getChildren()
+                .indexOf(this),
+            parentContentType: this.parentContentType,
+            stageId: this.stageId,
+        };
+        this.preview ? this.preview.destroy() : this.content.destroy();
+        events.trigger("contentType:removeAfter", params);
+        events.trigger(this.config.name + ":removeAfter", params);
+    }
+
     protected bindEvents() {
         const eventName: string = this.config.name + ":" + this.id + ":updateAfter";
         const paramObj: any = {};

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/master.js

@@ -19,4 +19,9 @@ export default interface ContentTypeInterface<P extends Preview = Preview, M ext
     preview: P;
     content: M;
     dropped: boolean;
+
+    /**
+     * Destroys current instance
+     */
+    destroy(): void;
 }

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/preview.js

@@ -68,6 +68,13 @@ export default class Master {
         return result;
     }
 
+    /**
+     * Destroys current instance
+     */
+    public destroy(): void {
+        return;
+    }
+
     /**
      * Attach event to updating data in data store to update observables
      */

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/row/preview.js

@@ -331,26 +331,13 @@ export default class Preview implements PreviewInterface {
      */
     public onOptionRemove(): void {
         const removeContentType = () => {
-            const dispatchRemoveEvent = () => {
-                const params = {
-                    contentType: this.contentType,
-                    index: (this.contentType.parentContentType as ContentTypeCollectionInterface)
-                        .getChildren()
-                        .indexOf(this.contentType),
-                    parentContentType: this.contentType.parentContentType,
-                    stageId: this.contentType.stageId,
-                };
-                events.trigger("contentType:removeAfter", params);
-                events.trigger(this.contentType.config.name + ":removeAfter", params);
-            };
-
             if (this.wrapperElement) {
                 // Fade out the content type
                 $(this.wrapperElement).fadeOut(350 / 2, () => {
-                    dispatchRemoveEvent();
+                    this.contentType.destroy();
                 });
             } else {
-                dispatchRemoveEvent();
+                this.contentType.destroy();
             }
         };
 
@@ -391,6 +378,13 @@ export default class Preview implements PreviewInterface {
         return getSortableOptions(this);
     }
 
+    /**
+     * Destroys current instance
+     */
+    public destroy(): void {
+        return;
+    }
+
     /**
      * Get the CSS classes for the children element, as we dynamically create this class name it can't sit in the DOM
      * without causing browser issues