AC-2086: Fixed failed build of the functional tests

Author: anzin

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

@@ -113,10 +113,10 @@
 
         <!-- Initialize TinyMCE Table Toolbar & Verify All Table Toolbar Menu Items are Visible -->
         <clickWithLeftButton x="10" y="10" selector="{{TextOnStage.tinymce('1')}}" stepKey="clickOnTextContentType"/>
-        <waitForPageLoad stepKey="waitForTinyMCEToolbar"/>
-        <clickWithLeftButton x="10" y="10" selector="{{TextOnStage.tinymce('1')}}" stepKey="clickAgainToOpenTableToolbar"/>
-        <waitForPageLoad stepKey="waitForTinyMCETableToolbar"/>
-        <seeElement selector="{{WYSIWYGOnPageBuilderInline.tableToolbar}}" stepKey="seeTableToolbar2"/>
+        <waitForElementVisible selector="{{WYSIWYGOnPageBuilderInline.toolbar}}" stepKey="waitForTinyMCEToolbar"/>
+        <comment userInput="Step key preserved for backwards compatibility" stepKey="clickAgainToOpenTableToolbar"/>
+        <comment userInput="Step key preserved for backwards compatibility" stepKey="waitForTinyMCETableToolbar"/>
+        <waitForElementVisible selector="{{WYSIWYGOnPageBuilderInline.tableToolbar}}" stepKey="seeTableToolbar2"/>
         <seeElement selector="{{WYSIWYGOnPageBuilderInline.tableProperties}}" stepKey="seeTableProperties2"/>
         <seeElement selector="{{WYSIWYGOnPageBuilderInline.deleteTable}}" stepKey="seeDeleteTable2"/>
         <seeElement selector="{{WYSIWYGOnPageBuilderInline.insertRowBefore}}" stepKey="seeInsertRowBefore2"/>
@@ -172,10 +172,10 @@
 
         <!-- Initialize TinyMCE Table Toolbar & Verify All Table Toolbar Menu Items are Visible Again -->
         <clickWithLeftButton x="10" y="10" selector="{{TextOnStage.tinymce('1')}}" stepKey="clickOnTextContentType2"/>
-        <waitForPageLoad stepKey="waitForTinymceToolbar2"/>
-        <clickWithLeftButton x="10" y="10" selector="{{TextOnStage.tinymce('1')}}" stepKey="clickAgainToOpenTableToolbar2"/>
-        <waitForPageLoad stepKey="waitForTinymceTableToolbar2"/>
-        <seeElement selector="{{WYSIWYGOnPageBuilderInline.tableToolbar}}" stepKey="seeTableToolbar3"/>
+        <waitForElementVisible selector="{{WYSIWYGOnPageBuilderInline.toolbar}}" stepKey="waitForTinymceToolbar2"/>
+        <comment userInput="Step key preserved for backwards compatibility" stepKey="clickAgainToOpenTableToolbar2"/>
+        <comment userInput="Step key preserved for backwards compatibility" stepKey="waitForTinymceTableToolbar2"/>
+        <waitForElementVisible selector="{{WYSIWYGOnPageBuilderInline.tableToolbar}}" stepKey="seeTableToolbar3"/>
         <seeElement selector="{{WYSIWYGOnPageBuilderInline.tableProperties}}" stepKey="seeTableProperties3"/>
         <seeElement selector="{{WYSIWYGOnPageBuilderInline.deleteTable}}" stepKey="seeDeleteTable3"/>
         <seeElement selector="{{WYSIWYGOnPageBuilderInline.insertRowBefore}}" stepKey="seeInsertRowBefore3"/>

app/code/Magento/PageBuilder/view/adminhtml/web/js/wysiwyg/tinymce.js

@@ -12,6 +12,7 @@ import WysiwygInstanceInterface from "wysiwygAdapter";
 import {AdditionalDataConfigInterface} from "../content-type-config.types";
 import DataStore from "../data-store";
 import checkStageFullScreen from "../utils/check-stage-full-screen";
+import delayUntil from "../utils/delay-until";
 import pageBuilderHeaderHeight from "../utils/pagebuilder-header-height";
 import WysiwygInterface from "./wysiwyg-interface";
 
@@ -172,35 +173,39 @@ export default class Wysiwyg implements WysiwygInterface {
         events.trigger("stage:interactionStart");
 
         // Wait for everything else to finish
-        _.defer(() => {
-            const $inlineToolbar = this.getFixedToolbarContainer().find(".tox-tinymce-inline");
-            const self = this;
-
-            $inlineToolbar.css("min-width", this.config.adapter_config.minToolbarWidth + "px");
-
-            this.invertInlineEditorToAccommodateOffscreenToolbar();
-
-            // Update toolbar when the height changes
-            this.toolbarHeight = $inlineToolbar.height();
-            if ($inlineToolbar.length) {
-                this.resizeObserver = new ResizeObserver((entries) => {
-                    for (const entry of entries) {
-                        if (entry.target === $inlineToolbar.get(0)
-                            && entry.target.clientHeight !== self.toolbarHeight
-                        ) {
-                            self.invertInlineEditorToAccommodateOffscreenToolbar();
-                            self.toolbarHeight = entry.target.clientHeight;
+        _.defer(() => delayUntil(
+            () => {
+                const $inlineToolbar = this.getFixedToolbarContainer().find(".tox-tinymce-inline");
+                const self = this;
+
+                $inlineToolbar.css("min-width", this.config.adapter_config.minToolbarWidth + "px");
+
+                this.invertInlineEditorToAccommodateOffscreenToolbar();
+
+                // Update toolbar when the height changes
+                this.toolbarHeight = $inlineToolbar.height();
+                if ($inlineToolbar.length) {
+                    this.resizeObserver = new ResizeObserver((entries) => {
+                        for (const entry of entries) {
+                            if (entry.target === $inlineToolbar.get(0)
+                                && entry.target.clientHeight !== self.toolbarHeight
+                            ) {
+                                self.invertInlineEditorToAccommodateOffscreenToolbar();
+                                self.toolbarHeight = entry.target.clientHeight;
+                            }
                         }
-                    }
-                });
-                this.resizeObserver.observe($inlineToolbar.get(0));
-            }
-            const dialogContainer = document.querySelector(`#${this.elementId} ~ .tox-tinymce-aux`);
-            if (!!dialogContainer) {
-                dialogContainer.setAttribute("data-editor-aux", this.elementId);
-                document.body.appendChild(dialogContainer);
-            }
-        });
+                    });
+                    this.resizeObserver.observe($inlineToolbar.get(0));
+                }
+                const dialogContainer = document.querySelector(`#${this.elementId} ~ .tox-tinymce-aux`);
+                if (!!dialogContainer) {
+                    dialogContainer.setAttribute("data-editor-aux", this.elementId);
+                    document.body.appendChild(dialogContainer);
+                }
+            },
+            () => document.querySelector(`#${this.elementId}`).classList.contains("mce-edit-focus"),
+            10,
+        ));
     }
 
     /**