Change Details

This is #epic task for the [[ https://codemirror.net/ | CodeMirror 6 ]] upgrade. This is a complete rewrite of the library that fixes many of the fundamental issues with CodeMirror 5. Specifically, accessibility issues, mobile compatibility, and RTL should largely be addressed. === Checklist The [[ https://codemirror.net/docs/migration/ | migration ]] will roughly entail: [x] Add new lib files and necessary packages and set them up in the ResourceLoader config (T317243) [x] Make sure [[ https://doc.wikimedia.org/mediawiki-core/master/js/#!/api/jQuery.plugin.textSelection | jQuery.textSelection ]] still integrates cleanly (tackled as part of T317243) [x] Port the MediaWiki "mode" to a CodeMirror 6 stream-parser (T348019) [] Re-implement the TagModes and PluginModules system to work with CodeMirror 6 (T348684) [x] Find solution to style section level headings (T351686) [] Optimize HTML generation (T352917) [x] Verify performance is as good if not better than the old version and optimize accordingly (it's noticeably faster, even before we added new features) [] Come up with a way to toggle on/off CodeMirror when there is no toolbar (T190108) [] Come up with a more fitting icon (T174145) [] Update any CodeMirror integration that exists in other deployed MediaWiki extensions and skins, as necessary (quick glance seems to indicate this would only effect #CharInsert, #growthexperiments, #proofreadpage and #Timeless on the WMF cluster). See also: https://codesearch.wmcloud.org/search/?q=%22codemirror%22&files=&excludeFiles=&repos= [] Give communities time to update their code that interfaces with CodeMirror === Post-migration **Explore introducing new features** * Autocompletion (T95100) * Code folding (T30684) * Themes (T163533) **Consider replacing other syntax highlighting systems** We should consider replacing other syntax highlighting systems (i.e. Ace) with CodeMirror to reduce maintenance burden and keep code DRY. (Tasks to be created once CodeMirror 6 has proven itself.) * #codeeditor could theoretically be completely replaced by CodeMirror. There's really no need for a separate extension as CodeMirror offers the same and even more features. ** #abusefilter has a [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/AbuseFilter/+/2c1217ec40595767c536535bf343e88be0a46efa/modules/mode-abusefilter.js | mode ]] for the Ace syntax highlighter. ** #visualeditor has a [[https://gerrit.wikimedia.org/g/mediawiki/extensions/VisualEditor/+/2f568758def479d4ade5336d2fd4724128559cdb/modules/ve-mw/ui/widgets/ve.ui.MWAceEditorWidget.js|widget]] for the Ace syntax highlighter. ** #mediawiki-extensions-graph Sandbox special page uses the Ace syntax highlighter. ** #wikilambda has a [[https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/WikiLambda/+/e06f09a58f2b97d996213fc5ce168a833a86c265/resources/ext.wikilambda.edit/components/base/CodeEditor.vue|Vue component]] for the Ace syntax highlighter. * #syntaxhighlight could possibly tie into CodeMirror so that we get the correct syntax highlighting within the `<syntaxhighlight>` tag while editing (when the language is supported).

This is #epic task for the [[ https://codemirror.net/ | CodeMirror 6 ]] upgrade. This is a complete rewrite of the library that fixes many of the fundamental issues with CodeMirror 5. Specifically, accessibility issues, mobile compatibility, and RTL should largely be addressed. === Checklist The [[ https://codemirror.net/docs/migration/ | migration ]] will roughly entail: [x] Add new lib files and necessary packages and set them up in the ResourceLoader config (T317243) [x] Make sure [[ https://doc.wikimedia.org/mediawiki-core/master/js/#!/api/jQuery.plugin.textSelection | jQuery.textSelection ]] still integrates cleanly (tackled as part of T317243) [x] Port the MediaWiki "mode" to a CodeMirror 6 stream-parser (T348019) [x] Re-implement mediawiki TagModes system to work with CodeMirror 6 (T348684) [x] Find solution to style section level headings (T351686) [] Optimize HTML generation (T352917) [x] Verify performance is as good if not better than the old version and optimize accordingly (it's noticeably faster, even before we added new features) [] Come up with a way to toggle on/off CodeMirror when there is no toolbar (T190108) [] Come up with a more fitting icon (T174145) [] Update any CodeMirror integration that exists in other deployed MediaWiki extensions and skins, as necessary (quick glance seems to indicate this would only effect #CharInsert, #growthexperiments, #proofreadpage and #Timeless on the WMF cluster). See also: https://codesearch.wmcloud.org/search/?q=%22codemirror%22&files=&excludeFiles=&repos= [] Give communities time to update their code that interfaces with CodeMirror === Post-migration **Explore introducing new features** * Autocompletion (T95100) * Code folding (T30684) * Themes (T163533) **Consider replacing other syntax highlighting systems** We should consider replacing other syntax highlighting systems (i.e. Ace) with CodeMirror to reduce maintenance burden and keep code DRY. (Tasks to be created once CodeMirror 6 has proven itself.) * #codeeditor could theoretically be completely replaced by CodeMirror. There's really no need for a separate extension as CodeMirror offers the same and even more features. ** #abusefilter has a [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/AbuseFilter/+/2c1217ec40595767c536535bf343e88be0a46efa/modules/mode-abusefilter.js | mode ]] for the Ace syntax highlighter. ** #visualeditor has a [[https://gerrit.wikimedia.org/g/mediawiki/extensions/VisualEditor/+/2f568758def479d4ade5336d2fd4724128559cdb/modules/ve-mw/ui/widgets/ve.ui.MWAceEditorWidget.js|widget]] for the Ace syntax highlighter. ** #mediawiki-extensions-graph Sandbox special page uses the Ace syntax highlighter. ** #wikilambda has a [[https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/WikiLambda/+/e06f09a58f2b97d996213fc5ce168a833a86c265/resources/ext.wikilambda.edit/components/base/CodeEditor.vue|Vue component]] for the Ace syntax highlighter. * #syntaxhighlight could possibly tie into CodeMirror so that we get the correct syntax highlighting within the `<syntaxhighlight>` tag while editing (when the language is supported).

