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
WikiEditor's ResizingDragBar makes the editor resizable, so we need to
set the height to 100%. This was attempted in Ib49d1d9e71 and
I4deeda192b but both ultimately suffer from race conditions. Instead
we're setting the height in WikiEditor with Ia5e9767e08.
The heightExtension in the CodeMirror class still remains, in the event
a subclass wishes to override the default behaviour in CM directly and
not with CSS.
Bug: T357794
Depends-On: Ia5e9767e0814eac29d58bc0d9c1023344a29dd84
Change-Id: Ic55dd098d70fd173ddee7100e392b889ee6ddd08
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
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
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
This patch promotes a consistent design decision across projects in
MediaWiki core, extensions, and skins. The darker red color meets the
W3C Web Content Accessibility Guidelines (WCAG) at Level AA that text
or images of text must have a contrast ratio of at least 4.5:1.
Bug: T343239
Change-Id: Id66e6636e2237ae956d3c0e4821e862f875a6e30
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
This patch promotes a consistent design decision across projects in
MediaWiki core, extensions, and skins. The darker red color meets the
W3C Web Content Accessibility Guidelines (WCAG) at Level AA that text
or images of text must have a contrast ratio of at least 4.5:1 (or 3:1
for large text).
Bug: T343239
Change-Id: I1c3a7a91e28a8fe9695531cdfd7be6807d7c8999
Nested templates have background shading relative to their level of
nesting. See the newly added test case as an example. Without these
tokens registered, the styling won't show properly.
Since these tokens aren't referenced directly by the StreamParser, nor
do they have a parent Tag, we don't need them as constants like we do
for other tokens.
Bug: T348019
Change-Id: I87bb99d538344957987b2bd88f902a1427a36522
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
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
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
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
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
This removes the need for a separate init module. Using
`__non_webpack_require__` will force Webpack to compile as `require`
instead of `__webpack_require__`, allowing ResourceLoader to inject the
virtual file.
Change-Id: I00203f4665b49cb92ee9db356445fdc2ab17fc5f
This was preexisting behaviour in CM5 as a rather hidden feature,
and this patch brings it to CM6 keeping it just as hidden. That is,
to have focus in the texatrea, hit Ctrl (or ⌘ on Mac) to insert multiple
cursors, and similarly multiple selections and change their content.
This doesn't actually fix the bug reported at T211205. That may not
even be fixable, since jQuery.textSelection is the interface used to
interact with editors, and it doesn't support multiple selections.
Bug: T211205
Change-Id: I9d4d634c2ba46b909543a0090b871cee4b183fa0
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
Merging `inTableCaptioin` method into `eatTableRow` with an additional parameter so that table caption attributes can be respected. This patch also distinguishes double pipes (`||`) which start a new table cell and single pipe (`|`) which ends the attributes.
Bug: T324374
Change-Id: If2d4600067c587fe0b6a6edb332fd4e55abec607
In the parser, '*', '#', ';' and ':' can actually become nested lists (<ul>, <ol>, <dt> and <dd>) in any possible combinations. This patch does not yet support the `; dt : dd` syntax.
This patch also fixes the 'Unknown highlighting tag undefined' warning.
Bug: T184272
Bug: T170042
Change-Id: I13cc55fadbc9b03fd7c70eab123f7e378d52898d
CSS classes such as `.cm-mw-section-3` are assigned to the `<pre>` elements in CM5 while to the `<span>` elements in CM6. The heading styles for CM6 should not interfere with CM5, at least for now.
Bug: T355290
Change-Id: I47426a8319e67503014f847fba39891bdf42db5b
This is essentially the CM6-style variant of the same code used for
TagModes in CM5. The big difference is in CM6, every tag must be
registered in order to be used. We do this dynamically when
CodeMirrorModeMediaWiki is intantiated. As of this patch only tags
that contain mediawiki (formerly 'text/mediawiki') are supported,
such as <ref>.
The CM6 tag registration surfaced an old bug, now fixed: when using
different capitalization on extension-supplied tags, the CSS class name
used to match that. I.e. <REF> would produce .cm-mw-ext-REF, when it
should be .cm-mw-ext-ref
Also remove the old line-level styles. With I17b1f0b7a6, line-level
styling was added for section headings. Doing the same for tags like
<nowiki> and <pre> isn't as important, and can be addressed later or
not at all.
Add test case for extension tag with no supplied TagMode
Other minor cleanup, including removing old commented out code
Bug: T348684
Change-Id: Ibfff1fc6eacc42b95f557abb40774a65c46ba373
This also necessitated switching to a newer version of
babel-loader that is compatible with Node 18's SSL stack.
Change-Id: Ic9b65ced978fd91a3c0e50ab94cd59556c355ba9
This is merely a CSS hack which seems to work well for me. The only required JS change is to wrap plain text in section heading in a span, the CSS class of which is unused.
Bug: T351686
Change-Id: I17b1f0b7a6fdf9c090309f558349a06ccec4257f
Since <nowiki> and <pre> ignore wikitext, the CM5 implementation
cleverly leveraged the tagModes system so that only HTML entities are
processed. We're effectively doing the same here, only we don't need to
register them as proper TagModes. A FIXME is left to remove the entries
from extension.json after the CM6 upgrade is complete.
Note that line-level styling is still missing, see T351686#9431669.
As a result, multi-line content in a <nowiki> or <pre> may emit JS
warnings, but this is expected until T351686 is resolved.
Bug: T348684
Change-Id: Ia834c4609faf38af3c8f6b791544a7441b5cfb0a
This removes treating an HTML entity in a template name as a separate
token, and thus deprecates the .cm-mw-template-name-mnemonic CSS class.
In CM6 we have to register tokens for them to show, and this one seems
of little use to begin with. HTML entities should always be styled as a
such, especially in page titles where they are treated post-processing.
i.e. [[/dev/null]] links to [[/dev/null]].
The rename to .cm-html-entity and associated code is to better reflect
what it is. $rarr; is a mnemonic form while / is not, but both are
entities. Deprecations are noted in the README, with the old classes
to be removed later after on-wiki usage has been updated.
Bug: T348019
Change-Id: I1184fb5d7d37084c80af1abd5f3cb5f2091b085c
Presumably it was always the intention that tokens with the styles
.cm-mw-page-name AND .cm-mw-em should be both bold and italic in links,
without having the CSS rules override each other. As an example:
'''''[[Bold and italic title]]'''''
Added a note in the README that this will be a new user-facing feature
Change-Id: Iac41e31b7a9cf8683cd5c982c496ff83a092acfb
This merely ports over Ica3fb110ce and Id5e50c2baf to the CM6
stream parser. Also port the test that was added in I7907b4743b
Bug: T292967
Bug: T348019
Follow-Up: Ica3fb110cebb5650f66be321b533ed030e2c9698
Change-Id: I54b1624131ea63f403ebc1f6f900556ca868b7f4
This is more or less a exact port of the old stream parser, with the big
notable change being that all configuration-related code lives in a
separate class, CodeMirrorModeMediaWikiConfig. A smaller change is that
closing HTML tags that are marked as errors now have the ending '>'
character highlighted red, when it didn't before.
Integration with other extensions and modes is saved for a future patch
(T348684). This means <nowiki>, <ref> and other extension-supplied
markup is not yet highlighted.
The entry point for WikiEditor integration is now at
ext.CodeMirror.v6.WikiEditor.init.js, which needs to first require the
virtual file set via the DataScript (PHP) class. This can't be
integrated into the CM6 code because it needs to be precompiled before
ResourceLoader can use it (T281781).
Known issues, to be addressed separately:
* No support for TagModes / PluginModes (T348684)
* Identical adjacent tokens produce excess markup (T352917)
* Section headings do not have line-level styling (T351686)
Bug: T348019
Change-Id: I8f8a81f362bed60dea14ecde9487a2b0c89225e8
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
By default, this feature highlights unmatched brackets when the cursor
is placed over it. This can be disabled, but seems useful so we'll add
it as one of the new features in README and see how users react.
Bug: T348019
Change-Id: Ie6af715e40aeb8217a7c4dfe0c6e6a3dcfa725d5
It's impossible to have a template that has the character { as part
of the name. The real-world example explained in T292967 is the
sequence {{{!}}. The old code detected this as:
* A template that starts with {{
* The template name is {!
* Template ends with }}
New behavior as proposed in this patch:
* A single { with no special meaning
* The parser function {{!}}
Note this is only a very small improvement, but doesn't fully solve
T292967.
Bug: T292967
Change-Id: Ica3fb110cebb5650f66be321b533ed030e2c9698
Variables like {{{foo}}} with 3 brackets typically only appear in
templates. But odd combinations of other features that also start
with 3 brackets are much more common. These should not be detected
as variables.
1. When something starts with 4 or more brackets it's not a variable
but something else. E.g. the start of a template where the template
name is a variable (2 + 3 = 5 brackets).
2. Tables can start with {{{!}}.
Note this doesn't fully solve T292967 but already improves the
situation a lot.
Bug: T108450
Bug: T292967
Change-Id: Id5e50c2bafb35a211d4b63609126c40b32f06a64
This was working before somehow… but according to the CodeMirror docs,
it never syncs with the textarea automatically, so regardless this is
a necessary safeguard at least.
Repro steps:
1) Have CodeMirror turned on
2) Open a page for editing
3) Add content
4) Toggle CodeMirror off
With this patch, it should now always be synced.
Also add selenium test to ensure this doesn't break again.
Bug: T317243
Change-Id: Ie44e62fe5838bf32f40c6a3595ec3f541380cfe1
Since wikEd and DotsSyntaxHighlighter are both popular gadgets in and
outside WMF wikis, they are included in this setting by default.
Change-Id: If6c953858f9cf73024959b5a3b71b33ab7b48b4c
This fixes integration with some consumers of the
'ext.CodeMirror.switch' hook, such as Extension:Disambiguator.
The jQuery element passed to the hook is around the CodeMirror DOM
element which has the jQuery.textSelection() API registered to it.
Bug: T317243
Follow-Up: I2239d2449b2db3b638551f847eb4eff1aafa6276
Change-Id: Iec368613da3c69df52ce5e7ca441c31172cdc5de
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
Move WikiEditor-specific code to ext.CodeMirror.WikiEditor, leaivng only
CodeMirror-specific things in ext.CodeMirror, including the logUsage
method which was duplicated in the VE plugin and now refactored.
Add .env to .gitignore so that selenium tests can be ran more easily
This patch leaves the other non-mediawiki modes still using the
'scripts' system instead of 'packageFiles'. These are not used in
MediaWiki directly but by some extensions (i.e. PhpTags) and using
packageFiles will break that integration.
Bug: T272035
Change-Id: I3bafef196c1f713443d7b8e9cb7dc2891b379f5d
Add core's change handler for CodeMirror changes as well, to
save in-progress edit data.
Depends-On: I32c13c1eeec55dc442b0a00ede9cb74422b0307e
Bug: T342882
Change-Id: I352470752130c7b9b2dfc55a066cecf785d40067
This removes the need for the init module.
Bug: T340751
Depends-On: Ibcc81c90bc9ba6c5fd012c512daf861973b03b2e
Change-Id: Iec3a4c6b00288aee376af47e778c4aa67a98d29b
It makes no difference to directly assign Codex Design System for
Wikimedia colors as values instead of re-assigning the outdated
`@wmui-color-*` variables.
Bump to required MediaWiki core version >= v1.41.0.
Also put stylelint-disable before the block it's actually needed.
Bug: T334934
Change-Id: I5696f160d39ef4edec7a1b966fe7e73608c86bdc
Note that this .match() method is not the one you think it is.
This is StringStream.match() from the CodeMirror lib, not ES
String.match().
Change-Id: Ief5048ff78bcd035482e7a68044e24592d28cb6c
I did some reverse engeneering and derived the three base colors for
nested templates and parser functions as well as links, together with
a formula to calculate any mixture of the three.
You can manually compile the .less file:
lessc resources/mode/mediawiki/mediawiki.less resources/mode/mediawiki/mediawiki.css
Then compare:
git diff --word-diff=color -w HEAD^ -- resources/mode/mediawiki/mediawiki.css
You will see that some numbers change. These are rounding errors in
the old .css code.
Bug: T307188
Change-Id: Ic534a2fac73f9f737ae5238b87aa80b705b37786
Get rid of the flag, without making any substantial changes to the
code. A follow-up commit will merge the CSS into base rules.
Bug: T307188
Change-Id: I601df5047d0db3cfb9559538487d3d39bb6c7cf4
When there are standalone special characters '<', '[', '{', and '~' in the section header, the ending '=' will not be highlighted while the ending characters in the next line are incorrectly highlighted. This is because the ending '=' is eaten as plain text at the end of function eatWikiText(). A less aggressive plain text matching does not hurt.
Bug: T309143
Depends-On: I47dad71df97f38c55550f71baf6dae67dbe0a2ba
Change-Id: I4a9c6c6cb2f7fbc212808e386124a56676fdbfb1
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
Turns out the MediaWiki parser behaves odd when confronted with syntax
like this:
<ref name="a>b"> … </ref>
XML and HTML parsers are usually expected to respect the pair of double
quotes. But our parser doesn't. What it actually does is this:
<ref name="a"> b"> … </ref>
This change makes the syntax highlighter behave the same. This makes it
easier to spot this issue when editing wikitext.
Bug: T270880
Change-Id: I14bdf6630889fb6d0dea53890a693f00d9356f54
Fixes the issue with the change handler not working.
Bug: T303767
Depends-On: Iee4c885f92dd9ec985a3f9fd92a2fafc00f2e9ff
Change-Id: Idb97a67f940eee69e09679196d0de71e76ef3672
A common issue, reported in VPI as Possible Thursday weirdness, with
source editor users using syntax highlighting is that the caret can
often be misplaced as to where the user selects. This PR adds code
to reload CM when loaded to adjust for this behavior.
Moved to after CM has finished initialising. Tested working.
Add another instance of codeMirror.refresh().
Bug: T305333
Change-Id: I9a81ffd41a3ba1321b7b5744ba096583cbb1d96c
Add support for enabling, resizing, and disabling the new
realtime-preview feature.
Bug: T293347
Bug: T303767
Change-Id: I8c8c25fe56be55a61f4b8d1d2ef8cf74483aa241
