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

Hwashiang Yu · Hwashiang Yu · commit b8bca1aab6ce · 2019-01-17T16:36:42.000-06:00
- Removed logic to shift the stage
- Added logic to move the editor panel to go below the inline editor on overflow
- Updated test for the editor panel change
- Updated styling to resolve issue with left hand panel covering hover menu and column resizing menu options
diff --git a/app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderPanelTest.xml b/app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderPanelTest.xml
@@ -534,12 +534,17 @@
         <!-- Explicit wait for CSS animation to complete -->
         <wait time="1" stepKey="waitForInlineWysiwygToolbarTransitionAnimationToFinish" />
         <waitForElementVisible selector="{{PageBuilderStage.inlineWYSIWYGEditorPanel(PageBuilderTextContentType.role, '1')}}" stepKey="waitForWYWSIWYGEditorPanelToBeVisible"/>
-        <executeJS function="return document.evaluate(`{{PageBuilderStage.inlineWYSIWYGEditorPanel(PageBuilderTextContentType.role, '1')}}`, document.body).iterateNext().getBoundingClientRect().top" stepKey="topBoundingClientRect"/>
-        <!-- Assert top bounding client rect > 0 -->
-        <comment userInput="Assert top bounding client rect > 0" stepKey="commentAssertTopBoundingClientRectGreaterThan0" />
-        <assertGreaterThanOrEqual stepKey="assertTopBoundingClientRectIsGreaterThan0">
+        <!-- Assert editor panel is below text wysiwyg and not overflow-->
+        <comment userInput="Assert top editor panel bounding client rect > bottom text wysiwyg bounding client rect when overflow" stepKey="commentAssertWysiwygIsAboveEditorPanel" />
+        <executeJS function="return document.evaluate(`{{TextOnStage.wysiwyg('1')}}`, document.body).iterateNext().getBoundingClientRect().bottom" stepKey="bottomTextWysiwygClientRect"/>
+        <executeJS function="return document.evaluate(`{{PageBuilderStage.inlineWYSIWYGEditorPanel(PageBuilderTextContentType.role, '1')}}`, document.body).iterateNext().getBoundingClientRect().top" stepKey="topEditorPanelBoundingClientRect"/>
+        <assertGreaterThanOrEqual stepKey="assertTopEditorPanelBoundingClientRectIsNotNegative">
             <expectedResult type="int">0</expectedResult>
-            <actualResult type="variable">$topBoundingClientRect</actualResult>
+            <actualResult type="variable">$topEditorPanelBoundingClientRectInSmallerColumn</actualResult>
+        </assertGreaterThanOrEqual>
+        <assertGreaterThanOrEqual stepKey="assertTopEditorPanelBoundingClientRectIsGreaterThanBottomTextWysiwygClientRect">
+            <expectedResult type="variable">$bottomTextWysiwygClientRect</expectedResult>
+            <actualResult type="variable">$topEditorPanelBoundingClientRect</actualResult>
         </assertGreaterThanOrEqual>
         <click selector="{{PageBuilderPanel.searchPanel}}" stepKey="unFocusEditor"/>
         <!-- Shrink column down to 1/3 its original size -->
@@ -560,12 +565,17 @@
         <!-- Explicit wait for CSS animation to complete -->
         <wait time="1" stepKey="waitForInlineWysiwygToolbarTransitionAnimationToFinish2" />
         <waitForElementVisible selector="{{PageBuilderStage.inlineWYSIWYGEditorPanel(PageBuilderTextContentType.role, '1')}}" stepKey="waitForWYWSIWYGEditorPanelToBeVisible2"/>
