MDL-76447 editor_tiny: Nest the dropdown menu in the parent DOM.

The TinyMCE menu has a significant issue with the Overflow style,
and the Boost theme heavily uses Overflow for drawer navigation.
Nest the dropdown menu container into the parent editor container makes it work correctly.

Co-authored-by: davewoloszyn <david.woloszyn@moodle.com>
Co-authored-by: xr0master <xr0master@gmail.com>

lib/editor/tiny/amd/build/options.min.js

@@ -1,3 +1,3 @@
-define("editor_tiny/options",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.registerPlaceholderSelectors=_exports.register=_exports.getPluginOptionName=_exports.getPlaceholderSelectors=_exports.getMoodleLang=_exports.getInitialPluginConfiguration=_exports.getFilepickers=_exports.getFilePicker=_exports.getDraftItemId=_exports.getCurrentLanguage=_exports.getContextId=void 0;_exports.register=(editor,options)=>{const registerOption=editor.options.register,setOption=editor.options.set;registerOption("moodle:contextid",{processor:"number",default:0}),setOption("moodle:contextid",options.context),registerOption("moodle:filepickers",{processor:"object",default:{}}),setOption("moodle:filepickers",options.filepicker),registerOption("moodle:draftitemid",{processor:"number",default:0}),setOption("moodle:draftitemid",options.draftitemid),registerOption("moodle:currentLanguage",{processor:"string",default:"en"}),setOption("moodle:currentLanguage",options.currentLanguage),registerOption("moodle:language",{processor:"object",default:{}}),setOption("moodle:language",options.language),registerOption("moodle:placeholderSelectors",{processor:"array",default:[]}),setOption("moodle:placeholderSelectors",options.placeholderSelectors)};_exports.getContextId=editor=>editor.options.get("moodle:contextid");_exports.getDraftItemId=editor=>editor.options.get("moodle:draftitemid");const getFilepickers=editor=>editor.options.get("moodle:filepickers");_exports.getFilepickers=getFilepickers;_exports.getFilePicker=(editor,type)=>getFilepickers(editor)[type];_exports.getMoodleLang=editor=>editor.options.get("moodle:language");_exports.getCurrentLanguage=editor=>editor.options.get("moodle:currentLanguage");_exports.getInitialPluginConfiguration=options=>{const config={};return Object.entries(options.plugins).forEach((_ref=>{var _pluginConfig$config;let[pluginName,pluginConfig]=_ref;Object.entries(null!==(_pluginConfig$config=pluginConfig.config)&&void 0!==_pluginConfig$config?_pluginConfig$config:{}).forEach((_ref2=>{let[optionName,value]=_ref2;config[getPluginOptionName(pluginName,optionName)]=value}))})),config};const getPluginOptionName=(pluginName,optionName)=>"".concat(pluginName,":").concat(optionName);_exports.getPluginOptionName=getPluginOptionName;const getPlaceholderSelectors=editor=>editor.options.get("moodle:placeholderSelectors");_exports.getPlaceholderSelectors=getPlaceholderSelectors;_exports.registerPlaceholderSelectors=(editor,selectors)=>{if(selectors.length){let existingData=getPlaceholderSelectors(editor);existingData=existingData.concat(selectors),editor.options.set("moodle:placeholderSelectors",existingData)}}}));
+define("editor_tiny/options",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.registerPlaceholderSelectors=_exports.register=_exports.getPluginOptionName=_exports.getPlaceholderSelectors=_exports.getNestedMenu=_exports.getMoodleLang=_exports.getInitialPluginConfiguration=_exports.getFilepickers=_exports.getFilePicker=_exports.getDraftItemId=_exports.getCurrentLanguage=_exports.getContextId=void 0;_exports.register=(editor,options)=>{const registerOption=editor.options.register,setOption=editor.options.set;registerOption("moodle:contextid",{processor:"number",default:0}),setOption("moodle:contextid",options.context),registerOption("moodle:filepickers",{processor:"object",default:{}}),setOption("moodle:filepickers",options.filepicker),registerOption("moodle:draftitemid",{processor:"number",default:0}),setOption("moodle:draftitemid",options.draftitemid),registerOption("moodle:currentLanguage",{processor:"string",default:"en"}),setOption("moodle:currentLanguage",options.currentLanguage),registerOption("moodle:language",{processor:"object",default:{}}),setOption("moodle:language",options.language),registerOption("moodle:placeholderSelectors",{processor:"array",default:[]}),setOption("moodle:placeholderSelectors",options.placeholderSelectors),registerOption("moodle:nestedmenu",{processor:"boolean",default:!1}),setOption("moodle:nestedmenu",options.nestedmenu)};_exports.getContextId=editor=>editor.options.get("moodle:contextid");_exports.getDraftItemId=editor=>editor.options.get("moodle:draftitemid");const getFilepickers=editor=>editor.options.get("moodle:filepickers");_exports.getFilepickers=getFilepickers;_exports.getFilePicker=(editor,type)=>getFilepickers(editor)[type];_exports.getMoodleLang=editor=>editor.options.get("moodle:language");_exports.getCurrentLanguage=editor=>editor.options.get("moodle:currentLanguage");_exports.getNestedMenu=editor=>editor.options.get("moodle:nestedmenu");_exports.getInitialPluginConfiguration=options=>{const config={};return Object.entries(options.plugins).forEach((_ref=>{var _pluginConfig$config;let[pluginName,pluginConfig]=_ref;Object.entries(null!==(_pluginConfig$config=pluginConfig.config)&&void 0!==_pluginConfig$config?_pluginConfig$config:{}).forEach((_ref2=>{let[optionName,value]=_ref2;config[getPluginOptionName(pluginName,optionName)]=value}))})),config};const getPluginOptionName=(pluginName,optionName)=>"".concat(pluginName,":").concat(optionName);_exports.getPluginOptionName=getPluginOptionName;const getPlaceholderSelectors=editor=>editor.options.get("moodle:placeholderSelectors");_exports.getPlaceholderSelectors=getPlaceholderSelectors;_exports.registerPlaceholderSelectors=(editor,selectors)=>{if(selectors.length){let existingData=getPlaceholderSelectors(editor);existingData=existingData.concat(selectors),editor.options.set("moodle:placeholderSelectors",existingData)}}}));
 
 //# sourceMappingURL=options.min.js.map

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

