MC-5383: Option Menus, Heading Inline Editor & tinyMCE Inline Editor Are Cut Off on Full Screen View

- Resolved banner and slider content type tinymce overflow on the right side
- Resolved options menu on tabs and button and slide position
- Refactored tinymce overflow test to extend heading test
- Added test coverage for heading overflow and option menu overflow

Author: Hwashiang Yu

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

@@ -25,6 +25,10 @@
         <element name="headingTextAlignToolbar" type="button" selector="(//div[contains(@class,'pagebuilder-heading')])[{{arg1}}]//i[contains(@class,'icon-pagebuilder-align-{{arg2}}')]" parameterized="true"/>
         <element name="headingTextAlignToolbarSelected" type="button" selector="(//div[contains(@class,'pagebuilder-heading')])[{{arg1}}]//a[contains(@class, 'toolbar-active')]//i[contains(@class,'icon-pagebuilder-align-{{arg2}}')]" parameterized="true"/>
         <element name="headingToolbarButtonViewportPositionTop" type="button" selector="return document.querySelector('.pagebuilder-toolbar-options-wrapper ul:{{arg1}}-child li:{{arg1}}-child').getBoundingClientRect().top;" parameterized="true"/>
+        <element name="headingToolbarViewportPositionTop" type="button" selector="return document.querySelector('.pagebuilder-toolbar-options-wrapper').getBoundingClientRect().top;"/>
+        <element name="headingToolbarViewportPositionBottom" type="button" selector="return document.querySelector('.pagebuilder-toolbar-options-wrapper').getBoundingClientRect().bottom;"/>
+        <element name="allViewportPositionTop" type="button" selector="return document.querySelector('.pagebuilder-heading').getBoundingClientRect().top;"/>
+        <element name="allViewportPositionBottom" type="button" selector="return document.querySelector('.pagebuilder-heading').getBoundingClientRect().bottom;"/>
         <!-- Advanced Configuration -->
         <element name="alignment" type="text" selector="(//div[contains(@class,'pagebuilder-heading')]//{{arg1}})[{{arg2}}][contains(@style,'text-align: {{arg3}};')]" parameterized="true"/>
         <element name="noAlignment" type="text" selector="(//{{arg1}})[{{arg2}}][not(contains(@style,'text-align:'))]" parameterized="true"/>

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

@@ -512,6 +512,7 @@
                     <item name="component_initializers" xsi:type="array">
                         <item name="text" xsi:type="string">Magento_PageBuilder/js/content-type/text/wysiwyg/tinymce4/component-initializer</item>
                         <item name="slide" xsi:type="string">Magento_PageBuilder/js/content-type/slide/wysiwyg/tinymce4/component-initializer</item>
+                        <item name="banner" xsi:type="string">Magento_PageBuilder/js/content-type/banner/wysiwyg/tinymce4/component-initializer</item>
                     </item>
                     <item name="config_modifiers" xsi:type="array">
                         <item name="text" xsi:type="string">Magento_PageBuilder/js/content-type/text/wysiwyg/tinymce4/config-modifier</item>

app/code/Magento/PageBuilder/etc/adminhtml/di.xml

@@ -318,7 +318,6 @@
 
 .pagebuilder-options-visible {
     opacity: 1;
-    transform: translate(-50%, -50%);
     transition-delay: 200ms;
     visibility: visible;
 }
@@ -327,26 +326,24 @@
     height: 40px;
     opacity: 0;
     position: absolute;
-    right: 50%;
+    right: 0;
     text-align: center;
     top: 0;
-    transform: translate(50%, -50%);
+    transform: translate(0, -50%);
     -moz-transition: opacity 200ms, visibility 200ms;
     -o-transition: opacity 200ms, visibility 200ms;
     -webkit-transition: opacity 200ms, visibility 200ms;
     transition: opacity 200ms, visibility 200ms;
     visibility: hidden;
     z-index: 105;
 