-        <executeJS function="return document.evaluate(`{{PageBuilderStage.inlineWYSIWYGEditorPanel(PageBuilderTextContentType.role, '1')}}`, document.body).iterateNext().getBoundingClientRect().top" stepKey="topBoundingClientRect2"/>
-        <!-- Assert top bounding client rect > 0 when column is 1/3 its original size -->
-        <comment userInput="Assert top bounding client rect > 0 when column is 1/3 its original size" stepKey="commentAssertInlineEditorAppearsInSmallerColumn" />
-        <assertGreaterThanOrEqual stepKey="assertTopBoundingClientRectIsGreaterThan0InSmallerColumn">
+        <!-- Assert editor panel is below text wysiwyg and not overflow when column is 1/3 its original size-->
+        <comment userInput="Assert top editor panel bounding client rect > bottom text wysiwyg bounding client rect when column is 1/3 its original size" stepKey="commentAssertWysiwygIsAboveEditorPanelInSmallerColumn" />
+        <executeJS function="return document.evaluate(`{{TextOnStage.wysiwyg('1')}}`, document.body).iterateNext().getBoundingClientRect().bottom" stepKey="bottomTextWysiwygClientRectInSmallerColumn"/>
+        <executeJS function="return document.evaluate(`{{PageBuilderStage.inlineWYSIWYGEditorPanel(PageBuilderTextContentType.role, '1')}}`, document.body).iterateNext().getBoundingClientRect().top" stepKey="topEditorPanelBoundingClientRectInSmallerColumn"/>
+        <assertGreaterThanOrEqual stepKey="assertTopEditorPanelBoundingClientRectIsNotNegativeInSmallerColumn">
             <expectedResult type="int">0</expectedResult>
-            <actualResult type="variable">$topBoundingClientRect2</actualResult>
+            <actualResult type="variable">$topEditorPanelBoundingClientRectInSmallerColumn</actualResult>
+        </assertGreaterThanOrEqual>
+        <assertGreaterThanOrEqual stepKey="assertTopEditorPanelBoundingClientRectIsGreaterThanBottomTextWysiwygClientRectInSmallerColumn">
+            <expectedResult type="variable">$bottomTextWysiwygClientRectInSmallerColumn</expectedResult>
+            <actualResult type="variable">$topEditorPanelBoundingClientRectInSmallerColumn</actualResult>
         </assertGreaterThanOrEqual>
     </test>
 </tests>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_inline-wysiwyg.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_inline-wysiwyg.less
@@ -21,7 +21,7 @@
         pointer-events: none;
         position: absolute;
         transform: translateY(0);
-        transition: transform 200ms, opacity 200ms, visibility 200ms;
+        transition: transform 100ms, opacity 400ms, visibility 400ms;
         visibility: hidden;
         width: auto !important;
 
@@ -38,12 +38,13 @@
     }
     &.mce-edit-focus {
         outline: none;
-
         ~ .mce-tinymce-inline {
             opacity: 1;
             pointer-events: all;
-            transform: translateY(-100%);
             visibility: visible !important;
+            &.transform-up {
+                transform: translateY(-100%);
+            }
         }
     }
     &._right-aligned-toolbar ~ div.mce-tinymce-inline {
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/_preview.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/_preview.less
@@ -336,7 +336,7 @@
     transform: translate(-50%, -50%);
     transition: opacity 200ms, visibility 200ms;
     visibility: hidden;
-    z-index: 30;
+    z-index: 105;
 
     &.pagebuilder-options-visible {
         .pagebuilder-options-visible;
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/column-group/_default.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/column-group/_default.less
@@ -117,7 +117,7 @@
         &.resizing,
         &.grid-form-open {
             .pagebuilder-grid-size-indicator {
-                z-index: 100;
+                z-index: 105;
             }
 
             .resize-grid {
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/js/wysiwyg/tinymce4.js b/app/code/Magento/PageBuilder/view/adminhtml/web/js/wysiwyg/tinymce4.js
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/wysiwyg/tinymce4.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/wysiwyg/tinymce4.ts
@@ -108,7 +108,7 @@ export default class Wysiwyg implements WysiwygInterface {
         // Update content in our data store after our stage preview wysiwyg gets updated
         this.wysiwygAdapter.eventBus.attachEventHandler(
             WysiwygEvents.afterChangeContent,
-            _.debounce(this.saveContentFromWysiwygToDataStore.bind(this), 100),
+            this.onChangeContent.bind(this),
         );
 
         // Update content in our stage preview wysiwyg after its slideout counterpart gets updated
@@ -142,18 +142,30 @@ export default class Wysiwyg implements WysiwygInterface {
                 .find(".mce-tinymce-inline")
                 .css("min-width", this.config.adapter_config.minToolbarWidth + "px");
 
-            _.delay(this.adjustFullScreenPaddingToAccommodateInlineToolbar.bind(this), 200);
+            _.delay(this.invertInlineEditorToAccommodateOffscreenToolbar.bind(this), 100);
         });
     }
 
+    /**
+     * Called for the onChangeContent event
+     */
+    private onChangeContent() {
+        const saveContent = _.debounce(this.saveContentFromWysiwygToDataStore.bind(this), 100);
+        saveContent();
+        _.delay(this.invertInlineEditorToAccommodateOffscreenToolbar.bind(this), 100);
+    }
+
     /**
      * Called for the onBlur events
      */
     private onBlur() {
         this.clearSelection();
 
         this.getFixedToolbarContainer()
-            .removeClass("pagebuilder-toolbar-active");
+            .removeClass("pagebuilder-toolbar-active")
+            .find(".mce-tinymce-inline")
+            .removeClass("transform-up")
+            .css("transform", "");
 
         events.trigger("stage:interactionStop");
     }
@@ -193,39 +205,35 @@ export default class Wysiwyg implements WysiwygInterface {
     /**
      * Adjust padding on stage if in fullscreen mode to accommodate inline wysiwyg toolbar overflowing fixed viewport
      */
-    private adjustFullScreenPaddingToAccommodateInlineToolbar() {
+    private invertInlineEditorToAccommodateOffscreenToolbar() {
         if (this.config.adapter_config.mode !== "inline") {
             return;
         }
 
         const $stage = $(`#${this.stageId}`);
         const $fullScreenStageWrapper = $stage.closest(".stage-full-screen");
         const isInFullScreenMode = !!$fullScreenStageWrapper.length;
+        const $inlineToolbar = this.getFixedToolbarContainer().find(".mce-tinymce-inline");
 
         if (!isInFullScreenMode) {
+            $inlineToolbar.addClass("transform-up");
             return;
         }
 
         _.delay(() => {
-            const $inlineToolbar = this.getFixedToolbarContainer().find(".mce-tinymce-inline");
 
             if (!$inlineToolbar.length) {
                 return;
             }
 
-            const inlineToolbarClientRectTop = $inlineToolbar.get(0).getBoundingClientRect().top;
+            const inlineWysiwygClientRectTop = this.getFixedToolbarContainer().get(0).getBoundingClientRect().top;
 
-            if (inlineToolbarClientRectTop >= 0) { // inline toolbar not out of bounds; continue
+            if ($inlineToolbar.height() < inlineWysiwygClientRectTop) { // inline toolbar not out of bounds; continue
+                $inlineToolbar.addClass("transform-up");
                 return;
             }
-
-            const currentStagePaddingTop = parseInt($stage.css("paddingTop") || "0", 10);
-            const paddingTopToApplyToStage = Math.abs(inlineToolbarClientRectTop) + currentStagePaddingTop;
-
-            // increase padding top and adjust scrollTop accordingly to make it seamless
-            $stage.css("paddingTop", paddingTopToApplyToStage);
-            $fullScreenStageWrapper.scrollTop($fullScreenStageWrapper.scrollTop() + paddingTopToApplyToStage);
-        }, 200);
+            $inlineToolbar.css("transform", "translateY(" + this.getFixedToolbarContainer().height() + "px)");
+        }, 100);
     }
 
     /**

Original file line number	Diff line number	Diff line change
`@@ -117,7 +117,7 @@`
`117`	`117`	`&.resizing,`
`118`	`118`	`&.grid-form-open {`
`119`	`119`	`.pagebuilder-grid-size-indicator {`
`120`		`- z-index: 100;`
	`120`	`+ z-index: 105;`
`121`	`121`	`}`
`122`	`122`
`123`	`123`	`.resize-grid {`