This is #epic task for the [[ https://codemirror.net/ | CodeMirror 6 ]] upgrade. This is a complete rewrite of the library that fixes many of the fundamental issues with CodeMirror 5. Specifically, accessibility issues, mobile compatibility, and RTL should largely be addressed. === Checklist The [[ https://codemirror.net/docs/migration/ | migration ]] will roughly entail: [x] Add new lib files and necessary packages and set them up in the ResourceLoader config (T317243) [x] Make sure [[ https://doc.wikimedia.org/mediawiki-core/master/js/#!/api/jQuery.plugin.textSelection | jQuery.textSelection ]] still integrates cleanly (tackled as part of T317243) [x] Port the MediaWiki "mode" to a CodeMirror 6 stream-parser (T348019) [x] Re-implement the TagModes and PluginModulesmediawiki TagModes system to work with CodeMirror 6 (T348684) [x] Find solution to style section level headings (T351686) [] Optimize HTML generation (T352917) [x] Verify performance is as good if not better than the old version and optimize accordingly (it's noticeably faster, even before we added new features) [] Come up with a way to toggle on/off CodeMirror when there is no toolbar (T190108) [] Come up with a more fitting icon (T174145) [] Update any CodeMirror integration that exists in other deployed MediaWiki extensions and skins, as necessary (quick glance seems to indicate this would only effect #CharInsert, #growthexperiments, #proofreadpage and #Timeless on the WMF cluster). See also: https://codesearch.wmcloud.org/search/?q=%22codemirror%22&files=&excludeFiles=&repos= [] Give communities time to update their code that interfaces with CodeMirror === Post-migration **Explore introducing new features** * Autocompletion (T95100) * Code folding (T30684) * Themes (T163533) **Consider replacing other syntax highlighting systems** We should consider replacing other syntax highlighting systems (i.e. Ace) with CodeMirror to reduce maintenance burden and keep code DRY. (Tasks to be created once CodeMirror 6 has proven itself.) * #codeeditor could theoretically be completely replaced by CodeMirror. There's really no need for a separate extension as CodeMirror offers the same and even more features. ** #abusefilter has a [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/AbuseFilter/+/2c1217ec40595767c536535bf343e88be0a46efa/modules/mode-abusefilter.js | mode ]] for the Ace syntax highlighter. ** #visualeditor has a [[https://gerrit.wikimedia.org/g/mediawiki/extensions/VisualEditor/+/2f568758def479d4ade5336d2fd4724128559cdb/modules/ve-mw/ui/widgets/ve.ui.MWAceEditorWidget.js|widget]] for the Ace syntax highlighter. ** #mediawiki-extensions-graph Sandbox special page uses the Ace syntax highlighter. ** #wikilambda has a [[https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/WikiLambda/+/e06f09a58f2b97d996213fc5ce168a833a86c265/resources/ext.wikilambda.edit/components/base/CodeEditor.vue|Vue component]] for the Ace syntax highlighter. * #syntaxhighlight could possibly tie into CodeMirror so that we get the correct syntax highlighting within the `<syntaxhighlight>` tag while editing (when the language is supported).