MC-4014: PageBuilder Performance Is Bad With Minimal Content

- Smooth WYSIWYG init scripts

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_default.less

@@ -42,6 +42,7 @@
             }
         }
         .inline-wysiwyg {
+            line-height: 1.3;
             min-height: 50px;
         }
         .mce-tinymce-inline {

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

@@ -234,6 +234,32 @@ export default class Preview extends BasePreview {
         events.trigger("stage:interactionStop");
     }
 
+    /**
+     * Init the WYSIWYG
+     */
+    public initWysiwyg(focus: boolean = false) {
+        if (this.wysiwyg) {
+            return;
+        }
+
+        const wysiwygConfig = this.config.additional_data.wysiwygConfig.wysiwygConfigData;
+
+        if (focus) {
+            wysiwygConfig.adapter.settings.auto_focus = this.element.id;
+        }
+
+        return WysiwygFactory(
+            this.parent.id,
+            this.element.id,
+            this.config.name,
+            wysiwygConfig,
+            this.parent.dataStore,
+            "content",
+        ).then((wysiwyg: WysiwygInterface): void => {
+            this.wysiwyg = wysiwyg;
+        });
+    }
+
     /**
      * @inheritDoc
      */
@@ -291,28 +317,6 @@ export default class Preview extends BasePreview {
         });
     }
 
-    /**
-     * Init the WYSIWYG
-     */
-    private initWysiwyg(focus: boolean = false) {
-        const wysiwygConfig = this.config.additional_data.wysiwygConfig.wysiwygConfigData;
-
-        if (focus) {
-            wysiwygConfig.adapter.settings.auto_focus = this.element.id;
-        }
-
-        return WysiwygFactory(
-            this.parent.id,
-            this.element.id,
-            this.config.name,
-            wysiwygConfig,
-            this.parent.dataStore,
-            "content",
-        ).then((wysiwyg: WysiwygInterface): void => {
-            this.wysiwyg = wysiwyg;
-        });
-    }
-
     /**
      * Update image data inside data store
      *

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

@@ -29,7 +29,6 @@ import ContentTypeRemovedEventParamsInterface from "../content-type-removed-even
 import ObservableUpdater from "../observable-updater";
 import PreviewCollection from "../preview-collection";
 import Slide from "../slide/preview";
-import {default as SliderPreview} from "../slider/preview";
 
 /**
  * @api
@@ -82,7 +81,7 @@ export default class Preview extends PreviewCollection {
             // Update our KO pointer to the active slide on change
             $(this.element).on(
                 "beforeChange",
-                (event: Event, slick: {}, currentSlide: any, nextSlide: any) => {
+                (event: Event, slick: {}, currentSlide: number, nextSlide: number) => {
                     this.setActiveSlide(nextSlide);
                 },
             ).on("afterChange", () => {
@@ -329,7 +328,7 @@ export default class Preview extends PreviewCollection {
                 _.defer(() => {
                     if (newItemIndex !== null) {
                         newItemIndex = null;
-                        (this as SliderPreview).navigateToSlide(itemIndex, true, true);
+                        this.navigateToSlide(itemIndex, true, true);
                         _.defer(() => {
                             this.focusedSlide(null);
                             this.focusedSlide(itemIndex);
@@ -366,7 +365,7 @@ export default class Preview extends PreviewCollection {
             if (duplicatedSlide && args.id === duplicatedSlide.id) {
                 _.defer(() => {
                     // Mark the new duplicate slide as active
-                    (this as SliderPreview).navigateToSlide(duplicatedSlideIndex, true, true);
+                    this.navigateToSlide(duplicatedSlideIndex, true, true);
                     duplicatedSlide = duplicatedSlideIndex = null;
                 });
             }