MDL-76562 editor_tiny: Added functions to remove button/menu/submenu.

Added a few functions to remove the toolbar button, menubar and sub-menu items.
One of the implementations is to remove the justify alignment in the toolbar and
the sub-menu items to aid the accessibility aspect of the TinyMCE editor.

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

@@ -1,3 +1,3 @@
-define("editor_tiny/utils",["exports","core/templates","./options","core/str"],(function(_exports,_templates,_options,_str){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.getPluginMetadata=_exports.getImagePath=_exports.getDocumentationLink=_exports.getButtonImage=_exports.ensureEditorIsValid=_exports.displayFilepicker=_exports.addToolbarSection=_exports.addToolbarButtons=_exports.addToolbarButton=_exports.addQuickbarsToolbarItem=_exports.addMenubarItem=_exports.addContextmenuItem=void 0;const getImagePath=function(identifier){let component=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"editor_tiny";return Promise.resolve(M.util.image_url(identifier,component))};_exports.getImagePath=getImagePath;_exports.getButtonImage=async function(identifier){let component=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"editor_tiny";return(0,_templates.renderForPromise)("editor_tiny/toolbar_button",{image:await getImagePath(identifier,component)})};_exports.displayFilepicker=(editor,filetype)=>new Promise(((resolve,reject)=>{const configuration=(0,_options.getFilePicker)(editor,filetype);if(configuration){const options={...configuration,formcallback:resolve};M.core_filepicker.show(Y,options)}else reject("Unknown filetype ".concat(filetype))}));_exports.addToolbarButton=(toolbar,section,button)=>{if(!toolbar)return[{name:section,items:[button]}];return JSON.parse(JSON.stringify(toolbar)).map((item=>(item.name===section&&item.items.push(button),item)))};_exports.addToolbarButtons=(toolbar,section,buttons)=>{if(!toolbar)return[{name:section,items:buttons}];return JSON.parse(JSON.stringify(toolbar)).map((item=>(item.name===section&&buttons.forEach((button=>item.items.push(button))),item)))};_exports.addToolbarSection=function(toolbar,name,relativeTo){let append=!(arguments.length>3&&void 0!==arguments[3])||arguments[3];const newSection={name:name,items:[]},sectionInserted=toolbar.some(((section,index)=>section.name===relativeTo&&(append?toolbar.splice(index+1,0,newSection):toolbar.splice(index,0,newSection),!0)));return sectionInserted||(append?toolbar.push(newSection):toolbar.unshift(newSection)),toolbar};_exports.addMenubarItem=(menubar,section,menuitem)=>{if(!menubar){({})[section]={title:section,items:menuitem}}const mutatedMenubar=JSON.parse(JSON.stringify(menubar));return Array.from(Object.entries(mutatedMenubar)).forEach((_ref=>{let[name,menu]=_ref;name===section&&(menu.items="".concat(menu.items," ").concat(menuitem))})),mutatedMenubar};_exports.addContextmenuItem=function(contextmenu){const contextmenuItems=(null!=contextmenu?contextmenu:"").split(" ");for(var _len=arguments.length,menuitems=new Array(_len>1?_len-1:0),_key=1;_key<_len;_key++)menuitems[_key-1]=arguments[_key];return contextmenuItems.concat(menuitems).filter((item=>""!==item)).join(" ")};_exports.addQuickbarsToolbarItem=function(toolbar){return toolbar};const getDocumentationLink=pluginName=>"https://docs.moodle.org/en/editor_tiny/".concat(pluginName);_exports.getDocumentationLink=getDocumentationLink;_exports.getPluginMetadata=async function(component,pluginName){let url=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;const name=await(0,_str.get_string)("helplinktext",component);return{getMetadata:()=>({name:name,url:null!=url?url:getDocumentationLink(pluginName)})}};_exports.ensureEditorIsValid=editor=>{var _editor$targetElm;return null!=editor&&null!==(_editor$targetElm=editor.targetElm)&&void 0!==_editor$targetElm&&_editor$targetElm.closest("body")?editor:(editor.destroy(),null)}}));
+define("editor_tiny/utils",["exports","core/templates","./options","core/str"],(function(_exports,_templates,_options,_str){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.removeToolbarButtons=_exports.removeToolbarButton=_exports.removeSubmenuItem=_exports.removeMenubarItems=_exports.removeMenubarItem=_exports.getPluginMetadata=_exports.getImagePath=_exports.getDocumentationLink=_exports.getButtonImage=_exports.ensureEditorIsValid=_exports.displayFilepicker=_exports.addToolbarSection=_exports.addToolbarButtons=_exports.addToolbarButton=_exports.addQuickbarsToolbarItem=_exports.addMenubarItem=_exports.addContextmenuItem=void 0;const getImagePath=function(identifier){let component=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"editor_tiny";return Promise.resolve(M.util.image_url(identifier,component))};_exports.getImagePath=getImagePath;_exports.getButtonImage=async function(identifier){let component=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"editor_tiny";return(0,_templates.renderForPromise)("editor_tiny/toolbar_button",{image:await getImagePath(identifier,component)})};_exports.displayFilepicker=(editor,filetype)=>new Promise(((resolve,reject)=>{const configuration=(0,_options.getFilePicker)(editor,filetype);if(configuration){const options={...configuration,formcallback:resolve};M.core_filepicker.show(Y,options)}else reject("Unknown filetype ".concat(filetype))}));_exports.addToolbarButton=(toolbar,section,button)=>{if(!toolbar)return[{name:section,items:[button]}];return JSON.parse(JSON.stringify(toolbar)).map((item=>(item.name===section&&item.items.push(button),item)))};_exports.addToolbarButtons=(toolbar,section,buttons)=>{if(!toolbar)return[{name:section,items:buttons}];return JSON.parse(JSON.stringify(toolbar)).map((item=>(item.name===section&&buttons.forEach((button=>item.items.push(button))),item)))};_exports.addToolbarSection=function(toolbar,name,relativeTo){let append=!(arguments.length>3&&void 0!==arguments[3])||arguments[3];const newSection={name:name,items:[]},sectionInserted=toolbar.some(((section,index)=>section.name===relativeTo&&(append?toolbar.splice(index+1,0,newSection):toolbar.splice(index,0,newSection),!0)));return sectionInserted||(append?toolbar.push(newSection):toolbar.unshift(newSection)),toolbar};_exports.addMenubarItem=(menubar,section,menuitem)=>{if(!menubar){({})[section]={title:section,items:menuitem}}const mutatedMenubar=JSON.parse(JSON.stringify(menubar));return Array.from(Object.entries(mutatedMenubar)).forEach((_ref=>{let[name,menu]=_ref;name===section&&(menu.items="".concat(menu.items," ").concat(menuitem))})),mutatedMenubar};_exports.addContextmenuItem=function(contextmenu){const contextmenuItems=(null!=contextmenu?contextmenu:"").split(" ");for(var _len=arguments.length,menuitems=new Array(_len>1?_len-1:0),_key=1;_key<_len;_key++)menuitems[_key-1]=arguments[_key];return contextmenuItems.concat(menuitems).filter((item=>""!==item)).join(" ")};_exports.addQuickbarsToolbarItem=function(toolbar){return toolbar};const getDocumentationLink=pluginName=>"https://docs.moodle.org/en/editor_tiny/".concat(pluginName);_exports.getDocumentationLink=getDocumentationLink;_exports.getPluginMetadata=async function(component,pluginName){let url=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;const name=await(0,_str.get_string)("helplinktext",component);return{getMetadata:()=>({name:name,url:null!=url?url:getDocumentationLink(pluginName)})}};_exports.ensureEditorIsValid=editor=>{var _editor$targetElm;return null!=editor&&null!==(_editor$targetElm=editor.targetElm)&&void 0!==_editor$targetElm&&_editor$targetElm.closest("body")?editor:(editor.destroy(),null)};_exports.removeToolbarButton=(toolbar,section,button)=>{if(!toolbar)return[{name:section,items:[button]}];return JSON.parse(JSON.stringify(toolbar)).map((item=>(item.name===section&&item.items.splice(item.items.indexOf(button),1),item)))};_exports.removeToolbarButtons=(toolbar,section,buttons)=>{if(!toolbar)return[{name:section,items:buttons}];return JSON.parse(JSON.stringify(toolbar)).map((item=>(item.name===section&&buttons.forEach((button=>item.items.splice(item.items.indexOf(button),1))),item)))};_exports.removeSubmenuItem=async(editor,section,submenuitem)=>{const menuItems=editor.ui.registry.getAll().menuItems[section],submenuitemtitle=await(0,_str.get_string)(submenuitem,"editor_tiny");menuItems&&editor.ui.registry.addNestedMenuItem(section,{text:menuItems.text,getSubmenuItems:()=>{let newSubmenu=[];return menuItems.getSubmenuItems().forEach((item=>{item.text.trim()!=submenuitemtitle&&newSubmenu.push(item)})),newSubmenu}})};_exports.removeMenubarItem=(menubar,section,menuitem)=>(menubar[section].items=menubar[section].items.replace(menuitem,""),menubar);_exports.removeMenubarItems=(menubar,section,menuitems)=>{const regexPattern=new RegExp(menuitems.join("|"),"ig");return menubar[section].items=menubar[section].items.replace(regexPattern,""),menubar}}));
 
 //# sourceMappingURL=utils.min.js.map

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

