4.0.13

updated changes
Fix bug during refactor (#127 )
2025-12-10 16:27:57 +08:00 · 2019-12-21 10:10:39 +00:00 · 2019-12-21 10:10:34 +00:00 · 2019-12-21 10:05:16 +00:00 · 2019-10-07 13:14:21 +01:00 · 2019-10-07 13:14:02 +01:00
15 changed files with 462 additions and 140 deletions
--- a/.babelrc.js
+++ b/.babelrc.js
@@ -0,0 +1,19 @@
+module.exports = function(api) {
+	return {
+		presets: [
+			[
+				"@babel/preset-env",
+				{
+					targets: {
+						chrome: 59,
+						edge: 13,
+						firefox: 50,
+						ie: 11
+					},
+					// for uglifyjs...
+					forceAllTransforms: api.env("production"),
+				},
+			],
+		],
+	};
+};
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,5 @@
 /node_modules
 /lib
 mergely-*.tgz
+package-lock.json
+*.log
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -1,5 +1,39 @@
 # Changes

+## 4.0.13
+* patch: fixed issue where `lhs_cmsettings` and  `lhs_cmsettings` were ignored
+* patch: updated documentation
+* patch: fixed typos
+* patch: fixes issue #115 merging deleted line(s) from lhs would munge rhs text
+* patch: fixes two typos in README.md
+
+## 4.0.11
+* patch: fixes typo in example ajax.html
+
+## 4.0.10
+* patch: fixes bad 4.0.9 artifacts
+
+## 4.0.9
+* patch: fixes issue #106 merge edge-case with add
+
+## 4.0.8
+* chore: updated webpack
+
+## 4.0.7
+* chore: updated documentation
+
+## 4.0.6
+
+* patch: fixes issue #89 missing merge buttons
+
+## 4.0.5
+
+* patch: fixes issue #85 XSS vulnerability with DOM id
+
+## 4.0.2
+
+* patch: fixes issue #83 poor rendering performance
+
 ## 4.0.0

 ### Breaking changes
--- a/README.md
+++ b/README.md
@@ -2,16 +2,23 @@

 http://mergely.com

-Mergely is a javascript component to diff/merge files interactively in a browser, providing rich API that enables you to easily integrate Mergely into your existing web application.  It is suitable for comparing text files online, e.g. .txt, .html, .xml, .c, .cpp, .java, etc.  Mergely has a javascript implementation of the Longest Common Subsequence diff algorithm (LCS) and a customizable markup engine.
+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.  
+
+Mergely has a JavaScript implementation of the Longest Common Subsequence (LCS) diff algorithm, and a customizable markup engine.

 ## Installation

 ### Installation via webpack
-The recommended way to install mergely is to use npm and [webpack](https://webpack.js.org/) to install mergely and its dependencies.  It is highly recommended that you start by cloning [mergely-webpack](https://github.com/wickedest/mergely-webpack).  It has everything that you need to get started.
+The recommended way to install mergely and its dependencies is to use a Node package manager (`npm` or `yarn`) and [webpack](https://webpack.js.org/).
+
+It is highly recommended that you start by cloning [mergely-webpack](https://github.com/wickedest/mergely-webpack). The webpack has everything that you need to get started.
+
+### Angular 6.1.1
+You can also use mergely within angular. You can start by cloning [mergely-angular](https://github.com/wickedest/mergely-angular).

 ### Installation via .tgz

-Unpack mergely.tgz into a folder, e.g. `./lib`, and then add the following to the `<head>` of your target html source file.
+Unpack mergely.tgz into a folder, for example, `./lib`, and add the following to the `<head>` of your target HTML source file.

 ```html
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
@@ -22,7 +29,9 @@ Unpack mergely.tgz into a folder, e.g. `./lib`, and then add the following to th
 <link rel="stylesheet" media="all" href="lib/mergely/lib/mergely.css" />
 ```

-Create a div for the editor in `<body>`.  This example uses a style that provides 8px padding (`mergely-full-screen-8`):
+Create a div for the editor in `<body>`.  
+
+This example uses a style that provides 8px padding (`mergely-full-screen-8`):

 ```html
 <div class="mergely-full-screen-8">
@@ -42,13 +51,10 @@ $(document).ready(function () {

 ### Synchronous content initialization

-The following example can be used to set the `lhs` and `rhs` editors synchronously (i.e. their contents are already known):
+The following example can be used to set the `lhs` and `rhs` editors synchronously (that is, when their contents are already known):

 ```js
 $(document).ready(function () {
-    // initialize mergely
-    $('#mergely').mergely();
-
    // set editor content
    $('#mergely').mergely({
        lhs: function(setValue) {
@@ -61,7 +67,7 @@ $(document).ready(function () {
 });
 ```

-### Aynchronous initialization
+### Asynchronous initialization

 If the editor contents are retrieved asynchronously (recommended), then retrieve the editor contents and set them:

@@ -86,7 +92,7 @@ $(document).ready(function () {
 |<a name="autoresize"></a>autoresize|boolean|`true`|Enables/disables the auto-resizing of the editor.|
 |<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 calcualtes a diff. Only used when `readonly` enabled.|
+|<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="editor_width"></a>editor_width|string|`400px`|Starting width.|
 |<a name="editor_height"></a>editor_height|string|`400px`|Starting height.|
@@ -95,12 +101,12 @@ $(document).ready(function () {
 |<a name="ignorews"></a>ignorews|boolean|`false`|Ignores white-space.|
 |<a name="ignorecase"></a>ignorecase|boolean|`false`|Ignores case when differientiating.
 |<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 spearate notice file).|
+|<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="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_margin"></a>rhs_margin|string|`right`|Location for the rhs markup margin is either right or left.|
+|<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.|
 |<a name="viewport"></a>viewport|boolean|`false`|Enables/disables the viewport. Enabling the viewport can give a performance gain for large documents.|
@@ -243,7 +249,7 @@ $('#mergely').mergely('options');

 ### resize

-Resize the editor.  Must be called explicitly if `autoresize` is disabled.
+Resizes the editor. It must be called explicitly if `autoresize` is disabled.

 #### Parameters
 None.
@@ -313,7 +319,7 @@ $('#mergely').mergely('search', 'lhs', 'needle');

 ### swap

-Swap the content of the left and right editors.
+Swaps the content of the left and right editors.

 #### Parameters
 None.
@@ -337,7 +343,7 @@ $('#mergely').mergely('unmarkup');

 ### update

-Manual update; recalculates diff and applies new settings.
+Manually updates the editor by recalculating the diff and applying new settings.

 #### Parameters
 None.
--- a/examples/ajax.html
+++ b/examples/ajax.html
@@ -104,7 +104,7 @@ This example demonstrates how to set left and right editors using ajax.
 				//a.innerHTML = "content ready.";
 			}
 			document.getElementById('save-lhs').addEventListener('mouseover', function() { download_content(this, "lhs"); }, false);
-			document.getElementById('save-rhs').addEventListener('mouseover', function() { download_content(this, "lhs"); }, false);
+			document.getElementById('save-rhs').addEventListener('mouseover', function() { download_content(this, "rhs"); }, false);
 			document.getElementById('ignorews').addEventListener('change', function() {
 				$('#compare').mergely('options', { ignorews: this.checked });
 			}, false);
--- a/examples/app.html
+++ b/examples/app.html
@@ -0,0 +1,21 @@
+<!--
+This example demonstrates the minimum amount of code required to use Mergely.
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" /><title>Mergely - Simple Example</title>
+	<meta http-equiv="X-UA-Compatible" content="chrome=1, IE=edge">
+	<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" />
+	<meta name="author" content="Jamie Peabody" />
+</head>
+<body>
+	<div class="mergely-full-screen-8">
+		<div class="mergely-resizer">
+			<div id="mergely"></div>
+		</div>
+	</div>
+</body>
+</html>
--- a/examples/app.js
+++ b/examples/app.js
@@ -0,0 +1,18 @@
+require('codemirror/lib/codemirror.css');
+require('../src/mergely.css');
+
+$(document).ready(function () {
+	$('#mergely').mergely({
+		license: 'lgpl',
+		cmsettings: {
+			readOnly: false
+		},
+		_debug: '',
+		lhs: function(setValue) {
+			setValue('the quick red fox\njumped over the hairy dog');
+		},
+		rhs: function(setValue) {
+			setValue('the quick brown fox\njumped over the lazy dog');
+		}
+	});
+});
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -1,6 +1,5 @@
 const path = require('path');
-const webpackCfg = require('./webpack.config');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');

 module.exports = function(config) {
 	config.set({
@@ -40,9 +39,11 @@ module.exports = function(config) {
 		webpack: {
 			entry: './src/mergely.js',
 			module: {
-				loaders: [
-					{ test: /\.css$/, loader: ExtractTextPlugin.extract('css-loader') }
-				]
+				rules: [{
+					test: /\.(js)$/,
+					exclude: /node_modules/,
+					use: ['babel-loader']
+				}]
 			},
 			resolve: {
 				extensions: ['.js'],
@@ -52,7 +53,11 @@ module.exports = function(config) {
 				}
 			},
 			plugins: [
-				new ExtractTextPlugin('mergely.css')
+				new CopyWebpackPlugin([{
+					from: 'src/mergely.css',
+					to: 'mergely.css',
+					toType: 'file'
+				}])
 			]
 		},
 		webpackServer: {
--- a/package.json
+++ b/package.json
@@ -1,17 +1,12 @@
 {
  "name": "mergely",
-  "version": "4.0.3",
+  "version": "4.0.13",
  "description": "A javascript UI for diff/merge",
  "directories": {
    "doc": "doc",
    "example": "examples",
    "test": "test"
  },
-  "scripts": {
-    "build": "rm -rf lib && webpack",
-    "test": "karma start",
-    "test:chrome": "karma start --browsers Chrome --singleRun=false"
-  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/wickedest/Mergely.git"
@@ -20,7 +15,8 @@
  "files": [
    "lib",
    "examples",
-    "README.md"
+    "README.md",
+    "LICENSE"
  ],
  "keywords": [
    "merge",
@@ -38,14 +34,20 @@
  },
  "homepage": "https://github.com/wickedest/Mergely#readme",
  "devDependencies": {
+    "@babel/core": "^7.1.6",
+    "@babel/preset-env": "^7.1.6",
+    "@webpack-cli/init": "^0.1.2",
+    "babel-loader": "^8.0.4",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "chai": "^4.1.2",
    "codemirror": "^5.32.0",
-    "css-loader": "^0.28.7",
-    "extract-text-webpack-plugin": "^3.0.2",
+    "copy-webpack-plugin": "^4.6.0",
+    "css-loader": "^0.28.11",
    "file-loader": "^1.1.5",
+    "html-webpack-plugin": "^3.2.0",
    "image-webpack-loader": "^3.4.2",
    "jquery": "^3.2.1",
-    "karma": "^2.0.0",
+    "karma": "^3.1.1",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage-istanbul-reporter": "^1.3.0",
@@ -53,6 +55,16 @@
    "karma-mocha-reporter": "^2.2.5",
    "karma-webpack": "^2.0.9",
    "mocha": "^4.0.1",
-    "webpack": "^3.8.1"
+    "style-loader": "^0.23.0",
+    "uglifyjs-webpack-plugin": "^2.0.1",
+    "webpack": "^4.20.2",
+    "webpack-cli": "^3.1.2",
+    "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",
+    "test": "karma start",
+    "test:chrome": "karma start --browsers Chrome --singleRun=false"
  }
 }
--- a/src/Timer.js
+++ b/src/Timer.js
@@ -0,0 +1,16 @@
+class Timer {
+	static start() {
+		Timer.t0 = Date.now();
+	}
+
+	static stop() {
+		var t1 = Date.now();
+		var td = t1 - Timer.t0;
+		Timer.t0 = t1;
+		return td;
+	}
+}
+
+Timer.t0 = 0;
+
+exports = module.exports = Timer;
--- a/src/mergely.js
+++ b/src/mergely.js
@@ -1,25 +1,13 @@
 "use strict";

-require('./mergely.css');
-
 (function(jQuery, CodeMirror) {

 var Mgly = {};

-Mgly.Timer = function(){
-	var self = this;
-	self.start = function() { self.t0 = new Date().getTime(); };
-	self.stop = function() {
-		var t1 = new Date().getTime();
-		var d = t1 - self.t0;
-		self.t0 = t1;
-		return d;
-	};
-	self.start();
-};
-
 Mgly.ChangeExpression = new RegExp(/(^(?![><\-])*\d+(?:,\d+)?)([acd])(\d+(?:,\d+)?)/);

+const Timer = require('./Timer');
+
 Mgly.DiffParser = function(diff) {
 	var changes = [];
 	var change_id = 0;
@@ -461,15 +449,15 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			lineNumbers: this.settings.line_numbers
 		};
 		var lhs_gutters = [];
-		if (this.lhs_cmsettings.line_numbers) {
+		if (this.lhs_cmsettings.lineNumbers) {
 			lhs_gutters = ['merge', 'CodeMirror-linenumbers']
 		}
 		var rhs_gutters = [];
-		if (this.rhs_cmsettings.line_numbers) {
+		if (this.rhs_cmsettings.lineNumbers) {
 			rhs_gutters = ['merge', 'CodeMirror-linenumbers']
 		}
-		jQuery.extend(true, this.lhs_cmsettings, this.settings.cmsettings, { gutters: lhs_gutters }, this.settings);
-		jQuery.extend(true, this.rhs_cmsettings, this.settings.cmsettings, { gutters: rhs_gutters }, this.settings);
+		jQuery.extend(true, this.lhs_cmsettings, this.settings.cmsettings, { gutters: lhs_gutters }, this.settings.lhs_cmsettings);
+		jQuery.extend(true, this.rhs_cmsettings, this.settings.cmsettings, { gutters: rhs_gutters }, this.settings.rhs_cmsettings);

 		// bind if the element is destroyed
 		this.element.bind('destroyed', jQuery.proxy(this.teardown, this));
@@ -659,6 +647,13 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 	bind: function(el) {
 		this.element.hide();
 		this.id = jQuery(el).attr('id');
+		try {
+			// ensure the id is valid for jQuery
+			jQuery(`#${this.id}`);
+		} catch (ex) {
+			console.error(`jQuery failed to find mergely: #${this.id}`);
+			return;
+		}
 		this.changed_timeout = null;
 		this.chfns = {};
 		this.chfns[this.id + '-lhs'] = [];
@@ -676,7 +671,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		}
 		else {
 			// homebrew
-			var style = 'opacity:0.4;width:10px;height:15px;background-color:#888;cursor:pointer;text-align:center;color:#eee;border:1px solid #222;margin-right:5px;margin-top: -2px;';
+			var style = 'opacity:0.6;height:16px;background-color:#bfbfbf;cursor:pointer;text-align:center;color:#eee;border:1px solid #848484;margin-right:-15px;margin-top:-2px;';
 			merge_lhs_button = '<div style="' + style + '" title="Merge left">&lt;</div>';
 			merge_rhs_button = '<div style="' + style + '" title="Merge right">&gt;</div>';
 		}
@@ -686,17 +681,32 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		// create the textarea and canvas elements
 		var height = '10px';
 		var width = '10px';
-		this.element.append(jQuery('<div id="mergely-splash">'));
-		this.element.append(jQuery('<div class="mergely-margin" style="height: ' + height + '"><canvas id="' + this.id + '-lhs-margin" width="8px" height="' + height + '"></canvas></div>'));
-		this.element.append(jQuery('<div style="position:relative;width:' + width + '; height:' + height + '" id="' + this.id + '-editor-lhs" class="mergely-column"><textarea style="" id="' + this.id + '-lhs"></textarea></div>'));
-		this.element.append(jQuery('<div class="mergely-canvas" style="height: ' + height + '"><canvas id="' + this.id + '-lhs-' + this.id + '-rhs-canvas" style="width:28px" width="28px" height="' + height + '"></canvas></div>'));
-		var rmargin = jQuery('<div class="mergely-margin" style="height: ' + height + '"><canvas id="' + this.id + '-rhs-margin" width="8px" height="' + height + '"></canvas></div>');
+
+		var splash = jQuery('<div id="mergely-splash">');
+		var canvasLhs = jQuery(`<div class="mergely-margin" style="height: '${height}'"><canvas id="lhs-margin" width="8px" height="'${height}'"></canvas></div>`);
+		canvasLhs.find('#lhs-margin').attr('id', `${this.id}-lhs-margin`);
+		var editorLhs = jQuery(`<div style="position:relative;width:'${width}'; height:'${height}'" id="editor-lhs" class="mergely-column"><textarea id="text-lhs"></textarea></div>`);
+		editorLhs.eq(0).attr('id', `${this.id}-editor-lhs`);
+		editorLhs.find('#text-lhs').attr('id', `${this.id}-lhs`);
+		var canvasMid = jQuery(`<div class="mergely-canvas" style="height: '${height}'"><canvas id="lhs-rhs-canvas" style="width:28px" width="28px" height="'${height}'"></canvas></div>`);
+		canvasMid.find('#mergely-canvas').attr('id', `${this.id}-mergely-canvas`);
+		canvasMid.find('#lhs-rhs-canvas').attr('id', `${this.id}-lhs-${this.id}-rhs-canvas`);
+
+		this.element.append(splash);
+		this.element.append(canvasLhs);
+		this.element.append(editorLhs);
+		this.element.append(canvasMid);
+		var canvasRhs = jQuery(`<div class="mergely-margin" style="height: '${height}'"><canvas id="rhs-margin" width="8px" height="'${height}'"></canvas></div>`);
+		canvasRhs.find('#rhs-margin').attr('id', `${this.id}-rhs-margin`);
 		if (this.settings.rhs_margin == 'left') {
-			this.element.append(rmargin);
+			this.element.append(canvasRhs);
 		}
-		this.element.append(jQuery('<div style="width:' + width + '; height:' + height + '" id="' + this.id + '-editor-rhs" class="mergely-column"><textarea style="" id="' + this.id + '-rhs"></textarea></div>'));
+		var editorRhs = jQuery(`<div style="width:'${width}'; height:'${height}'" id="editor-rhs" class="mergely-column"><textarea id="text-rhs"></textarea></div>`);
+		editorRhs.eq(0).attr('id', `${this.id}-editor-rhs`);
+		editorRhs.find('#text-rhs').attr('id', `${this.id}-rhs`);
+		this.element.append(editorRhs);
 		if (this.settings.rhs_margin != 'left') {
-			this.element.append(rmargin);
+			this.element.append(canvasRhs);
 		}
 		if (!this.settings.sidebar) {
 			this.element.find('.mergely-margin').css({display: 'none'});
@@ -729,37 +739,47 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			}).append('<p><img width="36" height="36" alt="mergely" src="' + icon + '" style="float:left;padding-right:10px;" />This software is a Combined Work using Mergely and is covered by the ' + lic + ' license.  For the full license, see <a target="_blank" href="http://www.mergely.com">http://www.mergely.com/license.</a></p>');
 			jQuery('body').one('click', function () {
 				jQuery('#mergely-splash').fadeOut(100, 'linear', function () {
-					this.remove();
+					jQuery('#mergely-splash').remove();
 				});
 			});
 		}

+		// check initialization
+		var rhstx;
+		try {
+			rhstx = this.element.find(`#${this.id}-rhs`).get(0);
+		} catch (ex) {
+		}
+		if (!rhstx) {
+			console.error('rhs textarea not defined - Mergely not initialized properly');
+			return;
+		}
+		var lhstx;
+		try {
+			lhstx = this.element.find(`#${this.id}-lhs`).get(0);
+		} catch (ex) {
+		}
+		if (!lhstx) {
+			console.error('lhs textarea not defined - Mergely not initialized properly');
+			return;
+		}
+
 		// 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; };';
+		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; };`;
 		if (this.settings.autoresize) {
-			cmstyle += this.id + ' .CodeMirror-scroll { height: 100%; overflow: auto; }';
+			cmstyle += `${this.id} .CodeMirror-scroll { height: 100%; overflow: auto; }`;
 		}
 		// adjust the margin line height
 		cmstyle += '\n.CodeMirror { line-height: 18px; }';
-		jQuery('<style type="text/css">' + cmstyle + '</style>').appendTo('head');
+		jQuery(`<style type="text/css">${cmstyle}</style>`).appendTo('head');

-		//bind
-		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 = this.element.find('#' + this.id + '-lhs').get(0);
-		if (!rhstx) {
-			console.error('lhs textarea not defined - Mergely not initialized properly');
-			return;
-		}
+		// bind
 		var self = this;
 		this.editor = [];
 		this.editor[this.id + '-lhs'] = CodeMirror.fromTextArea(lhstx, this.lhs_cmsettings);
@@ -918,13 +938,13 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			else this.trace('scroll', 'not scrolling other side');

 			if (this.settings.autoupdate) {
-				var timer = new Mgly.Timer();
+				Timer.start();
 				this._calculate_offsets(editor_name1, editor_name2, this.changes);
-				this.trace('change', 'offsets time', timer.stop());
+				this.trace('change', 'offsets time', Timer.stop());
 				this._markup_changes(editor_name1, editor_name2, this.changes);
-				this.trace('change', 'markup time', timer.stop());
+				this.trace('change', 'markup time', Timer.stop());
 				this._draw_diff(editor_name1, editor_name2, this.changes);
-				this.trace('change', 'draw time', timer.stop());
+				this.trace('change', 'draw time', Timer.stop());
 			}
 			this.trace('scroll', 'scrolled');
 		}
@@ -934,9 +954,9 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		var self = this;
 		if (this.changed_timeout != null) clearTimeout(this.changed_timeout);
 		this.changed_timeout = setTimeout(function(){
-			var timer = new Mgly.Timer();
+			Timer.start();
 			self._changed(editor_name1, editor_name2);
-			self.trace('change', 'total time', timer.stop());
+			self.trace('change', 'total time', Timer.stop());
 		}, this.settings.change_timeout);
 	},
 	_changed: function(editor_name1, editor_name2) {
@@ -947,7 +967,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		var self = this, name, editor, fns, timer, i, change, l;

 		var clear_changes = function() {
-			timer = new Mgly.Timer();
+			Timer.start();
 			for (i = 0, l = editor.lineCount(); i < l; ++i) {
 				editor.removeLineClass(i, 'background');
 			}
@@ -961,7 +981,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 				change.clear();
 			}
 			editor.clearGutter('merge');
-			self.trace('change', 'clear time', timer.stop());
+			self.trace('change', 'clear time', Timer.stop());
 		};

 		for (name in this.editor) {
@@ -997,23 +1017,23 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 	_diff: function(editor_name1, editor_name2) {
 		var lhs = this.editor[editor_name1].getValue();
 		var rhs = this.editor[editor_name2].getValue();
-		var timer = new Mgly.Timer();
+		Timer.start();
 		var d = new Mgly.diff(lhs, rhs, this.settings);
-		this.trace('change', 'diff time', timer.stop());
+		this.trace('change', 'diff time', Timer.stop());
 		this.changes = Mgly.DiffParser(d.normal_form());
-		this.trace('change', 'parse time', timer.stop());
+		this.trace('change', 'parse time', Timer.stop());
 		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]);
 		}
-		this.trace('change', 'scroll_to_change time', timer.stop());
+		this.trace('change', 'scroll_to_change time', Timer.stop());
 		this._calculate_offsets(editor_name1, editor_name2, this.changes);
-		this.trace('change', 'offsets time', timer.stop());
+		this.trace('change', 'offsets time', Timer.stop());
 		this._markup_changes(editor_name1, editor_name2, this.changes);
-		this.trace('change', 'markup time', timer.stop());
+		this.trace('change', 'markup time', Timer.stop());
 		this._draw_diff(editor_name1, editor_name2, this.changes);
-		this.trace('change', 'draw time', timer.stop());
+		this.trace('change', 'draw time', Timer.stop());
 	},
 	_parse_diff: function (editor_name1, editor_name2, diff) {
 		this.trace('diff', 'diff results:\n', diff);
@@ -1203,7 +1223,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		var lhsvp = this._get_viewport_side(editor_name1);
 		var rhsvp = this._get_viewport_side(editor_name2);

-		var timer = new Mgly.Timer();
+		Timer.start();
 		led.operation(function() {
 			for (var i = 0; i < changes.length; ++i) {
 				var change = changes[i];
@@ -1256,7 +1276,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			}
 		}.bind(this));

-		this.trace('change', 'markup lhs-editor time', timer.stop());
+		this.trace('change', 'markup lhs-editor time', Timer.stop());
 		red.operation(function() {
 			for (var i = 0; i < changes.length; ++i) {
 				var change = changes[i];
@@ -1308,7 +1328,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 				}
 			}
 		}.bind(this));
-		this.trace('change', 'markup rhs-editor time', timer.stop());
+		this.trace('change', 'markup rhs-editor time', Timer.stop());

 		// mark text deleted, LCS changes
 		var marktext = [], i, j, k, p;
@@ -1368,7 +1388,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 				}
 			}
 		}
-		this.trace('change', 'LCS marktext time', timer.stop());
+		this.trace('change', 'LCS marktext time', Timer.stop());

 		// mark changes outside closure
 		led.operation(function() {
@@ -1388,7 +1408,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			}
 		});

-		this.trace('change', 'LCS markup time', timer.stop());
+		this.trace('change', 'LCS markup time', Timer.stop());

 		// merge buttons
 		var ed = {lhs:led, rhs:red};
@@ -1452,7 +1472,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			}
 		}

-		this.trace('change', 'markup buttons time', timer.stop());
+		this.trace('change', 'markup buttons time', Timer.stop());
 	},
 	_merge_change :	function(change, side, oside) {
 		if (!change) return;
@@ -1476,13 +1496,15 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			odoc.replaceRange(text, CodeMirror.Pos(ofrom, 0), CodeMirror.Pos(oto, otolen));
 		} else if ((oside === 'lhs' && change['op'] === 'd') || (oside === 'rhs' && change['op'] === 'a')) {
 			if (from > 0) {
-				text = doc.getRange(CodeMirror.Pos(from - 1, fromlen), CodeMirror.Pos(to, tolen));
+				text = doc.getRange(CodeMirror.Pos(from, fromlen), CodeMirror.Pos(to, tolen));
+				ofrom += 1;
 			} else {
 				text = doc.getRange(CodeMirror.Pos(0, 0), CodeMirror.Pos(to + 1, 0));
 			}
 			odoc.replaceRange(text, CodeMirror.Pos(ofrom - 1, 0), CodeMirror.Pos(oto + 1, 0));
 		} else if ((oside === 'rhs' && change['op'] === 'd') || (oside === 'lhs' && change['op'] === 'a')) {
 			if (from > 0) {
+				fromlen = doc.getLine(from - 1).length + 1;
 				text = doc.getRange(CodeMirror.Pos(from - 1, fromlen), CodeMirror.Pos(to, tolen));
 			} else {
 				text = doc.getRange(CodeMirror.Pos(0, 0), CodeMirror.Pos(to + 1, 0));
--- a/tests/mergely.spec.js
+++ b/tests/mergely.spec.js
@@ -20,9 +20,10 @@ describe('mergely', function () {
 	};

 	afterEach(() => {
-		$('#mergely').mergely('unbind');
-		$('#mergely').mergelyUnregister();
-		$('#mergely').remove();
+		const mergely = $('#mergely');
+		mergely.mergely('unbind');
+		mergely.mergelyUnregister();
+		mergely.remove();
 	});

 	describe('initialization', () => {
@@ -335,6 +336,12 @@ describe('mergely', function () {
 			dir: 'lhs',
 			name: 'delete is lines 2-3 and insert into middle of rhs'
 		},
+		{
+			lhs: 'a\nb\nc',
+			rhs: 'a\nb\nx\nc',
+			dir: 'lhs',
+			name: 'delete line 3 of length 1 of rhs and will be replaced with empty line 2 of lhs'
+		},
 		// delete 36-43 merge rhs
 		{
 			lhs: '\na',
@@ -383,6 +390,60 @@ describe('mergely', function () {
 			rhs: 'a\nd',
 			dir: 'rhs',
 			name: 'delete is lines 2-3 and insert into middle of rhs'
+		},
+		{
+			lhs: 'a\nb\nc',
+			rhs: 'a\nb\nx\nc',
+			dir: 'rhs',
+			name: 'merge rhs line 3 of length 1 and insert after line 2 of lhs'
+		},
+		{
+			lhs: '\ngood',
+			rhs: 'good',
+			dir: 'rhs',
+			name: 'lhs has deleted line at start'
+		},
+		{
+			lhs: '\na\nb\nc\ngood',
+			rhs: 'good',
+			dir: 'rhs',
+			name: 'lhs has multiple deleted lines at start'
+		},
+		{
+			lhs: 'good\n',
+			rhs: 'good',
+			dir: 'rhs',
+			name: 'lhs has deleted line at end (issue #115)'
+		},
+		{
+			lhs: 'good\na\nb\nc',
+			rhs: 'good',
+			dir: 'rhs',
+			name: 'lhs has multiple deleted lines at end (issue #115)'
+		},
+		{
+			lhs: 'good',
+			rhs: '\ngood',
+			dir: 'lhs',
+			name: 'rhs has added line at start'
+		},
+		{
+			lhs: 'good',
+			rhs: '\na\nb\nc\ngood',
+			dir: 'lhs',
+			name: 'rhs has multiple added lines at start'
+		},
+		{
+			lhs: 'good',
+			rhs: 'good\n',
+			dir: 'lhs',
+			name: 'rhs has added line at end'
+		},
+		{
+			lhs: 'good',
+			rhs: 'good\na\nb\nc',
+			dir: 'lhs',
+			name: 'rhs has multiple added lines at end'
 		}];

 		opts.forEach((opt, i) => {
@@ -401,6 +462,7 @@ describe('mergely', function () {
 						for (let i = 0; i < opt.next; ++i) {
 							$('#mergely').mergely('scrollToDiff', 'next');
 						}
+						expect($('.merge-button').length > 0).to.be.true;
 						$('#mergely').mergely('mergeCurrentChange', opt.dir);
 						if (opt.dir === 'lhs') {
 							expect($('#mergely').mergely('get', 'lhs')).to.equal(opt.expect || opt.rhs);
@@ -524,5 +586,30 @@ describe('mergely', function () {
 				done();
 			});
 		});
+
+		it('should not be vulnerable to XSS', function (done) {
+			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>";
+				const divs = document.getElementsByTagName('div');
+				editor = $(divs[0]);
+				editor.mergely(options);
+				return editor;
+			};
+
+			$(document).ready(() => {
+				const editor = initXSS({
+					height: 100,
+					viewport: true,
+					license: 'lgpl-separate-notice',
+					lhs: (setValue) => setValue(macbeth),
+					rhs: (setValue) => setValue(macbeth)
+				});
+				expect($('body').find('#injected')).to.have.length(0, 'expected no div with id injected');
+				const divs = document.getElementsByTagName('div');
+				expect(divs).to.have.length(1);
+				expect(divs[0].id).to.equal('mergely<script id="injected">alert(123)</script>');
+				done();
+			});
+		});
 	});
 });
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,38 +0,0 @@
-const webpack = require('webpack');
-const path = require('path');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-
-module.exports = {
-    entry: {
-        mergely: './src/mergely.js',
-        // 'mergely.min': './src/mergely.js'
-    },
-    output: {
-        path: path.join(__dirname, 'lib'),
-        filename: './[name].js',
-        library: 'mergely',
-        libraryTarget: 'umd',
-        umdNamedDefine: true
-    },
-    module: {
-        loaders: [
-            { test: /\.css$/, loader: ExtractTextPlugin.extract('css-loader') }
-        ]
-    },
-    resolve: {
-        extensions: ['.js']
-    },
-    externals: {
-        jquery: 'jQuery',
-        CodeMirror: 'CodeMirror'
-    },
-    plugins: [
-        // new webpack.optimize.UglifyJsPlugin({
-        //     sourceMap: true,
-        //     include: /\.js$/,
-        //     // include: /\.min\.js$/,
-        //     exclude: /node_modules/
-        // }),
-        new ExtractTextPlugin('mergely.css')
-    ]
-};
--- a/webpack.dev.js
+++ b/webpack.dev.js
@@ -0,0 +1,80 @@
+const webpack = require('webpack')
+const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+	mode: 'development',
+
+	module: {
+		rules: [{
+			include: [
+				path.resolve(__dirname, 'src'),
+				path.resolve(__dirname, 'examples')
+			],
+			test: /\.js$/
+		}, {
+			test: /\.(js)$/,
+			exclude: /node_modules/,
+			use: ['babel-loader']
+		}, {
+			test: /\.css$/,
+			use: [{
+				loader: 'style-loader',
+				options: {
+					sourceMap: true
+				}
+			}, {
+				loader: 'css-loader'
+			}]
+		}]
+	},
+
+	resolve: {
+		extensions: ['.js'],
+		alias: {
+			'CodeMirror':	path.join(__dirname, 'node_modules', 'codemirror'),
+			'jQuery':		path.join(__dirname, 'node_modules', 'jquery')
+		}
+	},
+
+	plugins: [
+		new HtmlWebpackPlugin({
+			template: 'examples/app.html',
+			filename: 'mergely.html'
+		}),
+		new webpack.ProvidePlugin({
+			$: 'jquery',
+			jQuery: 'jquery'
+		}),
+		new webpack.ProvidePlugin({
+			CodeMirror: 'codemirror'
+		})
+	],
+
+	entry: {
+		app: [
+			'./examples/app',
+			'./src/mergely',
+		]
+	},
+
+	output: {
+		filename: 'mergely.js',
+	},
+
+	optimization: {
+		splitChunks: {
+			cacheGroups: {
+				vendors: {
+					priority: -10,
+					test: /[\\/]node_modules[\\/]/
+				}
+			},
+
+			chunks: 'async',
+			minChunks: 1,
+			minSize: 30000,
+			name: true
+		}
+	}
+}
--- a/webpack.prod.js
+++ b/webpack.prod.js
@@ -0,0 +1,38 @@
+const webpack = require('webpack');
+const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+module.exports = {
+	mode: 'production',
+	entry: {
+		mergely: './src/mergely.js',
+	},
+	output: {
+		path: path.join(__dirname, 'lib'),
+		filename: './[name].js',
+		library: 'mergely',
+		libraryTarget: 'umd',
+		umdNamedDefine: true
+	},
+	module: {
+		rules: [{
+			test: /\.(js)$/,
+			exclude: /node_modules/,
+			use: ['babel-loader']
+		}]
+	},
+	resolve: {
+		extensions: ['.js']
+	},
+	externals: {
+		jquery: 'jQuery',
+		CodeMirror: 'CodeMirror'
+	},
+	plugins: [
+		new CopyWebpackPlugin([{
+			from: 'src/mergely.css',
+			to: 'mergely.css',
+			toType: 'file'
+		}])
+	]
+};
Author	SHA1	Message	Date
Jamie Peabody	5947f1b313	4.0.13	2019-12-21 10:10:39 +00:00
Jamie Peabody	64960c770a	updated changes	2019-12-21 10:10:34 +00:00
Yiqiu Huang	73c1604981	Fix bug during refactor (#127 )	2019-12-21 10:05:16 +00:00
Andrea	66c4ed650f	Update by adding version 4.0.13 (#125 )	2019-10-07 13:14:21 +01:00
Andrea	7a123a7ed7	Updates to readme file. (#124 ) * Update README.md 'providing rich API that enables you to...' - it's not clear what a rich API means so this doesn't seem helpful, but I couldn't fix it because don't know what you mean. * Update README.md Co-Authored-By: Waldir Pimenta <waldyrious@gmail.com> * Update README.md Co-Authored-By: Waldir Pimenta <waldyrious@gmail.com> * Update README.md Co-Authored-By: Waldir Pimenta <waldyrious@gmail.com> * Update README.md Co-Authored-By: Jamie Peabody <jamie.peabody@gmail.com> * Update README.md Co-Authored-By: Jamie Peabody <jamie.peabody@gmail.com> * Update README.md Co-Authored-By: Jamie Peabody <jamie.peabody@gmail.com>	2019-10-07 13:14:02 +01:00
Jamie Peabody	90ab7f3f5e	patch(issue #115 ): fixes merging deleted line(s) from lhs would munge rhs text (#117 ) * patch(issue #115): fixes merging deleted line(s) from lhs would munge rhs text * updated readme	2019-07-14 12:54:01 +01:00
Edgar Costa	788c5ad17b	Update README.md (#113 )	2019-07-14 12:39:13 +01:00
Jamie Peabody	09cfb5328e	Merge branch 'johan456789-patch-1'	2019-02-11 21:02:36 +00:00
Jamie Peabody	43ae12269c	bump 4.0.11	2019-02-11 21:01:28 +00:00
johan456789	79608df3fb	fix rhs typo	2019-02-10 20:33:21 +08:00
Jamie Peabody	2474005eab	fixes 4.0.9 artifacts	2019-01-23 22:57:22 +00:00
Jamie Peabody	4498b8bbf5	revert debug code	2019-01-23 22:41:59 +00:00
Jamie Peabody	a2eaef8a13	patch(issue #106 ): fixes merge edge-case with add (#107 ) * patch(issue #106): fixes merge edge-case with add * bump	2019-01-23 22:39:04 +00:00
Jamie Peabody	d9f2edc1ad	chore: webpack upgrade (#98 ) * upgraded to webpack 4.x * updated webpack	2018-11-17 09:12:45 +00:00
Jamie Peabody	3d44470103	4.0.7	2018-08-06 13:01:19 +01:00
Jamie Peabody	2c8f6cd340	chore: updated docs	2018-08-06 13:01:13 +01:00
Jamie Peabody	6716096215	patch(issue #89 ): fixes missing merge buttons (#91 ) * patch(fix-89): fixes missing merge buttons * 4.0.6	2018-07-17 13:46:54 -07:00
Jamie Peabody	217674cd07	patch(fix #85 ): better XSS fix (#87 ) * patch(fix #85): fixes xss vulnerability * patch(fix #85): better XSS fix	2018-06-23 03:36:38 -07:00
Jamie Peabody	3812dd6026	patch(fix #85 ): fixes xss vulnerability (#86 )	2018-06-21 14:04:36 -07:00