Commit graph

532 commits

Author SHA1 Message Date
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
jenkins-bot 6cfde8a849 Merge "ve.ui.CodeMirrorAction.v6: Use direction of surface view, not model view" 2024-11-19 05:03:00 +00:00
jenkins-bot 5e6047bd4c Merge "templateFoldingExtension: hide tooltip when typing" 2024-11-19 05:01:46 +00:00
MusikAnimal 2710eade97 ve.ui.CodeMirrorAction.v6: Use direction of surface view, not model view
This fixes an issue where the VE document model is incorrectly used in
computing gutter width based on directionality. It should instead be the
VE surface view's direction, in the event the user the is editing in RTL
on a LTR document. See T374196#10311711.

Bug: T374196
Follow-Up: I81e863e19d6d0bad2cc2be743df896e17a8dc548
Change-Id: Ic37d1004e9606dc2d29d98d29f28743202dd5683
2024-11-18 23:09:16 -05: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
MusikAnimal f4cf12b383 ve.ui.CodeMirror.v6: use DOMRect width when updating gutter width
This fixes some Chromium-specific issues where offsetWidth was rounded
up and could cause misalignment issues. It does not fix all alignment
issues, but should hopefully be an improvement in most cases.

Other changes:
* Add Core VE padding to match CM5 variant (doesn't affect WMF cluster)
* Remove redundant margin rules from VE surface
* Minor code cleanup

Bug: T357482
Change-Id: Ic4246c0b8c39914021bbc2a84d52b332dafec20a
2024-11-05 23:41:06 -05:00
jenkins-bot 0ebd773243 Merge "CodeMirror support for WikiEditor keyboard shortcuts" 2024-11-05 16:12:34 +00:00
bhsd 081f0a17af templateFoldingExtension: hide tooltip when typing
Temporary solution to T367256 before a folding gutter is applied. Hide the folding tooltip when typing, and make the tooltip semi-transparent until hovered.

Bug: T367256
Change-Id: I3ee3de737aa36692d094a54e0eea94d6f5690767
2024-11-02 15:16:16 +08: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
MusikAnimal c4286f2bef ve.ui.CodeMirror.v6: don't auto-flip CSS rules affecting gutter
RTL rules within and around the content need to apply to the content
language, not the interface language, so we want to disable the normal
CSSJanus auto-flipping.

Bug: T357482
Bug: T374196
Change-Id: If0becbf7e0baa61118a22af375be0d107567226d
2024-10-31 16:22:12 -04:00
MusikAnimal 2f4c265ba9 ve.ui.CodeMirror.v6: use view's direction when updating gutter width
I74bcbc46b0 erroneously passed the model's directionality (how it is
saved) and not the view. This caused misalignment issues when changing
directionality.

Bug: T374196
Follow-Up: I74bcbc46b0b62ff2ed138fe57d852a3cd87c22d0
Change-Id: I81e863e19d6d0bad2cc2be743df896e17a8dc548
2024-10-31 00:38:47 -04:00
Siddharth VP bc897f3002 CodeMirror support for WikiEditor keyboard shortcuts
Forward keydown events on the CodeMirror DOM element to the #wpTextbox1
element, on which WikiEditor's handlers are registered.

CM6 support to come later.

Bug: T62928
Depends-On: I18db5b6c53000457524573a9ae06939e8df0dc4f
Change-Id: I0e67f2db6b29636fe25583e926a9fb12a69e3851
2024-10-17 13:55:28 +05:30
jenkins-bot a32d8005ea Merge "Remove $wgCodeMirrorRTL as redundant config setting" 2024-09-19 17:09:17 +00:00
MusikAnimal 5ff54cf7f6 ve.ui.CodeMirror.init: make cm6enable=1 query param work for 2017 editor
Change-Id: I13f31aca84ffd953de31d5ed18c658e9620f72a1
2024-09-04 18:28:02 -04:00
MusikAnimal 021a4723d5 ve.ui.CodeMirror.v6: update gutter width after CM view is updated
This fixes a bug in the 2017 editor implementation where changes to the
gutter width were calculated before the gutter element was updated.
This fix prevents misalignment issues when copying and pasting large
amounts of content.