@@ -26,7 +26,8 @@ import Pending from 'core/pending';
 import {getDefaultConfiguration} from './defaults';
 import {getTinyMCE, baseUrl} from './loader';
 import * as Options from './options';
-import {addToolbarButton, addToolbarButtons, addToolbarSection} from './utils';
+import {addToolbarButton, addToolbarButtons, addToolbarSection,
+    removeToolbarButton, removeSubmenuItem} from './utils';
 
 /**
  * Storage for the TinyMCE instances on the page.
@@ -245,6 +246,11 @@ const getStandardConfig = (target, tinyMCE, options, plugins) => {
 
         setup: (editor) => {
             Options.register(editor, options);
+
+            editor.on('init', function() {
+                // Hide justify alignment sub-menu.
+                removeSubmenuItem(editor, 'align', 'tiny:justify');
+            });
         },
     });
 
@@ -255,6 +261,9 @@ const getStandardConfig = (target, tinyMCE, options, plugins) => {
     config.toolbar = addToolbarSection(config.toolbar, 'directionality', 'alignment', true);
     config.toolbar = addToolbarButtons(config.toolbar, 'directionality', ['ltr', 'rtl']);
 
+    // Remove the align justify button from the toolbar.
+    config.toolbar = removeToolbarButton(config.toolbar, 'alignment', 'alignjustify');
+
     return config;
 };
 

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

@@ -245,3 +245,126 @@ export const ensureEditorIsValid = (editor) => {
 
     return editor;
 };
+
+/**
+ * Given a TinyMCE Toolbar configuration, remove the specified button from the named section.
+ *
+ * @param {object} toolbar
+ * @param {string} section
+ * @param {string} button
+ * @returns {object} The toolbar configuration
+ */
+ export const removeToolbarButton = (toolbar, section, button) => {
+    if (!toolbar) {
+        return [{
+            name: section,
+            items: [button],
+        }];
+    }
+
+    const mutatedToolbar = JSON.parse(JSON.stringify(toolbar));
+    return mutatedToolbar.map((item) => {
+        if (item.name === section) {
+            item.items.splice(item.items.indexOf(button), 1);
+        }
+
+        return item;
+    });
+};
+
+/**
+ * Given a TinyMCE Toolbar configuration, remove the specified buttons from the named section.
+ *
+ * @param {object} toolbar
+ * @param {string} section
+ * @param {Array} buttons
+ * @returns {object} The toolbar configuration
+ */
+ export const removeToolbarButtons = (toolbar, section, buttons) => {
+    if (!toolbar) {
+        return [{
+            name: section,
+            items: buttons,
+        }];
+    }
+
+    const mutatedToolbar = JSON.parse(JSON.stringify(toolbar));
+    return mutatedToolbar.map((item) => {
+        if (item.name === section) {
+            buttons.forEach(button => item.items.splice(item.items.indexOf(button), 1));
+        }
+
+        return item;
+    });
+};
+
+/**
+ * Remove the specified sub-menu item from the named section.
+ * Recreate a menu with the same sub-menu items but remove the specified item.
+ *
+ * @param {TinyMCE} editor
+ * @param {string} section
+ * @param {string} submenuitem The text of sub-menu that we want to removed
+ */
+export const removeSubmenuItem = async(editor, section, submenuitem) => {
+    // Get menu items.
+    const menuItems = editor.ui.registry.getAll().menuItems[section];
+
+    // Because we will match between title strings,
+    // we make sure no problems arise while applying multi-language.
+    const submenuitemtitle = await getString(submenuitem, 'editor_tiny');
+
+    // Overriding the menu items,
+    // by recreating them but excluding the specified sub-menu.
+    if (menuItems) {
+        editor.ui.registry.addNestedMenuItem(
+            section,
+            {
+                text: menuItems.text,
+                getSubmenuItems: () => {
+                    let newSubmenu = [];
+                    menuItems.getSubmenuItems().forEach((item) => {
+                        // Need to trim the text because some of the sub-menus use space to replace an icon.
+                        if (item.text.trim() != submenuitemtitle) {
+                            newSubmenu.push(item);
+                        }
+                    });
+                    return newSubmenu;
+                }
+            }
+        );
+    }
+};
+
+/**
+ * Given a TinyMCE Menubar configuration, remove the specified menu from the named section.
+ *
+ * @param {string} menubar
+ * @param {string} section
+ * @param {string} menuitem
+ * @returns {object}
+ */
+export const removeMenubarItem = (menubar, section, menuitem) => {
+    menubar[section].items = menubar[section].items
+        .replace(menuitem, '');
+
+    return menubar;
+};
+
+/**
+ * Given a TinyMCE Menubar configuration, remove the specified menu from the named section.
+ *
+ * @param {string} menubar
+ * @param {string} section
+ * @param {Array} menuitems
+ * @returns {object}
+ */
+export const removeMenubarItems = (menubar, section, menuitems) => {
+    // Create RegExp pattern.
+    const regexPattern = new RegExp(menuitems.join('|'), "ig");
+
+    // Remove menuitems.
+    menubar[section].items = menubar[section].items.replace(regexPattern, '');
+
+    return menubar;
+};