bump

* feat(#132): added  option to ignore accented characters

* fixed lf

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

CHANGES.md

@@ -1,7 +1,16 @@
 # Changes
 
+## 4.2.1:
+* chore: updated dependencies, cleared security issues
+
+## 4.2.0:
+* minor: added new option `ignoreaccents` to ignore accented characters.
+
+## 4.1.2:
+* patch: fixes issue #134 where the readme had broken links.
+
 ## 4.1.1:
-* patch: fixes issue #95
+* patch: fixes issue #95 where cursor was not focusing correctly on init.
 
 ## 4.1.0:
 * minor: emits 'updated' event after every change.

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,19 +93,20 @@ $(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.|
 |<a name="fgcolor"></a>fgcolor|string\|number\|object|`{a:'#4ba3fa', c:'#a3a3a3', d:'#ff7f7f', ca:'#4b73ff', cc:'#434343', cd:'#ff4f4f'}`|The foreground color that mergely marks changes with on the canvas.  The value **a** is additions, **c** changes, **d** deletions, and the prefix *c* indicates current/active change (e.g. **cd** current delection).|
 |<a name="ignorews"></a>ignorews|boolean|`false`|Ignores white-space.|
-|<a name="ignorecase"></a>ignorecase|boolean|`false`|Ignores case when differientiating.
+|<a name="ignorecase"></a>ignorecase|boolean|`false`|Ignores case when differientiating.|
+|<a name="ignoreaccents"></a>ignorews|boolean|`false`|Ignores accented characters.|
 |<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.|

karma.conf.js

@@ -53,11 +53,13 @@ module.exports = function(config) {
 				}
 			},
 			plugins: [
-				new CopyWebpackPlugin([{
+                new CopyWebpackPlugin({
-					from: 'src/mergely.css',
+                    patterns: [{
-					to: 'mergely.css',
+                        from: 'src/mergely.css',
-					toType: 'file'
+                        to: 'mergely.css',
-				}])
+                        toType: 'file'
+                    }]
+                })
 			]
 		},
 		webpackServer: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mergely",
-  "version": "4.1.1",
+  "version": "4.2.1",
   "description": "A javascript UI for diff/merge",
   "directories": {
     "doc": "doc",
@@ -36,34 +36,33 @@
   "devDependencies": {
     "@babel/core": "^7.1.6",
     "@babel/preset-env": "^7.1.6",
-    "@webpack-cli/init": "^0.1.2",
+    "@webpack-cli/init": "^1.0.1",
     "babel-loader": "^8.0.4",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "chai": "^4.1.2",
     "codemirror": "^5.50.2",
-    "copy-webpack-plugin": "^4.6.0",
+    "copy-webpack-plugin": "^6.2.1",
-    "css-loader": "^0.28.11",
+    "css-loader": "^5.0.0",
-    "file-loader": "^1.1.5",
+    "file-loader": "^6.1.1",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^4.5.0",
-    "image-webpack-loader": "^3.4.2",
+    "image-webpack-loader": "^7.0.1",
-    "jquery": "^3.2.1",
+    "jquery": "^3.5.1",
-    "karma": "^3.1.1",
+    "karma": "^5.2.3",
     "karma-chai": "^0.1.0",
-    "karma-chrome-launcher": "^2.2.0",
+    "karma-chrome-launcher": "^3.1.0",
     "karma-coverage-istanbul-reporter": "^1.3.0",
-    "karma-mocha": "^1.3.0",
+    "karma-mocha": "^2.0.1",
     "karma-mocha-reporter": "^2.2.5",
-    "karma-webpack": "^2.0.9",
+    "karma-webpack": "^4.0.2",
-    "mocha": "^4.0.1",
+    "mocha": "^8.1.3",
-    "style-loader": "^0.23.0",
+    "style-loader": "^2.0.0",
-    "uglifyjs-webpack-plugin": "^2.0.1",
+    "webpack": "^4.44.2",
-    "webpack": "^4.20.2",
+    "webpack-cli": "^4.0.0",
-    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.11.0"
-    "webpack-dev-server": "^3.1.9"
   },
   "scripts": {
     "build": "rm -rf lib && webpack --config ./webpack.prod.js",
-    "start": "webpack-dev-server -w --debug --progress --colors --config ./webpack.dev.js --content-base ./dist --inline --hot --host 0.0.0.0",
+    "start": "webpack serve --config webpack.dev.js",
     "test": "karma start",
     "test:chrome": "karma start --browsers Chrome --singleRun=false"
   }

src/mergely.js

@@ -41,15 +41,19 @@ Mgly.sizeOf = function(obj) {
 	return size;
 };
 
-Mgly.LCS = function(x, y) {
+Mgly.LCS = function(x, y, options) {
 	this.x = (x && x.replace(/[ ]{1}/g, '\n')) || '';
 	this.y = (y && y.replace(/[ ]{1}/g, '\n')) || '';
+	this.options = options;
 };
 
 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});
