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.
2023-01-20 09:57:52 +07:00
parent df502b3e4c
commit ec805cd575
6 changed files with 137 additions and 5 deletions
@@ -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;
+};