Commit graph

32 commits

Author SHA1 Message Date
Translation updater bot 4647e415d5
Localisation updates from https://translatewiki.net.
Change-Id: If9ef1cb1ca5feb67ac0c6835090073ca8dde18cd
2024-11-29 08:30:51 +01:00
MusikAnimal 6ad8e6231b Add BetaFeature for CodeMirror 6
Don't list beta feature if $wgCodeMirrorV6 is true

Move all images to new images directory

Bug: T376735
Change-Id: I3ce25cccb7c66fbf5c719e6b704af9c22f405876
2024-11-25 14:03:05 -05:00
MusikAnimal b464df36ab CodeMirrorSearch: catch exceptions from invalid regex input
Invalid regular expressions would error out on SearchQuery's getCursor()
method. This is arguably an upstream bug, but we want to inform the user
of invalid input anyway. We now show "Invalid regular expression" where
the "$1 of $2" codemirror-find-results message is normally shown, and we
add the error class to the Codex input. This is to be consistent with
how the 2017 editor behaves.

Also disable autocompletion which is more often distracting that
helpful for a search field.

Bump codemirror/search to include a fix where the selection isn't
updated after a regex replacement.
See https://discuss.codemirror.net/t/8832

Bug: T371436
Change-Id: I68722da98ef4925439caa64e8f3366031d56cf8e
2024-11-22 19:42:11 +00:00
bhsd 197b5649ff CodeMirrorModeMediaWiki: autocompletion
Autocomplete magic words, tag names and url protocols. This patch also enables block comment using `<!-- -->`.

Bug: T95100
Change-Id: If37da956ac1eb945b96753e6728c0247b1a68b66
2024-11-19 16:02:35 +08:00
MusikAnimal 13c9eae26e CodeMirrorPreferences: add panel to tweak prefs with the editor open
This is toggled by pressing Mod-Shift-, (or Command-Shift-, on MacOS),
which then puts focus on the preferences panel. It can be closed with
the Escape key, just like other CM panels.

The CodeMirror class comes with these extension which can be toggled in
preferences:
* Bracket matching
* Line numbering
* Line wrapping
* Highlight the active line
* Show special characters

Only bracket matching, line numbering, and line wrapping are available
in the 2017 editor.

The bidi isolation and template folding extensions are registered in
CodeMirrorModeMediaWiki as they are MW-specific. CodeMirrorPreferences'
new registerExtension() method allows any consumer of CodeMirror to add
any arbitrary extensions to the preferences panel. This is expected to
be called *after* CodeMirror has finished initializing. The
'ext.CodeMirror.ready' hook now passes the CodeMirror instance to
accommodate this.

The preferences are stored as a single user option in the database,
called 'codemirror-preferences'. The defaults can be configured with the
$wgCodeMirrorDefaultPreferences configuration setting. The
sysadmin-facing values are the familiar boolean, but since CodeMirror is
widely used, we make extra efforts to reduce the storage footprint (see
T54777). This includes only storing preferences that differ from the
defaults, and using binary representation instead of boolean values,
since the user option is stored as a string.

For now, all preferences are ignored in the 2017 editor. In a future
patch, we may add some as toggleable Tools in the VE toolbar.

Other changes:
* Refactor CSS to use a .darkmode() mixin
* Add a method to create a CSS-only fieldset in CodeMirrorPanel
* Fix Jest tests now that there are more calls to mw.user.options.get()
* Adjust Selenium tests to always use CM6
* Adjust Selenium tests to delete test pages (useful for local dev)
* Remove unused code

Bug: T359498
Change-Id: I70dcf2f49418cea632c452c1266440effad634f3
2024-11-18 22:23:22 -05:00
jenkins-bot 140ac0cdb0 Merge "CodeMirrorSearch: add num results and current selection; improve tabbing" 2024-11-01 05:52:50 +00:00
MusikAnimal 3c3050447b CodeMirrorSearch: add num results and current selection; improve tabbing
Just like the 2017 editor, we show the number of results and which one
is currently highlighted.

This patch also brings the Tab behaviour closer to the 2017 editor.
Hitting Tab from the search input focuses the replace input, followed by
the replacement buttons, then the find buttons, then the content
editable. Shift+Tab largely does the reverse, except Shift+Tab from the
editor doesn't bring you to the search panel. Doing this would require a
lot of work for minor benefit, as we'd need to determine which panel to
focus to.

Add basic unit test