+		var d = new Mgly.diff(this.x, this.y, {
+			ignorews: false,
+			ignoreaccents: !!this.options.ignoreaccents
+		});
 		var changes = Mgly.DiffParser(d.normal_form());
 		var li = 0, lj = 0;
 		for (var i = 0; i < changes.length; ++i) {
@@ -86,7 +90,6 @@ Mgly.CodeifyText = function(settings) {
     this._max_code = 0;
     this._diff_codes = {};
 	this.ctxs = {};
-	this.options = {ignorews: false};
 	jQuery.extend(this, settings);
 	this.lhs = settings.lhs.split('\n');
 	this.rhs = settings.rhs.split('\n');
@@ -119,6 +122,9 @@ jQuery.extend(Mgly.CodeifyText.prototype, {
 			if (this.options.ignorecase) {
 				line = line.toLowerCase();
 			}
+			if (this.options.ignoreaccents) {
+				line = line.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+			}
 			var aCode = this._diff_codes[line];
 			if (aCode != undefined) {
 				ctx.codes[i] = aCode;
@@ -133,7 +139,7 @@ jQuery.extend(Mgly.CodeifyText.prototype, {
 });
 
 Mgly.diff = function(lhs, rhs, options) {
-	var opts = jQuery.extend({ignorews: false}, options);
+	var opts = jQuery.extend({ignorews: false, ignoreaccents: false}, options);
 	this.codeify = new Mgly.CodeifyText({
 		lhs: lhs,
 		rhs: rhs,
@@ -385,6 +391,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			viewport: false,
 			ignorews: false,
 			ignorecase: false,
+			ignoreaccents: false,
 			fadein: 'fast',
 			resize_timeout: 500,
 			change_timeout: 150,
@@ -438,7 +445,6 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			_debug: '', //scroll,draw,calc,diff,markup,change,init
 			resized: function() { }
 		}, options);
-
 		// save this element for faster queries
 		this.element = jQuery(el);
 
@@ -1391,7 +1397,9 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 					}
 					lhs_line = led.getLine( j );
 					rhs_line = red.getLine( k );
-					var lcs = new Mgly.LCS(lhs_line, rhs_line);
+					var lcs = new Mgly.LCS(lhs_line, rhs_line, {
+						ignoreaccents: !!this.settings.ignoreaccents
+					});
 					lcs.diff(
 						function added (from, to) {
 							if (self._is_change_in_view('rhs', rhsvp, change)) {

tests/mergely.spec.js

@@ -586,28 +586,48 @@ describe('mergely', function () {
 				done();
 			});
 		});
+	});
 
-		it('should not be vulnerable to XSS', function (done) {
+	it('should not be vulnerable to XSS', function (done) {
-			function initXSS(options) {
+		function initXSS(options) {
-				$('body').get(0).innerHTML = "<!DOCTYPE html><html lang=\"en\"><body><div id='mergely<script id=\"injected\">alert(123)</script>'></div></body></html>";
+			$('body').get(0).innerHTML = "<!DOCTYPE html><html lang=\"en\"><body><div id='mergely<script id=\"injected\">alert(123)</script>'></div></body></html>";
-				const divs = document.getElementsByTagName('div');
+			const divs = document.getElementsByTagName('div');
-				editor = $(divs[0]);
+			editor = $(divs[0]);
-				editor.mergely(options);
+			editor.mergely(options);
-				return editor;
+			return editor;
-			};
+		};
 
-			$(document).ready(() => {
+		$(document).ready(() => {
-				const editor = initXSS({
+			const editor = initXSS({
-					height: 100,
+				height: 100,
-					viewport: true,
+				viewport: true,
-					license: 'lgpl-separate-notice',
+				license: 'lgpl-separate-notice',
-					lhs: (setValue) => setValue(macbeth),
+				lhs: (setValue) => setValue(macbeth),
-					rhs: (setValue) => setValue(macbeth)
+				rhs: (setValue) => setValue(macbeth)
-				});
+			});
-				expect($('body').find('#injected')).to.have.length(0, 'expected no div with id injected');
+			expect($('body').find('#injected')).to.have.length(0, 'expected no div with id injected');
-				const divs = document.getElementsByTagName('div');
+			const divs = document.getElementsByTagName('div');
-				expect(divs).to.have.length(1);
+			expect(divs).to.have.length(1);
-				expect(divs[0].id).to.equal('mergely<script id="injected">alert(123)</script>');
+			expect(divs[0].id).to.equal('mergely<script id="injected">alert(123)</script>');
+			done();
+		});
+	});
+
+	it('should ignore accented characters', function (done) {
+		$(document).ready(() => {
+			const editor = init({
+				height: 100,
+				license: 'lgpl-separate-notice',
+				ignoreaccents: true,
+				lhs: (setValue) => setValue('comunicação'),
+				rhs: (setValue) => setValue('comunicacao')
+			});
+			const { mergely } = $('#mergely');
+
+			$('#mergely').on('updated', () => {
+				console.log('updated');
+				const diff = $('#mergely').mergely('diff');;
+				expect(diff).to.equal('');
 				done();
 			});
 		});

webpack.dev.js

@@ -19,10 +19,7 @@ module.exports = {
 		}, {
 			test: /\.css$/,
 			use: [{
-				loader: 'style-loader',
+				loader: 'style-loader'
-				options: {
-					sourceMap: true
-				}
 			}, {
 				loader: 'css-loader'
 			}]
@@ -69,11 +66,9 @@ module.exports = {
 					test: /[\\/]node_modules[\\/]/
 				}
 			},
-
 			chunks: 'async',
 			minChunks: 1,
-			minSize: 30000,
+			minSize: 30000
-			name: true
 		}
 	}
 }

webpack.prod.js

@@ -29,10 +29,12 @@ module.exports = {
 		CodeMirror: 'CodeMirror'
 	},
 	plugins: [
-		new CopyWebpackPlugin([{
+		new CopyWebpackPlugin({
-			from: 'src/mergely.css',
+			patterns: [{
-			to: 'mergely.css',
+				from: 'src/mergely.css',
-			toType: 'file'
+				to: 'mergely.css',
-		}])
+				toType: 'file'
+			}]
+		})
 	]
 };