Commit graph

32 commits

Author SHA1 Message Date
MusikAnimal 7856e62dea CodeMirror: +rectangularSelection and crosshairCursor as def extensions
These were default in CM5

To be added to the preferences panel once that's a thing (T359498)

Change-Id: I5a8b330444dd2dff0acfbd8e2d429a5b5273cd61
2024-05-21 22:52:08 -04:00
MusikAnimal 0e5fe342d9 CodeMirror: make bracket matching match CJK full-width brackets
This is only done for wikitext because CJK brackets can cause unexpected
errors in other languages.

Bug: T362992
Change-Id: Icf98e8fd7e0392845df2e3b7d3201e7f94f95a3f
2024-05-21 23:17:43 +00:00
jenkins-bot b23a901106 Merge "CM6: Add 'ext.CodeMirror.input' hook; improve code examples" 2024-05-14 01:48:35 +00:00
Taavi Väänänen 5c71833728 build: Update eslint-config-wikimedia to 0.27.0
Change-Id: I71646291ecf6ba22dd5a0e45f44ea54eacfa6bfc
2024-04-24 11:46:59 +00:00
MusikAnimal 2aa6d5c564 CM6: Add 'ext.CodeMirror.input' hook; improve code examples
A 'ext.CodeMirror.input' hook is added to give integrations direct
access to the ViewUpdate object when changes are made in CodeMirror.

Bug: T174811
Change-Id: Idb6166996abb7d64ac8a956f362aea5eda0392bc
2024-04-18 16:33:32 -04:00
MusikAnimal 8aa74b71b8 CodeMirror: fix typo in comments
Follow-Up: I1d40ae4f7dc093f585051d388c70cde151faa5e6
Change-Id: Id281ee6e13ea0eea0942c60594f3fa0ad1e88b3a
2024-04-14 20:06:01 -04: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
MusikAnimal efd6682398 CM6: ensure search panel is in the same direction as the interface lang
We don't have access to the HTML attributes for .cm-panels, so we just
use CSS to set the direction.

Bug: T359611
Change-Id: I1d40ae4f7dc093f585051d388c70cde151faa5e6
2024-04-09 19:20:18 -04:00
MusikAnimal 432e868f2e CodeMirror: copy tabindex attribute from textarea
The Tab key should navigate to the edit summary from the editor, or to
the Realtime Preview pane if it is open.

Change-Id: I7810bfd098f6b9dd5afab9aa534685d3e4166af6
2024-03-26 13:36:18 -04:00
MusikAnimal 6be3bf62f0 CM6: add destroy method, fix removal of textSelection, add more hooks
CodeMirror is meant to be used without WikiEditor, so we add a destroy()
method that does much the same things as CodeMirrorWikiEditor.

The hooks added with this patch aren't used by anything yet, but offer
feature parity with CodeMirrorWikiEditor, which fires the
'ext.CodeMirror.switch' hook. That hook can't be moved for
backwards-compatibility reasons.

The actual fix for T360075 here was to nullify the `textSelection` class
property.

Bug: T360075
Change-Id: Ife6a3f1ef90df66cd1bf8bab33c9ef3b39ed17a0
2024-03-26 13:35:58 -04:00
MusikAnimal d652f3d2a2 CM6: Add jsdoc build step, fix JSDoc annotations, and add @stable tags
There is a known bug with JSDoc and using `export default`. These must
be separate statements for JSDoc to parse properly.
See https://github.com/jsdoc/jsdoc/issues/1132

Update README; change log now lives on the wiki.

