release 4.1.2

Co-authored-by: Jamie Peabody <jpeabody@axway.com>

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org

CHANGES.md

@@ -1,5 +1,25 @@
 # Changes
 
+## 4.1.2:
+* patch: fixes issue #134 where the readme had broken links.
+
+## 4.1.1:
+* patch: fixes issue #95 where cursor was not focusing correctly on init.
+
+## 4.1.0:
+* minor: emits 'updated' event after every change.
+* patch: fixes `scrollTo` that no longer functioned after a codemirror update.
+* patch: fixes `loaded` being called prematurely and after every resize, and is now is called once, after the 'updated' event.
+
+## 4.0.16:
+* patch: fixes rendering beyond change constraint
+
+## 4.0.15
+* patch: removed unnecessary addon mark-selected
+
+## 4.0.14
+* patch: fixes issue #104 where diff text conflicted with selected text
+
 ## 4.0.13
 * patch: fixed issue where `lhs_cmsettings` and  `lhs_cmsettings` were ignored
 * patch: updated documentation

README.md

@@ -1,6 +1,6 @@
 # Mergely
 
-http://mergely.com
+https://mergely.com
 
 Mergely is a JavaScript component for differencing and merging files interactively in a browser (diff/merge), providing rich API that enables you to easily integrate Mergely into your existing web application. It is suitable for comparing text files online, for example, .txt, .html, .xml, .c, .cpp, .java, etc.  
 
