Problem

CodeMirror would be especially useful in DiscussionTools, since templates can't be used in the visual mode of the reply tool, forcing users to write complicated syntax without the assistance of syntax highlighting.

Related: We could in theory add CodeMirror to any and all VE instances. That would be more ideal so users of the 2017 editor can enjoy the benefits of CodeMirror everywhere and not just when editing desktop articles. However let's start with just DiscussionTools :)

Technical background

When CodeMirror integration with the 2017 editor was added for CodeMirror 5 (aka CM5), we did so using the $wgVisualEditorPluginModules extension attribute. This worked fine until the CodeMirror 6 project started, when we needed to programmatically load a specific module based on whether we're using CM5 or CM6. That led to race conditions which were fixed in T374072. In the process, we incidentally hard-wired CodeMirror to only ever load for article targets on desktop.

Beyond simply registering the plugin at the correct time, there are some visual tweaks needed to make CodeMirror look nice on non-article targets like DiscussionTools. This can be solved with generalizing the CSS beyond what we have now. The older CSS was more or less written solely for desktop articles as that was the only place CodeMirror was available.

Solution

• We need to load the plugin differently for CM5 and CM6. CM5 is deprecated so it can remain only for desktop article targets using the ve.loadModules, as per T374072. CM6 meanwhile can be loaded using mw.libs.ve.targetLoader.addPlugin() which is the advertised means to register a plugin for all targets.
• The CSS needs to be changed to apply to all targets, and ideally without any need for skin-specific overrides. The one thing that differs is the padding around the VE surface, and we can compute that at run time instead of guessing in our CSS.
• Users should be able to easily disable CodeMirror if they choose to do so. On desktop, the existing icon should be in the toolbar (to later be replaced with the new icon, see T174145). On mobile, the button can follow the default overflow behaviour, and for DiscussionTools, it can appear in the "Style text" menu.
• Line numbering should be disabled in DiscussionTools. Line numbering isn't as useful in discussions, and consumes too much space on smaller viewports.

Screenshots: