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

- Resolved formatting issues in typescript
- Lowercased function import
- Moved toolbar variable typing back to only heading and changed reference for it

Author: Hwashiang Yu

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/column-group/preview.js

@@ -8,8 +8,8 @@ import ko from "knockout";
 import events from "Magento_PageBuilder/js/events";
 import {OptionInterface} from "./content-type-toolbar/option";
 import ValueInterface from "./content-type-toolbar/value";
-import Preview from "./content-type/preview";
-import CheckStageFullScreen from "./utils/check-stage-full-screen";
+import Preview from "./content-type/heading/preview";
+import checkStageFullScreen from "./utils/check-stage-full-screen";
 
 /**
  * @api
@@ -62,16 +62,20 @@ export default class Toolbar {
         const currentContentTypeTarget = context.toolbar.getCurrentContentTypeTarget();
         const toolbarOptions = currentContentTypeTarget.find(".pagebuilder-toolbar-options");
         // Change toolbar orientation if overflow on full screen mode
-        if (CheckStageFullScreen(context.parent.stageId)
-            && currentContentTypeTarget[0].getBoundingClientRect().top < toolbarOptions.outerHeight()) {
+        if (checkStageFullScreen(context.parent.stageId)
+            && currentContentTypeTarget[0].getBoundingClientRect().top < toolbarOptions.outerHeight()
+        ) {
             context.toolbar.observer = new MutationObserver(() => {
                 toolbarOptions.css("transform", "translateY(" + currentContentTypeTarget.outerHeight() + "px)");
             });
-            context.toolbar.observer.observe(currentContentTypeTarget[0], {
+            context.toolbar.observer.observe(
+                currentContentTypeTarget[0],
+                {
                     attributes: true,
                     childList: true,
                     subtree: true,
-                });
+                },
+            );
             toolbarOptions.css("transform", "translateY(" + currentContentTypeTarget.outerHeight() + "px)");
         } else {
             toolbarOptions.css("transform", "translateY(-100%)");

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type-toolbar.ts

@@ -16,7 +16,7 @@ import {DataObject} from "../../data-store";
 import {moveContentType} from "../../drag-drop/move-content-type";
 import {getDraggedContentTypeConfig} from "../../drag-drop/registry";
 import {hiddenClass} from "../../drag-drop/sortable";
-import CheckStageFullScreen from "../../utils/check-stage-full-screen";
+import checkStageFullScreen from "../../utils/check-stage-full-screen";
 import {createStyleSheet} from "../../utils/create-stylesheet";
 import {default as ColumnGroupPreview} from "../column-group/preview";
 import BindResizeHandleEventParamsInterface from "../column/bind-resize-handle-event-params";
@@ -463,8 +463,10 @@ export default class Preview extends PreviewCollection {
         if (!this.gridFormOpen()) {
             this.gridSizeHistory = new Map();
             this.recordGridResize(this.gridSize());
-            if (CheckStageFullScreen(this.parent.stageId)
-                && 0 > tooltip[0].getBoundingClientRect().top) { // inline tooltip out of bounds
+            // inline tooltip out of bounds
+            if (checkStageFullScreen(this.parent.stageId)
+                && 0 > tooltip[0].getBoundingClientRect().top
+            ) {
                 this.gridToolTipOverFlow(true);
             }
             this.gridFormOpen(true);

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/column-group/preview.ts

@@ -20,6 +20,7 @@ import BasePreview from "../preview";
  * @api
  */
 export default class Preview extends BasePreview {
+    public toolbar: Toolbar;
     private element: Element;
 
     /**

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/heading/preview.ts

@@ -21,7 +21,6 @@ import Edit from "../content-type-menu/edit";
 import Option from "../content-type-menu/option";
 import {OptionsInterface} from "../content-type-menu/option.d";
 import TitleOption from "../content-type-menu/title-option";
-import Toolbar from "../content-type-toolbar";
 import ContentTypeInterface from "../content-type.d";
 import {DataObject} from "../data-store";
 import {getDraggedContentTypeConfig} from "../drag-drop/registry";
@@ -43,7 +42,6 @@ export default class Preview {
     public placeholderCss: KnockoutObservable<object>;
     public isPlaceholderVisible: KnockoutObservable<boolean> = ko.observable(true);
     public isEmpty: KnockoutObservable<boolean> = ko.observable(true);
-    public toolbar?: Toolbar;
 
     /**
      * @deprecated

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/preview.ts

@@ -11,7 +11,7 @@ import _ from "underscore";
 import WysiwygInstanceInterface from "wysiwygAdapter";
 import {AdditionalDataConfigInterface} from "../content-type-config";
 import DataStore from "../data-store";
-import CheckStageFullScreen from "../utils/check-stage-full-screen";
+import checkStageFullScreen from "../utils/check-stage-full-screen";
 import WysiwygInterface from "./wysiwyg-interface";
 
 /**
@@ -215,7 +215,7 @@ export default class Wysiwyg implements WysiwygInterface {
 
         const inlineWysiwygClientRectTop = this.getFixedToolbarContainer().get(0).getBoundingClientRect().top;
 
-        if (!CheckStageFullScreen(this.stageId) || $inlineToolbar.height() < inlineWysiwygClientRectTop) {
+        if (!checkStageFullScreen(this.stageId) || $inlineToolbar.height() < inlineWysiwygClientRectTop) {
             $inlineToolbar.css("transform", "translateY(-100%)");
             return;
         }