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

davemacaulay · davemacaulay · commit 8688591dd9ed · 2019-11-20T14:29:52.000-06:00
- Resolve issues with tests
- Fix issue with TinyMCE and Knockout trying to both update
diff --git a/app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/OverlayActionGroup.xml b/app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/OverlayActionGroup.xml
@@ -161,7 +161,7 @@
         </arguments>
         <!-- Validate bottom edge of overlay -->
         <comment userInput="Validate bottom edge of overlay" stepKey="commentValidateBottomEdgeOfOverlay"/>
-        <executeJS function="return {{page.wrapperJS(index)}}.getBoundingClientRect().top+{{padding.paddingTop}}+120" stepKey="wrapperTopPaddingContent"/>
+        <executeJS function="return {{page.wrapperJS(index)}}.getBoundingClientRect().top+{{padding.paddingTop}}+110" stepKey="wrapperTopPaddingContent"/>
         <executeJS function="return {{page.overlayJS(index)}}.getBoundingClientRect().bottom" stepKey="overlayBottomPosition"/>
         <executeJS function="return Math.round(({$wrapperTopPaddingContent}/{$overlayBottomPosition})*100)/100" stepKey="overlayBottomRatio"/>
         <assertEquals stepKey="assertOverlayBottomRatio">
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/banner/preview.js b/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/banner/preview.js
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/slide/preview.js b/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/slide/preview.js
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/text/preview.js b/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/text/preview.js
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-centered/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-centered/preview.html
@@ -26,7 +26,6 @@
                          afterRender="afterRenderWysiwyg"
                          contenteditable="true"
                          event="mousedown: stopEvent, click: activateEditor, dblclick: handleDoubleClick">
-                        <div html="data.content.html()"></div>
                     </div>
                     <div if="isWysiwygSupported()" class="placeholder-text" ifnot="data.content.html" translate="'Edit Banner Text'"></div>
                     <textarea ifnot="isWysiwygSupported()" class="inline-wysiwyg-textarea" afterRender="initTextarea" event="{keyup: onTextareaKeyUp, focus: onTextareaFocus, blur: onTextareaBlur, mousedown: stopEvent}" attr="placeholder: $t('Edit Banner Text')"/>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-left/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-left/preview.html
@@ -26,7 +26,6 @@
                          afterRender="afterRenderWysiwyg"
                          contenteditable="true"
                          event="mousedown: stopEvent, click: activateEditor, dblclick: handleDoubleClick">
-                        <div html="data.content.html()"></div>
                     </div>
                     <div if="isWysiwygSupported()" class="placeholder-text" ifnot="data.content.html" translate="'Edit Banner Text'"></div>
                     <textarea ifnot="isWysiwygSupported()" class="inline-wysiwyg-textarea" afterRender="initTextarea" event="{keyup: onTextareaKeyUp, focus: onTextareaFocus, blur: onTextareaBlur, mousedown: stopEvent}" attr="placeholder: $t('Edit Banner Text')"/>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-right/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-right/preview.html
@@ -26,7 +26,6 @@
                          afterRender="afterRenderWysiwyg"
                          contenteditable="true"
                          event="mousedown: stopEvent, click: activateEditor, dblclick: handleDoubleClick">
-                        <div html="data.content.html()"></div>
                     </div>
                     <div if="isWysiwygSupported()" class="placeholder-text" ifnot="data.content.html" translate="'Edit Banner Text'"></div>
                     <textarea ifnot="isWysiwygSupported()" class="inline-wysiwyg-textarea" afterRender="initTextarea" event="{keyup: onTextareaKeyUp, focus: onTextareaFocus, blur: onTextareaBlur, mousedown: stopEvent}" attr="placeholder: $t('Edit Banner Text')"/>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/poster/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/poster/preview.html
@@ -22,7 +22,6 @@
                          afterRender="afterRenderWysiwyg"
                          contenteditable="true"
                          event="mousedown: stopEvent, click: activateEditor, dblclick: handleDoubleClick">
