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
For years, users have complained that the CodeMirror toggle button is
confusing and concealed. The icon looked too similar to the edit icon,
when it was supposed to be a highlighter. The new icon is similar but
has a highlighted line to help clarify what it is. We also now have the
text 'Syntax' accompanying the icon. Translators are instructed to try
to be brief to conserve space in the toolbar. "Syntax highlighting" is
the full correct term, and remains the text for the button's tooltip.
The new icon is ~0.3KB uncompressed, just meeting performance guidelines
for using @embed <https://w.wiki/AsPW>. This is also only temporary until the icon is upstreamed in Codex/OOUI.
New icon courtesy of Thiemo Kreuz (WMDE)
A corresponding change for the 2017 editor will follow I15453b33e7.
Bug: T174145
Change-Id: Ib6dbfc261214ed6672c1a54738e3401fa2f5d262
Add new temporary ext.CodeMirror.visualEditor.init RL module which
selects the temporary ext.CodeMirror.visualEditor.v6 or non-v6 based on
$wgCodeMirrorV6. This will allow us to deploy CM6 further.
As a result of this work, the core CodeMirror class now has knowledge
of ve.ui.Surface.
Other changes:
* Add Compartment for specialCharsExtension so it can be disabled in VE.
* Add option to mediaWikiLang() to disable template folding.
* Add support for RTL wikis where $wgCodeMirrorRTL is enabled.
* Make CodeMirror.logUsage() and setCodeMirrorPreference() static.
* Fix unit and linting tests.
Some code courtesy of Fandom, GPLv2-or-later; see:
https://github.com/Wikia/mediawiki-extensions-CodeMirror/commit/ef297c48c
Bug: T357482
Change-Id: I15453b33e77e1c1b4d5e5183e41e53d56ff14c3e
CodeMirror 6 requires the use of NPM, but we can still bundle all CM
packages into one file, and then everything else (i.e. our code) is
managed by ResourceLoader as per usual. This makes contribution
considerably easier as we no longer need a build step for each change.
CM5 files are now under resources/legacy, and the CM6 files are moved to
the root of the resources/ directory. Only one file,
codemirror.bundle.js, is managed by Rollup, while everything else is RL.
The Rollup output for now is put under resources/lib/ alongside the CM5
upstream files.
This patch is *mostly* renames of files, along with changing ECMAScript
Module (ESM) syntax into the CommonJS style that ResourceLoader prefers.
We also remove more modern JS syntax (i.e. private class methods) that
we were able to use before because we had a build step with Babel.
This patch should effectively make no user-facing changes, or to the
ResourceLoader modules we offer in Extension:CodeMirror.
Finally, bump version in extension.json to 6, to match the upstream lib,
and add Bhsd as an author :-)
Bug: T368053
Change-Id: Ie258e49f5df8db23a7344ac3c4c9300aaa991042
The service 'GadgetsRepo' gets injected as optional service.
This change requires a phan dependency on extension Gadgets in
project integration/config in file zuul/parameter_functions.py:
I5052e0c666b7dc7af6061e57001f9feac666e029
Change-Id: Ib405ad79b3c348bed51a8938a6a8f73bd35267d2
Documentation is at https://w.wiki/9kxt
The idea is that modules ending in `.init` imply they initialize
CodeMirror and maniuplate the DOM. The others only export classes for
use in integreations.
In doing so, 'ext.CodeMirror.v6.WikiEditor' now only exports the
CodeMirrorWikiEditor class, while 'ext.CodeMirror.v6.WikiEditor.init'
is added for use on #wpTextbox1 through action=edit.
Bug: T174811
Change-Id: Iec62ac9dc77918904bed886d2d46ccc03e0927f7
We want to get moving on rolling out CodeMirror 6 to LTR wikis, but want
to slow rollout to RTL wikis since we are still ironing out some issues
there, specifically T358804.
Bug: T170001
Bug: T358804
Change-Id: Iac30ffe2746139326159fd406fab3b097b3187f5
This adds the `ext.CodeMirror.v6.init` ResourceLoader module which
allows use of CodeMirror on `#wpTextbox1` without the use of WikiEditor
(the 'usebetatoolbar' preference). In order for users to opt-in to using
CodeMirror, we make the existing 'usecodemirror' option into a visible
preference. In addition, with two preferences related to CodeMirror, we
group them under a new heading 'Syntax highlighting'. More preferences
may be added later to this section following T359498.
When WikiEditor is not enabled, the layout of the action=edit page has
the textarea as a sibling to other visible content, like `.editOptions`.
Because of this, we can't simply append the CodeMirror DOM to the parent
like we were before, as that would put the visible editor beneath the
edit summary, Publish button, etc. Instead we rework the CodeMirror to
first add a wrapper around the textarea and use that as the parent. This
way, `.cm-editor` is always in the same place in the DOM as the native
textarea.
Line wrapping and focus/blur events are also moved to CodeMirror, as
these are needed when not using WikiEditor.
Bug: T190108
Change-Id: I4bc069e0d398aa7088e4f50bbd0ddda458b289c3
Restore the ResourceLoaderGetConfigVars hook which CodeMirror 5 still
relies on when it checks $wgCodeMirrorLineNumberingNamespaces.
In CM6, this is set in the config provided by DataScript.php.
Partially reverts I67518c0968
Bug: T347211
Follow-Up: I67518c0968f64c79e290f57b4884d30a161212d3
Change-Id: Id34858da68f7e08d16f8d1312bbbd355ccf8d140
See https://w.wiki/9Twh for example usage with ResourceLoader.
Webpack is retired in favor of Rollup, which allows us to convert the
ECMAScript Modules into CommonJS modules for use by ResourceLoader.
We now have a file in dist/ for each RL module that we want to offer,
including the 'lib' module which includes the CM library itself.
Because Rollup has no knowledge of the ResourceLoader module registry,
the generated output requires other modules via relative path, when it
needs to be the RL module name. To get around this, we do a crude
find/replace after the files are generated. Hacky, but necessary to make
CodeMirror usable by gadgets and scripts that don't also want
WikiEditor.
Add new RL modules 'ext.CodeMirror.v6.lib' (vendor code) and
'ext.CodeMirror.v6' (the main CodeMirror class, sans WikiEditor).
Clean up extension.json, listing the v6 modules beneath the old ones.
Bug: T214989
Change-Id: Ide716247e545cf2bdd977bea645729564ebbe6e2
We want CodeMirror to be usable outside WikiEditor. This commit moves
the more critical extensions from the CodeMirrorWikiEditor class to the
parent CodeMirror class.
The linked tasks are only broadly related. In Ide716247e5 we will
introduce a ResourceLoader module that makes CodeMirror usable on any
textarea.
Bug: T214989
Bug: T190108
Change-Id: Ib199cf700c3235812f7c9a9bcb3703917f0887de
Now that RTP has been enabled for a while, we no longer need this and
jquery.ui is deprecated.
Bug: T323329
Change-Id: Idbb92bd4f18e2c6e0adc51d1a3fa909efc129686
Template folding is likely going to be a big 'hit' of a feature, but not
everyone will want it. Until CodeMirror prefs are introduced (T359498),
we need a way to control the rollout of template folding. This commit
adds $wgCodeMirrorTemplateFoldingNamespaces which acts similar to the
existing $wgCodeMirrorLineNumberingNamespaces.
We also move template folding to be part of CodeMirrorModeMediaWiki,
since the feature is unique to MediaWiki wikitext.
Move configuration settings to be part of the DataScript, thus removing
the need for the ResourceLoaderGetConfigVarsHook (which unnecessarily
makes the config settings available on every page load).
Other minor changes like adding missing JSDoc blocks.
Bug: T30684
Change-Id: I67518c0968f64c79e290f57b4884d30a161212d3
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
This fixes a preexisting issue where we were loading CodeMirror on pages
where it would never be used. We use the EditPage__showEditForm_initial
hook so we don't need to check the action.
This commit introduces the CodeMirrorContentModels extension attribute,
used to limit where CodeMirror is loaded automatically. By default,
this includes only CONTENT_MODEL_WIKITEXT ('wikitext'). This extension
attribute serves as a stepping stone to CM being used on content types
other than just wikitext.
Bug: T359206
Change-Id: Ibefc028c5ef6275393202fe773c26162715e1bca
This patch adds an icon displayed above the cursor inside a template. By clicking it, the template parameters become hidden and replaced by three dots, while the template name remains visible. Clicking the dots will unfold the template. New key bindings include fold (Ctrl-Shift-[/Cmd-Alt-[), unfold (Ctrl-Shift-]/Cmd-Alt-]) and unfoldAll (Ctrl-Alt-]).
Bug: T30684
Change-Id: I631fe0ecf21d0a80306bd40d66d22478a1aefe58
This removes the need for a separate init module. Using
`__non_webpack_require__` will force Webpack to compile as `require`
instead of `__webpack_require__`, allowing ResourceLoader to inject the
virtual file.
Change-Id: I00203f4665b49cb92ee9db356445fdc2ab17fc5f
The highlightSpecialChars() should act mostly identical to CM5. An
example is the soft hyphen (U+00AD). These are highlighted as a red dot
because they are non-printable characters.
The i18n may seem like overkill, but CM6 would otherwise actually print
the same message in plain English and without a way to localize it.
Per request at T181677, we also highlight non-breaking space and the
narrow non-breaking space. These are shown as a faint gray dot, to match
CM6's highlightWhiteSpace() extension. That extension isn't used here
because it would also highlight normal spaces, which we don't want.
Bug: T181677
Change-Id: Iac1a8cf78e4cd0a27abc917f4b70bdfbaf86252a
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
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
User-options related classes are being moved to the MediaWiki\User\Options namespace in MediaWiki Core; reflect that change here.
Bug: T352284
Depends-On: I9822eb1553870b876d0b8a927e4e86c27d83bd52
Change-Id: Ib0022571e750becc87c56adcb2d5bdb203b6254d
Some users actually use CodeMirror and DotsSyntaxHighlighter, and
according to them and my own testing, there is no actual conflict. As
such, we shouldn't prevent CodeMirror from loading when this gadget is
enabled.
See https://w.wiki/8J4J
Follow-Up: If6c953858f9cf73024959b5a3b71b33ab7b48b4c
Change-Id: I259737d27cc3190fbdc335da2ccd471fcc0cff8b
Since wikEd and DotsSyntaxHighlighter are both popular gadgets in and
outside WMF wikis, they are included in this setting by default.
Change-Id: If6c953858f9cf73024959b5a3b71b33ab7b48b4c
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
Move WikiEditor-specific code to ext.CodeMirror.WikiEditor, leaivng only
CodeMirror-specific things in ext.CodeMirror, including the logUsage
method which was duplicated in the VE plugin and now refactored.
Add .env to .gitignore so that selenium tests can be ran more easily
This patch leaves the other non-mediawiki modes still using the
'scripts' system instead of 'packageFiles'. These are not used in
MediaWiki directly but by some extensions (i.e. PhpTags) and using
packageFiles will break that integration.
Bug: T272035
Change-Id: I3bafef196c1f713443d7b8e9cb7dc2891b379f5d
This removes the need for the init module.
Bug: T340751
Depends-On: Ibcc81c90bc9ba6c5fd012c512daf861973b03b2e
Change-Id: Iec3a4c6b00288aee376af47e778c4aa67a98d29b
It makes no difference to directly assign Codex Design System for
Wikimedia colors as values instead of re-assigning the outdated
`@wmui-color-*` variables.
Bump to required MediaWiki core version >= v1.41.0.
Also put stylelint-disable before the block it's actually needed.
Bug: T334934
Change-Id: I5696f160d39ef4edec7a1b966fe7e73608c86bdc
The master branch is not compatible with 1.38 since commit 3a0c4b1.
Depends-On: I2a86a37fe2853890742bea2e7180f7d6c5f9304c
Change-Id: Ic767cd476d504c1020c6ef8481b3cdee39f31bc7
I did some reverse engeneering and derived the three base colors for
nested templates and parser functions as well as links, together with
a formula to calculate any mixture of the three.
You can manually compile the .less file:
lessc resources/mode/mediawiki/mediawiki.less resources/mode/mediawiki/mediawiki.css
Then compare:
git diff --word-diff=color -w HEAD^ -- resources/mode/mediawiki/mediawiki.css
You will see that some numbers change. These are rounding errors in
the old .css code.
Bug: T307188
Change-Id: Ic534a2fac73f9f737ae5238b87aa80b705b37786
Get rid of the flag, without making any substantial changes to the
code. A follow-up commit will merge the CSS into base rules.
Bug: T307188
Change-Id: I601df5047d0db3cfb9559538487d3d39bb6c7cf4
Including an user options to enable/disable the scheme. Defaults
to false. Feature is only availible together with the new more
accessibile color scheme as the CSS depends on each other.
Set behind a new temporary feature flag.
Bug: T305027
Change-Id: I46d240a30eda5a1526ada1fe9b724f7b4594b426
The current default does not work if the extension should be disabled
for the template namespace. See T225753
Should not be merged before the production config is adjusted in
I8be13e0442bc3f7af851f6d1ba8ba9f9011d4907
Bug: T290226
Depends-On: I8be13e0442bc3f7af851f6d1ba8ba9f9011d4907
Change-Id: I630c13f51c87fd801b14c3ada616e7da839240bd
