mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/CodeMirror
synced 2024-11-27 15:40:00 +00:00
13c9eae26e
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
306 lines
6.7 KiB
Plaintext
306 lines
6.7 KiB
Plaintext
@import 'mediawiki.skin.variables.less';
|
|
@import './codemirror.mixins.less';
|
|
|
|
@error-color: @color-destructive;
|
|
@link-color: @color-progressive;
|
|
@parser-function-color: @color-destructive;
|
|
@table-color: #d08;
|
|
@table-color-dark: #ff5edd;
|
|
@template-color: #80c;
|
|
@template-color-dark: #af84e6;
|
|
@template-variable-color: #ac6600;
|
|
@wikitext-formatting-color: @color-progressive--focus;
|
|
@wikitext-formatting-color-dark: @color-progressive--hover;
|
|
@xml-tag-color: @color-content-added;
|
|
@template-background-color: #a11;
|
|
@ext-background-color: #eee;
|
|
@link-background-color: #219;
|
|
@skip-formatting-color: #adf;
|
|
|
|
.ground( @template: 0, @ext: 0, @link: 0 ) {
|
|
@template-shade: fade( @template-background-color, 4% * @template );
|
|
@ext-shade: fade( @ext-background-color, 4% * @ext );
|
|
@link-shade: fade( @link-background-color, 4% * @link );
|
|
background-color: average( average( @template-shade, @ext-shade ), @link-shade );
|
|
}
|
|
|
|
.wikitext-formatting-color {
|
|
color: @wikitext-formatting-color;
|
|
.darkmode( color, @wikitext-formatting-color-dark );
|
|
}
|
|
|
|
.cm-mw-pagename {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.cm-mw-skipformatting {
|
|
background-color: @skip-formatting-color;
|
|
}
|
|
.cm-mw-list,
|
|
.cm-mw-indenting {
|
|
.wikitext-formatting-color();
|
|
font-weight: bold;
|
|
}
|
|
// FIXME: Remove camelCase variant after CM6 upgrade is complete (also check Global Search)
|
|
.cm-mw-doubleUnderscore,
|
|
.cm-mw-double-underscore,
|
|
.cm-mw-signature,
|
|
.cm-mw-hr {
|
|
.wikitext-formatting-color();
|
|
font-weight: bold;
|
|
background-color: @background-color-disabled-subtle;
|
|
}
|
|
|
|
// TODO: Deprecate .cm-mw-mnemonic in favor of -html-entity
|
|
.cm-mw-mnemonic,
|
|
.cm-mw-html-entity {
|
|
color: @xml-tag-color;
|
|
}
|
|
.cm-mw-comment {
|
|
color: @color-subtle;
|
|
font-weight: normal;
|
|
}
|
|
.cm-mw-apostrophes-bold,
|
|
.cm-mw-apostrophes-italic {
|
|
.wikitext-formatting-color();
|
|
}
|
|
.cm-mw-strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
// FIXME: Remove .CodeMirror-line rules after CM6 upgrade
|
|
pre.CodeMirror-line.cm-mw-section-1,
|
|
pre.CodeMirror-line-like.cm-mw-section-1,
|
|
.cm-mw-section-1,
|
|
.cm-mw-section-1 ~ * {
|
|
font-size: 1.8em;
|
|
line-height: 1.2em;
|
|
}
|
|
pre.CodeMirror-line.cm-mw-section-2,
|
|
pre.CodeMirror-line-like.cm-mw-section-2,
|
|
.cm-mw-section-2,
|
|
.cm-mw-section-2 ~ * {
|
|
font-size: 1.5em;
|
|
line-height: 1.2em;
|
|
}
|
|
pre.CodeMirror-line.cm-mw-section-3,
|
|
pre.CodeMirror-line-like.cm-mw-section-3,
|
|
pre.CodeMirror-line.cm-mw-section-4,
|
|
pre.CodeMirror-line-like.cm-mw-section-4,
|
|
pre.CodeMirror-line.cm-mw-section-5,
|
|
pre.CodeMirror-line-like.cm-mw-section-5,
|
|
pre.CodeMirror-line.cm-mw-section-6,
|
|
pre.CodeMirror-line-like.cm-mw-section-6,
|
|
/* TODO: remove overqualified `span` after CM6 upgrade */
|
|
span.cm-mw-section-3 ~ *,
|
|
span.cm-mw-section-4 ~ *,
|
|
span.cm-mw-section-5 ~ *,
|
|
span.cm-mw-section-6 ~ * {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.cm-mw-template {
|
|
color: @template-color;
|
|
font-weight: normal;
|
|
|
|
html.skin-theme-clientpref-night & {
|
|
color: @template-color-dark;
|
|
}
|
|
|
|
@media ( prefers-color-scheme: dark ) {
|
|
html.skin-theme-clientpref-os & {
|
|
color: @template-color-dark;
|
|
}
|
|
}
|
|
}
|
|
|
|
// TODO: deprecate/remove after CM6 upgrade
|
|
.cm-mw-template-name-mnemonic {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.cm-mw-template-name,
|
|
.cm-mw-template-argument-name,
|
|
.cm-mw-template-delimiter,
|
|
.cm-mw-template-bracket {
|
|
color: @template-color;
|
|
font-weight: bold;
|
|
.darkmode( color, @template-color-dark );
|
|
}
|
|
|
|
.cm-mw-templatevariable,
|
|
.cm-mw-templatevariable-bracket {
|
|
color: @template-variable-color;
|
|
font-weight: normal;
|
|
}
|
|
.cm-mw-templatevariable-name,
|
|
.cm-mw-templatevariable-delimiter {
|
|
color: @template-variable-color;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.cm-mw-parserfunction {
|
|
font-weight: normal;
|
|
}
|
|
.cm-mw-parserfunction-name,
|
|
.cm-mw-parserfunction-bracket,
|
|
.cm-mw-parserfunction-delimiter {
|
|
color: @parser-function-color;
|
|
font-weight: bold;
|
|
}
|
|
|
|
pre.CodeMirror-line.cm-mw-exttag,
|
|
pre.CodeMirror-line-like.cm-mw-exttag {
|
|
.ground( @ext: 0.5 );
|
|
}
|
|
.cm-mw-exttag {
|
|
.ground( @ext: 1 );
|
|
}
|
|
.cm-mw-exttag-name,
|
|
.cm-mw-htmltag-name {
|
|
color: @xml-tag-color;
|
|
font-weight: bold;
|
|
}
|
|
.cm-mw-exttag-bracket,
|
|
.cm-mw-exttag-attribute,
|
|
.cm-mw-htmltag-bracket,
|
|
.cm-mw-htmltag-attribute {
|
|
color: @xml-tag-color;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.cm-mw-tag-pre,
|
|
.cm-mw-tag-nowiki,
|
|
pre.CodeMirror-line.cm-mw-tag-pre,
|
|
pre.CodeMirror-line-like.cm-mw-tag-pre,
|
|
pre.CodeMirror-line.cm-mw-tag-nowiki,
|
|
pre.CodeMirror-line-like.cm-mw-tag-nowiki {
|
|
background-color: rgba( 0, 0, 0, 0.04 );
|
|
.darkmode( background-color, rgba( 255, 255, 255, 0.06 ) );
|
|
}
|
|
|
|
.cm-mw-link,
|
|
.cm-mw-link-tosection,
|
|
.cm-mw-section-header {
|
|
.wikitext-formatting-color();
|
|
font-weight: normal;
|
|
}
|
|
.cm-mw-link-pagename,
|
|
.cm-mw-link-bracket,
|
|
.cm-mw-link-delimiter,
|
|
.cm-mw-extlink,
|
|
.cm-mw-free-extlink {
|
|
color: @link-color;
|
|
&:not( .cm-mw-strong ) {
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
.cm-mw-extlink-protocol,
|
|
.cm-mw-free-extlink-protocol,
|
|
.cm-mw-extlink-bracket {
|
|
color: @link-color;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.cm-mw-table-bracket,
|
|
.cm-mw-table-delimiter {
|
|
color: @table-color;
|
|
font-weight: bold;
|
|
.darkmode( color, @table-color-dark );
|
|
}
|
|
.cm-mw-table-definition {
|
|
color: @table-color;
|
|
font-weight: normal;
|
|
.darkmode( color, @table-color-dark );
|
|
}
|
|
.cm-mw-table-caption {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.cm-mw-template2-ground {
|
|
.ground( @template: 1 );
|
|
}
|
|
.cm-mw-template3-ground {
|
|
.ground( @template: 2 );
|
|
}
|
|
.cm-mw-ext-ground,
|
|
.cm-mw-template-ext-ground {
|
|
.ground( @ext: 1 );
|
|
}
|
|
.cm-mw-ext2-ground,
|
|
.cm-mw-template-ext2-ground {
|
|
.ground( @ext: 2 );
|
|
}
|
|
.cm-mw-ext3-ground,
|
|
.cm-mw-template-ext3-ground {
|
|
.ground( @ext: 3 );
|
|
}
|
|
.cm-mw-link-ground,
|
|
.cm-mw-ext-link-ground,
|
|
.cm-mw-template-link-ground {
|
|
.ground( @link: 1 );
|
|
}
|
|
.cm-mw-ext2-link-ground,
|
|
.cm-mw-template-ext-link-ground {
|
|
.ground( @ext: 1, @link: 1 );
|
|
}
|
|
.cm-mw-ext3-link-ground,
|
|
.cm-mw-template-ext2-link-ground {
|
|
.ground( @ext: 2, @link: 1 );
|
|
}
|
|
.cm-mw-template-ext3-link-ground {
|
|
.ground( @ext: 3, @link: 1 );
|
|
}
|
|
|
|
.cm-mw-template2-ext-ground {
|
|
.ground( @template: 1, @ext: 1 );
|
|
}
|
|
.cm-mw-template2-ext2-ground {
|
|
.ground( @template: 1, @ext: 2 );
|
|
}
|
|
.cm-mw-template2-ext3-ground {
|
|
.ground( @template: 1, @ext: 3 );
|
|
}
|
|
.cm-mw-template2-link-ground {
|
|
.ground( @template: 1, @link: 1 );
|
|
}
|
|
.cm-mw-template2-ext-link-ground {
|
|
.ground( @template: 1, @ext: 1, @link: 1 );
|
|
}
|
|
.cm-mw-template2-ext2-link-ground {
|
|
.ground( @template: 1, @ext: 2, @link: 1 );
|
|
}
|
|
.cm-mw-template2-ext3-link-ground {
|
|
.ground( @template: 1, @ext: 3, @link: 1 );
|
|
}
|
|
|
|
.cm-mw-template3-ext-ground {
|
|
.ground( @template: 2, @ext: 1 );
|
|
}
|
|
.cm-mw-template3-ext2-ground {
|
|
.ground( @template: 2, @ext: 2 );
|
|
}
|
|
.cm-mw-template3-ext3-ground {
|
|
.ground( @template: 2, @ext: 3 );
|
|
}
|
|
.cm-mw-template3-link-ground {
|
|
.ground( @template: 2, @link: 1 );
|
|
}
|
|
.cm-mw-template3-ext-link-ground {
|
|
.ground( @template: 2, @ext: 1, @link: 1 );
|
|
}
|
|
.cm-mw-template3-ext2-link-ground {
|
|
.ground( @template: 2, @ext: 2, @link: 1 );
|
|
}
|
|
.cm-mw-template3-ext3-link-ground {
|
|
.ground( @template: 2, @ext: 3, @link: 1 );
|
|
}
|
|
|
|
.cm-mw-error {
|
|
color: @error-color;
|
|
}
|
|
|
|
.cm-mw-em {
|
|
font-style: italic;
|
|
}
|