PB-170: TinyMCE Performance is very poor with multiple instances on Stage

- Open TinyMCE on drop

Author: davemacaulay

app/code/Magento/PageBuilder/Model/Stage/Config.php

@@ -101,9 +101,9 @@ class Config
      * @param \Magento\Ui\Block\Wysiwyg\ActiveEditor $activeEditor
      * @param \Magento\PageBuilder\Model\Wysiwyg\InlineEditingSupportedAdapterList $inlineEditingChecker
      * @param \Magento\PageBuilder\Model\WidgetInitializerConfig $widgetInitializerConfig
+     * @param array $rootContainerConfig
      * @param \Magento\Widget\Model\Widget\Config|null $widgetConfig
      * @param \Magento\Variable\Model\Variable\Config|null $variableConfig
-     * @param array $rootContainerConfig
      * @param array $data
      *
      * @SuppressWarnings(PHPMD.ExcessiveParameterList)
@@ -118,9 +118,9 @@ public function __construct(
         \Magento\Ui\Block\Wysiwyg\ActiveEditor $activeEditor,
         \Magento\PageBuilder\Model\Wysiwyg\InlineEditingSupportedAdapterList $inlineEditingChecker,
         \Magento\PageBuilder\Model\WidgetInitializerConfig $widgetInitializerConfig,
+        array $rootContainerConfig = [],
         \Magento\Widget\Model\Widget\Config $widgetConfig = null,
         \Magento\Variable\Model\Variable\Config $variableConfig = null,
-        array $rootContainerConfig = [],
         array $data = []
     ) {
         $this->config = $config;

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_typography.less

@@ -213,10 +213,10 @@ body {
     .magento-placeholder-error,
     .magento-placeholder {
         img {
+            display: inline-block;
             margin-right: 5px;
             max-height: 20px;
             vertical-align: middle;
-            display: inline-block;
         }
     }
 }

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

@@ -17,7 +17,7 @@
     }
     > .inline-wysiwyg {
         line-height: 1.3;
-        min-height: 1rem;
+        min-height: 3rem;
         overflow: auto;
 
         + .placeholder-text {

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

@@ -20,6 +20,7 @@ import {
 import WysiwygFactory from "../../wysiwyg/factory";
 import WysiwygInterface from "../../wysiwyg/wysiwyg-interface";
 import BasePreview from "../preview";
+import {ContentTypeMountEventParamsInterface} from "../content-type-events.types";
 
 /**
  * @api
@@ -40,6 +41,11 @@ export default class Preview extends BasePreview {
      */
     private element: HTMLElement;
 
+    /**
+     * Deferred called once the render is completed
+     */
+    private afterRenderDeferred: JQueryDeferred<HTMLElement> = $.Deferred();
+
     /**
      * The textarea element in disabled mode
      */
@@ -84,6 +90,8 @@ export default class Preview extends BasePreview {
         this.element = element;
         element.id = this.contentType.id + "-editor";
 
+        this.afterRenderDeferred.resolve(element);
+
         /**
          * afterRenderWysiwyg is called whenever Knockout causes a DOM re-render. This occurs frequently within Slider
          * due to Slick's inability to perform a refresh with Knockout managing the DOM. Due to this the original
@@ -200,8 +208,7 @@ export default class Preview extends BasePreview {
     /**
      * @param {HTMLTextAreaElement} element
      */
-    public initTextarea(element: HTMLTextAreaElement)
-    {
+    public initTextarea(element: HTMLTextAreaElement) {
         this.textarea = element;
 
         // set initial value of textarea based on data store
@@ -218,26 +225,23 @@ export default class Preview extends BasePreview {
     /**
      * Save current value of textarea in data store
      */
-    public onTextareaKeyUp()
-    {
+    public onTextareaKeyUp() {
         this.adjustTextareaHeightBasedOnScrollHeight();
         this.contentType.dataStore.set("content", this.textarea.value);
     }
 
     /**
      * Start stage interaction on textarea blur
      */
-    public onTextareaFocus()
-    {
+    public onTextareaFocus() {
         $(this.textarea).closest(".pagebuilder-content-type").addClass("pagebuilder-toolbar-active");
         events.trigger("stage:interactionStart");
     }
 
     /**
      * Stop stage interaction on textarea blur
      */
-    public onTextareaBlur()
-    {
+    public onTextareaBlur() {
         $(this.textarea).closest(".pagebuilder-content-type").removeClass("pagebuilder-toolbar-active");
         events.trigger("stage:interactionStop");
     }
@@ -247,8 +251,7 @@ export default class Preview extends BasePreview {
      *
      * @returns {any}
      */
-    public getPlaceholderStyle()
-    {
+    public getPlaceholderStyle() {
         const keys = [
             "marginBottom",
             "marginLeft",
@@ -265,11 +268,28 @@ export default class Preview extends BasePreview {
         });
     }
 
+    /**
+     * Bind events
+     */
+    protected bindEvents() {
+        super.bindEvents();
+
+        // After drop of new content type open TinyMCE and focus
+        events.on("text:dropAfter", (args: ContentTypeMountEventParamsInterface) => {
+            if (args.id === this.contentType.id) {
+                this.afterRenderDeferred.then(() => {
+                    if (this.isWysiwygSupported()) {
+                        this.initWysiwyg(true);
+                    }
+                });
+            }
+        });
+    }
+
     /**
      * Adjust textarea's height based on scrollHeight
      */
-    private adjustTextareaHeightBasedOnScrollHeight()
-    {
+    private adjustTextareaHeightBasedOnScrollHeight() {
         this.textarea.style.height = "";
         const scrollHeight = this.textarea.scrollHeight;
         const minHeight = parseInt($(this.textarea).css("min-height"), 10);