0506a10eab
The 2017 editor has an infinite viewport, meaning the entire document is
printed on page load. CodeMirror 6 meanwhile only processes text in the
visible viewport. This presents a situation where if large chunks of
text are inserted outside the visible range (such as the "Changes
recovered" feature of VE), it can cause misalignment of the VE surface
and visible CodeMirror layer, as CodeMirror has not accounted for the
off-screen lines of text.
CodeMirror 5 had a `viewportMargin: infinity` option that prevented this
issue, but at the cost of performance. CodeMirror 6 removed this option,
but the same effect can be achieved by tricking CodeMirror into thinking
we're printing the document, in which case it will process all lines.
This seriously hurts performance, and is a nasty hack, but until the
2017 editor is reworked to have a viewport, there may be no other means
to prevent the misalignment.
The discovery of this issue and the fix are courtesy of Fandom engineers
Bug: T357482
Change-Id: If11ce48459e8faf55015108e8c2eabdc16e0d917
(cherry picked from commit
|
||
|---|---|---|
| .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 installto install dependencies.npm run docto generate the API documentation.npm testto run the linting tools, JavaScript unit tests, and build checks.npm run test:lintfor linting of JS/LESS/CSS.npm run test:lint:jsfor linting of just JavaScript.npm run test:lint:stylesfor linting of just Less/CSS.npm run test:i18nfor linting of i18n messages with banana-checker.npm run test:unitfor the new Jest unit tests.npm run selenium-testfor the Selenium tests.npm run buildto rebundle the CodeMirror library. If changes are made to the@codemirroror@lezerdependencies 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.