-                        <div html="data.content.html()"></div>
                     </div>
                     <div if="isWysiwygSupported()" class="placeholder-text" ifnot="data.content.html" translate="'Edit Banner Text'"></div>
                     <textarea ifnot="isWysiwygSupported()" class="inline-wysiwyg-textarea" afterRender="initTextarea" event="{keyup: onTextareaKeyUp, focus: onTextareaFocus, blur: onTextareaBlur, mousedown: stopEvent}" attr="placeholder: $t('Edit Banner Text')"/>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-centered/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-centered/preview.html
@@ -26,7 +26,6 @@
                  event="mousedown: stopEvent, click: activateEditor, dblclick: handleDoubleClick"
                  contenteditable="true"
                  afterRender="afterRenderWysiwyg">
-                <div html="data.content.html"></div>
             </div>
             <div if="!data.content.html() && isWysiwygSupported()"
                  class="pagebuilder-empty-slide"
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-left/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-left/preview.html
@@ -28,7 +28,6 @@
                  event="mousedown: stopEvent, click: activateEditor, dblclick: handleDoubleClick"
                  contenteditable="true"
                  afterRender="afterRenderWysiwyg">
-                <div html="data.content.html"></div>
             </div>
             <div if="!data.content.html() && isWysiwygSupported()"
                  class="pagebuilder-empty-slide"
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-right/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-right/preview.html
@@ -26,7 +26,6 @@
                  event="mousedown: stopEvent, click: activateEditor, dblclick: handleDoubleClick"
                  contenteditable="true"
                  afterRender="afterRenderWysiwyg">
-                <div html="data.content.html"></div>
             </div>
             <div if="!data.content.html() && isWysiwygSupported()"
                  class="pagebuilder-empty-slide"
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/poster/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/poster/preview.html
@@ -29,7 +29,6 @@
                      event="mousedown: stopEvent, click: activateEditor, dblclick: handleDoubleClick"
                      contenteditable="true"
                      afterRender="afterRenderWysiwyg">
-                    <div html="data.content.html"></div>
                 </div>
                 <div if="!data.content.html() && isWysiwygSupported()"
                      class="pagebuilder-empty-slide"
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/text/default/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/text/default/preview.html
@@ -13,7 +13,6 @@
          afterRender="afterRenderWysiwyg"
          contenteditable="true"
          event="mousedown: stopEvent, click: activateEditor, dblclick: handleDoubleClick">
-        <div html="data.main.html()"></div>
     </div>
     <div if="isWysiwygSupported()" class="placeholder-text" ifnot="data.main.html" ko-style="getPlaceholderStyle()" translate="'Edit Text'"></div>
 
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/banner/preview.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/banner/preview.ts
@@ -106,6 +106,9 @@ export default class Preview extends BasePreview {
         this.element = element;
         element.id = this.contentType.id + "-editor";
 
+        // Set the innerHTML manually so we don't upset Knockout & TinyMCE
+        element.innerHTML = this.data.content.html();
+
         this.afterRenderDeferred.resolve(element);
 
         /**
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/slide/preview.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/slide/preview.ts
@@ -77,6 +77,9 @@ export default class Preview extends BasePreview {
         this.element = element;
         element.id = this.contentType.id + "-editor";
 
+        // Set the innerHTML manually so we don't upset Knockout & TinyMCE
+        element.innerHTML = this.data.content.html();
+
         /**
          * 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
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/text/preview.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/text/preview.ts
@@ -90,6 +90,9 @@ export default class Preview extends BasePreview {
         this.element = element;
         element.id = this.contentType.id + "-editor";
 
+        // Set the innerHTML manually so we don't upset Knockout & TinyMCE
+        element.innerHTML = this.data.main.html();
+
         this.afterRenderDeferred.resolve(element);
 
         /**
