MDL-75331 editor_tiny: Limit formatting options

This commit removes several contentious formatting options for now,
pending further consideration, in particular it removes:
- forecolor
- backcolor
- fontfamily
- styles

The two color plugins are written in such a way that the chosen colour
is embedded into a style tag in the generated content. This is not
ideal as it removes these decisions away from theme developers and upon
theme changes to a site, is likely to lead to inaccessible and/or broken
content.

We feel that a new colour plugin will be required which links to known
colour style classes within the theme to allow a subset of colours which
are guaranteed to work with the theme.

The fontfamily plugin is removed pending further administrator
configuration in a future release.

In the case of the 'styles' plugin, this duplicates large parts of the
Format menu into which it is placed but does so in a way that does
respect the configuration of other areas - for example the block_formats
tag is ignored in this menu.

Part of MDL-75966

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

@@ -170,10 +170,9 @@ export const getDefaultConfiguration = () => ({
     // TODO: Move this configuration to a passed-in option.
     menu: getDefaultMenu(),
 
-    // TODO Add mobile configuration.
     // Mobile configuration.
+    // At this time we will use the default TinyMCE mobile configuration.
     // https://www.tiny.cloud/docs/tinymce/6/tinymce-for-mobile/
-    // This will include mobile-specific toolbar, and menu options.
 
     // Skins
     skin: 'oxide',

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

@@ -219,17 +219,17 @@ const getStandardConfig = (target, tinyMCE, options, plugins) => {
         // eslint-disable-next-line camelcase
         quickbars_insert_toolbar: '',
 
+        // Disable some of the standard paragraph levels.
+        // https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#block_formats
+        // eslint-disable-next-line camelcase
+        block_formats: 'Paragraph=p; Heading 3= h3; Heading 4= h4; Heading 5= h5; Heading 6= h6;',
+
         // The list of plugins to include in the instance.
         // https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#plugins
         plugins: [
             ...plugins,
         ],
 
-        // TODO Add mobile configuration.
-        // Mobile configuration.
-        // https://www.tiny.cloud/docs/tinymce/6/tinymce-for-mobile/
-        // This will include mobile-specific toolbar, and menu options.
-
         // Skins
         skin: 'oxide',
 
@@ -277,6 +277,27 @@ const getEditorConfiguration = (target, tinyMCE, options, pluginValues) => {
         instanceConfig.menu.file.items = '';
     }
 
+    // We disable the styles, backcolor, and forecolor plugins from the format menu.
+    // These are not useful for Moodle and we don't want to encourage their use.
+    if (instanceConfig.menu.format) {
+        instanceConfig.menu.format.items = instanceConfig.menu.format.items
+            // Remove forecolor and backcolor.
+            .replace(/forecolor ?/, '')
+            .replace(/backcolor ?/, '')
+
+            // Remove fontfamily for now.
+            .replace(/fontfamily ?/, '')
+
+            // Remove fontsize for now.
+            .replace(/fontsize ?/, '')
+
+            // Remove styles - it just duplicates the format menu in a way which does not respect configuration
+            .replace(/styles ?/, '')
+
+            // Remove any duplicate separators.
+            .replaceAll(/\| *\|/g, '|');
+    }
+
     // Next we call the `configure` function for any plugin which defines it.
     // We pass the current instanceConfig in here, to allow them to make certain changes to the global configuration.
     // For example, to add themselves to any menu, toolbar, and so on.