Bug: T371436
Change-Id: I968f91320ecb6ab9e9da0994052d33c76f85974b
2024-10-31 18:25:05 -04:00
Translation updater bot 373c16ad38
Localisation updates from https://translatewiki.net.
Change-Id: I8e40b8f629ebf645faabd6df6b9b8b6ca7f27c63
2024-09-04 09:16:12 +02:00
MusikAnimal 81ec0c292a Implement dark mode styles and use Codex CSS components in search panel
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
2024-08-29 18:59:57 -04:00
MusikAnimal 27b6aaebcc CodeMirrorWikiEditor: use new icon and add text to toggle button
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
2024-08-09 06:08:33 +00:00
Translation updater bot b9463a0271 Localisation updates from https://translatewiki.net.
Change-Id: I8dd26764e698ff6d39f29b26e106cabc2b8fbb72
2024-04-12 09:41:43 +02:00
MusikAnimal f3f46d8e05 CM6: Add syntax highlighting preference for users without WikiEditor
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
2024-04-09 22:05:20 -04:00
Translation updater bot 9b01891916 Localisation updates from https://translatewiki.net.
Change-Id: Ibe1f917f664fb1f6adfda1b689a110771867b55e
2024-03-12 08:24:09 +01:00
Translation updater bot e578597263 Localisation updates from https://translatewiki.net.
Change-Id: I3130f67228f31701a7fa1e193566647e9fe520ad
2024-03-11 08:26:33 +01:00
bhsd 506d998767 CodeMirror 6 template folding
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
2024-03-07 13:47:47 +08:00
MusikAnimal 75f5c9b2be CodeMirror: highlight special characters and non-breaking spaces
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
2024-02-13 14:57:06 -05:00
MusikAnimal 5a07eb35db 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-02-13 14:56:23 -05:00
WMDE-Fisch c3cda7edd7 Add colorblind-friendly scheme
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
2022-04-08 14:12:43 +02:00
Translation updater bot b1cfbd5c50 Localisation updates from https://translatewiki.net.
Change-Id: I66cb090f96a74c6ab7f1e3a896a913bdd390745a
2020-04-07 08:37:52 +02:00
Max Semenik 63647bb5dc Remove all BetaFeatures support
Bug: T185030
Change-Id: I1ad451acfd163c783e7b8ec604d8695c14342667
2018-06-13 16:42:40 -07:00
MusikAnimal 7d99bbefde Remove 'Try syntax highlighting' popup for all users
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
2018-04-12 18:22:31 -04:00
Sam Wilson b4b9da7e51 Join the popup label into one message
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
2017-09-11 10:23:22 +08:00
Translation updater bot f68339da7f Localisation updates from https://translatewiki.net.
Change-Id: I2c38ebbaa44057c6c50ca422624dd2dafd183967
2017-09-03 22:14:37 +02:00
Niharika29 99e31d152f Show a popup for first time Codemirror users
Bug: T165003
Change-Id: I545a57bdb273ab6906711e2d65dc029293ecc02a
2017-06-29 00:20:14 +00:00
niharika29 48358c1f57 Add syntax highlight as a beta feature
Bug: T165543
Change-Id: If7eb2dc3f7c00a91e5ca39ae564f63efa07bbead
2017-06-20 05:07:53 +00:00
Ed Sanders de6b08919b Use consistent label for button across editors
Change-Id: I1a299522e95cdb4a6e5bdbdda1c65d4fcec22133
2017-05-08 16:54:10 +01:00
Ed Sanders 7b01a98ad0 VisualEditor source mode support
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
2017-05-08 16:54:10 +01:00
Florian f2c5c5613b Add translateable tooltip message for CodeMirror button
Use a message, that explains a bit more, what CodeMirror is and indicate
what the button do exactly.

Change-Id: If8a0a8261cd811407cff4868dcf6475335b3f752
2015-08-10 17:57:09 +02:00
Translation updater bot 7eab1aadad Localisation updates from https://translatewiki.net.
Change-Id: I0a01f4038fab209e6f33de83cc9c7a3bc089c568
2014-11-05 21:40:21 +01:00
Translation updater bot 0123b51b48 Localisation updates from https://translatewiki.net.
Change-Id: Iac17cc4855f8c556d4c6998fb5575f36571defd3
2014-11-04 23:25:18 +01:00
Translation updater bot bf91cd036e Localisation updates from https://translatewiki.net.
Change-Id: I6ba64c8cc933c013c20651c97d7ef58ec970e091
2014-08-27 21:22:56 +02:00
Pavel Astakhov c8bd7736f9 Initial commit (v 1.0.0)
* add the highlighting of templates and parser functions

Change-Id: I6f5a0aa701b1b4e58510bf17a25eb1a0e1b5f14a
2014-08-20 23:03:46 +06:00