patch(#95): fixes cursor focus on init (#133)

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

.npmrc

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

CHANGES.md

@@ -1,5 +1,22 @@
 # Changes
 
+## 4.1.1:
+* patch: fixes issue #95
+
+## 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

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.1",
   "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',