mediawiki-extensions-CodeEditor/modules/ext.codeEditor.geshi.js

/**
 * This is experimental and does not yet actually save anything back.
 * Has to be manually enabled.
 * Needs some code de-dup with the full-page JS/CSS page editing.
 */

$( function () {
	var $sources = $( '.mw-geshi' );
	if ( $sources.length > 0 ) {
		var setupEditor = function ( $div ) {
			var $link = $( '<a>' )
				.text( mediaWiki.msg( 'editsection' ) )
				.attr( 'href', '#' )
				.attr( 'title', 'Edit this code section' )
				.click( function ( event ) {
					openEditor( $div );
					event.preventDefault();
				} );
			var $edit = $( '<span>' )
				.addClass( 'mw-editsection' )
				.append( '<span class="mw-editsection-bracket">[</span>' )
				.append( $link )
				.append( '<span class="mw-editsection-bracket">]</span>' );
			$div.prepend( $edit );
		};
		var openEditor = function ( $div ) {
			var $main = $div.find( 'div' ),
				geshiLang = null,
				matches = /(?:^| )source-([a-z0-9_-]+)/.exec( $main.attr( 'class' ) );
			if ( matches ) {
				geshiLang = matches[1];
			}
			mediaWiki.loader.using( 'ext.codeEditor.ace.modes', function () {
				// @fixme de-duplicate
				var map = {
					c: 'c_cpp',
					cpp: 'c_cpp',
					clojure: 'clojure',
					csharp: 'csharp',
					css: 'css',
					coffeescript: 'coffee',
					groovy: 'groovy',
					html4strict: 'html',
					html5: 'html',
					java: 'java',
					java5: 'java',
					javascript: 'javascript',
					jquery: 'javascript',
					json: 'json',
					ocaml: 'ocaml',
					perl: 'perl',
					php: 'php',
					python: 'python',
					ruby: 'ruby',
					scala: 'scala',
					xml: 'xml'
				};

				// Disable some annoying commands
				var canon = require( 'pilot/canon' );
				canon.removeCommand( 'replace' );          // ctrl+R
				canon.removeCommand( 'transposeletters' ); // ctrl+T
				canon.removeCommand( 'gotoline' );         // ctrl+L

				var $container = $( '<div>' )
					.attr( 'style', 'top: 32px; left: 0px; right: 0px; bottom: 0px; border: 1px solid gray' )
					.text( $main.text() ); // quick hack :D

				var $label = $( '<label>' ).text( 'Source language: ' );
				var $langDropDown = $( '<select>' );
				$.each( map, function ( geshiLang, aceLang ) {
					var $opt = $( '<option>' )
						.text( geshiLang )
						.val( geshiLang )
						.appendTo( $langDropDown );
				} );
				$langDropDown
					.val( geshiLang )
					.appendTo( $label )
					.change( function ( event ) {
						setLanguage( $( this ).val() );
					} );
				var $save = $( '<button>' )
					.text( mediaWiki.msg( 'savearticle' ) )
					.click( function ( event ) {
						// horrible hack ;)
						var src = codeEditor.getSession().getValue();
						var tag = '<source lang="' + geshiLang + '">' + src + '</source>';

						$.ajax( wgScriptPath + '/api' + wgScriptExtension, {
							data: {
								action: 'parse',
								text: tag,
								format: 'json'
							},
							type: 'POST',
							success: function ( data, xhr ) {
								var $html = $( data.parse.text['*'] );
								$div.replaceWith( $html );
								setupEditor( $html );

								closeEditor();
								event.preventDefault();
							}
						} );
					} );
				var $cancel = $( '<button>' )
					.text( 'Close' ).click( function ( event ) {
						$xcontainer.remove();
						$div.css( 'display', 'block' );
						event.preventDefault();
					} );
				var $controls = $( '<div>' )
					.append( $label )
					.append( $save )
					.append( $cancel );
				var $xcontainer = $( '<div style="position: relative"></div>' )
					.append( $controls )
					.append( $container );
				$xcontainer.width( $main.width() )
					.height( $main.height() * 1.1 + 64 + 32 );

				$div.css( 'display', 'none' );
				$xcontainer.insertAfter( $div );

				var codeEditor = ace.edit( $container[0] );

				var setLanguage = function ( lang ) {
					geshiLang = lang;
					var aceLang = map[geshiLang];
					codeEditor.getSession().setMode( new (require( "ace/mode/" + aceLang ).Mode) );
				};
				setLanguage( geshiLang );

				var closeEditor = function () {
					$xcontainer.remove();
					$div.css( 'display', 'block' );
				};
			} );
		};

		$sources.each( function ( i, div ) {
			var $div = $( div );
			setupEditor( $div );
		} );
	}
} );