Merge branch 'MDL-77817-401' of https://github.com/meirzamoodle/moodle into MOODLE_401_STABLE

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.
  *
@@ -306,6 +353,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"
+                });
+            });
         },
     });