@@ -173,6 +173,21 @@ const getPlugins = ({plugins = null} = {}) => {
     return {};
 };
 
+/**
+ * Nest the dropdown menu inside the parent DOM.
+ *
+ * The TinyMCE menu has a significant issue with the Overflow style,
+ * and the Boost theme heavily uses Overflow for drawer navigation.
+ * Moving the menu container into the parent editor container makes it work correctly.
+ *
+ * @param {object} editor
+ */
+ const nestMenu = (editor) => {
+    const container = editor.getContainer();
+    const menuContainer = document.querySelector('body > .tox.tox-tinymce-aux');
+    container.parentNode.appendChild(menuContainer);
+};
+
 /**
  * Get the standard configuration for the specified options.
  *
@@ -245,6 +260,13 @@ const getStandardConfig = (target, tinyMCE, options, plugins) => {
 
         setup: (editor) => {
             Options.register(editor, options);
+
+            editor.on('PostRender', function() {
+                // Nest menu if set.
+                if (options.nestedmenu) {
+                    nestMenu(editor);
+                }
+            });
         },
     });
 

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

@@ -27,6 +27,7 @@ const filePickers = 'moodle:filepickers';
 const optionsMoodleLang = 'moodle:language';
 const currentLanguage = 'moodle:currentLanguage';
 const optionPlaceholderSelectors = 'moodle:placeholderSelectors';
+const nestedMenu = 'moodle:nestedmenu';
 
 export const register = (editor, options) => {
     const registerOption = editor.options.register;
@@ -68,6 +69,12 @@ export const register = (editor, options) => {
         "default": [],
     });
     setOption(optionPlaceholderSelectors, options.placeholderSelectors);
+
+    registerOption(nestedMenu, {
+        processor: 'boolean',
+        "default": false,
+    });
+    setOption(nestedMenu, options.nestedmenu);
 };
 
 export const getContextId = (editor) => editor.options.get(optionContextId);
@@ -76,6 +83,7 @@ export const getFilepickers = (editor) => editor.options.get(filePickers);
 export const getFilePicker = (editor, type) => getFilepickers(editor)[type];
 export const getMoodleLang = (editor) => editor.options.get(optionsMoodleLang);
 export const getCurrentLanguage = (editor) => editor.options.get(currentLanguage);
+export const getNestedMenu = (editor) => editor.options.get(nestedMenu);
 
 /**
  * Get a set of namespaced options for all defined plugins.

lib/editor/tiny/classes/editor.php

@@ -194,6 +194,9 @@ class editor extends \texteditor {
 
             // Plugin configuration.
             'plugins' => $this->manager->get_plugin_configuration($context, $options, $fpoptions, $this),
+
+            // Nest menu inside parent DOM.
+            'nestedmenu' => true,
         ];
 
         if (defined('BEHAT_SITE_RUNNING') && BEHAT_SITE_RUNNING) {