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

- Fix widget insertion

Author: davemacaulay

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">

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

@@ -16,6 +16,7 @@
         <element name="text" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]/div//*[contains(.,'{{arg2}}')]" 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"/>
+        <element name="directiveFocused" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]/div//span[contains(.,'{{arg2}}') and @data-mce-selected='1']" parameterized="true"/>
         <element name="mcePlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]/div//*[starts-with(@id, '{{arg2}}')]" parameterized="true"/>
         <element name="variablePlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg}}]/div//*[contains(@class, 'magento-variable') and contains(@class, 'magento-placeholder')]" parameterized="true"/>
         <element name="widgetPlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg}}]/div//*[contains(@class, 'magento-placeholder') and contains(@class, 'magento-widget')]" parameterized="true"/>

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

@@ -2834,6 +2834,20 @@
         <dontSeeElement selector="{{TextOnStage.text('1', PageBuilderVariableWidgetText.value)}}" stepKey="dontSeeOriginalTextOnStage"/>
         <seeElement selector="{{TextOnStage.text('1', PageBuilderVariableWidgetText.expectedString1)}}" stepKey="seeExpectedString" />
         <seeElement selector="{{TextOnStage.text('1', PageBuilderVariableWidgetText.expectedString2)}}" stepKey="seeExpectedString1" />
+        <!-- Verify clicking the variable focuses the directive -->
+        <actionGroup ref="unFocusOptionMenu" stepKey="unFocusEditor">
+            <argument name="contentType" value="PageBuilderTextContentType"/>
+        </actionGroup>
+        <click selector="{{TextOnStage.directive('1', TinyMCEVariableBaseURL.editPanelValue)}}" stepKey="clickOnWidgetPlaceholder"/>
+        <waitForElementVisible selector="{{TextOnStage.directiveFocused('1', TinyMCEVariableBaseURL.editPanelValue)}}" stepKey="waitForDirectiveFocused"/>
+        <seeElement selector="{{TextOnStage.directiveFocused('1', TinyMCEVariableBaseURL.editPanelValue)}}" stepKey="verifyDirectiveIsFocused"/>
+        <!-- Save page and verify single clicking on widget will retain selection -->
+        <actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
+        <actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
+        <click selector="{{TextOnStage.directive('1', TinyMCEVariableBaseURL.editPanelValue)}}" stepKey="clickOnWidgetPlaceholder2"/>
+        <waitForElementVisible selector="{{TextOnStage.tinymceInFocus('1')}}" stepKey="waitForTinyMCEFocus"/>
+        <waitForElementVisible selector="{{TextOnStage.directiveFocused('1', TinyMCEVariableBaseURL.editPanelValue)}}" stepKey="waitForDirectiveFocused2"/>
+        <seeElement selector="{{TextOnStage.directiveFocused('1', TinyMCEVariableBaseURL.editPanelValue)}}" stepKey="verifyDirectiveIsFocused2"/>
     </test>
     <test name="TextAddWidgetWithinStringInlineWYSIWYG">
         <annotations>
@@ -2884,6 +2898,20 @@
         <dontSeeElement selector="{{TextOnStage.text('1', PageBuilderVariableWidgetText.value)}}" stepKey="dontSeeOriginalTextOnStage"/>
         <seeElement selector="{{TextOnStage.text('1', PageBuilderVariableWidgetText.expectedString1)}}" stepKey="seeExpectedString" />
         <seeElement selector="{{TextOnStage.text('1', PageBuilderVariableWidgetText.expectedString2)}}" stepKey="seeExpectedString1" />
