81ec0c292a
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 |
||
---|---|---|
.phan | ||
i18n | ||
includes | ||
resources | ||
tests | ||
.eslintignore | ||
.eslintrc.json | ||
.gitignore | ||
.gitreview | ||
.nvmrc | ||
.phpcs.xml | ||
.stylelintrc.json | ||
CODE_OF_CONDUCT.md | ||
composer.json | ||
COPYING | ||
extension.json | ||
jest.config.js | ||
jsdoc.json | ||
package-lock.json | ||
package.json | ||
README.md | ||
rollup.config.js |
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.