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

Author: davemacaulay

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderBannerSection.xml

@@ -41,7 +41,7 @@
         <element name="messageContentWidget" type="text" selector="(//div[@data-content-type='banner'])[{{arg1}}]//div[@data-element='content']//a[contains(@href,'{{arg2}}{{arg3}}')]" parameterized="true"/>
         <element name="messageContentTextArea" type="text" selector="(//div[@data-content-type='banner'])[{{arg1}}]//div[@data-element='wrapper']//div[@data-element='content'][contains(text(),'{{arg2}}')]" parameterized="true"/>
         <element name="messageContentTextAreaImage" type="text" selector="(//div[@data-content-type='banner'])[{{arg1}}]//div[@data-element='wrapper']//div[@data-element='content']//img[contains(@src, {{arg2}})]" parameterized="true"/>
-        <element name="messageContentHeightJS" type="text" selector="return document.evaluate(&quot;(//div[@data-content-type='banner'])[{{arg1}}]//div[@data-element='content']//div[contains(text(),'{{arg2}}')]&quot;, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.clientHeight;" parameterized="true"/>
+        <element name="messageContentHeightJS" type="text" selector="return document.evaluate(&quot;(//div[@data-content-type='banner'])[{{arg1}}]//*[contains(text(),'{{arg2}}')]&quot;, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.clientHeight;" parameterized="true"/>
         <element name="linkUrl" type="button" selector="(//div[@data-content-type='banner'])[{{arg1}}]/a[@data-element='link'][contains(@href,'{{arg2}}')]" parameterized="true"/>
         <element name="openInNewTab" type="button" selector="(//div[@data-content-type='banner'])[{{arg1}}]/a[@data-element='link'][contains(@target,'_blank')]" parameterized="true"/>
         <element name="button" type="button" selector="(//div[@data-content-type='banner'])[{{arg1}}]//div[@data-element='wrapper']//button" parameterized="true"/>

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderTextSection.xml

@@ -13,8 +13,8 @@
         <element name="hidden" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]/div/ancestor::*[contains(@class, 'pagebuilder-content-type-wrapper') and contains(@class, 'pagebuilder-content-type-hidden')]" parameterized="true"/>
         <element name="notHidden" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]/parent::*[contains(@class, 'pagebuilder-content-type-wrapper') and not(contains(@class, 'pagebuilder-content-type-hidden'))][1]" parameterized="true"/>
         <element name="textAreaTextContains" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]//textarea[contains(@value,'{{arg2}}')]" parameterized="true"/>
-        <element name="text" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]//div[contains(@class, 'inline-wysiwyg')]//*[contains(.,'{{arg2}}')]" parameterized="true"/>
-        <element name="textWithTag" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]//div[contains(@class, 'inline-wysiwyg')]//*{{tagName}}[contains(.,'{{text}}')]" parameterized="true"/>
+        <element name="text" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]//*[contains(.,'{{arg2}}')]" parameterized="true"/>
+        <element name="textWithTag" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]//{{tagName}}[contains(.,'{{text}}')]" parameterized="true"/>
         <element name="elementInText" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]//{{tagName}}[{{index}}]" parameterized="true"/>
         <element name="textAnchorText" type="text" selector="(//div[@data-content-type='text'])[{{arg1}}]//div[contains(@class,'inline-wysiwyg')]//a[text()='{{arg2}}']" parameterized="true"/>
         <element name="directive" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]/div//span[contains(.,'{{arg2}}')]" parameterized="true"/>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderTextTest.xml

@@ -2955,12 +2955,12 @@
         <waitForPageLoad stepKey="waitForUnselect"/>
         <pressKey selector="{{TextOnStage.tinymce('1')}}" parameterArray="[\Facebook\WebDriver\WebDriverKeys::SHIFT, \Facebook\WebDriver\WebDriverKeys::INSERT]" stepKey="pasteAllText"/>
         <waitForPageLoad stepKey="waitForTextPaste"/>
-        <seeNumberOfElements selector="{{TextOnStage.text('1', PageBuilderVariableWidgetText.value)}}" userInput="2" stepKey="seeTwoParagraphs"/>
+        <seeNumberOfElements selector="{{TextOnStage.textWithTag('1', 'p', PageBuilderVariableWidgetText.value)}}" userInput="2" stepKey="seeTwoParagraphs"/>
         <executeJS function="document.execCommand('selectall', null, false);" stepKey="selectAllText2"/>
         <waitForPageLoad stepKey="waitForTextSelect2"/>
         <pressKey selector="{{TextOnStage.tinymce('1')}}" parameterArray="[\Facebook\WebDriver\WebDriverKeys::SHIFT, \Facebook\WebDriver\WebDriverKeys::INSERT]" stepKey="pasteAllText2"/>
         <waitForPageLoad stepKey="waitForTextPaste2"/>
-        <seeNumberOfElements selector="{{TextOnStage.text('1', PageBuilderVariableWidgetText.value)}}" userInput="1" stepKey="seeOnlyOneParagraph"/>
+        <seeNumberOfElements selector="{{TextOnStage.textWithTag('1', 'p', PageBuilderVariableWidgetText.value)}}" userInput="1" stepKey="seeOnlyOneParagraph"/>
     </test>
     <test name="TextAddLinkToTextInlineWYSIWYG">
         <annotations>
@@ -3011,8 +3011,8 @@
             <title value="TinyMCE4 selection is preserved after initiation"/>
             <description value="Verify that a users selection is not lost between select and initiation"/>
             <severity value="MAJOR"/>
-            <useCaseId value=""/>
-            <testCaseId value=""/>
+            <useCaseId value="PB-170"/>
+            <testCaseId value="PB-303"/>
             <group value="pagebuilder"/>
             <group value="pagebuilder-text"/>
         </annotations>

app/code/Magento/PageBuilder/view/adminhtml/web/js/page-builder.js

@@ -156,8 +156,8 @@ export default class PageBuilder implements PageBuilderInterface {
      * @param config
      */
     private preloadTemplates(config: ConfigInterface): void {
-        const previewTemplates = Object.values(config.content_types).map((contentType) => {
-            return Object.values(contentType.appearances).map((appearance) => {
+        const previewTemplates = _.values(config.content_types).map((contentType) => {
+            return _.values(contentType.appearances).map((appearance) => {
                 return appearance.preview_template;
             });
         }).reduce((array, value) => array.concat(value), []).map((value) => formatPath(value));