MDL-77817 editor_tiny: Fix menu and dialogue window position

The boost theme makes the TinyMCE editor rendered in a scrollable container,
scrolling the editor’s container will cause TinyMCE UI elements to be detached from the anchor.
Therefore, to keep the tinyMCE menu in the correct position,
adjustments must be made on the page drawers style.

When using TinyMCE editor in Safari browsers, a problem may occur where the dialogue
windows (such as modal dialogs) overlap with page drawers due to a specific behavior
in Safari's rendering. This function addresses the issue by adjusting the CSS overflow
property of the page drawers, ensuring they do not obscure the dialogue windows.

lib/editor/tiny/amd/src/editor.js

@@ -189,6 +189,53 @@ const getPlugins = ({plugins = null} = {}) => {
     container.parentNode.appendChild(menuContainer);
 };
 
+/**
+ * Fix the Tiny menu position if the editor is in fullscreen mode on the Boost theme.
+ *
+ * The boost theme makes the TinyMCE editor rendered in a scrollable container,
+ * scrolling the editor’s container will cause TinyMCE UI elements to be detached from the anchor.
+ * Therefore, to keep the tinyMCE menu in the correct position,
+ * adjustments must be made on the page drawers style.
+ *
+ * @param {object}  params
+ * @param {Boolean} params.open True if editor in fullscreen mode, otherwise false.
+ */
+const fixMenuPositionIfInFullsreen = (params) => {
+    if (params.open) {
+        // Keep the menu remains visible and properly aligned.
+        document.querySelector('.tox-fullscreen').style.overflow = 'unset';
+    }
+
+    const pageWithDrawers = document.querySelector('#page.drawers');
+    if (pageWithDrawers) {
+        pageWithDrawers.style.overflow = params.open ? "unset" : "";
+    }
+};
+
+/**
+ * Fix the dialogue window positioning issue of TinyMCE editor in Safari browsers.
+ *
+ * When using TinyMCE editor in Safari browsers, a problem may occur where the dialogue
+ * windows (such as modal dialogs) overlap with page drawers due to a specific behavior
+ * in Safari's rendering. This function addresses the issue by adjusting the CSS overflow
+ * property of the page drawers, ensuring they do not obscure the dialogue windows.
+ *
+ * @param {object}  params
+ * @param {object}  params.browser Browser environment.
+ * @param {object}  params.fsplugin Fullscreen plugin.
+ * @param {Boolean} params.open True if the dialogue window opens, otherwise false.
+ */
+const fixDialoguePositionIfOpen = (params) => {
+    // To avoid modification the existing overflow value that has been set fixMenuPositionIfInFullsreen(),
+    // the fix only applied if the editor not in fullscreen mode.
+    if (params.browser.isSafari() && !params.fsplugin.isFullscreen()) {
+        const pageWithDrawers = document.querySelector('#page.drawers');
+        if (pageWithDrawers) {
+            pageWithDrawers.style.overflow = params.open ? "unset" : "";
+        }
+    }
+};
+
 /**
  * Get the standard configuration for the specified options.
  *
@@ -297,6 +344,25 @@ const getStandardConfig = (target, tinyMCE, options, plugins) => {
                     nestMenu(editor);
                 }
             });
+
+            // The Boost and Classic theme cause issues if editor is in fullscreen mode.
+            // The problem was resolved by changing the overflow value to related elements.
+            editor.on('FullscreenStateChanged', function(e) {
+                fixMenuPositionIfInFullsreen({
+                    open: e.state
+                });
+            });
+
+            // The Boost theme uses Overflow=auto in the course index drawer,
+            // it causes the dialogue window to be not correctly displayed in Safari browser.
+            // The problem was resolved by changing the overflow value to the drawer.
+            editor.on('OpenWindow CloseWindow', function(e) {
+                fixDialoguePositionIfOpen({
+                    browser: tinyMCE.Env.browser,
+                    fsplugin: editor.plugins.fullscreen,
+                    open: e.type == "openwindow"
+                });
+            });
         },
     });