jenkins-bot has submitted this change and it was merged.
Change subject: Add CodeMirror for alpha users to better understand wikitext
......................................................................
Add CodeMirror for alpha users to better understand wikitext
Uses CodeMirror with wikitext mode instead of an textarea as an input field
for the user to edit wikitext.
Depends on Extension:CodeMirror and I9763c40835c2edddafb0dcbacdf53a86f663b8cd.
Bug: T91796
Change-Id: I1d5dd5a0896c4f32954d9b948cc21c9406898f45
---
M .jshintrc
M Gruntfile.js
M includes/MobileFrontend.hooks.php
M includes/Resources.php
M javascripts/modules/editor/EditorOverlay.js
A javascripts/modules/editor/EditorOverlayCodeMirror.js
M javascripts/modules/editor/init.js
M templates/modules/editor/content.hogan
8 files changed, 125 insertions(+), 11 deletions(-)
Approvals:
Jdlrobson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/.jshintrc b/.jshintrc
index df30cb2..94a0d01 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -6,6 +6,7 @@
"Hogan": true,
"QUnit": true,
"mw": true,
+ "CodeMirror": true,
"OO": true
},
diff --git a/Gruntfile.js b/Gruntfile.js
index 3db0247..ca2c0ba 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -119,6 +119,7 @@
'jqXHR',
'File',
'mw.user',
+ 'CodeMirror',
'OO.ui.LookupElement',
'OO.EventEmitter'
],
diff --git a/includes/MobileFrontend.hooks.php
b/includes/MobileFrontend.hooks.php
index 5fc3e59..6415fe3 100644
--- a/includes/MobileFrontend.hooks.php
+++ b/includes/MobileFrontend.hooks.php
@@ -372,6 +372,11 @@
'wgMFUploadLicenseLink' => SkinMinerva::getLicenseLink(
'upload' ),
);
+ // add CodeMirror specific things, if it is installed (for
CodeMirror editor)
+ if ( class_exists( 'CodeMirrorHooks' ) ) {
+ $vars += CodeMirrorHooks::getGlobalVariables(
MobileContext::singleton() );
+ $vars['wgMFCodeMirror'] = true;
+ }
return true;
}
@@ -857,12 +862,15 @@
*/
public static function onResourceLoaderRegisterModules( ResourceLoader
&$resourceLoader ) {
self::registerMobileLoggingSchemasModule();
+ $config = MobileContext::singleton()->getMFConfig();
// add VisualEditor related modules only, if VisualEditor seems
to be installed - T85007
if ( class_exists( 'VisualEditorHooks' ) ) {
- $mobileVisualEditorRLmodule =
- MobileContext::singleton()->getMFConfig()->get(
'MobileVEModules' );
- $resourceLoader->register( $mobileVisualEditorRLmodule
);
+ $resourceLoader->register( $config->get(
'MobileVEModules' ) );
+ }
+
+ if ( class_exists( 'CodeMirrorHooks' ) ) {
+ $resourceLoader->register( $config->get(
'MobileCodeMirrorModules' ) );
}
return true;
diff --git a/includes/Resources.php b/includes/Resources.php
index 792e2ba..35b6993 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -1395,6 +1395,21 @@
);
/**
+ * Mobile CodeMirror related modules
+ */
+$wgMobileCodeMirrorModules = array(
+ 'mobile.editor.overlay.codemirror' =>
$wgMFResourceFileModuleBoilerplate + array(
+ 'dependencies' => array(
+ 'mobile.editor.overlay',
+ 'ext.CodeMirror.lib',
+ ),
+ 'scripts' => array(
+ 'javascripts/modules/editor/EditorOverlayCodeMirror.js',
+ ),
+ ),
+);
+
+/**
* Special page modules
* @todo FIXME: Remove the need for these by making more reusable CSS
*
diff --git a/javascripts/modules/editor/EditorOverlay.js
b/javascripts/modules/editor/EditorOverlay.js
index 5ae1b36..e243732 100644
--- a/javascripts/modules/editor/EditorOverlay.js
+++ b/javascripts/modules/editor/EditorOverlay.js
@@ -205,7 +205,7 @@
onStageChanges: function () {
var self = this,
params = {
- text: this.$content.val()
+ text: this.getContent()
};
this.scrollTop = $( 'body' ).scrollTop();
@@ -251,6 +251,25 @@
},
/**
+ * Set content to the user input field.
+ * @param {String} content The content to set.
+ */
+ setContent: function ( content ) {
+ this.$content
+ .show()
+ .val( content )
+ .microAutosize();
+ },
+
+ /**
+ * Returns the content of the user input field.
+ * @return {String}
+ */
+ getContent: function () {
+ return this.$content.val();
+ },
+
+ /**
* Requests content from the API and reveals it in UI.
* @method
* @private
@@ -263,10 +282,7 @@
this.api.getContent()
.done( function ( content ) {
- self.$content
- .show()
- .val( content )
- .microAutosize();
+ self.setContent( content );
self.clearSpinner();
} )
.fail( function ( error ) {
diff --git a/javascripts/modules/editor/EditorOverlayCodeMirror.js
b/javascripts/modules/editor/EditorOverlayCodeMirror.js
new file mode 100644
index 0000000..6bd7e8c
--- /dev/null
+++ b/javascripts/modules/editor/EditorOverlayCodeMirror.js
@@ -0,0 +1,65 @@
+( function ( M, $ ) {
+ var EditorOverlay = M.require( 'modules/editor/EditorOverlay' ),
+ EditorOverlayCodeMirror;
+
+ /**
+ * Overlay that shows an editor
+ * @class EditorOverlayCodeMirror
+ * @extends EditorOverlay
+ */
+ EditorOverlayCodeMirror = EditorOverlay.extend( {
+ templatePartials: $.extend( {},
EditorOverlay.prototype.templatePartials, {
+ content: mw.template.get( 'mobile.editor.overlay',
'content.hogan' )
+ } ),
+
+ /** @inheritdoc **/
+ onInputWikitextEditor: function ( codeMirror ) {
+ this.api.setContent( codeMirror.getValue() );
+ this.$( '.continue, .submit' ).prop( 'disabled', false
);
+ },
+
+ /** @inheritdoc **/
+ setContent: function () {
+ EditorOverlay.prototype.setContent.apply( this,
arguments );
+
+ this.codeMirror = CodeMirror.fromTextArea(
this.$content[0], {
+ mwextFunctionSynonyms: mw.config.get(
'extCodeMirrorFunctionSynonyms' ),
+ mwextTags: mw.config.get( 'extCodeMirrorTags' ),
+ mwextDoubleUnderscore: mw.config.get(
'extCodeMirrorDoubleUnderscore' ),
+ mwextUrlProtocols: mw.config.get(
'extCodeMirrorUrlProtocols' ),
+ mwextMode: mw.config.get(
'extCodeMirrorExtMode' ),
+ styleActiveLine: true,
+ lineWrapping: true,
+ mode: 'text/mediawiki'
+ } );
+ // IE specific code goes here
+ if ( window.navigator.userAgent.indexOf( 'Trident/' ) >
-1 ) {
+ $( '.CodeMirror' ).addClass( 'CodeMirrorIE' );
+ }
+ this.codeMirror.setSize( null, this.$content.height() );
+ this.codeMirror.on( 'change', $.proxy( this,
'onInputWikitextEditor' ) );
+ this.$codeMirror = $( '.CodeMirror' );
+ },
+
+ /** @inheritdoc **/
+ getContent: function () {
+ return this.codeMirror.getValue();
+ },
+
+ /** @inheritdoc **/
+ onStageChanges: function () {
+ this.$codeMirror.hide();
+ EditorOverlay.prototype.onStageChanges.apply( this,
arguments );
+ },
+
+ /** @inheritdoc **/
+ _hidePreview: function () {
+ this.$codeMirror.show();
+ this.codeMirror.refresh();
+ EditorOverlay.prototype._hidePreview.apply( this,
arguments );
+ this.$content.hide();
+ }
+ } );
+
+ M.define( 'modules/editor/EditorOverlayCodeMirror',
EditorOverlayCodeMirror );
+}( mw.mobileFrontend, jQuery ) );
diff --git a/javascripts/modules/editor/init.js
b/javascripts/modules/editor/init.js
index 38bba63..2523c16 100644
--- a/javascripts/modules/editor/init.js
+++ b/javascripts/modules/editor/init.js
@@ -153,8 +153,16 @@
* @method
*/
function loadSourceEditor() {
- loader.loadModule( 'mobile.editor.overlay'
).done( function () {
- var EditorOverlay = M.require(
'modules/editor/EditorOverlay' );
+ var rlModuleName, moduleName;
+ if ( mw.config.get( 'wgMFCodeMirror' ) &&
context.isAlphaGroupMember() ) {
+ moduleName =
'modules/editor/EditorOverlayCodeMirror';
+ rlModuleName =
'mobile.editor.overlay.codemirror';
+ } else {
+ moduleName =
'modules/editor/EditorOverlay';
+ rlModuleName = 'mobile.editor.overlay';
+ }
+ loader.loadModule( rlModuleName ).done(
function () {
+ var EditorOverlay = M.require(
moduleName );
result.resolve( new EditorOverlay(
editorOptions ) );
} );
}
diff --git a/templates/modules/editor/content.hogan
b/templates/modules/editor/content.hogan
index 691957a..2b58821 100644
--- a/templates/modules/editor/content.hogan
+++ b/templates/modules/editor/content.hogan
@@ -1,5 +1,5 @@
<div lang="{{contentLang}}" dir="{{contentDir}}">
- <textarea class="wikitext-editor" cols="40" rows="10"
placeholder="{{placeholder}}"></textarea>
+ <textarea class="wikitext-editor" id="wikitext-editor" cols="40"
rows="10" placeholder="{{placeholder}}"></textarea>
<div class="preview content"></div>
{{#loginUrl}}
<div class="anonwarning content">
--
To view, visit https://gerrit.wikimedia.org/r/195995
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I1d5dd5a0896c4f32954d9b948cc21c9406898f45
Gerrit-PatchSet: 2
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Florianschmidtwelzow <[email protected]>
Gerrit-Reviewer: Florianschmidtwelzow <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Phuedx <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