Bug: T373649
Change-Id: I74bcbc46b0b62ff2ed138fe57d852a3cd87c22d0
2024-09-03 15:45:52 -04:00
MusikAnimal 8e545a27d6 ve.ui.CodeMirror.v6: force a normal font-style
Bug: T357482
Change-Id: I91dd0b745683e316551733e033c0df3a0e3d6a0a
2024-09-03 14:46:41 -04:00
jenkins-bot 87daa30df0 Merge "CodeMirrorWikiEditor: make WikiEditor search button open CM search panel" 2024-09-03 15:59:18 +00:00
jenkins-bot 74aeccf9c6 Merge "Implement dark mode styles and use Codex CSS components in search panel" 2024-09-03 15:59:15 +00:00
MusikAnimal b27c9843b5 Remove $wgCodeMirrorRTL as redundant config setting
This was introduced in Iac30ffe274 to control the rollout of CM6 to RTL
wikis separately from LTR wikis because of various bugs. While RTL still
isn't perfect, it is stable enough now (hewiki has not complained) and
the 2017 editor is also fully supported. Thus, we no longer need this
feature flag.

Bug: T170001
Change-Id: Ia439527aaab07644b358cedf9603cd9d148b6608
2024-08-30 22:03:07 +00:00
MusikAnimal 975db1f6b1 ext.CodeMirror.js: emit deprecation warning when using CM5 on CM6 wiki
If CodeMirror 6 is enabled and a request is made for ext.CodeMirror
(which is a dependency of all CM5 modules), emit a warning. This should
only effect scripts and gadgets on the WMF cluster.

The CM5 ResourceLoader modules will later be tagged as deprecated after
CM6 is rolled out to all WMF wikis.

Bug: T373720
Change-Id: Ia25e896b80766b5b16b9b69343f24557007b5570
2024-08-30 17:47:21 -04:00
MusikAnimal 2abaedf4c3 ve.ui.CodeMirror.v6.less: Use white-space: break-spaces
This is the CodeMirror 6 port of I62cb4c4f55.

Bug: T347902
Change-Id: I198eb125a951ab6dbff41395ff226b0f410fde26
2024-08-29 19:59:17 -04:00
MusikAnimal 43c6e59484 CodeMirrorWikiEditor: make WikiEditor search button open CM search panel
It seems odd to have multiple ways of searching. The CodeMirror
implementation follows modern day UI standards while still offering the
same functionality, so we hijack the search button to use it instead of
the jQuery UI-based WikiEditor search dialog. The dialog is restored if
CodeMirror is switched off.

Bug: T372171
Change-Id: Iab897a17a01b7e04a13a8725afd2eb9e802776ba
2024-08-29 23:19:34 +00: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
jenkins-bot 56f63a0bba Merge "CodeMirrorWikiEditor: use new icon and add text to toggle button" 2024-08-27 04:10:54 +00:00
jenkins-bot 305ef18570 Merge "CodeMirror 6 style for VE 2017 wikitext editor" 2024-08-26 17:44:01 +00:00
bhsd f144dc1051 CodeMirror 6 style for VE 2017 wikitext editor
Styles for CM6 are not supposed to leak into non-CM VE surfaces.

Bug: T373152
Change-Id: I32eea08961fc7b200d4b89d5fedf55b642fa3261
2024-08-24 01:42:08 +08:00
Bartosz Dziewoński e439fb02eb Fix too many '..' in require()
Bug: T373065
Bug: T373153
Change-Id: Ia00add5d98173e2c3d8568e92c427864014e7257
2024-08-22 22:10:38 +00:00
jenkins-bot 05db91241d Merge "CodeMirrorModeMediaWiki: indented table" 2024-08-21 21:09:48 +00:00
MusikAnimal 2ad096a580 ve.ui.CodeMirrorAction.v6: use infinity viewport to avoid misalignment
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
2024-08-20 14:08:04 -04:00
bhsd f23f487028 CodeMirrorModeMediaWiki: indented table
This is a follow-up of the patch 1032770, which misses one type of indented table in the test. It also specifies a unified `cm-mw-indenting` CSS class for all types of table indentation.