Bug: T359986
Depends-On: I58a0766e35eddaf7bebe2c080757bb09963d8555
Change-Id: Ibc2212ef9eab512511b13a99ecc2ccbda8c52ece
2024-03-26 13:35:47 -04:00
MusikAnimal ca02360228 CM6: Switch to using Rollup instead of Webpack; make RL-compatible
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
2024-03-19 22:48:52 -04:00
MusikAnimal 00f947e97f CM6: move bidiIsolation to be part of CodeMirrorModeMediaWiki
The extension is custom built for MediaWiki (i.e. handling of extension
tags like <ref> that aren't HTML tags), so it only makes sense to bundle
it as part of the MediaWiki language mode.

Resultantly, we can no longer check the direction of the textarea where
we enable bidi isolation, because the language mode should have no
knowledge of the textarea. Instead we offer a `config` object (akin to
other language modes offered by CodeMirror), with currently only one
option: `bidiIsolation`. It is the responsibility of the caller to
enable this where desired.

Also make templateFolding and CodeMirrorModeMediaWiki use
`export default` since they both only export one thing.

This commit is in preparation for Ide716247e5, where we need bidi
isolation separated from the CodeMirror class due to its dependency on
CodeMirrorModeMediaConfig.

Bug: T358804
Bug: T214989
Change-Id: If3211bd259bd7833919a627faabd86ae7aa81b53
2024-03-19 22:48:34 -04:00
MusikAnimal b18ded0a13 CM6: move more Extensions to CodeMirror so they don't require WikiEditor
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
2024-03-19 22:48:17 -04:00
MusikAnimal 7e9d90bb52 CM6: put template folding behind feature flag and rework config settings
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
2024-03-14 23:54:39 -04:00
MusikAnimal 911b2d3d46 CodeMirror: add 'dir' and 'lang' attrs to .cm-editor and not .cm-content
Before we were adding these attributes to .cm-content, which didn't
encompass the gutter (line numbers). When you edited a LTR page in a RTL
interface language (or vice versa), the line gutter appeared on the
wrong side, which caused the cursor to be misaligned.

This commit fixes this by applying the direction and language to the
entire editor (.cm-editor), and not just .cm-content. However this means
the search panel could be in the page language when it should be the
interface language. This will be addressed in a follow-up patch.

Other attributes like 'class' that are copied from the textarea must
remain on .cm-content, because the parent .cm-scroller would otherwise
override them.

Bug: T359589
Change-Id: Id805944231fd75c1dc1c336e3cd4c7bc5c42c036
2024-03-13 11:19:16 -04:00
MusikAnimal d927b01ec1 CodeMirror: fix implementation of jQuery.textSelection encapsulate
In Idc0abb64eb we added support for 'encapsulateSelection' and multiple
cursors, but broke other jQuery.textSelection functionality in the
process. In this commit, we move the logic to a dedicated class, and
more fully and accurately mimic the native implementation.

All functionality in WikiEditor should now be supported.

Bug: T359671
Follow-Up: Idc0abb64eb036fa4a60382aca401d1dba1722405
Change-Id: I9b947d80616bd4c4372b981b2271a281d1fc0252
2024-03-11 17:38:20 -04:00
MusikAnimal 63cd3e4ff8 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-03-11 17:35:20 -04:00
MusikAnimal 18a92122ef CodeMirror 6: Add bidi isolation to HTML tags
HTML tags and similar markup may appear jumbled on RTL pages due to the
standard algorithm used for character placement. With this patch, we
detect all tags (HTML or MediaWiki-supplied) and wrap them with
<span class=cm-bidi-isolate>. This CSS class forces the content to be
LTR, making the tags easier to work with on RTL pages.

Bug: T358804
Change-Id: I1338afeefa16102d5cc8fd6c8a236c144e5cf81f
2024-03-11 17:34:41 -04: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 7002bc434d CM6: use textarea height unless WikiEditor's Realtime Preview is loaded
The ResizingDragBar makes the editor resizable, so we need to set the
CodeMirror height to 100%. This only happens when the Realtime Preview
module is loaded.

This fixes a critical issue introduced by I4deeda192b that caused blank
renderings when scrolling large documents.

Bug: T357794
Follow-Up: I4deeda192bdc233101ba61739a636f8fd143c1de
Change-Id: Ib49d1d9e71df3653b13dfd44a8efedbf1ef9cd93
2024-03-04 17:41:04 -05:00
bhsd e4eb2846c9 fix scroll behavior of CodeMirror 6
Previously, the CM6 editor always scrolls into view, which is annoying during preview. With this patch, the CM6 editor only scrolls to the selection while the whole webpage does not scroll. In addition, the editor's scroll position will be memorized when previewing.

This patch requires an update of the @codemirror/view package.

Bug: T212899
Bug: T254962
Change-Id: I7f5e4694fa55c380958fa60ff6b3341bea1d2f02
2024-03-01 13:01:11 +08:00
MusikAnimal c9c9ed27d3 CodeMirror: default to using the same height as the textarea
CodeMirrorWikiEditor: add a 'ext.CodeMirror.initialize' hook to allow
integrations to manipulate the DOM before CodeMirror is initialized.

This is necessary for ProofreadPage, for example (I5c0824bf38cf7).

Bug: T357794
Change-Id: I4deeda192bdc233101ba61739a636f8fd143c1de
2024-02-26 14:22:33 -05:00
MusikAnimal 657ba3648a CodeMirror: sync text editor font preference
This only effects users of the CM6 CodeMirror class, so doesn't (yet)
solve the issue for the 2017 editor which is partly what T245568 is for.

I135bf0f7bf supposedly fixed it for the 2010 editor, but that fix
apparently doesn't work anymore, and thus those styles have simply been
removed (the .CodeMirror element is never a child of the edit font
classes).

This change also incidentally fixes font sizing issues by ensuring the
styles are applied to `.cm-content` and not `.cm-editor`. This prior bug
was most notably visible in other skins such as Timeless and Monobook.
The colorblind CSS class is now applied in the same way using the
EditorView.contrentAttributes facet.

Bug: T245568
Change-Id: Iaaf65e47ce8ed9303147aadc7e18a9aaa051405b
2024-02-25 23:08:38 -05:00
MusikAnimal 26d5023bb7 CodeMirror: partially implement $.textSelection 'encapsulateSelection'
Popular extensions like Charinsert use this method to wrap text around a
selection. This patch adds support for multiple selections in CM6.

Some options to encapsulateSelection do not yet have explicit support
here, such as 'peri', but it's unclear if they are truly needed.

Bug: T211205
Change-Id: Idc0abb64eb036fa4a60382aca401d1dba1722405
2024-02-16 04:42:14 +00:00
MusikAnimal 5fe4ab8d58 CodeMirror: load colorblind theme when preference is set
This is only done for wikitext, as the stylesheet only references
.cm-mw-* classes.

Change-Id: I15a82c7680a12fb10baff4a2e78626677536c291
2024-02-13 14:57:42 -05: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
MusikAnimal c1af5e11e0 CodeMirror: add stability flags and document properties
These methods will be used by other modes and/or extensions,
and as per the frontend stable interface policy, they should
be marked as stable.

Also permit callers to pass in a HTMLTextAreaElement, jQuery
object, or a CSS query string.

Change-Id: Iec57bf8fe4086faf57b3cc10834baaa27af80b85
2023-12-13 01:19:34 -05:00
MusikAnimal 65b864588b Enable support for RTL when using CodeMirror 6
Refactor common contentAttributes Facet into a default Extension

Bug: T170001
Change-Id: I648bac617b5939c1fc4e115144e55a5cb77d6d66
2023-10-17 20:33:01 -04:00
MusikAnimal d1cb5a0d01 CodeMirror: fix scrollToCaretPosition $.textSelection implementation
Add selenium tests for textSelection API.

Bug: T317243
Change-Id: I0904a715698aa235fb0744cbc4ff0f9787387592
2023-10-11 01:25:10 -04:00
MusikAnimal 880c690a10 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-10-09 19:51:24 -04:00