Commit graph

11 commits

Author SHA1 Message Date
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