Update for 3.4.5

issue-69: invalidates changes before editor content is replaced

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "Mergely",
-  "version": "3.3.9",
+  "version": "3.4.3",
   "homepage": "https://github.com/wickedest/Mergely",
   "description": "Merge and diff documents online",
   "main": [
@@ -29,7 +29,8 @@
     "url": "git://github.com/wickedest/Mergely"
   },
   "dependencies": {
+    "mergely": "https://github.com/wickedest/Mergely.git#3.4.3",
     "jquery": "<=2.1.3",
-    "codemirror": "<=4.6.0"
+    "codemirror": "<=5.11.0"
   }
 }

doc/index.html

@@ -60,7 +60,7 @@
 				<p>
 					Then, create a div for the editor:
 				</p>
-				<pre class="code">&lt;div id="compare"&gt;&lt;div&gt;</pre>
+				<pre class="code">&lt;div id="compare"&gt;&lt;/div&gt;</pre>
 				<p>
 					Then, initialize the 'compare' div with the mergely jquery plugin, setting
 					options as required:
@@ -110,6 +110,8 @@ $(document).ready(function () {
 					<dd>Ignore white-space. Defaults to <span class="code">false</span>.</dd>
 					<dt id="lcs">lcs</dt>
 					<dd>Enables/disables LCS computation for paragraphs (word-by-word changes).  Disabling can give a performance gain for large documents. Defaults to <span class="code">true</span>.</dd>
+					<dt id="line_numbers">line_numbers</dt>
+					<dd>Enables/disables line numbers.  Enabling line numbers will toggle the visibility of the line number margins. Defaults to <span class="code">true</span>.</dd>
 					<dt id="resize_timeout">resize_timeout</dt>
 					<dd>The timeout, after a resize, before Mergely auto-resizes.  Only used when autoresize enabled.  Defaults to <span class="code">500</span>.</dd>
 					<dt id="rhs_margin">rhs_margin</dt>
@@ -120,6 +122,8 @@ $(document).ready(function () {
 					<dd>The margin/viewport indicator color.  Defaults to <span class="code">'rgba(0, 0, 200, 0.5)'<span></dd>
 					<dt id="viewport">viewport</dt>
 					<dd>Enables/disables the viewport.  Enabling the viewport can give a performance gain for large documents. Defaults to <span class="code">false</span>.</dd>
+					<dt id="wrap_lines">wrap_lines</dt>
+					<dd>Enables/disables line wrapping.  Enabling wrapping will wrap text to fit the editors. Defaults to <span class="code">false</span>.</dd>
 				</dl>
 				
 				<h2>Callbacks</h2>

editor/editor.js

@@ -4,8 +4,12 @@ $(document).ready(function() {
 		window.location.search.substr(1).split('&').forEach(function(pair) {
 			if (pair === '') return;
 			var parts = pair.split('=');
-			if (parts[1] == 'true') parameters[parts[0]] = true;
-			else if (parts[1] == 'false') parameters[parts[0]] = false;
+			if (parts.length === 2 && parts[1].search(/^(true|1)$/i) >= 0) {
+				parameters[parts[0]] = true;
+			}
+			else if (parts.length === 2 && parts[1].search(/^(false|0)$/i) >= 0) {
+				parameters[parts[0]] = false;
+			}
 			else parameters[parts[0]] = parts[1] && decodeURIComponent(parts[1].replace(/\+/g, ' '));
 		});
 		return {
@@ -82,6 +86,9 @@ $(document).ready(function() {
 		return randomstring;
 	}
 
+	// body is pre-hidden for better rendering
+	$('body').css("visibility", "");
+
 	var ed = $('#mergely');
 	var menu = $('#main-menu');
 	var toolbar = $('#toolbar');
@@ -101,6 +108,57 @@ $(document).ready(function() {
 		var url = parameters.get('rhs');
 		crossdomainGET(ed, 'rhs', url);
 	}
+
+	// set query string options
+	var urloptions = {};
+	var optmap = {
+		au: 'autoupdate',
+		ws: 'ignorews',
+		cs: 'ignorecase',
+		sb: 'sidebar',
+		vp: 'viewport',
+		wl: 'wrap_lines',
+		ln: 'line_numbers'
+	};
+	var doopt = false;
+	for (var name in optmap) {
+		if (!optmap.hasOwnProperty(name)) continue;
+		if (parameters.get(name, null) !== null) {
+			urloptions[optmap[name]] = parameters.get(name);
+			doopt = true;
+		}
+	}
+	if (parameters.get('rm', null) !== null) {
+		// special-case url property
+		urloptions.rhs_margin = parameters.get('rm') ? 'left' : 'right';
+	}
+	if (doopt) {
+		// apply query-string options
+		ed.mergely('options', urloptions);
+	}
+
+	// set query string colors
+	// cb: change border
+	// cg: change background
+	// ab: added border
+	// ag: added background
+	// db: deleted border
+	// dg: deleted background
+	var color_defaults = {
+		cb: 'cccccc', cg: 'fafafa',
+		ab: 'a3d1ff', ag: 'ddeeff',
+		db: 'ff7f7f', dg: 'ffe9e9'
+	};
+	applyParameterCss(false);
+
+	//history.pushState({}, null, '');
+
+	window.addEventListener('popstate', function(ev) {
+		if (ev.state) {
+			parameters = getParameters();
+			applyParameterCss(false);
+		}
+	});
 	
 	// Load
 	if (key.length == 8) {
@@ -131,7 +189,7 @@ $(document).ready(function() {
 				// if an anchor has been provided, then parse the anchor in the
 				// form of: 'lhs' or 'rhs', followed by a line, e.g: lhs100.
 				var m = anchor.match(/([lr]hs)([0-9]+)/);
-				if (m.length == 3) {
+				if (m && m.length == 3) {
 					console.log(m);
 					ed.mergely('scrollTo', m[1], parseInt(m[2],10));
 				}
@@ -150,36 +208,74 @@ $(document).ready(function() {
 	var iconconf = {
 		'options-autodiff': {
 			get: function() { return ed.mergely('options').autoupdate },
-			set: function(value) { ed.mergely('options', {autoupdate: !ed.mergely('options').autoupdate}); }
+			set: function(value) {
+				var au = !ed.mergely('options').autoupdate;
+				ed.mergely('options', {autoupdate: au});
+				var params = updateQueryStringParam('au', au ? 1 : 0, 1);
+				updateHistory(params);
+			}
 		},
 		'options-ignorews': {
 			get: function() { return ed.mergely('options').ignorews },
-			set: function(value) { ed.mergely('options', {ignorews: !ed.mergely('options').ignorews}); }
+			set: function(value) {
+				var ws = !ed.mergely('options').ignorews;
+				ed.mergely('options', {ignorews: ws});
+				var params = updateQueryStringParam('ws', ws ? 1 : 0, 0);
+				updateHistory(params);
+			}
+		},
+		'options-ignorecase': {
+			get: function() { return ed.mergely('options').ignorecase },
+			set: function(value) {
+				var cs = !ed.mergely('options').ignorecase;
+				ed.mergely('options', {ignorecase: cs});
+				var params = updateQueryStringParam('cs', cs ? 1 : 0, 0);
+				updateHistory(params);
+			}
 		},
 		'options-sidebars': {
 			get: function() { console.log('sidebar', this); return ed.mergely('options').sidebar },
-			set: function(value) { ed.mergely('options', {sidebar: !ed.mergely('options').sidebar}); }
+			set: function(value) {
+				var sb = !ed.mergely('options').sidebar;
+				ed.mergely('options', {sidebar: sb});
+				var params = updateQueryStringParam('sb', sb ? 1 : 0, 1);
+				updateHistory(params);
+			}
 		},
 		'options-viewport': {
 			get: function() { console.log('viewport', this); return ed.mergely('options').viewport },
-			set: function(value) { ed.mergely('options', {viewport: !ed.mergely('options').viewport}); }
+			set: function(value) {
+				var vp = !ed.mergely('options').viewport;
+				ed.mergely('options', {viewport: vp});
+				var params = updateQueryStringParam('vp', vp ? 1 : 0, 0);
+				updateHistory(params);
+			}
 		},
 		'options-swapmargin': {
 			get: function() { return (ed.mergely('options').rhs_margin == 'left'); },
-			set: function(value) { ed.mergely('options', {rhs_margin: ed.mergely('options').rhs_margin == 'left' ? 'right' : 'left' }); }
+			set: function(value) {
+				var rm = ed.mergely('options').rhs_margin == 'left' ? 'right' : 'left';
+				ed.mergely('options', {rhs_margin: rm });
+				var params = updateQueryStringParam('rm', rm == 'left' ? 1 : 0, 0);
+				updateHistory(params);
+			}
 		},
 		'options-linenumbers': {
-			get: function() { return ed.mergely('cm', 'lhs').getOption('lineNumbers'); },
+			get: function() { console.log('wrap', this); return ed.mergely('options').line_numbers },
 			set: function(value) {
-				ed.mergely('cm', 'lhs').setOption('lineNumbers', value);
-				ed.mergely('cm', 'rhs').setOption('lineNumbers', value);
+				var ln = !ed.mergely('options').line_numbers;
+				ed.mergely('options', {line_numbers: ln});
+				var params = updateQueryStringParam('ln', ln ? 1 : 0, 1);
+				updateHistory(params);
 			}
 		},
 		'options-wrap': {
-			get: function() { return ed.mergely('cm', 'lhs').getOption('lineWrapping'); },
+			get: function() { console.log('wrap', this); return ed.mergely('options').wrap_lines },
 			set: function(value) {
-				ed.mergely('cm', 'lhs').setOption('lineWrapping', value);
-				ed.mergely('cm', 'rhs').setOption('lineWrapping', value);
+				var wl = !ed.mergely('options').wrap_lines;
+				ed.mergely('options', {wrap_lines: wl});
+				var params = updateQueryStringParam('wl', wl ? 1 : 0, 0);
+				updateHistory(params);
 			}
 		},
 		'edit-left-readonly': {
@@ -262,6 +358,7 @@ $(document).ready(function() {
 			'options-swapmargin',
 			'options-viewport',
 			'options-ignorews',
+			'options-ignorecase',
 			'options-wrap',
 			'options-linenumbers',
 			].indexOf(id) >= 0) {
@@ -482,21 +579,21 @@ $(document).ready(function() {
 	}
 	function colorSettings(ed) {
 		// get current settings
-		var sd = $('<span style="display:none" class="mergely ch d lhs">C</span>');
+		var sd = $('<span style="display:none" class="mergely ch d lhs start end">C</span>');
 		var sa = $('<span style="display:none" class="mergely bg a rhs start end">C</span>');
 		var sc = $('<span style="display:none" class="mergely c rhs start end">C</span>');
 		$('body').append(sd);
 		$('body').append(sa);
 		$('body').append(sc);
 		var conf = {
-			'c-border': {id: '#c-border', defaultColor: '#cccccc', getColor: function() { return sc.css('border-top-color'); }, setColor: function(color) { $('#'+this.id).val(color) }},
-			'c-bg': 	{id: '#c-bg', 	  defaultColor: '#fafafa', getColor: function() { return sc.css('background-color'); }, setColor: function(color) { $('#'+this.id).val(color) }},
-			'a-border': {id: '#a-border', defaultColor: '#a3d1ff', getColor: function() { return sa.css('border-top-color'); }, setColor: function(color) { $('#'+this.id).val(color) }},
-			'a-bg': 	{id: '#a-bg', 	  defaultColor: '#ddeeff', getColor: function() { return sa.css('background-color'); }, setColor: function(color) { $('#'+this.id).val(color) }},
-			'd-border': {id: '#d-border', defaultColor: '#ff7f7f', getColor: function() { return sd.css('border-top-color'); }, setColor: function(color) { $('#'+this.id).val(color) }},
-			'd-bg': 	{id: '#d-bg', 	  defaultColor: '#edc0c0', getColor: function() { return sd.css('background-color'); }, setColor: function(color) { $('#'+this.id).val(color) }}
+			'c-border': {id: '#c-border', getColor: function() { return sc.css('border-top-color'); }, setColor: function(color) { $('#'+this.id).val(color) }},
+			'c-bg': 	{id: '#c-bg', 	  getColor: function() { return sc.css('background-color'); }, setColor: function(color) { $('#'+this.id).val(color) }},
+			'a-border': {id: '#a-border', getColor: function() { return sa.css('border-top-color'); }, setColor: function(color) { $('#'+this.id).val(color) }},
+			'a-bg': 	{id: '#a-bg', 	  getColor: function() { return sa.css('background-color'); }, setColor: function(color) { $('#'+this.id).val(color) }},
+			'd-border': {id: '#d-border', getColor: function() { return sd.css('border-top-color'); }, setColor: function(color) { $('#'+this.id).val(color) }},
+			'd-bg': 	{id: '#d-bg', 	  getColor: function() { return sd.css('background-color'); }, setColor: function(color) { $('#'+this.id).val(color) }}
 		};
-		$.each(conf, function(key, item){ $(item.id).val(item.getColor()); });
+		$.each(conf, function(key, item){$(item.id).val(item.getColor()); });
 		var f = $.farbtastic('#picker');
 		$('.colorwell').each(function(){ f.linkTo(this); }).focus(function(){
 			var tthis = $(this);
@@ -515,28 +612,8 @@ $(document).ready(function() {
 					var abg = $('#a-bg').val();
 					var dbg = $('#d-bg').val();
 					var cbg = $('#c-bg').val();
-					var text =
-						'.mergely.a.rhs.start { border-top: 1px solid ' + aborder + '; }\n\
-						.mergely.a.lhs.start.end,\n\
-						.mergely.a.rhs.end { border-bottom: 1px solid ' + aborder + '; }\n\
-						.mergely.a.rhs { background-color: ' + abg + '; }\n\
-						.mergely.d.lhs { background-color: ' + dbg + '; }\n\
-						.mergely.d.lhs.end,\n\
-						.mergely.d.rhs.start.end { border-bottom: 1px solid ' + dborder + '; }\n\
-						.mergely.d.rhs.start.end.first { border-bottom: 0; border-top: 1px solid ' + dborder + '; }\n\
-						.mergely.d.lhs.start { border-top: 1px solid ' + dborder + '; }\n\
-						.mergely.c.lhs,\n\
-						.mergely.c.rhs { background-color: ' + cbg + '; }\n\
-						.mergely.c.lhs.start,\n\
-						.mergely.c.rhs.start { border-top: 1px solid ' + cborder + '; }\n\
-						.mergely.c.lhs.end,\n\
-						.mergely.c.rhs.end { border-bottom: 1px solid ' + cborder + '; }\n\
-						.mergely.ch.a.rhs { background-color: ' + abg + '; }\n\
-						.mergely.ch.d.lhs { background-color: ' + dbg + '; text-decoration: line-through; color: #888; }';
-					$('<style type="text/css">' + text + '</style>').appendTo('head');
-					ed.mergely('options', {
-						fgcolor:{a:aborder,c:cborder,d:dborder}
-					});
+					var textCss = makeColorCss(cborder, cbg, aborder, abg, dborder, dbg);
+					applyColorCss(textCss, cborder, cbg, aborder, abg, dborder, dbg, true);
 				},
 				Reset: function() {
 				},
@@ -546,4 +623,81 @@ $(document).ready(function() {
 			}
 		});
 	}
+	function makeColorCss(changeBorder, changeBackground, addedBorder, addedBackground, deletedBorder, deletedBackground) {
+		var text =
+			'.mergely.a.rhs.start{border-top-color:' + addedBorder + ';}\n\
+			.mergely.a.lhs.start.end,\n\
+			.mergely.a.rhs.end{border-bottom-color:' + addedBorder + ';}\n\
+			.mergely.a.rhs{background-color:' + addedBackground + ';}\n\
+			.mergely.d.lhs{background-color:' + deletedBackground + ';}\n\
+			.mergely.d.lhs.end,\n\
+			.mergely.d.rhs.start.end{border-bottom-color:' + deletedBorder + ';}\n\
+			.mergely.d.rhs.start.end.first{border-top-color:' + deletedBorder + ';}\n\
+			.mergely.d.lhs.start{border-top-color:' + deletedBorder + ';}\n\
+			.mergely.c.lhs,\n\
+			.mergely.c.rhs{background-color:' + changeBackground + ';}\n\
+			.mergely.c.lhs.start,\n\
+			.mergely.c.rhs.start{border-top-color:' + changeBorder + ';}\n\
+			.mergely.c.lhs.end,\n\
+			.mergely.c.rhs.end{border-bottom-color:' + changeBorder + ';}\n\
+			.mergely.ch.a.rhs{background-color:' + addedBackground + ';}\n\
+			.mergely.ch.d.lhs{background-color:' + deletedBackground + ';color: #888;}';
+		return text;
+	}
+	function applyParameterCss(saveState) {
+		var cb = '#' + parameters.get('cb',color_defaults.cb),
+			cg = '#' + parameters.get('cg',color_defaults.cg),
+			ab = '#' + parameters.get('ab',color_defaults.ab),
+			ag = '#' + parameters.get('ag',color_defaults.ag),
+			db = '#' + parameters.get('db',color_defaults.db),
+			dg = '#' + parameters.get('dg',color_defaults.dg);
+		applyColorCss(makeColorCss(cb, cg, ab, ag, db, dg), cb, cg, ab, ag, db, dg, saveState);
+	}
+	function applyColorCss(cssText, changeBorder, changeBackground, addedBorder, addedBackground, deletedBorder, deletedBackground, saveState) {
+		$('<style type="text/css">' + cssText + '</style>').appendTo('head');
+		ed.mergely('options', {
+			fgcolor:{a:addedBorder,c:changeBorder,d:deletedBorder}
+		});
+		var params = updateQueryStringParam('cb', changeBorder.replace(/#/g, ''), color_defaults.cb);
+		params = updateQueryStringParam('cg', changeBackground.replace(/#/g, ''), color_defaults.cg, params);
+		params = updateQueryStringParam('ab', addedBorder.replace(/#/g, ''), color_defaults.ab, params);
+		params = updateQueryStringParam('ag', addedBackground.replace(/#/g, ''), color_defaults.ag, params);
+		params = updateQueryStringParam('db', deletedBorder.replace(/#/g, ''), color_defaults.db, params);
+		params = updateQueryStringParam('dg', deletedBackground.replace(/#/g, ''), color_defaults.dg, params);
+
+		if (saveState) {
+			updateHistory(params);
+		}
+	}
+	function updateHistory(params) {
+		var baseUrl = [location.protocol, '//', location.host, location.pathname].join('');
+		window.history.pushState({}, null, baseUrl + params);
+	}
+	// Explicitly save/update a url parameter using HTML5's replaceState().
+	function updateQueryStringParam(key, value, defaultValue, urlQueryString) {
+		urlQueryString = urlQueryString || document.location.search;
+		var parts = urlQueryString.replace(/^\?/, '').split(/&/), found = false;
+		for (var i in parts) {
+			if (parts[i].startsWith(key + '=')) {
+				found = true;
+				if (value === defaultValue) {
+					// value is default value, remove option
+					parts.splice(i, 1);
+				}
+				else {
+					// make new value
+					parts[i] = key + '=' + value;
+				}
+				break;
+			}
+			else if (parts[i].length === 0) {
+				parts.splice(i, 1);
+				break;
+			}
+		}
+		if (!found) {
+			parts.push(key + '=' + value);
+		}
+		return (parts.length) ? '?' + parts.join('&') : '';
+	}
 });

editor/editor.php

@@ -4,20 +4,24 @@ $debug = False;
 if (isset($_GET['key'])) {
 	$key = $_GET['key'];
 }
+if (isset($_GET['debug'])) {
+    $debug = filter_var($_GET['debug'], FILTER_VALIDATE_BOOLEAN);
+}
 ?>
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="utf-8" /><title>Mergely - Diff online, merge documents</title>
-	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
+	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 	<meta name="description" content="Merge and Diff your documents with diff online and share" />
 	<meta name="keywords" content="diff,merge,compare,jsdiff,comparison,difference,file,text,unix,patch,algorithm,saas,longest common subsequence,diff online" />
 	<meta name="author" content="Jamie Peabody" />
-	<link rel="shortcut icon" href="http://www.mergely.com/favicon.ico" />
+	<link rel="shortcut icon" href="/favicon.ico" />
 	<link rel="canonical" href="http://www.mergely.com" />
     <link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css' />
-	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
-	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
+    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
+    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
+
 	<link type="text/css" rel="stylesheet" href="/style/mergely-theme/jquery-ui-1.10.1.custom.css" />
     <link type='text/css' rel='stylesheet' href='/Mergely/editor/lib/wicked-ui.css' />
 	<script type="text/javascript" src="/Mergely/editor/lib/wicked-ui.js"></script>
@@ -48,8 +52,8 @@ if (isset($_GET['key'])) {
 	<script type="text/javascript" src="/Mergely/lib/searchcursor.js"></script>
 
 	<script type="text/javascript">
-        var key = '<?php echo $key; ?>';
-        var isSample = key == '4qsmsDyb';
+        var key = '<?php echo htmlspecialchars($key, ENT_QUOTES, 'UTF-8'); ?>';
+        var isSample = key == 'usaindep';
     </script>
     
     <!-- analytics -->
@@ -67,7 +71,7 @@ if (isset($_GET['key'])) {
     <!-- google +1 -->
 	<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
 </head>
-<body>
+<body style="visibility:hidden">
 <div id="fb-root"></div><script>(function(d, s, id) {
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) return;
@@ -77,7 +81,7 @@ if (isset($_GET['key'])) {
 }(document, 'script', 'facebook-jssdk'));</script>
 
 
-    <div id="banner"></div>
+    <a href="/"><div id="banner"></div></a>
     
     <!-- menu -->
     <ul id="main-menu">
@@ -136,6 +140,7 @@ if (isset($_GET['key'])) {
             <ul>
                 <li id="options-wrap">Wrap lines</li>
                 <li id="options-ignorews">Ignore white space</li>
+                <li id="options-ignorecase">Ignore case</li>
                 <li class="separator"></li>
                 <li id="options-viewport" title="Improves performance for large files">Enable viewport</li>
                 <li id="options-sidebars" title="Improves performance for large files">Enable side bars</li>
@@ -156,9 +161,12 @@ if (isset($_GET['key'])) {
                 <li><a class="link" href="/download" target="site">Download</a></li>
                 <li><a class="link" href="/doc" target="site">Mergely development guide</a></li>
                 <li class="separator"></li>
-                <li><a class="link" href="/4qsmsDyb/" target="_blank">United States Declaration of Independence Draft</a></li>
+                <li><a class="link" href="/united-states-declaration-of-independence?wl=1" target="_blank">United States Declaration of Independence Draft</a></li>
             </ul>
         </li>
+<?php
+    if (!$debug) {
+?>
         <li accesskey="s">
             Social
             <ul>
@@ -185,6 +193,9 @@ if (isset($_GET['key'])) {
                 </li>
             </ul>
         </li>
+<?php
+    }
+?>
     </ul>
 
     <!-- toolbar -->

editor/lib/wicked-ui.css

@@ -59,9 +59,9 @@ THE SOFTWARE.
 /* top menu */
 .wicked-menu > li > a > *, .wicked-menu > li { display: inline-block; }
 .wicked-menu li > ul > li > * { padding: 5px; display: inline-block; } /* padding other menu-item */
-.wicked-menu > li > a.menu-item > * { padding: 6px 7px; }
+.wicked-menu > li > a.menu-item > * { padding: 7px 7px; }
 .wicked-menu > li { position: relative; border: 1px solid transparent; }
-
+.wicked-menu > li.hover > a.menu-item > * { padding: 7px 7px 3px 7px; }
 .wicked-menu > li.hover > a.menu-item  {
 	/* lose the top-level focus indicator on hover */
 	outline: none;
@@ -73,7 +73,7 @@ THE SOFTWARE.
 /* menu items */
 .wicked-menu li.hover > ul,
 .wicked-menu ul li:hover > ul { display: block; position: absolute; }
-
+.wicked-menu ul li:hover > ul { margin-top: 5px; }
 /* drop menu */
 .wicked-menu ul { z-index: 7; min-width: 210px; top: 2.1em; left: -1px; }
 

lib/codemirror.css

@@ -4,10 +4,7 @@
   /* Set height, width, borders, and global font properties here */
   font-family: monospace;
   height: 300px;
-}
-.CodeMirror-scroll {
-  /* Set scrolling behaviour here */
-  overflow: auto;
+  color: black;
 }
 
 /* PADDING */
@@ -36,8 +33,7 @@
   min-width: 20px;
   text-align: right;
   color: #999;
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
+  white-space: nowrap;
 }
 
 .CodeMirror-guttermarker { color: black; }
@@ -45,19 +41,21 @@
 
 /* CURSOR */
 
-.CodeMirror div.CodeMirror-cursor {
+.CodeMirror-cursor {
   border-left: 1px solid black;
+  border-right: none;
+  width: 0;
 }
 /* Shown when moving in bi-directional text */
 .CodeMirror div.CodeMirror-secondarycursor {
   border-left: 1px solid silver;
 }
-.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor {
+.cm-fat-cursor .CodeMirror-cursor {
   width: auto;
   border: 0;
   background: #7e7;
 }
-.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursors {
+.cm-fat-cursor div.CodeMirror-cursors {
   z-index: 1;
 }
 
@@ -67,27 +65,28 @@
   -webkit-animation: blink 1.06s steps(1) infinite;
   -moz-animation: blink 1.06s steps(1) infinite;
   animation: blink 1.06s steps(1) infinite;
+  background-color: #7e7;
 }
 @-moz-keyframes blink {
-  0% { background: #7e7; }
-  50% { background: none; }
-  100% { background: #7e7; }
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
 }
 @-webkit-keyframes blink {
-  0% { background: #7e7; }
-  50% { background: none; }
-  100% { background: #7e7; }
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
 }
 @keyframes blink {
-  0% { background: #7e7; }
-  50% { background: none; }
-  100% { background: #7e7; }
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
 }
 
 /* Can style cursor different in overwrite (non-insert) mode */
-div.CodeMirror-overwrite div.CodeMirror-cursor {}
+.CodeMirror-overwrite .CodeMirror-cursor {}
 
-.cm-tab { display: inline-block; }
+.cm-tab { display: inline-block; text-decoration: inherit; }
 
 .CodeMirror-ruler {
   border-left: 1px solid #ccc;
@@ -96,6 +95,15 @@ div.CodeMirror-overwrite div.CodeMirror-cursor {}
 
 /* DEFAULT THEME */
 
+.cm-s-default .cm-header {color: blue;}
+.cm-s-default .cm-quote {color: #090;}
+.cm-negative {color: #d44;}
+.cm-positive {color: #292;}
+.cm-header, .cm-strong {font-weight: bold;}
+.cm-em {font-style: italic;}
+.cm-link {text-decoration: underline;}
+.cm-strikethrough {text-decoration: line-through;}
+
 .cm-s-default .cm-keyword {color: #708;}
 .cm-s-default .cm-atom {color: #219;}
 .cm-s-default .cm-number {color: #164;}
@@ -115,20 +123,14 @@ div.CodeMirror-overwrite div.CodeMirror-cursor {}
 .cm-s-default .cm-bracket {color: #997;}
 .cm-s-default .cm-tag {color: #170;}
 .cm-s-default .cm-attribute {color: #00c;}
-.cm-s-default .cm-header {color: blue;}
-.cm-s-default .cm-quote {color: #090;}
 .cm-s-default .cm-hr {color: #999;}
 .cm-s-default .cm-link {color: #00c;}
 
-.cm-negative {color: #d44;}
-.cm-positive {color: #292;}
-.cm-header, .cm-strong {font-weight: bold;}
-.cm-em {font-style: italic;}
-.cm-link {text-decoration: underline;}
-
 .cm-s-default .cm-error {color: #f00;}
 .cm-invalidchar {color: #f00;}
 
+.CodeMirror-composing { border-bottom: 2px solid; }
+
 /* Default styles for common addons */
 
 div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
@@ -142,14 +144,13 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
    the editor. You probably shouldn't touch them. */
 
 .CodeMirror {
-  line-height: 1;
   position: relative;
   overflow: hidden;
   background: white;
-  color: black;
 }
 
 .CodeMirror-scroll {
+  overflow: scroll !important; /* Things will break if this is overridden */
   /* 30px is the magic margin used to hide the element's real scrollbars */
   /* See overflow: hidden in .CodeMirror */
   margin-bottom: -30px; margin-right: -30px;
@@ -157,18 +158,14 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   height: 100%;
   outline: none; /* Prevent dragging from highlighting the element */
   position: relative;
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
 }
 .CodeMirror-sizer {
   position: relative;
   border-right: 30px solid transparent;
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
 }
 
 /* The fake, visible scrollbars. Used to force redraw during scrolling
-   before actuall scrolling happens, thus preventing shaking and
+   before actual scrolling happens, thus preventing shaking and
    flickering artifacts. */
 .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
   position: absolute;
@@ -194,26 +191,38 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 
 .CodeMirror-gutters {
   position: absolute; left: 0; top: 0;
-  padding-bottom: 30px;
   z-index: 3;
 }
 .CodeMirror-gutter {
   white-space: normal;
   height: 100%;
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-  padding-bottom: 30px;
-  margin-bottom: -32px;
   display: inline-block;
+  margin-bottom: -30px;
   /* Hack to make IE7 behave */
   *zoom:1;
   *display:inline;
 }
+.CodeMirror-gutter-wrapper {
+  position: absolute;
+  z-index: 4;
+  background: none !important;
+  border: none !important;
+}
+.CodeMirror-gutter-background {
+  position: absolute;
+  top: 0; bottom: 0;
+  z-index: 4;
+}
 .CodeMirror-gutter-elt {
   position: absolute;
   cursor: default;
   z-index: 4;
 }
+.CodeMirror-gutter-wrapper {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
 
 .CodeMirror-lines {
   cursor: text;
@@ -234,6 +243,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   z-index: 2;
   position: relative;
   overflow: visible;
+  -webkit-tap-highlight-color: transparent;
 }
 .CodeMirror-wrap pre {
   word-wrap: break-word;
@@ -255,8 +265,18 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 
 .CodeMirror-widget {}
 
-.CodeMirror-wrap .CodeMirror-scroll {
-  overflow-x: hidden;
+.CodeMirror-code {
+  outline: none;
+}
+
+/* Force content-box sizing for the elements where we expect it */
+.CodeMirror-scroll,
+.CodeMirror-sizer,
+.CodeMirror-gutter,
+.CodeMirror-gutters,
+.CodeMirror-linenumber {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
 }
 
 .CodeMirror-measure {
@@ -266,19 +286,19 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   overflow: hidden;
   visibility: hidden;
 }
-.CodeMirror-measure pre { position: static; }
 
-.CodeMirror div.CodeMirror-cursor {
-  position: absolute;
-  border-right: none;
-  width: 0;
-}
+.CodeMirror-cursor { position: absolute; }
+.CodeMirror-measure pre { position: static; }
 
 div.CodeMirror-cursors {
   visibility: hidden;
   position: relative;
   z-index: 3;
 }
+div.CodeMirror-dragcursors {
+  visibility: visible;
+}
+
 .CodeMirror-focused div.CodeMirror-cursors {
   visibility: visible;
 }
@@ -286,6 +306,8 @@ div.CodeMirror-cursors {
 .CodeMirror-selected { background: #d9d9d9; }
 .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
 .CodeMirror-crosshair { cursor: crosshair; }
+.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
+.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
 
 .cm-searching {
   background: #ffa;
@@ -305,5 +327,8 @@ div.CodeMirror-cursors {
   }
 }
 
+/* See issue #2901 */
+.cm-tab-wrap-hack:after { content: ''; }
+
 /* Help users use markselection to safely style text background */
 span.CodeMirror-selectedtext { background: none; }

lib/mergely.css

@@ -12,17 +12,19 @@
 .mergely-column { border: 1px solid #ccc; }
 .mergely-active { border: 1px solid #a3d1ff; }
 
+.mergely.a,.mergely.d,.mergely.c { color: #000; }
+
 .mergely.a.rhs.start { border-top: 1px solid #a3d1ff; }
 .mergely.a.lhs.start.end,
 .mergely.a.rhs.end { border-bottom: 1px solid #a3d1ff; }
 .mergely.a.rhs { background-color: #ddeeff; }
-.mergely.a.lhs.start.end.first { border-bottom: 0; border-top: 1px solid #a3d1ff; }
+.mergely.a.lhs.start.end.first { border-bottom-width: 0; border-top: 1px solid #a3d1ff; }
 
-.mergely.d.lhs { background-color: #edc0c0; }
+.mergely.d.lhs { background-color: #ffe9e9; }
 .mergely.d.lhs.end,
-.mergely.d.rhs.start.end { border-bottom: 1px solid #ff7f7f; }
-.mergely.d.rhs.start.end.first { border-bottom: 0; border-top: 1px solid #ff7f7f; }
-.mergely.d.lhs.start { border-top: 1px solid #ff7f7f; }
+.mergely.d.rhs.start.end { border-bottom: 1px solid #f8e8e8; }
+.mergely.d.rhs.start.end.first { border-bottom-width: 0; border-top: 1px solid #f8e8e8; }
+.mergely.d.lhs.start { border-top: 1px solid #f8e8e8; }
 
 .mergely.c.lhs,
 .mergely.c.rhs { background-color: #fafafa; }
@@ -32,4 +34,16 @@
 .mergely.c.rhs.end { border-bottom: 1px solid #a3a3a3; }
 
 .mergely.ch.a.rhs { background-color: #ddeeff; }
-.mergely.ch.d.lhs { background-color: #edc0c0; text-decoration: line-through; color: #888; }
+.mergely.ch.d.lhs { background-color: #ffe9e9; text-decoration: line-through; color: red !important; }
+
+.mergely.current.start { border-top: 1px solid #000 !important; }
+.mergely.current.end { border-bottom: 1px solid #000 !important; }
+.mergely.current.lhs.a.start.end,
+.mergely.current.rhs.d.start.end { border-top-width: 0 !important; }
+
+.mergely.current.lhs.a.start.end.empty,
+.mergely.current.rhs.d.start.end.empty { border-top-width: 1px !important; border-bottom-width: 0px !important; }
+
+.mergely.current.CodeMirror-linenumber { color: #F9F9F9; font-weight: bold; background-color: #777; }
+.CodeMirror-linenumber { cursor: pointer; }
+.CodeMirror-code { color: #717171; }

lib/mergely.js

@@ -1,4 +1,4 @@
-"use strict"; 
+"use strict";
 
 (function( window, document, jQuery, CodeMirror ){
 
@@ -9,7 +9,7 @@ Mgly.Timer = function(){
 	self.start = function() { self.t0 = new Date().getTime(); };
 	self.stop = function() {
 		var t1 = new Date().getTime();
-		var d = t1 - self.t0; 
+		var d = t1 - self.t0;
 		self.t0 = t1;
 		return d;
 	};
@@ -126,6 +126,9 @@ jQuery.extend(Mgly.CodeifyText.prototype, {
 			if (this.options.ignorews) {
 				line = line.replace(/\s+/g, '');
 			}
+			if (this.options.ignorecase) {
+				line = line.toLowerCase();
+			}
 			var aCode = this._diff_codes[line];
 			if (aCode != undefined) {
 				ctx.codes[i] = aCode;
@@ -177,11 +180,11 @@ jQuery.extend(Mgly.diff.prototype, {
 			var change = 'c';
 			if (item.lhs_deleted_count == 0 && item.rhs_inserted_count > 0) change = 'a';
 			else if (item.lhs_deleted_count > 0 && item.rhs_inserted_count == 0) change = 'd';
-			
+
 			if (item.lhs_deleted_count == 1) lhs_str = item.lhs_start + 1;
 			else if (item.lhs_deleted_count == 0) lhs_str = item.lhs_start;
 			else lhs_str = (item.lhs_start + 1) + ',' + (item.lhs_start + item.lhs_deleted_count);
-			
+
 			if (item.rhs_inserted_count == 1) rhs_str = item.rhs_start + 1;
 			else if (item.rhs_inserted_count == 0) rhs_str = item.rhs_start;
 			else rhs_str = (item.rhs_start + 1) + ',' + (item.rhs_start + item.rhs_inserted_count);
@@ -297,15 +300,15 @@ jQuery.extend(Mgly.diff.prototype, {
 	},
 	_optimize: function(ctx) {
 		var start = 0, end = 0;
-		while (start < ctx.length) {
-			while ((start < ctx.length) && (ctx.modified[start] == undefined || ctx.modified[start] == false)) {
+		while (start < ctx.codes.length) {
+			while ((start < ctx.codes.length) && (ctx.modified[start] == undefined || ctx.modified[start] == false)) {
 				start++;
 			}
 			end = start;
-			while ((end < ctx.length) && (ctx.modified[end] == true)) {
+			while ((end < ctx.codes.length) && (ctx.modified[end] == true)) {
 				end++;
 			}
-			if ((end < ctx.length) && (ctx.ctx[start] == ctx.codes[end])) {
+			if ((end < ctx.codes.length) && (ctx.codes[start] == ctx.codes[end])) {
 				ctx.modified[start] = false;
 				ctx.modified[end] = true;
 			}
@@ -373,7 +376,7 @@ jQuery.extend(Mgly.mergely.prototype, {
 Mgly.CodeMirrorDiffView = function(el, options) {
 	CodeMirror.defineExtension('centerOnCursor', function() {
 		var coords = this.cursorCoords(null, 'local');
-		this.scrollTo(null, 
+		this.scrollTo(null,
 			(coords.y + coords.yBot) / 2 - (this.getScrollerElement().clientHeight / 2));
 	});
 	this.init(el, options);
@@ -385,10 +388,13 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			autoupdate: true,
 			autoresize: true,
 			rhs_margin: 'right',
+			wrap_lines: false,
+			line_numbers: true,
 			lcs: true,
 			sidebar: true,
 			viewport: false,
 			ignorews: false,
+			ignorecase: false,
 			fadein: 'fast',
 			editor_width: '650px',
 			editor_height: '400px',
@@ -441,21 +447,21 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		var cmsettings = {
 			mode: 'text/plain',
 			readOnly: false,
-			lineWrapping: false,
-			lineNumbers: true,
+			lineWrapping: this.settings.wrap_lines,
+			lineNumbers: this.settings.line_numbers,
 			gutters: ['merge', 'CodeMirror-linenumbers']
 		};
 		this.lhs_cmsettings = {};
 		this.rhs_cmsettings = {};
-		
+
 		// save this element for faster queries
 		this.element = jQuery(el);
-		
+
 		// save options if there are any
 		if (options && options.cmsettings) jQuery.extend(this.lhs_cmsettings, cmsettings, options.cmsettings, options.lhs_cmsettings);
 		if (options && options.cmsettings) jQuery.extend(this.rhs_cmsettings, cmsettings, options.cmsettings, options.rhs_cmsettings);
 		//if (options) jQuery.extend(this.settings, options);
-		
+
 		// bind if the element is destroyed
 		this.element.bind('destroyed', jQuery.proxy(this.teardown, this));
 
@@ -478,9 +484,11 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		this.unbind();
 	},
 	lhs: function(text) {
+		this.changes = []; // invalidate existing changes
 		this.editor[this.id + '-lhs'].setValue(text);
 	},
 	rhs: function(text) {
+		this.changes = []; // invalidate existing changes
 		this.editor[this.id + '-rhs'].setValue(text);
 	},
 	update: function() {
@@ -492,10 +500,18 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 	scrollToDiff: function(direction) {
 		if (!this.changes.length) return;
 		if (direction == 'next') {
-			this._current_diff = Math.min(++this._current_diff, this.changes.length - 1);
+			if (this._current_diff == this.changes.length -1) {
+				this._current_diff = 0;
+			} else {
+				this._current_diff = Math.min(++this._current_diff, this.changes.length - 1);
+			}
 		}
-		else {
-			this._current_diff = Math.max(--this._current_diff, 0);
+		else if (direction == 'prev') {
+			if (this._current_diff == 0) {
+				this._current_diff = this.changes.length - 1;
+			} else {
+				this._current_diff = Math.max(--this._current_diff, 0);
+			}
 		}
 		this._scroll_to_change(this.changes[this._current_diff]);
 		this._changed(this.id + '-lhs', this.id + '-rhs');
@@ -537,10 +553,27 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		if (this.settings.hasOwnProperty('sidebar')) {
 			// dynamically enable sidebars
 			if (this.settings.sidebar) {
-				jQuery(this.element).find('.mergely-margin').css({display: 'block'});
+				this.element.find('.mergely-margin').css({display: 'block'});
 			}
 			else {
-				jQuery(this.element).find('.mergely-margin').css({display: 'none'});
+				this.element.find('.mergely-margin').css({display: 'none'});
+			}
+		}
+		var le, re;
+		if (this.settings.hasOwnProperty('wrap_lines')) {
+			if (this.editor) {
+				le = this.editor[this.id + '-lhs'];
+				re = this.editor[this.id + '-rhs'];
+				le.setOption('lineWrapping', this.settings.wrap_lines);
+				re.setOption('lineWrapping', this.settings.wrap_lines);
+			}
+		}
+		if (this.settings.hasOwnProperty('line_numbers')) {
+			if (this.editor) {
+				le = this.editor[this.id + '-lhs'];
+				re = this.editor[this.id + '-rhs'];
+				le.setOption('lineNumbers', this.settings.line_numbers);
+				re.setOption('lineNumbers', this.settings.line_numbers);
 			}
 		}
 	},
@@ -595,7 +628,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			this.prev_query[side] = query;
 		}
 		var cursor = this.cursor[this.id];
-		
+
 		if (cursor[direction]()) {
 			editor.setSelection(cursor.from(), cursor.to());
 		}
@@ -640,7 +673,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		}
 		this.merge_rhs_button = jQuery(merge_rhs_button);
 		this.merge_lhs_button = jQuery(merge_lhs_button);
-		
+
 		// create the textarea and canvas elements
 		var height = this.settings.editor_height;
 		var width = this.settings.editor_width;
@@ -658,7 +691,12 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		if (this.settings.rhs_margin != 'left') {
 			this.element.append(rmargin);
 		}
-		//codemirror
+
+		// get current diff border color
+		var color = jQuery('<div style="display:none" class="mergely current start" />').appendTo('body').css('border-top-color');
+		this.current_diff_color = color;
+
+		// codemirror
 		var cmstyle = '#' + this.id + ' .CodeMirror-gutter-text { padding: 5px 0 0 0; }' +
 			'#' + this.id + ' .CodeMirror-lines pre, ' + '#' + this.id + ' .CodeMirror-gutter-text pre { line-height: 18px; }' +
 			'.CodeMirror-linewidget { overflow: hidden; };';
@@ -670,12 +708,12 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		jQuery('<style type="text/css">' + cmstyle + '</style>').appendTo('head');
 
 		//bind
-		var rhstx = jQuery('#' + this.id + '-rhs').get(0);
+		var rhstx = this.element.find('#' + this.id + '-rhs').get(0);
 		if (!rhstx) {
 			console.error('rhs textarea not defined - Mergely not initialized properly');
 			return;
 		}
-		var lhstx = jQuery('#' + this.id + '-lhs').get(0);
+		var lhstx = this.element.find('#' + this.id + '-lhs').get(0);
 		if (!rhstx) {
 			console.error('lhs textarea not defined - Mergely not initialized properly');
 			return;
@@ -708,6 +746,38 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			);
 			sz(true);
 		}
+
+		// scrollToDiff() from gutter
+		function gutterClicked(side, line, ev) {
+			// The "Merge left/right" buttons are also located in the gutter.
+			// Don't interfere with them:
+			if (ev.target && (jQuery(ev.target).closest('.merge-button').length > 0)) {
+				return;
+			}
+
+			// See if the user clicked the line number of a difference:
+			var i, change;
+			for (i = 0; i < this.changes.length; i++) {
+				change = this.changes[i];
+				if (line >= change[side+'-line-from'] && line <= change[side+'-line-to']) {
+					this._current_diff = i;
+					// I really don't like this here - something about gutterClick does not
+					// like mutating editor here.  Need to trigger the scroll to diff from
+					// a timeout.
+					setTimeout(function() { this.scrollToDiff(); }.bind(this), 10);
+					break;
+				}
+			}
+		}
+
+		this.editor[this.id + '-lhs'].on('gutterClick', function(cm, n, gutterClass, ev) {
+			gutterClicked.call(this, 'lhs', n, ev);
+		}.bind(this));
+
+		this.editor[this.id + '-rhs'].on('gutterClick', function(cm, n, gutterClass, ev) {
+			gutterClicked.call(this, 'rhs', n, ev);
+		}.bind(this));
+
 		//bind
 		var setv;
 		if (this.settings.lhs) {
@@ -725,23 +795,12 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		var self = this;
 		var led = self.editor[self.id+'-lhs'];
 		var red = self.editor[self.id+'-rhs'];
-
-		var yref = led.getScrollerElement().offsetHeight * 0.5; // center between >0 and 1/2
-
 		// set cursors
 		led.setCursor(Math.max(change["lhs-line-from"],0), 0); // use led.getCursor().ch ?
 		red.setCursor(Math.max(change["rhs-line-from"],0), 0);
-
-		// using directly CodeMirror breaks canvas alignment
-		// var ly = led.charCoords({line: Math.max(change["lhs-line-from"],0), ch: 0}, "local").top;
-
-		// calculate scroll offset for current change. Warning: returns relative y position so we scroll to 0 first.
-		led.scrollTo(null, 0);
-		red.scrollTo(null, 0);
-		self._calculate_offsets(self.id+'-lhs', self.id+'-rhs', [change]);
-		led.scrollTo(null, Math.max(change["lhs-y-start"]-yref, 0));
-		red.scrollTo(null, Math.max(change["rhs-y-start"]-yref, 0));
-		// right pane should simply follows
+		if (change["lhs-line-to"] >= 0) {
+			led.scrollIntoView({line: change["lhs-line-to"]});
+		}
 	},
 
 	_scrolling: function(editor_name) {
@@ -758,23 +817,23 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		var midline = this.editor[editor_name].coordsChar({left:0, top:this.midway});
 		var top_to = scroller.scrollTop();
 		var left_to = scroller.scrollLeft();
-		
+
 		this.trace('scroll', 'side', editor_name);
 		this.trace('scroll', 'midway', this.midway);
 		this.trace('scroll', 'midline', midline);
 		this.trace('scroll', 'top_to', top_to);
 		this.trace('scroll', 'left_to', left_to);
-		
+
 		var editor_name1 = this.id + '-lhs';
 		var editor_name2 = this.id + '-rhs';
-		
+
 		for (var name in this.editor) {
 			if (!this.editor.hasOwnProperty(name)) continue;
 			if (editor_name == name) continue; //same editor
 			var this_side = editor_name.replace(this.id + '-', '');
 			var other_side = name.replace(this.id + '-', '');
 			var top_adjust = 0;
-			
+
 			// find the last change that is less than or within the midway point
 			// do not move the rhs until the lhs end point is >= the rhs end point.
 			var last_change = null;
@@ -792,14 +851,14 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 							force_scroll = true;
 						}
 						else {
-							top_adjust += 
-								(change[this_side+'-y-end'] - change[this_side+'-y-start']) - 
+							top_adjust +=
+								(change[this_side+'-y-end'] - change[this_side+'-y-start']) -
 								(change[other_side+'-y-end'] - change[other_side+'-y-start']);
 						}
 					}
 				}
 			}
-			
+
 			var vp = this.editor[name].getViewport();
 			var scroll = true;
 			if (last_change) {
@@ -816,7 +875,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 				this.editor[name].scrollTo(left_to, top_to - top_adjust);
 			}
 			else this.trace('scroll', 'not scrolling other side');
-			
+
 			if (this.settings.autoupdate) {
 				var timer = new Mgly.Timer();
 				this._calculate_offsets(editor_name1, editor_name2, this.changes);
@@ -872,12 +931,12 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			editor.operation(clear_changes);
 		}
 		self.chfns[name] = [];
-		
+
 		var ex = this._draw_info(this.id + '-lhs', this.id + '-rhs');
 		var ctx_lhs = ex.clhs.get(0).getContext('2d');
 		var ctx_rhs = ex.crhs.get(0).getContext('2d');
 		var ctx = ex.dcanvas.getContext('2d');
-		
+
 		ctx_lhs.beginPath();
 		ctx_lhs.fillStyle = this.settings.bgcolor;
 		ctx_lhs.strokeStyle = '#888';
@@ -889,7 +948,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		ctx_rhs.strokeStyle = '#888';
 		ctx_rhs.fillRect(0, 0, 6.5, ex.visible_page_height);
 		ctx_rhs.strokeRect(0, 0, 6.5, ex.visible_page_height);
-		
+
 		ctx.beginPath();
 		ctx.fillStyle = '#fff';
 		ctx.fillRect(0, 0, this.draw_mid_width, ex.visible_page_height);
@@ -902,7 +961,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		this.trace('change', 'diff time', timer.stop());
 		this.changes = Mgly.DiffParser(d.normal_form());
 		this.trace('change', 'parse time', timer.stop());
-		if (this._current_diff === undefined) {
+		if (this._current_diff === undefined && this.changes.length) {
 			// go to first difference on start-up
 			this._current_diff = 0;
 			this._scroll_to_change(this.changes[0]);
@@ -967,16 +1026,16 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		var saveY = this.editor[editor_name1].getScrollInfo().top;
 		// temporarily scroll to top
 		this.editor[editor_name1].scrollTo(null, 0);
-		
-		// this is the distance from the top of the screen to the top of the 
+
+		// this is the distance from the top of the screen to the top of the
 		// content of the first codemirror editor
-		var topnode = jQuery('#' + this.id + ' .CodeMirror-measure').first();
+		var topnode = this.element.find('.CodeMirror-measure').first();
 		var top_offset = topnode.offset().top - 4;
 		if(!top_offset) return false;
-		
+
 		// restore editor's scroll position
 		this.editor[editor_name1].scrollTo(null, saveY);
-		
+
 		this.draw_top_offset = 0.5 - top_offset;
 		return true;
 	},
@@ -1006,10 +1065,10 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		var lhschc = this.editor[editor_name1].charCoords({line: 0});
 		var rhschc = this.editor[editor_name2].charCoords({line: 0});
 		var vp = this._get_viewport(editor_name1, editor_name2);
-		
+
 		for (var i = 0; i < changes.length; ++i) {
 			var change = changes[i];
-			
+
 			if (!this.settings.sidebar && !this._is_change_in_view(vp, change)) {
 				// if the change is outside the viewport, skip
 				delete change['lhs-y-start'];
@@ -1022,7 +1081,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			var llt = change['lhs-line-to'] >= 0 ? change['lhs-line-to'] : 0;
 			var rlf = change['rhs-line-from'] >= 0 ? change['rhs-line-from'] : 0;
 			var rlt = change['rhs-line-to'] >= 0 ? change['rhs-line-to'] : 0;
-			
+
 			var ls, le, rs, re, tls, tle, lhseh, lhssh, rhssh, rhseh;
 			if (this.editor[editor_name1].getOption('lineWrapping') || this.editor[editor_name2].getOption('lineWrapping')) {
 				// If using line-wrapping, we must get the height of the line
@@ -1033,7 +1092,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 				tle = this.editor[editor_name1].cursorCoords({line: llt, ch: 0}, 'page');
 				lhseh = this.editor[editor_name1].getLineHandle(llt);
 				le = { top: tle.top, bottom: tle.top + lhseh.height };
-				
+
 				tls = this.editor[editor_name2].cursorCoords({line: rlf, ch: 0}, 'page');
 				rhssh = this.editor[editor_name2].getLineHandle(rlf);
 				rs = { top: tls.top, bottom: tls.top + rhssh.height };
@@ -1044,24 +1103,24 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			}
 			else {
 				// If not using line-wrapping, we can calculate the line position
-				ls = { 
-					top: lhschc.top + llf * this.em_height, 
+				ls = {
+					top: lhschc.top + llf * this.em_height,
 					bottom: lhschc.bottom + llf * this.em_height + 2
 				};
 				le = {
-					top: lhschc.top + llt * this.em_height, 
+					top: lhschc.top + llt * this.em_height,
 					bottom: lhschc.bottom + llt * this.em_height + 2
 				};
 				rs = {
-					top: rhschc.top + rlf * this.em_height, 
+					top: rhschc.top + rlf * this.em_height,
 					bottom: rhschc.bottom + rlf * this.em_height + 2
 				};
 				re = {
-					top: rhschc.top + rlt * this.em_height, 
+					top: rhschc.top + rlt * this.em_height,
 					bottom: rhschc.bottom + rlt * this.em_height + 2
 				};
 			}
-			
+
 			if (change['op'] == 'a') {
 				// adds (right), normally start from the end of the lhs,
 				// except for the case when the start of the rhs is 0
@@ -1099,11 +1158,12 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		return changes;
 	},
 	_markup_changes: function (editor_name1, editor_name2, changes) {
-		jQuery('.merge-button').remove(); // clear
-		
+		this.element.find('.merge-button').remove(); //clear
+
 		var self = this;
 		var led = this.editor[editor_name1];
 		var red = this.editor[editor_name2];
+		var current_diff = this._current_diff;
 
 		var timer = new Mgly.Timer();
 		led.operation(function() {
@@ -1113,11 +1173,20 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 				var llt = change['lhs-line-to'] >= 0 ? change['lhs-line-to'] : 0;
 				var rlf = change['rhs-line-from'] >= 0 ? change['rhs-line-from'] : 0;
 				var rlt = change['rhs-line-to'] >= 0 ? change['rhs-line-to'] : 0;
-				
+
 				var clazz = ['mergely', 'lhs', change['op'], 'cid-' + i];
 				led.addLineClass(llf, 'background', 'start');
 				led.addLineClass(llt, 'background', 'end');
-				
+				if (change['lhs-line-from'] < 0) {
+					clazz.push('empty');
+				}
+
+				if (current_diff == i) {
+					if (llf != llt) {
+						led.addLineClass(llf, 'background', 'current');
+					}
+					led.addLineClass(llt, 'background', 'current');
+				}
 				if (llf == 0 && llt == 0 && rlf == 0) {
 					led.addLineClass(llf, 'background', clazz.join(' '));
 					led.addLineClass(llf, 'background', 'first');
@@ -1129,7 +1198,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 						led.addLineClass(j, 'background', clazz.join(' '));
 					}
 				}
-				
+
 				if (!red.getOption('readOnly')) {
 					// add widgets to lhs, if rhs is not read only
 					var rhs_button = self.merge_rhs_button.clone();
@@ -1145,7 +1214,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		});
 
 		var vp = this._get_viewport(editor_name1, editor_name2);
-		
+
 		this.trace('change', 'markup lhs-editor time', timer.stop());
 		red.operation(function() {
 			for (var i = 0; i < changes.length; ++i) {
@@ -1154,16 +1223,25 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 				var llt = change['lhs-line-to'] >= 0 ? change['lhs-line-to'] : 0;
 				var rlf = change['rhs-line-from'] >= 0 ? change['rhs-line-from'] : 0;
 				var rlt = change['rhs-line-to'] >= 0 ? change['rhs-line-to'] : 0;
-				
+
 				if (!self._is_change_in_view(vp, change)) {
 					// if the change is outside the viewport, skip
 					continue;
 				}
-				
+
 				var clazz = ['mergely', 'rhs', change['op'], 'cid-' + i];
 				red.addLineClass(rlf, 'background', 'start');
 				red.addLineClass(rlt, 'background', 'end');
-				
+				if (change['rhs-line-from'] < 0) {
+					clazz.push('empty');
+				}
+
+				if (current_diff == i) {
+					if (rlf != rlt) {
+						red.addLineClass(rlf, 'background', 'current');
+					}
+					red.addLineClass(rlt, 'background', 'current');
+				}
 				if (rlf == 0 && rlt == 0 && llf == 0) {
 					red.addLineClass(rlf, 'background', clazz.join(' '));
 					red.addLineClass(rlf, 'background', 'first');
@@ -1190,7 +1268,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			}
 		});
 		this.trace('change', 'markup rhs-editor time', timer.stop());
-		
+
 		// mark text deleted, LCS changes
 		var marktext = [], i, j, k, p;
 		for (i = 0; this.settings.lcs && i < changes.length; ++i) {
@@ -1199,7 +1277,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			var llt = change['lhs-line-to'] >= 0 ? change['lhs-line-to'] : 0;
 			var rlf = change['rhs-line-from'] >= 0 ? change['rhs-line-from'] : 0;
 			var rlt = change['rhs-line-to'] >= 0 ? change['rhs-line-to'] : 0;
-			
+
 			if (!this._is_change_in_view(vp, change)) {
 				// if the change is outside the viewport, skip
 				continue;
@@ -1215,7 +1293,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			}
 			else if (change['op'] == 'c') {
 				// apply LCS changes to each line
-				for (j = llf, k = rlf, p = 0; 
+				for (j = llf, k = rlf, p = 0;
 					 ((j >= 0) && (j <= llt)) || ((k >= 0) && (k <= rlt));
 					 ++j, ++k) {
 					var lhs_line, rhs_line;
@@ -1246,7 +1324,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			}
 		}
 		this.trace('change', 'LCS marktext time', timer.stop());
-		
+
 		// mark changes outside closure
 		led.operation(function() {
 			// apply lhs markup
@@ -1264,11 +1342,12 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 				self.chfns[self.id + '-rhs'].push(m[0].markText(m[1], m[2], m[3]));
 			}
 		});
+
 		this.trace('change', 'LCS markup time', timer.stop());
-		
+
 		// merge buttons
 		var ed = {lhs:led, rhs:red};
-		jQuery('.merge-button').on('click', function(ev){
+		this.element.find('.merge-button').on('click', function(ev){
 			// side of mouseenter
 			var side = 'rhs';
 			var oside = 'lhs';
@@ -1292,6 +1371,34 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			self._merge_change(change, side, oside);
 			return false;
 		});
+
+		// gutter markup
+		var lhsLineNumbers = jQuery('#mergely-lhs ~ .CodeMirror').find('.CodeMirror-linenumber');
+		var rhsLineNumbers = jQuery('#mergely-rhs ~ .CodeMirror').find('.CodeMirror-linenumber');
+		rhsLineNumbers.removeClass('mergely current');
+		lhsLineNumbers.removeClass('mergely current');
+		for (var i = 0; i < changes.length; ++i) {
+			if (current_diff == i && change.op !== 'd') {
+				var change = changes[i];
+				var j, jf = change['rhs-line-from'], jt = change['rhs-line-to'] + 1;
+				for (j = jf; j < jt; j++) {
+					var n = (j + 1).toString();
+					rhsLineNumbers
+						.filter(function(i, node) { return jQuery(node).text() === n; })
+					.addClass('mergely current');
+				}
+			}
+			if (current_diff == i && change.op !== 'a') {
+				var change = changes[i];
+				jf = change['lhs-line-from'], jt = change['lhs-line-to'] + 1;
+				for (j = jf; j < jt; j++) {
+					var n = (j + 1).toString();
+					lhsLineNumbers.filter(function(i, node) { return jQuery(node).text() === n; })
+					.addClass('mergely current');
+				}
+			}
+		}
+
 		this.trace('change', 'markup buttons time', timer.stop());
 	},
 	_merge_change :	function(change, side, oside) {
@@ -1304,7 +1411,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		var text = ed[side].getRange(
 			CodeMirror.Pos(change[side + '-line-from'], 0),
 			CodeMirror.Pos(change[side + '-line-to'] + 1, 0));
-		
+
 		if (change['op'] == 'c') {
 			ed[oside].replaceRange(text,
 				CodeMirror.Pos(change[oside + '-line-from'], 0),
@@ -1351,8 +1458,8 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		var gutter_height = jQuery(this.editor[editor_name1].getScrollerElement()).children(':first-child').height();
 		var dcanvas = document.getElementById(editor_name1 + '-' + editor_name2 + '-canvas');
 		if (dcanvas == undefined) throw 'Failed to find: ' + editor_name1 + '-' + editor_name2 + '-canvas';
-		var clhs = jQuery('#' + this.id + '-lhs-margin');
-		var crhs = jQuery('#' + this.id + '-rhs-margin');
+		var clhs = this.element.find('#' + this.id + '-lhs-margin');
+		var crhs = this.element.find('#' + this.id + '-rhs-margin');
 		return {
 			visible_page_height: visible_page_height,
 			gutter_height: gutter_height,
@@ -1382,14 +1489,14 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		this.trace('draw', 'visible_page_ratio', ex.visible_page_ratio);
 		this.trace('draw', 'lhs-scroller-top', ex.lhs_scroller.scrollTop());
 		this.trace('draw', 'rhs-scroller-top', ex.rhs_scroller.scrollTop());
-		
-		jQuery.each(jQuery.find('#' + this.id + ' canvas'), function () {
+
+		jQuery.each(this.element.find('canvas'), function () {
 			jQuery(this).get(0).height = ex.visible_page_height;
 		});
-		
+
 		ex.clhs.unbind('click');
 		ex.crhs.unbind('click');
-		
+
 		ctx_lhs.beginPath();
 		ctx_lhs.fillStyle = this.settings.bgcolor;
 		ctx_lhs.strokeStyle = '#888';
@@ -1405,6 +1512,10 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		var vp = this._get_viewport(editor_name1, editor_name2);
 		for (var i = 0; i < changes.length; ++i) {
 			var change = changes[i];
+			var fill = this.settings.fgcolor[change['op']];
+			if (this._current_diff === i) {
+				fill = this.current_diff_color;
+			}
 
 			this.trace('draw', change);
 			// margin indicators
@@ -1415,41 +1526,41 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			this.trace('draw', 'marker calculated', lhs_y_start, lhs_y_end, rhs_y_start, rhs_y_end);
 
 			ctx_lhs.beginPath();
-			ctx_lhs.fillStyle = this.settings.fgcolor[(this._current_diff==i?'c':'')+change['op']];
+			ctx_lhs.fillStyle = fill;
 			ctx_lhs.strokeStyle = '#000';
 			ctx_lhs.lineWidth = 0.5;
 			ctx_lhs.fillRect(1.5, lhs_y_start, 4.5, Math.max(lhs_y_end - lhs_y_start, 5));
 			ctx_lhs.strokeRect(1.5, lhs_y_start, 4.5, Math.max(lhs_y_end - lhs_y_start, 5));
 
 			ctx_rhs.beginPath();
-			ctx_rhs.fillStyle = this.settings.fgcolor[(this._current_diff==i?'c':'')+change['op']];
+			ctx_rhs.fillStyle = fill;
 			ctx_rhs.strokeStyle = '#000';
 			ctx_rhs.lineWidth = 0.5;
 			ctx_rhs.fillRect(1.5, rhs_y_start, 4.5, Math.max(rhs_y_end - rhs_y_start, 5));
 			ctx_rhs.strokeRect(1.5, rhs_y_start, 4.5, Math.max(rhs_y_end - rhs_y_start, 5));
-			
+
 			if (!this._is_change_in_view(vp, change)) {
 				continue;
 			}
-			
+
 			lhs_y_start = change['lhs-y-start'];
 			lhs_y_end = change['lhs-y-end'];
 			rhs_y_start = change['rhs-y-start'];
 			rhs_y_end = change['rhs-y-end'];
-			
+
 			var radius = 3;
-			
+
 			// draw left box
 			ctx.beginPath();
-			ctx.strokeStyle = this.settings.fgcolor[(this._current_diff==i?'c':'')+change['op']];
+			ctx.strokeStyle = fill;
 			ctx.lineWidth = (this._current_diff==i) ? 1.5 : 1;
-			
+
 			var rectWidth = this.draw_lhs_width;
 			var rectHeight = lhs_y_end - lhs_y_start - 1;
 			var rectX = this.draw_lhs_min;
 			var rectY = lhs_y_start;
 			// top and top top-right corner
-			
+
 			// draw left box
 			ctx.moveTo(rectX, rectY);
 			if (navigator.appName == 'Microsoft Internet Explorer') {
@@ -1470,7 +1581,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 				ctx.lineTo(rectX, rectY + rectHeight);
 			}
 			ctx.stroke();
-			
+
 			rectWidth = this.draw_rhs_width;
 			rectHeight = rhs_y_end - rhs_y_start - 1;
 			rectX = this.draw_rhs_max;
@@ -1494,7 +1605,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 				ctx.lineTo(rectX, rectY + rectHeight);
 			}
 			ctx.stroke();
-			
+
 			// connect boxes
 			var cx = this.draw_lhs_min + this.draw_lhs_width;
 			var cy = lhs_y_start + (lhs_y_end + 1 - lhs_y_start) / 2.0;
@@ -1517,7 +1628,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		// visible window feedback
 		ctx_lhs.fillStyle = this.settings.vpcolor;
 		ctx_rhs.fillStyle = this.settings.vpcolor;
-		
+
 		var lto = ex.clhs.height() * ex.visible_page_ratio;
 		var lfrom = (ex.lhs_scroller.scrollTop() / ex.gutter_height) * ex.clhs.height();
 		var rto = ex.crhs.height() * ex.visible_page_ratio;
@@ -1528,10 +1639,10 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		this.trace('draw', 'visible_page_ratio', ex.visible_page_ratio);
 		this.trace('draw', 'lhs from', lfrom, 'lhs to', lto);
 		this.trace('draw', 'rhs from', rfrom, 'rhs to', rto);
-		
+
 		ctx_lhs.fillRect(1.5, lfrom, 4.5, lto);
 		ctx_rhs.fillRect(1.5, rfrom, 4.5, rto);
-		
+
 		ex.clhs.click(function (ev) {
 			var y = ev.pageY - ex.lhs_xyoffset.top - (lto / 2);
 			var sto = Math.max(0, (y / mcanvas_lhs.height) * ex.lhs_scroller.get(0).scrollHeight);
@@ -1539,7 +1650,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		});
 		ex.crhs.click(function (ev) {
 			var y = ev.pageY - ex.rhs_xyoffset.top - (rto / 2);
-			var sto = Math.max(0, (y / mcanvas_rhs.height) * ex.rhs_scroller.get(0).scrollHeight);			
+			var sto = Math.max(0, (y / mcanvas_rhs.height) * ex.rhs_scroller.get(0).scrollHeight);
 			ex.rhs_scroller.scrollTop(sto);
 		});
 	},
@@ -1547,14 +1658,14 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		if(this.settings._debug.indexOf(name) >= 0) {
 			arguments[0] = name + ':';
 			console.log([].slice.apply(arguments));
-		} 
+		}
 	}
 });
 
 jQuery.pluginMaker = function(plugin) {
 	// add the plugin function as a jQuery plugin
 	jQuery.fn[plugin.prototype.name] = function(options) {
-		// get the arguments 
+		// get the arguments
 		var args = jQuery.makeArray(arguments),
 		after = args.slice(1);
 		var rc;