@@ -93,7 +93,7 @@ $(document).ready(function () {
 |<a name="autoupdate"></a>autoupdate|boolean|`true`|Enables/disables the auto-updating of the editor when changes are made.|
 |<a name="bgcolor"></a>bgcolor|string|`#eeeeee`|The background color that mergely fills the margin canvas with.|
 |<a name="change_timeout"></a>change_timeout|number|`500`|The timeout, after a text change, before Mergely calculates a diff. Only used when `readonly` is enabled.|
-|<a name="cmsettings"></a>cmsettings|object|`{mode: 'text/plain', readOnly: false}`|CodeMirror settings (see [CodeMirror](http://codemirror.net])) that are combined with `lhs_cmsettings` and `rhs_cmsettings`.|
+|<a name="cmsettings"></a>cmsettings|object|`{mode: 'text/plain', readOnly: false}`|CodeMirror settings (see [CodeMirror](https://codemirror.net)) that are combined with `lhs_cmsettings` and `rhs_cmsettings`.|
 |<a name="editor_width"></a>editor_width|string|`400px`|Starting width.|
 |<a name="editor_height"></a>editor_height|string|`400px`|Starting height.|
 |<a name="fadein"></a>fadein|string|`fast`|A jQuery [fadein](http://api.jquery.com/fadein) value to enable the editor to fade in. Set to empty string to disable.|
@@ -103,9 +103,9 @@ $(document).ready(function () {
 |<a name="lcs"></a>lcs|boolean|`true`|Enables/disables LCS computation for paragraphs (word-by-word changes). Disabling can give a performance gain for large documents.|
 |<a name="license"></a>license|string|`lgpl`|The choice of license to use with Mergely.  Valid values are: `lgpl`, `gpl`, `mpl` or `lgpl-separate-notice`, `gpl-separate-notice`, `mpl-separate-notice` (the license requirements are met in a separate notice file).|
 |<a name="line_numbers"></a>line_numbers|boolean|`true`|Enables/disables line numbers. Enabling line numbers will toggle the visibility of the line number margins.|
-|<a name="lhs_cmsettings"></a>lhs_cmsettings|object|`{}`|The CodeMirror settings (see [CodeMirror](http://codemirror.net])) for the left-hand side editor.|
+|<a name="lhs_cmsettings"></a>lhs_cmsettings|object|`{}`|The CodeMirror settings (see [CodeMirror](https://codemirror.net)) for the left-hand side editor.|
 |<a name="resize_timeout"></a>resize_timeout|number|`500`|The timeout, after a resize, before Mergely auto-resizes. Only used when autoresize enabled.|
-|<a name="rhs_cmsettings"></a>rhs_cmsettings|object|`{}`|The CodeMirror settings (see [CodeMirror](http://codemirror.net])) for the right-hand side editor.|
+|<a name="rhs_cmsettings"></a>rhs_cmsettings|object|`{}`|The CodeMirror settings (see [CodeMirror](https://codemirror.net)) for the right-hand side editor.|
 |<a name="rhs_margin"></a>rhs_margin|string|`right`|Location for the rhs markup margin. Possible values: right, left.|
 |<a name="sidebar"></a>sidebar|boolean|`true`|Enables/disables sidebar markers. Disabling can give a performance gain for large documents.|
 |<a name="vpcolor"></a>vpcolor|string|`rgba(0, 0, 200, 0.5)`|The margin/viewport indicator color.|

examples/app.js

@@ -1,3 +1,4 @@
+require('codemirror/addon/selection/mark-selection.js');
 require('codemirror/lib/codemirror.css');
 require('../src/mergely.css');
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mergely",
-  "version": "4.0.13",
+  "version": "4.1.2",
   "description": "A javascript UI for diff/merge",
   "directories": {
     "doc": "doc",
@@ -40,7 +40,7 @@
     "babel-loader": "^8.0.4",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "chai": "^4.1.2",
-    "codemirror": "^5.32.0",
+    "codemirror": "^5.50.2",
     "copy-webpack-plugin": "^4.6.0",
     "css-loader": "^0.28.11",
     "file-loader": "^1.1.5",

src/mergely.css

@@ -48,3 +48,4 @@
 .mergely.current.CodeMirror-linenumber { color: #F9F9F9; font-weight: bold; background-color: #777; }
 .CodeMirror-linenumber { cursor: pointer; }
 .CodeMirror-code { color: #717171; }
+span.CodeMirror-selectedtext { background: none !important; }

src/mergely.js

@@ -367,7 +367,7 @@ Mgly.CodeMirrorDiffView = function(el, options) {
 	CodeMirror.defineExtension('centerOnCursor', function() {
 		var coords = this.cursorCoords(null, 'local');
 		this.scrollTo(null,
-			(coords.y + coords.yBot) / 2 - (this.getScrollerElement().clientHeight / 2));
+			(coords.top + coords.bottom) / 2 - (this.getScrollerElement().clientHeight / 2));
 	});
 	this.init(el, options);
 };
@@ -395,6 +395,9 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			license: '',
 			width: 'auto',
 			height: 'auto',
+			cmsettings: {
+				styleSelectedText: true
+			},
 			lhs: function(setValue) { },
 			rhs: function(setValue) { },
 			loaded: function() { },
@@ -429,11 +432,10 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 					else {
 						self.show();
 					}
-					if (this.loaded) this.loaded();
 				}
 				if (this.resized) this.resized();
 			},
-			_debug: '', //scroll,draw,calc,diff,markup,change
+			_debug: '', //scroll,draw,calc,diff,markup,change,init
 			resized: function() { }
 		}, options);
 
@@ -645,6 +647,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		return d.normal_form();
 	},
 	bind: function(el) {
+		this.trace('init', 'bind');
 		this.element.hide();
 		this.id = jQuery(el).attr('id');
 		try {
@@ -781,6 +784,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 
 		// bind
 		var self = this;
+		self.trace('init', 'binding event listeners');
 		this.editor = [];
 		this.editor[this.id + '-lhs'] = CodeMirror.fromTextArea(lhstx, this.lhs_cmsettings);
 		this.editor[this.id + '-rhs'] = CodeMirror.fromTextArea(rhstx, this.rhs_cmsettings);
@@ -795,9 +799,6 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 				if (self.settings.resize) self.settings.resize(init);
 				self.editor[self.id + '-lhs'].refresh();
 				self.editor[self.id + '-rhs'].refresh();
-				if (self.settings.autoupdate) {
-					self._changing(self.id + '-lhs', self.id + '-rhs');
-				}
 			};
 			jQuery(window).on('resize.mergely',
 				function () {
@@ -839,19 +840,34 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			gutterClicked.call(this, 'rhs', n, ev);
 		}.bind(this));
 
-		//bind
+		// if `lhs` and `rhs` are passed in, this sets the values in each editor
+		// and kicks off the whole change pipeline.
 		var setv;
 		if (this.settings.lhs) {
-			setv = this.editor[this.id + '-lhs'].getDoc().setValue;
-			this.settings.lhs(setv.bind(this.editor[this.id + '-lhs'].getDoc()));
+			self.trace('init', 'setting lhs value');
+			this.settings.lhs(function setValue(value) {
+				this._initializing = true;
+				this.editor[this.id + '-lhs'].getDoc().setValue(value);
+			}.bind(this));
 		}
 		if (this.settings.rhs) {
-			setv = this.editor[this.id + '-rhs'].getDoc().setValue;
-			this.settings.rhs(setv.bind(this.editor[this.id + '-rhs'].getDoc()));
+			self.trace('init', 'setting rhs value');
+			this.settings.rhs(function setValue(value) {
+				this._initializing = true;
+				this.editor[this.id + '-rhs'].getDoc().setValue(value);
+			}.bind(this));
 		}
+		this.element.one('updated', () => {
+			this._initializing = false;
+			if (self.settings.loaded) {
+				self.settings.loaded();
+			}
+		});
+		this.trace('init', 'bound');
+		this.editor[this.id + '-lhs'].focus();
 	},
 
-	_scroll_to_change : function(change) {
+	_scroll_to_change: function(change) {
 		if (!change) return;
 		var self = this;
 		var led = self.editor[self.id+'-lhs'];
@@ -862,6 +878,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		if (change["lhs-line-to"] >= 0) {
 			led.scrollIntoView({line: change["lhs-line-to"]});
 		}
+		led.focus();
 	},
 
 	_scrolling: function(editor_name) {
@@ -1022,8 +1039,9 @@ 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 && this.changes.length) {
-			// go to first difference on start-up
+		if (this._current_diff === undefined && this.changes.length && this._initializing) {
+			// go to first difference on start-up where values are provided in
+			// settings.
 			this._current_diff = 0;
 			this._scroll_to_change(this.changes[0]);
 		}
@@ -1034,6 +1052,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		this.trace('change', 'markup time', Timer.stop());
 		this._draw_diff(editor_name1, editor_name2, this.changes);
 		this.trace('change', 'draw time', Timer.stop());
+		this.element.trigger('updated');
 	},
 	_parse_diff: function (editor_name1, editor_name2, diff) {
 		this.trace('diff', 'diff results:\n', diff);
@@ -1354,17 +1373,17 @@ 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;
 					 ((j >= 0) && (j <= llt)) || ((k >= 0) && (k <= rlt));
 					 ++j, ++k) {
 					var lhs_line, rhs_line;
-					if (k + p > rlt && this._is_change_in_view('lhs', lhsvp, change)) {
+					if (k > rlt) {
 						// lhs continues past rhs, mark lhs as deleted
 						lhs_line = led.getLine( j );
 						marktext.push([led, {line:j, ch:0}, {line:j, ch:lhs_line.length}, {className: 'mergely ch d lhs'}]);
 						continue;
 					}
-					if (j + p > llt && this._is_change_in_view('rhs', rhsvp, change)) {
+					if (j > llt) {
 						// rhs continues past lhs, mark rhs as added
 						rhs_line = red.getLine( k );
 						marktext.push([red, {line:k, ch:0}, {line:k, ch:rhs_line.length}, {className: 'mergely ch a rhs'}]);

webpack.dev.js

@@ -39,8 +39,7 @@ module.exports = {
 
 	plugins: [
 		new HtmlWebpackPlugin({
-			template: 'examples/app.html',
-			filename: 'mergely.html'
+			template: path.join(__dirname, 'examples', 'app.html')
 		}),
 		new webpack.ProvidePlugin({
 			$: 'jquery',