-    &.pagebuilder-options-right {
-        right: 0;
-        transform: translate(0, -50%);
+    &.pagebuilder-options-middle {
+        right: 50%;
+        transform: translate(50%, -50%);
     }
 
     &.pagebuilder-options-visible {
-        opacity: 1;
-        transition-delay: 200ms;
-        visibility: visible;
+        .pagebuilder-options-visible
     }
 
     .pagebuilder-options-wrapper {
@@ -464,11 +461,12 @@
 
 .focus-options {
     .pagebuilder-options {
+        right: 50%;
+        top: -20px;
+        transform: translate(50%, -50%);
         -moz-transition: opacity 200ms, visibility 200ms, transform 200ms;
         -o-transition: opacity 200ms, visibility 200ms, transform 200ms;
         -webkit-transition: opacity 200ms, visibility 200ms, transform 200ms;
-        top: -20px;
-        transform: translate(-50%, -20%);
         transition: opacity 200ms, visibility 200ms, transform 200ms;
         transition-delay: 0ms !important; // Arrow options have no delay in transitioning out
 

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

@@ -0,0 +1,64 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+import $ from "jquery";
+import WysiwygEvents from "mage/adminhtml/wysiwyg/events";
+import {AdditionalDataConfigInterface} from "../../../../content-type-config";
+import WysiwygComponentInitializerInterface from "../../../../wysiwyg/component-initializer-interface";
+import WysiwygInterface from "../../../../wysiwyg/wysiwyg-interface";
+
+export default class ComponentInitializer implements WysiwygComponentInitializerInterface {
+    /**
+     * The editor element
+     */
+    private $element: JQuery;
+
+    /**
+     * The configuration of the wysiwyg content type
+     */
+    private config: AdditionalDataConfigInterface;
+
+    /**
+     * Initialize the instance
+     *
+     * @param {Wysiwyg} wysiwyg
+     */
+    public initialize(wysiwyg: WysiwygInterface): void {
+        this.$element = $("#" + wysiwyg.elementId);
+        this.config = wysiwyg.config;
+        const tinymce = wysiwyg.getAdapter();
+
+        tinymce.eventBus.attachEventHandler(WysiwygEvents.afterFocus, this.onFocus.bind(this));
+        tinymce.eventBus.attachEventHandler(WysiwygEvents.afterBlur, this.onBlur.bind(this));
+    }
+
+    /**
+     * Called when tinymce is focused
+     */
+    private onFocus() {
+        // If there isn't enough room for a left-aligned toolbar, right align it
+        if ($(window).width() <
+            this.$element.offset().left + parseInt(this.config.adapter_config.minToolbarWidth, 10)
+        ) {
+            this.$element.addClass("_right-aligned-toolbar");
+        }
+        else {
+            this.$element.removeClass("_right-aligned-toolbar");
+        }
+
+        $.each(this.config.adapter_config.parentSelectorsToUnderlay, (i, selector) => {
+            this.$element.closest(selector as string).css("z-index", 100);
+        });
+    }
+
+    /**
+     * Called when tinymce is blurred
+     */
+    private onBlur() {
+        $.each(this.config.adapter_config.parentSelectorsToUnderlay, (i, selector) => {
+            this.$element.closest(selector as string).css("z-index", "");
+        });
+    }
+}

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

@@ -196,11 +196,11 @@ export default class Preview {
 
         const middleOfPreview = currentTarget.getBoundingClientRect().left + currentTarget.offsetWidth / 2;
 
-        // if there are space for moving options menu to the middle
-        if (!(window.innerWidth - middleOfPreview > optionsMenu.width() / 2)) {
-            optionsMenu.parent().addClass("pagebuilder-options-right");
+        // Check for space for option menu
+        if (window.innerWidth - middleOfPreview > optionsMenu.width() / 2) {
+            optionsMenu.parent().addClass("pagebuilder-options-middle");
         } else {
-            optionsMenu.parent().removeClass("pagebuilder-options-right");
+            optionsMenu.parent().removeClass("pagebuilder-options-middle");
         }
 
         optionsMenu.parent().addClass("pagebuilder-options-visible");