Bug: T108454
Change-Id: I77174cf3fa56382add6d80bf2ec7106c9b2cb642
2024-08-15 12:59:13 +08:00
jenkins-bot 75710d6d05 Merge "CodeMirrorModeMediaWiki: various small fixes" 2024-08-15 03:10:01 +00:00
jenkins-bot 2973880c28 Merge "CodeMirror: add Ctrl+Shift+z as redo shortcut on Windows" 2024-08-14 23:10:58 +00:00
jenkins-bot 61d71a5f53 Merge "Use dispatchEvent instead of jQuery triggerHandler for focus/blur events" 2024-08-14 23:10:56 +00:00
jenkins-bot c079dab531 Merge "CodeMirror 6 for VE 2017 wikitext editor" 2024-08-14 08:57:35 +00:00
Taavi Väänänen 7e0d3cf2fd
build: Upgrade stylelint-config-wikimedia to 0.17.2
And convert the disable statements to individual ones so LibUp can
automatically push the next upgrade.

Change-Id: Id5fbfb4ebf4641c7577a4e2be2ab8bae678227c7
2024-08-10 08:03:19 +03: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
MusikAnimal bdb8e008df CodeMirror: add Ctrl+Shift+z as redo shortcut on Windows
This worked in CM5, so we'll retain it in CM6 for those who have the
muscle memory.

Bug: T365072
Change-Id: I4d45ca03773b5140f3e39e15bfba664b577c055d
2024-08-05 15:11:41 -04:00
MusikAnimal f9ecb5b2de Use dispatchEvent instead of jQuery triggerHandler for focus/blur events
triggerHandler will not bubble up the DOM, which is necessary for some
listeners such as Charinsert.

This patch applies the fix to both CodeMirror 5 and CodeMirror 6.

Bug: T361465
Change-Id: I4c01b031de0b19d72b6f2c31566a7f9cc0b02ad8
2024-08-05 13:45:06 -04:00
bhsd 925775778a CodeMirror 6 for VE 2017 wikitext editor
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
2024-08-01 03:15:21 -04:00
bhsd 8ba52cdfcb CodeMirrorModeMediaWiki: various small fixes
This patch fixes a few minor issues in the tokenizer, including indented table (T108454), tag name followed by punctuations (T357720), free external link ending with `~` and `'` (T358643), and Hebrew parser function containing whitespace (T170004).

Bug: T108454
Bug: T357720
Bug: T358643
Bug: T170004
Change-Id: Ib3fff9ea8f9045d885ecfb1dc58c72f5afb8877a
2024-08-01 02:03:17 -04:00
MusikAnimal 7d3482f89e Isolate build step to CM6 library and restructure files to work with RL
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
2024-07-31 22:45:48 -04:00
Sjoerd de Bruin c25da847c2 Apply color inversion until dark syntax styles are chosen
Bug: T365311
Change-Id: I72cf4e5ca776e7fda11b07174493696bfde7fde0
2024-07-27 21:37:47 +00:00
bhsd 0e0e4927ab codemirror.mediawiki.js: add Mod-Shift-x
This patch adds a keyboard shortcut `Mod-Shift-x` to toggle between left-to-right (LTR) and right-to-left (RTL) text directions.

Bug: T170001
Change-Id: Ia857ad0b0aff0bb206b45e4d27dee6e91a3effce
2024-07-20 17:29:09 +08:00
MusikAnimal 08730d2a85 CM5 mediawiki.less: Inherit font color from skin
This is a short-gap measure to make the 2017 editor + dark theme more
readable. Implementing a dark theme for all of the MediaWiki tokens will
come in a future patch.

Bug: T365311
Change-Id: Ie56b88960eb0d27e9a1f821101dfa14af37c0130
2024-06-25 00:43:18 +00:00
Ed Sanders b3316356c0 Remove unnecessary local context variables
Change-Id: If73c0cfca93711003ece3332c9cdc6f3e3fa4944
2024-06-22 10:26:58 +01:00
Ed Sanders f0fb93d3e1 ESLint: Enforce prefer-const
Change-Id: I7f45137a47dddcd2fc70201f28680edce907b522
2024-06-22 10:26:58 +01:00
Ed Sanders 1b101f09ee ESLint: Update syntax to ES6 and autofix
Change-Id: I613cc64a9bf3f375a40f75a1441b83f181a2ab42
2024-06-22 10:26:58 +01:00
Ed Sanders 6958b99f2e build: Update eslint-config-wikimedia to 0.28.2 and autofix
Change-Id: I622f53bf5f56782b7a0529cdc6bb27c1315ff5a0
2024-06-17 13:02:26 +00:00