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

Author: krissyhiserote

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");
     }