patch(#139 ): fixes inline diff rendering issue with whitespace (#158 )

Co-authored-by: Jamie Peabody <jpeabody@axway.com>
patch(#152 ): fixes resize issue when using zoom
2025-12-15 02:48:22 +08:00 · 2021-10-03 16:49:44 +01:00 · 2021-10-02 14:19:15 +01:00 · 2021-09-30 08:05:07 +01:00 · 2021-06-23 21:57:38 +01:00
5 changed files with 116 additions and 38 deletions
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -1,5 +1,14 @@
 # Changes
 ## 4.3.4
 * patch: Fixes inline diff rendering issue with whitespace [#139](https://github.com/wickedest/Mergely/issues/139).
 ## 4.3.3
 * patch: Fixes resize issue when using zoom [#152](https://github.com/wickedest/Mergely/issues/152).
 ## 4.3.2
 * patch: Reset the current change position when [setValue](https://mergely.com/doc##options_callbacks), [clear](https://mergely.com/doc#clear), [lhs](https://mergely.com/doc#lhs) or [rhs](https://mergely.com/doc#rhs) are called.
 ## 4.3.1
 * patch: Updated README.md to fix incorrect option name.
--- a/README.md
+++ b/README.md
@@ -25,8 +25,8 @@ Unpack mergely.tgz into a folder, for example, `./lib`, and add the following to
 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"></script>
 <link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.css" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/search/searchcursor.min.js"></script>
-<script src="lib/mergely/lib/mergely.js" type="text/javascript"></script>
+<script src="package/lib/mergely.js" type="text/javascript"></script>
-<link rel="stylesheet" media="all" href="lib/mergely/lib/mergely.css" />
+<link rel="stylesheet" media="all" href="package/lib/mergely.css" />
 ```
 Create a div for the editor in `<body>`.  
--- a/examples/app.js
+++ b/examples/app.js
@@ -2,18 +2,29 @@ require('codemirror/addon/selection/mark-selection.js');
 require('codemirror/lib/codemirror.css');
 require('../src/mergely.css');
 var lhs = `\
 the quick red fox
 jumped over the hairy dog
 `;
 var rhs = `\
 the quick brown fox
 jumped over the lazy dog
 `;
 $(document).ready(function () {
 	$('#mergely').mergely({
 		license: 'lgpl',
 		ignorews: true,
 		cmsettings: {
 			readOnly: false
 		},
 		_debug: '',
 		lhs: function(setValue) {
-			setValue('the quick red fox\njumped over the hairy dog');
+			setValue(lhs);
 		},
 		rhs: function(setValue) {
-			setValue('the quick brown fox\njumped over the lazy dog');
+			setValue(rhs);
 		}
 	});
 });
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "mergely",
-  "version": "4.3.1",
+  "version": "4.3.4",
  "description": "A javascript UI for diff/merge",
  "directories": {
    "doc": "doc",
--- a/src/mergely.js
+++ b/src/mergely.js
@@ -42,45 +42,85 @@ Mgly.sizeOf = function(obj) {
 };
 Mgly.LCS = function(x, y, options) {
-	this.x = (x && x.replace(/[ ]{1}/g, '\n')) || '';
+	function getPositionOfWords(text, options) {
-	this.y = (y && y.replace(/[ ]{1}/g, '\n')) || '';
+		var exp = new RegExp(/\w+/g);
 		var map = {};
 		var match;
 		var item = 0;
 		var p0 = 0;
 		var p1;
 		var ws0;
 		while ((match = exp.exec(text))) {
 			// if previous ws, then calculate whether not not this should be
 			// included as part of the diff
 			if (!options.ignorews && ws0 && ws0 <= match.index - 1) {
 				map[ item++ ] = {
 					p0: ws0,
 					p1: match.index - 1,
 					ws0,
 					word: text.slice(ws0, match.index)
 				};
 			}
 			// add the words to be matched in diff
 			p0 = match.index;
 			p1 = p0 + match[0].length - 1;
 			ws0 = p1 + 2;
 			map[ item++ ] = {
 				p0,
 				p1,
 				ws0,
 				word: text.slice(p0, p1 + 1)
 			};
 		}
 		return map;
 	}
 	this.options = options;
 	if (options.ignorews) {
 		this.xmap = getPositionOfWords(x, this.options);
 		this.ymap = getPositionOfWords(y, this.options);
 		var xmap = this.xmap;
 		this.x = Object.keys(xmap).map(function (i) { return xmap[i].word; });
 		var ymap = this.ymap;
 		this.y = Object.keys(ymap).map(function (i) { return ymap[i].word; });
 	} else {
 		this.x = x.split('');
 		this.y = y.split('');
 	}
 };
 jQuery.extend(Mgly.LCS.prototype, {
 	clear: function() { this.ready = 0; },
 	diff: function(added, removed) {
 		var d = new Mgly.diff(this.x, this.y, {
-			ignorews: false,
+			ignorews: !!this.options.ignorews,
 			ignoreaccents: !!this.options.ignoreaccents
 		});
 		var changes = Mgly.DiffParser(d.normal_form());
 		var li = 0, lj = 0;
 		for (var i = 0; i < changes.length; ++i) {
 			var change = changes[i];
-			if (change.op != 'a') {
+			if (this.options.ignorews) {
-				// find the starting index of the line
+				if (change.op != 'a') {
-				li = d.getLines('lhs').slice(0, change['lhs-line-from']).join(' ').length;
+					var from = this.xmap[change['lhs-line-from']].p0;
-				// get the index of the the span of the change
+					var to = this.xmap[change['lhs-line-to']].p1 + 1;
-				lj = change['lhs-line-to'] + 1;
+					removed(from, to);
-				// get the changed text
+				}
-				var lchange = d.getLines('lhs').slice(change['lhs-line-from'], lj).join(' ');
+				if (change.op !== 'd') {
-				if (change.op == 'd') lchange += ' ';// include the leading space
+					var from = this.ymap[change['rhs-line-from']].p0;
-				else if (li > 0 && change.op == 'c') li += 1; // ignore leading space if not first word
+					var to = this.ymap[change['rhs-line-to']].p1 + 1;
-				// output the changed index and text
+					added(from, to);
-				removed(li, li + lchange.length);
+				}
-			}
+			} else {
-			if (change.op != 'd') {
+				if (change.op != 'a') {
-				// find the starting index of the line
+					var from = change['lhs-line-from'];
-				li = d.getLines('rhs').slice(0, change['rhs-line-from']).join(' ').length;
+					var to = change['lhs-line-to'] + 1;
-				// get the index of the the span of the change
+					removed(from, to);
-				lj = change['rhs-line-to'] + 1;
+				}
-				// get the changed text
+				if (change.op !== 'd') {
-				var rchange = d.getLines('rhs').slice(change['rhs-line-from'], lj).join(' ');
+					var from = change['rhs-line-from'];
-				if (change.op == 'a') rchange += ' ';// include the leading space
+					var to = change['rhs-line-to'] + 1;
-				else if (li > 0 && change.op == 'c') li += 1; // ignore leading space if not first word
+					added(from, to);
-				// output the changed index and text
+				}
 				added(li, li + rchange.length);
 			}
 		}
 	}
@@ -91,8 +131,16 @@ Mgly.CodeifyText = function(settings) {
    this._diff_codes = {};
 	this.ctxs = {};
 	jQuery.extend(this, settings);
-	this.lhs = settings.lhs.split('\n');
+	if (typeof settings.lhs === 'string') {
-	this.rhs = settings.rhs.split('\n');
+		this.lhs = settings.lhs.split('\n');
 	} else {
 		this.lhs = settings.lhs;
 	}
 	if (typeof settings.rhs === 'string') {
 		this.rhs = settings.rhs.split('\n');
 	} else {
 		this.rhs = settings.rhs;
 	}
 };
 jQuery.extend(Mgly.CodeifyText.prototype, {
@@ -489,11 +537,15 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		this.unbind();
 	},
 	lhs: function(text) {
-		this.changes = []; // invalidate existing changes
+		// invalidate existing changes and current position
 		this.changes = [];
 		delete this._current_diff;
 		this.editor[this.id + '-lhs'].setValue(text);
 	},
 	rhs: function(text) {
-		this.changes = []; // invalidate existing changes
+		// invalidate existing changes and current position
 		this.changes = [];
 		delete this._current_diff;
 		this.editor[this.id + '-rhs'].setValue(text);
 	},
 	update: function() {
@@ -607,7 +659,6 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		else if (!this.rhs_cmsettings.readOnly) re.setValue(le.getValue());
 	},
 	summary: function() {
 		//console.log('HERE');
 		return {
 			numChanges: this.changes.length,
 			lhsLength: this.editor[this.id + '-lhs'].getValue().length,
@@ -634,6 +685,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		if (side == 'rhs' && this.rhs_cmsettings.readOnly) return;
 		var ed = this.editor[this.id + '-' + side];
 		ed.setValue('');
 		delete this._current_diff;
 	},
 	cm: function(side) {
 		return this.editor[this.id + '-' + side];
@@ -659,6 +711,8 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		}
 	},
 	resize: function() {
 		// recalculate line height as it may be zoomed
 		this.em_height = null;
 		this.settings.resize();
 		this._changing(this.id + '-lhs', this.id + '-rhs');
 		this._set_top_offset(this.id + '-lhs');
@@ -820,6 +874,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			var sz_timeout1 = null;
 			var sz = function(init) {
 				if (self.settings.resize) self.settings.resize(init);
 				self.resize();
 				self.editor[self.id + '-lhs'].refresh();
 				self.editor[self.id + '-rhs'].refresh();
 			};
@@ -870,6 +925,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			self.trace('init', 'setting lhs value');
 			this.settings.lhs(function setValue(value) {
 				this._initializing = true;
 				delete this._current_diff;
 				this.editor[this.id + '-lhs'].getDoc().setValue(value);
 			}.bind(this));
 		}
@@ -877,6 +933,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			self.trace('init', 'setting rhs value');
 			this.settings.rhs(function setValue(value) {
 				this._initializing = true;
 				delete this._current_diff;
 				this.editor[this.id + '-rhs'].getDoc().setValue(value);
 			}.bind(this));
 		}
@@ -1422,7 +1479,8 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 					lhs_line = led.getLine( j );
 					rhs_line = red.getLine( k );
 					var lcs = new Mgly.LCS(lhs_line, rhs_line, {
-						ignoreaccents: !!this.settings.ignoreaccents
+						ignoreaccents: !!this.settings.ignoreaccents,
 						ignorews: !!this.settings.ignorews
 					});
 					lcs.diff(
 						function added (from, to) {
Author	SHA1	Message	Date
Jamie Peabody	615e1afd97	patch(#139 ): fixes inline diff rendering issue with whitespace (#158 ) Co-authored-by: Jamie Peabody <jpeabody@axway.com>	2021-10-03 16:49:44 +01:00
Jamie Peabody	b9bc901dd2	patch(#152 ): fixes resize issue when using zoom	2021-10-02 14:19:15 +01:00
Jamie Peabody	b49c9ce40f	Updated README.md Fixed tgz installation instructions.	2021-09-30 08:05:07 +01:00
Jamie Peabody	712cbe8472	patch(#151 ): resets the current diff when setValue, clear, lhs, or rhs are called	2021-06-23 21:57:38 +01:00