diff --git a/extension.json b/extension.json index adb55a9d..98e8eda5 100644 --- a/extension.json +++ b/extension.json @@ -267,7 +267,8 @@ "codemirror.wikieditor.js" ], "messages": [ - "codemirror-toggle-label" + "codemirror-toggle-label", + "codemirror-toggle-label-short" ] }, "ext.CodeMirror.v6.WikiEditor.init": { diff --git a/i18n/en.json b/i18n/en.json index bab86ef5..f8331a09 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -7,6 +7,7 @@ }, "codemirror-desc": "Provides syntax highlighting in wikitext editor", "codemirror-toggle-label": "Syntax highlighting", + "codemirror-toggle-label-short": "Syntax", "codemirror-prefs-summary": "You can learn more about this feature by reading the [https://www.mediawiki.org/wiki/Special:MyLanguage/Help:Extension:CodeMirror help page].", "codemirror-prefs-enable": "Enable syntax highlighting for wikitext", "codemirror-v6-prefs-colorblind": "Use colorblind-friendly scheme", diff --git a/i18n/qqq.json b/i18n/qqq.json index 71599dd4..274f4cd3 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -9,8 +9,9 @@ "pastakhov" ] }, - "codemirror-desc": "{{desc|name=Code Mirror|url=https://www.mediawiki.org/wiki/Extension:CodeMirror}}\n\nAdditional info: Discription of \"Syntax highlighting\" in wiki\n[[mw:Extension:SyntaxHighlight GeSHi]]", + "codemirror-desc": "{{desc|name=Code Mirror|url=https://www.mediawiki.org/wiki/Extension:CodeMirror}}\n\nAdditional info: Description of \"Syntax highlighting\" in wiki\n[[mw:Extension:SyntaxHighlight GeSHi]]", "codemirror-toggle-label": "Title tooltip for button to toggle CodeMirror in the editing toolbar.", + "codemirror-toggle-label-short": "Label shown next to the CodeMirror icon in the editing toolbar. This message should be as brief as possible. {{msg-mw|codemirror-toggle-label}} is the full message, and is shown as the tooltip for the button.", "codemirror-prefs-summary": "Used in [[Special:Preferences]] in the section titled {{msg-mw|prefs-syntax-highlighting}}, at the top as a summary for the whole section.", "codemirror-prefs-enable": "Used in user preferences as label for enabling syntax highlighting.", "codemirror-v6-prefs-colorblind": "Used in user preferences as label for enabling the colorblind-friendly option. This is a shorter version of {{msg-mw|codemirror-prefs-colorblind}} shown under section {{msg-mw|prefs-syntax-highlighting}} on wikis using CodeMirror 6.", diff --git a/package.json b/package.json index c0a9d467..5424a035 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "test:lint:styles": "stylelint \"resources/**/*.less\"", "test:lint:i18n": "banana-checker i18n/", "test:unit": "jest", - "check-built-assets": "{ git status src/ | grep \"nothing to commit, working tree clean\"; } && { echo 'CHECKING BUILD SOURCES ARE COMMITTED' && npm run build && git status resources/lib/ | grep \"nothing to commit, working tree clean\" || { npm run node-debug; false; }; }", + "check-built-assets": "{ git status resources/lib/ | grep \"nothing to commit, working tree clean\"; } && { echo 'CHECKING BUILD SOURCES ARE COMMITTED' && npm run build && git status resources/lib/ | grep \"nothing to commit, working tree clean\" || { npm run node-debug; false; }; }", "node-debug": "node -v && npm -v && echo 'ERROR: Please ensure that production assets have been built with `npm run build` and commited, and that you are using the correct version of Node/NPM.'", "selenium-test": "wdio tests/selenium/wdio.conf.js", "doc": "jsdoc -c jsdoc.json" diff --git a/resources/codemirror.icon.svg b/resources/codemirror.icon.svg new file mode 100644 index 00000000..3eb8c850 --- /dev/null +++ b/resources/codemirror.icon.svg @@ -0,0 +1,7 @@ + + + + highlight + + + diff --git a/resources/codemirror.less b/resources/codemirror.less index 95f9ae84..9a0f8b2f 100644 --- a/resources/codemirror.less +++ b/resources/codemirror.less @@ -1,10 +1,8 @@ +@import 'mediawiki.skin.variables.less'; + .cm-editor { border: 1px solid #c8ccd1; } -// Override for WikiEditor. -.wikiEditor-ui-text .cm-editor { - border: inherit; -} .cm-matchingBracket, .cm-focused .cm-matchingBracket { @@ -33,6 +31,48 @@ height: 100%; } +// Overrides for WikiEditor. + +.wikiEditor-ui-text .cm-editor { + border: inherit; +} + +.cm-mw-toggle-wikieditor { + .oo-ui-icon-syntax-highlight { + background-color: @color-base; + // The SVG is just barely over 300 bytes, and is also only temporary + // until an official icon has been established in Codex/OOUI (T174145). + /* @embed */ + @url: url( codemirror.icon.svg ); + -webkit-mask-image: @url; + mask-image: @url; + -webkit-mask-size: @size-icon-medium; + mask-size: @size-icon-medium; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + } + + &:hover { + background-color: @background-color-interactive; + } + + &.oo-ui-toggleWidget-on { + .oo-ui-labelElement-label { + color: @color-progressive; + } + + .oo-ui-icon-syntax-highlight { + background-color: @color-progressive; + } + } + + &.oo-ui-buttonElement-frameless.oo-ui-labelElement.oo-ui-iconElement:first-child { + margin-left: 0; + } +} + // Hide all buttons except CodeMirror on read only pages (T301615) // This is the same hack that CodeEditor uses to customize the toolbar. // WikiEditor should be updated to better handle read only pages (T188817). diff --git a/resources/codemirror.wikieditor.js b/resources/codemirror.wikieditor.js index 8edb6af6..5fca7e6f 100644 --- a/resources/codemirror.wikieditor.js +++ b/resources/codemirror.wikieditor.js @@ -166,12 +166,18 @@ class CodeMirrorWikiEditor extends CodeMirror { codemirror: { tools: { CodeMirror: { - label: mw.msg( 'codemirror-toggle-label' ), - type: 'toggle', - oouiIcon: 'highlight', - action: { - type: 'callback', - execute: () => this.switchCodeMirror() + type: 'element', + element: () => { + // OOUI has already been loaded by WikiEditor. + const button = new OO.ui.ToggleButtonWidget( { + label: mw.msg( 'codemirror-toggle-label-short' ), + icon: 'syntax-highlight', + value: this.useCodeMirror, + framed: false, + classes: [ 'tool', 'cm-mw-toggle-wikieditor' ] + } ); + button.on( 'change', this.switchCodeMirror.bind( this ) ); + return button.$element; } } }