Go to file
MusikAnimal 81ec0c292a Implement dark mode styles and use Codex CSS components in search panel
Use Codex design tokens where possible, and implement custom dark
theming for things for which there is no suitable design token.
This means we're changing the colors for light mode ever so slightly.

We need to style the search panel for dark mode, so we might as well
tackle T371436 and use CSS-only Codex components. The same is done for
the "Go to line" panel (can be opened with Mod+Alt+g). The messages in
this panel are now also localizable.

The search panel (and goto line panel) are abstracted, with helpers to
create the Codex components. These will not only be used here but also
for the upcoming preferences panel (T359498).

Visually, the search and goto panels were inspired by the 2017 editor
and share a similar layout. CodeMirror similarly uses a more compact
design than usual to maximize the real estate of the editor itself.

Other changes:
* Bump codemirror/search to get latest bug fixes
* Remove stylelint ignorance and fix errors
* Move CM5 styles to ext.CodeMirror.less
* Move CM-specific styles out of mediawiki.less and into codemirror.less
* Move WikiEditor-specific styles to codemirror.wikieditor.less
  (incidentally, these only apply to CodeMirror 6)
* Correct qqq documentation; the "dialog" should be called a "panel"
* extension.json: alphabetize list of messages

Bug: T365311
Bug: T371436
Bug: T359498
Change-Id: I6a3bbc6bce4e490886753ff484e377c1763de456
2024-08-29 18:59:57 -04:00
.phan Use service 'GadgetsRepo' instead of deprecated GadgetRepo::singleton() 2024-07-01 09:32:50 +00:00
i18n Implement dark mode styles and use Codex CSS components in search panel 2024-08-29 18:59:57 -04:00
includes Hooks: use CM6 wording for colorblind preference 2024-08-15 01:33:43 -04:00
resources Implement dark mode styles and use Codex CSS components in search panel 2024-08-29 18:59:57 -04:00
tests Implement dark mode styles and use Codex CSS components in search panel 2024-08-29 18:59:57 -04:00
.eslintignore CodeMirror 6 for VE 2017 wikitext editor 2024-08-01 03:15:21 -04:00
.eslintrc.json eslint: Lint Gruntile.js using server rules 2022-02-07 16:25:32 +00:00
.gitignore CM6: Add jsdoc build step, fix JSDoc annotations, and add @stable tags 2024-03-26 13:35:47 -04:00
.gitreview Whoops, track not trace 2016-10-24 17:02:17 -07:00
.nvmrc .nvmrc: Update version from 18.17.0 to 18.20.2 2024-05-30 22:04:13 -04:00
.phpcs.xml build: Updating eslint-config-wikimedia to 0.18.2 2021-03-06 09:27:20 +00:00
.stylelintrc.json CodeMirror6: add new modules, feature flag, and URL query parameter 2023-10-09 19:51:24 -04:00
CODE_OF_CONDUCT.md build: Updating mediawiki/phan-taint-check-plugin to 1.3.0 2018-08-19 10:46:12 +00:00
composer.json build: Updating mediawiki/mediawiki-codesniffer to 44.0.0 2024-08-11 04:36:17 +00:00
COPYING CodeMirror: Add COPYING file and credit for CodeMirror authors 2020-03-02 21:34:06 +00:00
extension.json Implement dark mode styles and use Codex CSS components in search panel 2024-08-29 18:59:57 -04:00
jest.config.js CodeMirror6: add new modules, feature flag, and URL query parameter 2023-10-09 19:51:24 -04:00
jsdoc.json Implement dark mode styles and use Codex CSS components in search panel 2024-08-29 18:59:57 -04:00
package-lock.json Implement dark mode styles and use Codex CSS components in search panel 2024-08-29 18:59:57 -04:00
package.json Implement dark mode styles and use Codex CSS components in search panel 2024-08-29 18:59:57 -04:00
README.md Isolate build step to CM6 library and restructure files to work with RL 2024-07-31 22:45:48 -04:00
rollup.config.js Isolate build step to CM6 library and restructure files to work with RL 2024-07-31 22:45:48 -04:00

The CodeMirror extension provides syntax highlighting in MediaWiki wikitext editors using the CodeMirror library.

CodeMirror 6 homepage: https://www.mediawiki.org/wiki/Extension:CodeMirror/6

JS documentation: https://doc.wikimedia.org/CodeMirror

Development

Preface

Extension:CodeMirror is currently in the process of being upgraded to the new major version, CodeMirror 6. See the change log for details.

Use of CodeMirror 6 is controlled by the wgCodeMirrorV6 configuration setting, or by passing in cm6enable=1 in the URL query string.

CodeMirror 6 requires the use of NPM to bundle the dependencies. These are bundled in resources/codemirror.bundle.js, built using Rollup, and packaged as the ext.CodeMirror.v6.lib ResourceLoader module. If you make changes to the versions of the dependencies, you will need to run npm run build to update the ResourceLoader module.

NPM commands

NOTE: Consider using Fresh to run these tasks.

  • npm install to install dependencies.
  • npm run doc to generate the API documentation.
  • npm test to run the linting tools, JavaScript unit tests, and build checks.
  • npm run test:lint for linting of JS/LESS/CSS.
  • npm run test:lint:js for linting of just JavaScript.
  • npm run test:lint:styles for linting of just Less/CSS.
  • npm run test:i18n for linting of i18n messages with banana-checker.
  • npm run test:unit for the new Jest unit tests.
  • npm run selenium-test for the Selenium tests.
  • npm run build to rebundle the CodeMirror library. If changes are made to the @codemirror or @lezer dependencies in package.json, this command must be run before sending the patch or CI will fail.
  • Older QUnit tests are in resources/mode/mediawiki/tests/qunit/. These have been replaced and will be removed after the CodeMirror 6 upgrade is complete.