Highlight SQL code in textarea

.gitmodules

@@ -13,3 +13,6 @@
 [submodule "jquery-timepicker"]
 	path = externals/jquery-timepicker
 	url = git://github.com/trentrichardson/jQuery-Timepicker-Addon.git
+[submodule "codemirror"]
+	path = externals/codemirror
+	url = http://marijnhaverbeke.nl/git/codemirror2

adminer/include/editing.inc.php

@@ -106,7 +106,7 @@ function referencable_primary($self) {
 * @return null
 */
 function textarea($name, $value, $rows = 10, $cols = 80) {
-	echo "<textarea name='$name' rows='$rows' cols='$cols' class='sqlarea' spellcheck='false' wrap='off' onkeydown='return textareaKeydown(this, event);'>"; // spellcheck, wrap - not valid before HTML5
+	echo "<textarea name='$name' rows='$rows' cols='$cols' class='sqlarea' spellcheck='false' wrap='off'>"; // spellcheck, wrap - not valid before HTML5
 	if (is_array($value)) {
 		foreach ($value as $val) { // not implode() to save memory
 			echo h($val) . "\n\n\n";

adminer/static/default.css

@@ -40,6 +40,7 @@ pre { margin: 1em 0 0; }
 .options select { width: 20ex; width: auto\9; }
 .active { font-weight: bold; }
 .sqlarea { width: 98%; }
+.CodeMirror { border: 1px solid #777; }
 #menu { position: absolute; margin: 10px 0 0; padding: 0 0 30px 0; top: 2em; left: 0; width: 19em; overflow: auto; overflow-y: hidden; white-space: nowrap; }
 #menu p { padding: .8em 1em; margin: 0; border-bottom: 1px solid #ccc; }
 #content { margin: 2em 0 0 21em; padding: 10px 20px 20px 0; }

adminer/static/editing.js

@@ -1,6 +1,37 @@
 // Adminer specific functions
 
-var jushRoot = '../externals/jush/'; // global variable to allow simple customization
+// global variables to allow simple customization
+var jushRoot = '../externals/jush/';
+var codemirrorRoot = '../externals/codemirror/';
+
+function appendScript(src, onload) {
+	var script = document.createElement('script');
+	script.src = src;
+	script.onload = onload;
+	script.onreadystatechange = function () {
+		if (/^(loaded|complete)$/.test(script.readyState)) {
+			onload();
+		}
+	};
+	document.body.appendChild(script);
+}
+
+function appendStyle(href) {
+	var link = document.createElement('link');
+	link.rel = 'stylesheet';
+	link.type = 'text/css';
+	link.href = href;
+	document.getElementsByTagName('head')[0].appendChild(link);
+}
+
+function codemirrorRun() {
+	var textareas = document.getElementsByTagName('textarea');
+	for (var i=0; i < textareas.length; i++) {
+		if (textareas[i].className == 'sqlarea') {
+			CodeMirror.fromTextArea(textareas[i], { mode: 'text/x-plsql' });
+		}
+	}
+}
 
 /** Load syntax highlighting
 * @param string first three characters of database system version
@@ -10,9 +41,7 @@ function bodyLoad(version) {
 		onpopstate(history);
 	}
 	if (jushRoot) {
-		var script = document.createElement('script');
+		appendScript(jushRoot + 'jush.js', function () {
-		script.src = jushRoot + 'jush.js';
-		script.onload = function () {
 			if (window.jush) { // IE runs in case of an error too
 				jush.create_links = ' target="_blank" rel="noreferrer"';
 				jush.urls.sql_sqlset = jush.urls.sql[0] = jush.urls.sqlset[0] = jush.urls.sqlstatus[0] = 'http://dev.mysql.com/doc/refman/' + version + '/en/$key';
@@ -25,13 +54,16 @@ function bodyLoad(version) {
 				}
 				jush.highlight_tag('code', 0);
 			}
-		};
+		});
-		script.onreadystatechange = function () {
-			if (/^(loaded|complete)$/.test(script.readyState)) {
-				script.onload();
 	}
-		};
+	if (codemirrorRoot) {
-		document.body.appendChild(script);
+		appendStyle(codemirrorRoot + 'lib/codemirror.css');
+		appendStyle(codemirrorRoot + 'mode/plsql/plsql.css');
+		appendScript(codemirrorRoot + 'lib/codemirror.js', function () {
+			if (window.CodeMirror) {
+				appendScript(codemirrorRoot + 'mode/plsql/plsql.js', codemirrorRun);
+			}
+		});
 	}
 }
 

adminer/static/functions.js

@@ -155,41 +155,6 @@ function selectAddRow(field) {
 
 
 
-/** Handle Tab and Esc in textarea
-* @param HTMLTextAreaElement
-* @param KeyboardEvent
-* @return boolean
-*/
-function textareaKeydown(target, event) {
-	if (!event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey) {
-		if (event.keyCode == 9) { // 9 - Tab
-			// inspired by http://pallieter.org/Projects/insertTab/
-			if (target.setSelectionRange) {
-				var start = target.selectionStart;
-				var scrolled = target.scrollTop;
-				target.value = target.value.substr(0, start) + '\t' + target.value.substr(target.selectionEnd);
-				target.setSelectionRange(start + 1, start + 1);
-				target.scrollTop = scrolled;
-				return false; //! still loses focus in Opera, can be solved by handling onblur
-			} else if (target.createTextRange) {
-				document.selection.createRange().text = '\t';
-				return false;
-			}
-		}
-		if (event.keyCode == 27) { // 27 - Esc
-			var els = target.form.elements;
-			for (var i=1; i < els.length; i++) {
-				if (els[i-1] == target) {
-					els[i].focus();
-					break;
-				}
-			}
-			return false;
-		}
-	}
-	return true;
-}
-
 /** Send form by Ctrl+Enter on <select> and <textarea>
 * @param KeyboardEvent
 * @param [string]
@@ -365,6 +330,9 @@ function ajaxSend(url, data, popState) {
 				if (window.jush) {
 					jush.highlight_tag('code', 0);
 				}
+				if (window.CodeMirror) {
+					codemirrorRun();
+				}
 			}
 		}
 	}, data);

changes.txt

@@ -1,4 +1,5 @@
 Adminer 3.3.0-dev:
+Highlight SQL code in textarea
 Append new index with auto index selection (bug #3282127)
 Autocomplete for big foreign keys (Editor)
 Customizable favicon (customization)

compile.php

@@ -267,6 +267,7 @@ foreach (array("adminer", "editor") as $project) {
 	$file = preg_replace('~\\.\\./adminer/static/(default\\.css|functions\\.js|favicon\\.ico)~', '<?php echo ' . $replace . '"; ?>', $file);
 	$file = preg_replace('~\\.\\./adminer/static/([^\'"]*)~', '" . ' . $replace, $file);
 	$file = str_replace("'../externals/jush/'", "location.protocol + '//www.adminer.org/static/'", $file);
+	$file = str_replace("'../externals/codemirror/'", "location.protocol + '//www.adminer.org/static/codemirror/'", $file);
 	$file = preg_replace("~<\\?php\\s*\\?>\n?|\\?>\n?<\\?php~", '', $file);
 	$file = php_shrink($file);
 

externals/codemirror

@@ -0,0 +1 @@
+Subproject commit 68d004c93a391c805fdbb737a9c54296ef9dcdb9

todo.txt

@@ -1,7 +1,6 @@
 Transactions in export
 Create view and routine options
 Variables editation
-Highlight SQL textarea - may use external CodeMirror
 Blob download and image display in edit form (important for Editor with hidden fields in select and SQL command)
 Add title to Logout, edit (in select) and select (in menu) for style "hever"
 Shift-click in checkboxes to select range