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
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
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
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
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
A Node script was used to remove the now unused i18n messages.
This same script sorts the messages alphabetically, so it looks
like some unrelated messages were changed, but they weren't.
Bug: T191297
Change-Id: I69cce06133c1d055d31d12ebc8408123c187b574
The popup label was being styled as two words from two different
i18n messages, each a different colour. This combines them into
one, moves the identifing class name up to the outer span, and
colours both words blue (the outer braces are left black).
Bug: T174219
Change-Id: Id1166f48ae4b3b8daff29be56dd92ef330dd9cef
This is the usual practice in MediaWiki and extensions,
for consistency among wikis where pages
are not necessarily articles.
Change-Id: I245b9c79e5de55c2c581f53fb4ae0890c4ff4119
Long-term todo:
* Performance will be poor on large pages due
to using a auto-height textarea which CodeMirror
doesn't optimise.
Change-Id: I16598fcdbeee51e6fae88376ec81f1c8552b383d
Use a message, that explains a bit more, what CodeMirror is and indicate
what the button do exactly.
Change-Id: If8a0a8261cd811407cff4868dcf6475335b3f752
