wikimedia/mediawiki-extensions-CodeMirror
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/CodeMirror synced 2024-11-27 15:40:00 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-extensions-CodeMi.../README.md

66 lines
2.9 KiB
Markdown
Raw Normal View History

CodeMirror6: add new modules, feature flag, and URL query parameter Add a new $wgCodeMirrorV6 temporary feature flag that when enabled, will load the 'ext.CodeMirror.v6.WikiEditor' module that is built against CodeMirror 6. You can also pass in the ?cm6enable=1 query parameter to force use of CodeMirror 6. This is currently only implemented for the 2010 editor. Due to packaging constraints with CodeMirror 6, we now use Webpack to bundle the files, which are then used by ResourceLoader. This is similar to what is done for Extension:Popups, MobileFrontend, among other extensions. A new generic class CodeMirror can be used on other areas where syntax highlighting is desirable, but not necessarily for editing (i.e. without WikiEditor). This commit merely lays the foundation for CodeMirror 6 and updates WikiEditor to use it. The actual MediaWiki syntax highlighting will come with a future commit. With the new Webpack build, the Gruntfile was removed and the tasks moved to npm commands. Bug: T317243 Change-Id: I2239d2449b2db3b638551f847eb4eff1aafa6276
2023-09-19 17:59:29 +00:00
# mediawiki/extensions/CodeMirror
Homepage: https://www.mediawiki.org/wiki/Special:MyLanguage/Extension:CodeMirror
## Development
As part of the [upgrade to CodeMirror 6](https://phabricator.wikimedia.org/T259059),
CodeMirror now uses an asset bundler, so during development you'll need to run a script
to assemble the frontend assets.
Use of CodeMirror 6 is controlled by the `wgCodeMirrorV6` configuration setting, or by
passing in `cm6enable=1` in the URL query string.
You can find the v6 frontend source files in `src/`, the compiled sources in
`resources/dist/`, and other frontend assets managed by ResourceLoader in
`resources/*`.
### Commands
_NOTE: Consider using [Fresh](https://gerrit.wikimedia.org/g/fresh/) to run these tasks._
* `npm install` to install dependencies.
* `npm start` to run the bundler in watch mode, reassembling the files on file change.
You'll want to keep this running in a separate terminal during development.
* `npm run build` to compile the production assets. You *must* run this step before
sending the patch or CI will fail (so that sources and built assets are in sync).
* `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 test:bundlesize` to test if the gzip'd entrypoint is of acceptable size.
Older QUnit tests are in `resources/mode/mediawiki/tests/qunit/`. These will
eventually be moved over to `tests/qunit` and rewritten for CodeMirror 6.
CodeMirrorWikiEditor: add bracketMatching as default extension By default, this feature highlights unmatched brackets when the cursor is placed over it. This can be disabled, but seems useful so we'll add it as one of the new features in README and see how users react. Bug: T348019 Change-Id: Ie6af715e40aeb8217a7c4dfe0c6e6a3dcfa725d5
2023-12-06 05:52:51 +00:00
## CodeMirror 6 change log
mediawiki.less: don't remove font-weight from .cm-mw-strong tokens Presumably it was always the intention that tokens with the styles .cm-mw-page-name AND .cm-mw-em should be both bold and italic in links, without having the CSS rules override each other. As an example: '''''[[Bold and italic title]]''''' Added a note in the README that this will be a new user-facing feature Change-Id: Iac41e31b7a9cf8683cd5c982c496ff83a092acfb
2023-12-13 07:11:24 +00:00
This is a list of changes that either come by default with the CodeMirror 6 upgrade,
or changes of our that we deem as reasonable improvements.
CodeMirrorWikiEditor: add bracketMatching as default extension By default, this feature highlights unmatched brackets when the cursor is placed over it. This can be disabled, but seems useful so we'll add it as one of the new features in README and see how users react. Bug: T348019 Change-Id: Ie6af715e40aeb8217a7c4dfe0c6e6a3dcfa725d5
2023-12-06 05:52:51 +00:00
Some may be removed pending user feedback:
mediawiki.less: don't remove font-weight from .cm-mw-strong tokens Presumably it was always the intention that tokens with the styles .cm-mw-page-name AND .cm-mw-em should be both bold and italic in links, without having the CSS rules override each other. As an example: '''''[[Bold and italic title]]''''' Added a note in the README that this will be a new user-facing feature Change-Id: Iac41e31b7a9cf8683cd5c982c496ff83a092acfb
2023-12-13 07:11:24 +00:00
### Upstream changes
CodeMirrorWikiEditor: add bracketMatching as default extension By default, this feature highlights unmatched brackets when the cursor is placed over it. This can be disabled, but seems useful so we'll add it as one of the new features in README and see how users react. Bug: T348019 Change-Id: Ie6af715e40aeb8217a7c4dfe0c6e6a3dcfa725d5
2023-12-06 05:52:51 +00:00
* Bracket matching now highlights unmatched brackets in red
Implement core MediaWiki stream parser for CodeMirror 6 This is more or less a exact port of the old stream parser, with the big notable change being that all configuration-related code lives in a separate class, CodeMirrorModeMediaWikiConfig. A smaller change is that closing HTML tags that are marked as errors now have the ending '>' character highlighted red, when it didn't before. Integration with other extensions and modes is saved for a future patch (T348684). This means <nowiki>, <ref> and other extension-supplied markup is not yet highlighted. The entry point for WikiEditor integration is now at ext.CodeMirror.v6.WikiEditor.init.js, which needs to first require the virtual file set via the DataScript (PHP) class. This can't be integrated into the CM6 code because it needs to be precompiled before ResourceLoader can use it (T281781). Known issues, to be addressed separately: * No support for TagModes / PluginModes (T348684) * Identical adjacent tokens produce excess markup (T352917) * Section headings do not have line-level styling (T351686) Bug: T348019 Change-Id: I8f8a81f362bed60dea14ecde9487a2b0c89225e8
2023-12-06 18:49:40 +00:00
### New MediaWiki mode features
* Closing HTML tags that highlighted as an error now also highlight the closing '>'
mediawiki.less: don't remove font-weight from .cm-mw-strong tokens Presumably it was always the intention that tokens with the styles .cm-mw-page-name AND .cm-mw-em should be both bold and italic in links, without having the CSS rules override each other. As an example: '''''[[Bold and italic title]]''''' Added a note in the README that this will be a new user-facing feature Change-Id: Iac41e31b7a9cf8683cd5c982c496ff83a092acfb
2023-12-13 07:11:24 +00:00
* Allow link titles to be both emboldened and italicized.
CodeMirror 6: show wikitext highlighting on protected pages It is necessary to have a way to toggle CodeMirror on and off, so we use WikiEditor and hide all other buttons. This is more costly than loading just vanilla CodeMirror, but it ensures a consistent experience with pages that are editable, with the toggle button in the familiar place. At a later time, WikiEditor may be updated to better support read only pages in a lightweight fashion (T188817). Bug: T301615 Change-Id: I8ea7597d07ff60a3f58ba306d2d6d12d3ec08b16
2024-01-10 00:02:44 +00:00
* Wikitext syntax highlighting is shown on protected pages
([T301615](https://phabricator.wikimedia.org/T301615))
mode.mediawiki: rename mnemonic to html-entity and deprecate variants This removes treating an HTML entity in a template name as a separate token, and thus deprecates the .cm-mw-template-name-mnemonic CSS class. In CM6 we have to register tokens for them to show, and this one seems of little use to begin with. HTML entities should always be styled as a such, especially in page titles where they are treated post-processing. i.e. [[&#47;dev/null]] links to [[/dev/null]]. The rename to .cm-html-entity and associated code is to better reflect what it is. $rarr; is a mnemonic form while &#x2f; is not, but both are entities. Deprecations are noted in the README, with the old classes to be removed later after on-wiki usage has been updated. Bug: T348019 Change-Id: I1184fb5d7d37084c80af1abd5f3cb5f2091b085c
2024-01-03 06:05:35 +00:00
CodeMirrorModeMediaWiki: add support for mediawiki TagModes This is essentially the CM6-style variant of the same code used for TagModes in CM5. The big difference is in CM6, every tag must be registered in order to be used. We do this dynamically when CodeMirrorModeMediaWiki is intantiated. As of this patch only tags that contain mediawiki (formerly 'text/mediawiki') are supported, such as <ref>. The CM6 tag registration surfaced an old bug, now fixed: when using different capitalization on extension-supplied tags, the CSS class name used to match that. I.e. <REF> would produce .cm-mw-ext-REF, when it should be .cm-mw-ext-ref Also remove the old line-level styles. With I17b1f0b7a6, line-level styling was added for section headings. Doing the same for tags like <nowiki> and <pre> isn't as important, and can be addressed later or not at all. Add test case for extension tag with no supplied TagMode Other minor cleanup, including removing old commented out code Bug: T348684 Change-Id: Ibfff1fc6eacc42b95f557abb40774a65c46ba373
2024-01-04 04:01:27 +00:00
### Deprecations and other changes
mode.mediawiki: rename mnemonic to html-entity and deprecate variants This removes treating an HTML entity in a template name as a separate token, and thus deprecates the .cm-mw-template-name-mnemonic CSS class. In CM6 we have to register tokens for them to show, and this one seems of little use to begin with. HTML entities should always be styled as a such, especially in page titles where they are treated post-processing. i.e. [[&#47;dev/null]] links to [[/dev/null]]. The rename to .cm-html-entity and associated code is to better reflect what it is. $rarr; is a mnemonic form while &#x2f; is not, but both are entities. Deprecations are noted in the README, with the old classes to be removed later after on-wiki usage has been updated. Bug: T348019 Change-Id: I1184fb5d7d37084c80af1abd5f3cb5f2091b085c
2024-01-03 06:05:35 +00:00
* The `.cm-mw-mnemonic` CSS class has been renamed to `.cm-mw-html-entity`
* The `.cm-mw-template-name-mnemonic` class has been removed.
Use `.cm-mw-template-ground.cm-html-entity` instead.
CodeMirrorModeMediaWiki: add support for mediawiki TagModes This is essentially the CM6-style variant of the same code used for TagModes in CM5. The big difference is in CM6, every tag must be registered in order to be used. We do this dynamically when CodeMirrorModeMediaWiki is intantiated. As of this patch only tags that contain mediawiki (formerly 'text/mediawiki') are supported, such as <ref>. The CM6 tag registration surfaced an old bug, now fixed: when using different capitalization on extension-supplied tags, the CSS class name used to match that. I.e. <REF> would produce .cm-mw-ext-REF, when it should be .cm-mw-ext-ref Also remove the old line-level styles. With I17b1f0b7a6, line-level styling was added for section headings. Doing the same for tags like <nowiki> and <pre> isn't as important, and can be addressed later or not at all. Add test case for extension tag with no supplied TagMode Other minor cleanup, including removing old commented out code Bug: T348684 Change-Id: Ibfff1fc6eacc42b95f557abb40774a65c46ba373
2024-01-04 04:01:27 +00:00
* Line-level styling for `<nowiki>`, `<pre>`, and any tag without an associated
TagMode has been removed.
CodeMirror 6: localize search dialog As of this patch, these should be the only messages used by us that live in the CodeMirror library. More may be added later as new features are added. We load all translations as a default CodeMirror extension given the small cost and importance of localization. German translations from the CodeMirror docs: https://codemirror.net/examples/translate/ Also add a note in the README about the search dialog. Bug: T317243 Change-Id: Iba40bcaf197ed48166ce4cdcc4f48177fc8d07f3
2024-01-13 03:21:12 +00:00
* The browser's native search functionality (ala Ctrl+F) has been replaced with
search functionality built into CodeMirror. This is necessary to maintain
performance (see [T303664](https://phabricator.wikimedia.org/T303664)).
Reference in a new issue Copy permalink