Merge pull request #109 from magento-trigger/AC-397-move-modal-to-body

[Trigger] AC-397: TinyMCE 5 modal is not center over toolbar

Author: krissyhiserote

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

@@ -64,7 +64,6 @@
         <click selector="{{WYSIWYGOnPageBuilderInline.tableMenuFirstItem}}" stepKey="clickOnTableMenuFirstItem"/>
         <waitForElement selector="{{WYSIWYGOnPageBuilderInline.tableGrid('17')}}" stepKey="waitForTableGrid"/>
         <click selector="{{WYSIWYGOnPageBuilderInline.tableGrid('17')}}" stepKey="chooseTableSize"/>
-        <click selector="{{TextOnStage.elementInText('1', 'td', '1')}}" stepKey="setFocusInTable"/>
 
         <!-- Validate Table Size is 7 x 2 -->
         <seeElement selector="{{TextOnStage.elementInText('1', 'table', '1')}}" stepKey="seeTable"/>
@@ -96,10 +95,10 @@
         <!-- Validate Main Toolbar Doesn't Overlap Table Content -->
         <executeJS function="return document.evaluate(`{{PageBuilderStage.inlineWYSIWYGEditorPanel(PageBuilderTextContentType.role, '1')}}`, document.body).iterateNext().getBoundingClientRect().top" stepKey="mainToolbarTopPosition"/>
         <executeJS function="return document.evaluate(&quot;{{TextOnStage.tinymce('1')}}//table&quot;, document.body).iterateNext().getBoundingClientRect().bottom" stepKey="tableElementBottomPosition"/>
-        <assertLessThan stepKey="verifyMainToolbarDoesNotOverlapTable">
+        <assertLessThanOrEqual stepKey="verifyMainToolbarDoesNotOverlapTable">
             <expectedResult type="variable">mainToolbarTopPosition</expectedResult>
             <actualResult type="variable">tableElementBottomPosition</actualResult>
-        </assertLessThan>
+        </assertLessThanOrEqual>
 
         <!-- Move Text to 6/12 Column -->
         <actionGroup ref="unFocusOptionMenu" stepKey="unFocusEditor">

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

@@ -63,16 +63,6 @@
             left: -1px !important;
             right: -1px;
         }
-        .tox-dialog-wrap {
-            width: inherit;
-
-            .tox-dialog-wrap__backdrop {
-                height: 120%;
-            }
-            .tox-dialog {
-                max-height: none;
-            }
-        }
         .pagebuilder-empty-slide {
             left: 0;
             pointer-events: none;

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/slide/wysiwyg/tinymce/component-initializer.js

@@ -128,15 +128,6 @@ export default class ComponentInitializer implements WysiwygComponentInitializer
             () => !this.slideChanging,
             10,
         );
-
-        // Wait for everything else to finish
-        _.defer(() => {
-            // Add width for tinymce modal
-            $(this.activeSlideSelector).find(".tox-tinymce-aux").css(
-                "width",
-                $(this.activeSlideSelector).width(),
-            );
-        });
     }
 
     /**
@@ -161,8 +152,5 @@ export default class ComponentInitializer implements WysiwygComponentInitializer
         if (this.autoplay) {
             $slider.parent().slick("slickPlay");
         }
-
-        // Revert width for tinymce modal
-        $(this.activeSlideSelector).find(".tox-tinymce-aux").css("width", "");
     }
 }

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

@@ -195,6 +195,11 @@ export default class Wysiwyg implements WysiwygInterface {
                 });
                 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);
+            }
         });
     }
 
@@ -220,6 +225,12 @@ export default class Wysiwyg implements WysiwygInterface {
         }
         this.toolbarHeight = 0;
 
+        const dialogContainer = document.querySelector(`[data-editor-aux=${this.elementId}]`);
+        if (!!dialogContainer) {
+            dialogContainer.removeAttribute("data-editor-aux");
+            document.querySelector(`#${this.elementId}`).parentNode.appendChild(dialogContainer);
+        }
+
         events.trigger("stage:interactionStop");
     }