+        <!-- Verify clicking the variable focuses the directive -->
+        <actionGroup ref="unFocusOptionMenu" stepKey="unFocusEditor">
+            <argument name="contentType" value="PageBuilderTextContentType"/>
+        </actionGroup>
+        <click selector="{{TextOnStage.directive('1', TinyMCEWidgetCMSPageLink.editPanelValue)}}" stepKey="clickOnWidgetPlaceholder"/>
+        <waitForElementVisible selector="{{TextOnStage.directiveFocused('1', TinyMCEWidgetCMSPageLink.editPanelValue)}}" stepKey="waitForDirectiveFocused"/>
+        <seeElement selector="{{TextOnStage.directiveFocused('1', TinyMCEWidgetCMSPageLink.editPanelValue)}}" stepKey="verifyDirectiveIsFocused"/>
+        <!-- Save page and verify single clicking on widget will retain selection -->
+        <actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
+        <actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
+        <click selector="{{TextOnStage.directive('1', TinyMCEWidgetCMSPageLink.editPanelValue)}}" stepKey="clickOnWidgetPlaceholder2"/>
+        <waitForElementVisible selector="{{TextOnStage.tinymceInFocus('1')}}" stepKey="waitForTinyMCEFocus"/>
+        <waitForElementVisible selector="{{TextOnStage.directiveFocused('1', TinyMCEWidgetCMSPageLink.editPanelValue)}}" stepKey="waitForDirectiveFocused2"/>
+        <seeElement selector="{{TextOnStage.directiveFocused('1', TinyMCEWidgetCMSPageLink.editPanelValue)}}" stepKey="verifyDirectiveIsFocused2"/>
     </test>
     <test name="TextCopyAndPasteAllTextInlineWYSIWYG">
         <annotations>

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

@@ -13,7 +13,7 @@ import Uploader from "../../uploader";
 import delayUntil from "../../utils/delay-until";
 import {
     createBookmark, createDoubleClickEvent,
-    findNodeIndex, getNodeByIndex,
+    findNodeIndex, getActiveEditor, getNodeByIndex,
     isWysiwygSupported,
     lockImageSize,
     moveToBookmark,
@@ -105,7 +105,9 @@ export default class Preview extends BasePreview {
         element.innerHTML = this.data.content.html();
         this.contentType.dataStore.subscribe(() => {
             // If we're not focused into TinyMCE inline, update the value when it changes in the data store
-            if (!element.classList.contains("mce-edit-focus")) {
+            if (!element.classList.contains("mce-edit-focus")
+                && this.wysiwyg.getAdapter().id !== getActiveEditor().id
+            ) {
                 element.innerHTML = this.data.content.html();
             }
         }, "message");
@@ -196,7 +198,6 @@ export default class Preview extends BasePreview {
     public activateEditor(preview: Preview, event: JQueryEventObject) {
         if (this.element && !this.wysiwyg && !this.handledDoubleClick) {
             const bookmark = createBookmark(event);
-            console.log(bookmark);
             lockImageSize(this.element);
             this.element.removeAttribute("contenteditable");
             _.defer(() => {
@@ -325,7 +326,6 @@ export default class Preview extends BasePreview {
     {
         this.adjustTextareaHeightBasedOnScrollHeight();
         this.contentType.dataStore.set("message", this.textarea.value);
-        console.log(this.textarea.value);
     }
 
     /**

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

@@ -16,7 +16,7 @@ import Uploader from "../../uploader";
 import delayUntil from "../../utils/delay-until";
 import {
     createBookmark, createDoubleClickEvent,
-    findNodeIndex, getNodeByIndex,
+    findNodeIndex, getActiveEditor, getNodeByIndex,
     isWysiwygSupported,
     lockImageSize,
     moveToBookmark,
@@ -81,7 +81,9 @@ export default class Preview extends BasePreview {
         element.innerHTML = this.data.content.html();
         this.contentType.dataStore.subscribe(() => {
             // If we're not focused into TinyMCE inline, update the value when it changes in the data store
-            if (!element.classList.contains("mce-edit-focus")) {
+            if (!element.classList.contains("mce-edit-focus")
+                && this.wysiwyg.getAdapter().id !== getActiveEditor().id
+            ) {
                 element.innerHTML = this.data.content.html();
             }
         }, "content");

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

@@ -11,7 +11,7 @@ import {OptionsInterface} from "../../content-type-menu/option.types";
 import delayUntil from "../../utils/delay-until";
 import {
     createBookmark, createDoubleClickEvent,
-    findNodeIndex, getNodeByIndex,
+    findNodeIndex, getActiveEditor, getNodeByIndex,
     isWysiwygSupported,
     lockImageSize,
     moveToBookmark,
@@ -94,7 +94,9 @@ export default class Preview extends BasePreview {
         element.innerHTML = this.data.main.html();
         this.contentType.dataStore.subscribe(() => {
             // If we're not focused into TinyMCE inline, update the value when it changes in the data store
-            if (!element.classList.contains("mce-edit-focus")) {
+            if (!element.classList.contains("mce-edit-focus")
+                && this.wysiwyg.getAdapter().id !== getActiveEditor().id
+            ) {
                 element.innerHTML = this.data.main.html();
             }
         }, "content");