Page MenuHomePhabricator

Cosmos skin compatibility with CodeMirror 6
Open, Needs TriagePublic

Description

The Cosmos skin has CSS selectors targeting .CodeMirror. This class will be removed when CodeMirror 6 is fully rolled out (T259059) which is slated to happen by MW 1.46 (May–June 2026).

As far as I can tell, ext.CodeMirror.visualEditor.less shouldn't be needed at all after the CM6 rollout. CodeMirror + 2017 editor styles in CM6 should be the same in every skin (unless you want to change them).

I'm not sure about CodeMirror.visualEditor/darkTheme.less. CM6 has dark mode built-in, which can be activated by adding the .skin-theme-clientpref-night class to the html element, just like Vector 2022. Or, you could wait for T163533 which will allow you to pick which theme you want to be used in CodeMirror (by default). Themes (T163533) likely won't come until after MW 1.46, however.

See the CodeMirror 6 migration guide for more general info.

Event Timeline

Hi, I’m interested in working on this task.

I have experience with JavaScript, CSS, and MediaWiki basics.
I would like to investigate the compatibility issues between Cosmos skin and CodeMirror 6 and propose a fix.

Is it okay if I take this up?

Thanks!

Hi, I have worked on this task and submitted a patch:

https://gerrit.wikimedia.org/r/c/mediawiki/skins/Cosmos/+/1255681

Summary of changes:

  • Removed CodeMirror 5 specific styles
  • Deleted darkTheme.less and ext.CodeMirror.visualEditor.less
  • Removed their references from skin.json

Now the Cosmos skin relies on CodeMirror 6 default styling.

Please let me know if any changes or improvements are needed. Thanks!

@SheetalPro Just FYI a review is available on https://gerrit.wikimedia.org/r/c/mediawiki/skins/Cosmos/+/1255681

Because this task is not linked in the commit (see https://www.mediawiki.org/wiki/Gerrit/Tutorial for how), the bot did not link to your gerrit patch on this task.