chore(release): 5.1.3 [skip ci]

## [5.1.3](https://github.com/wickedest/Mergely/compare/v5.1.2...v5.1.3) (2024-05-06)

### Bug Fixes

* **chore:** updated deps ([#195](https://github.com/wickedest/Mergely/issues/195)) ([c4c6e8a](c4c6e8abd8))

.github/workflows/branch.yaml

@@ -3,7 +3,10 @@ name: Run tests (branch)
 on:
   push:
     branches-ignore:
-      - 'master'
+      - master
+      - alpha
+      - beta
+      - next
     tags-ignore:
       - 'v*'
 

.releaserc.yaml

@@ -0,0 +1,11 @@
+branches:
+  - master
+  - name: alpha
+    prerelease: true
+plugins:
+  - "@semantic-release/commit-analyzer"
+  - "@semantic-release/release-notes-generator"
+  - "@semantic-release/changelog"
+  - "@semantic-release/npm"
+  - "@semantic-release/git"
+  - "@semantic-release/github"

CHANGELOG.md

@@ -1,7 +1,83 @@
+## [5.1.3](https://github.com/wickedest/Mergely/compare/v5.1.2...v5.1.3) (2024-05-06)
+
+
+### Bug Fixes
+
+* **chore:** updated deps ([#195](https://github.com/wickedest/Mergely/issues/195)) ([c4c6e8a](https://github.com/wickedest/Mergely/commit/c4c6e8abd8f02762d5803774789673f76a95e932))
+
+## [5.1.2](https://github.com/wickedest/Mergely/compare/v5.1.1...v5.1.2) (2024-05-06)
+
+
+### Bug Fixes
+
+* trace only when debug enabled ([#194](https://github.com/wickedest/Mergely/issues/194)) ([60d18f8](https://github.com/wickedest/Mergely/commit/60d18f8d5c0df349b4806b2e8a6c0f79d9f8074e))
+
+## [5.1.1](https://github.com/wickedest/Mergely/compare/v5.1.0...v5.1.1) (2024-03-11)
+
+
+### Bug Fixes
+
+* **#183:** fixes undefined 'k' due to scoped 'let' ([02e383d](https://github.com/wickedest/Mergely/commit/02e383d94d685e41cb68d945b9726bbcbfeb0ccf))
+
+# [5.1.0](https://github.com/wickedest/Mergely/compare/v5.0.4...v5.1.0) (2023-08-27)
+
+
+### Features
+
+* support CM modes: go, javascript, htmlmixed, markdown, python ([827487a](https://github.com/wickedest/Mergely/commit/827487a5983cb89ef41415435d44239e35983b9a))
+
+## [5.0.4](https://github.com/wickedest/Mergely/compare/v5.0.3...v5.0.4) (2023-08-27)
+
+
+### Bug Fixes
+
+* updated CDN example ([dec1e95](https://github.com/wickedest/Mergely/commit/dec1e9509d94811914e77cbc33dc1aaedf154f7c))
+
+## [5.0.3](https://github.com/wickedest/Mergely/compare/v5.0.2...v5.0.3) (2023-08-27)
+
+
+### Bug Fixes
+
+* Updated docs with CDN example ([254adf1](https://github.com/wickedest/Mergely/commit/254adf15ab09fe9c5c3dff542d0a7f62ce2c9782))
+
+## [5.0.2](https://github.com/wickedest/Mergely/compare/v5.0.1...v5.0.2) (2023-04-24)
+
+
+### Bug Fixes
+
+* **scroll:** fixed issue where first rhs scroll was unlinked ([7b2040c](https://github.com/wickedest/Mergely/commit/7b2040c6ad17ea70a09720f54d9a255cdc57cd67))
+
+## [5.0.1](https://github.com/wickedest/Mergely/compare/v5.0.0...v5.0.1) (2023-04-23)
+
+
+### Bug Fixes
+
+* update release ([a8b497b](https://github.com/wickedest/Mergely/commit/a8b497bc9b68beb5d8265106d9f010aa9489dd17))
+
 # Changelog
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [5.0.0](https://github.com/wickedest/Mergely/compare/v4.3.9...v5.0.0) (2023-04-23)
+
+
+### BREAKING CHANGES
+
+- Mergely is no longer a jQuery plugin.
+- Removed options.autoresize
+- Removed options.editor_width
+- Removed options.editor_height
+- Removed options.fadein
+- Removed options.fgcolor
+- Removed options.resize
+- Removed options.width
+- Removed options.height
+- Removed options.loaded callback
+- Removed options.resized callback
+- Removed styles .mergely-resizer, .mergely-full-screen-0, and .mergely-full-screen-8
+- Changed default for options.change_timeout changed from 150 to 50.
+- No longer automatically scrolls to first change.
+
 ### 4.3.9 (2022-01-19)
 
 

README.md

@@ -4,7 +4,7 @@
 
 https://mergely.com
 
-Mergely is a JavaScript component for differencing and merging files interactively in a browser (diff/merge). It provides a 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 is a JavaScript component for differencing and merging files interactively in a browser (diff/merge). It provides a rich API that enables you to easily integrate Mergely into your existing web application. It is suitable for comparing text files online, such as .txt, .html, .xml, .c, .cpp, .java, .js, etc.
 
 Mergely has a JavaScript implementation of the Longest Common Subsequence (LCS) diff algorithm, and a customizable markup engine. It computes the diff within the browser.
 
@@ -36,11 +36,11 @@ rm -rf .git
 
 ### Usage via CDN
 
-Unpack mergely.tgz into a folder, for example, `./lib`, and add the following to the `<head>` of your target HTML source file.
+Add the following to the `<head>` of your target HTML source file. Note that `codemirror` is bundled.
 
 ```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/mergely/5.0.0/mergely.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/mergely/5.0.0/mergely.css"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mergely/5.0.0/mergely.min.js"></script>
+<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mergely/5.0.0/mergely.css" />
 ```
 
 ### Synchronous initialization
@@ -82,6 +82,16 @@ Mergely will emit an `updated` event when the editor is first initialized, and e
 </body>
 ```
 
+### Visualization modes
+
+Mergely supports the following CodeMirror visualizations for [mode](codemirror.net/5/doc/manual.html#option_mode):
+
+* go
+* javascript
+* htmlmixed
+* markdown
+* python
+
 ## Options
 
 |Option|Type|Default value|Description|

examples/cdn.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+	<title>Mergely - Example full page editor</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="" />
+	<meta name="keywords" content="mergely,diff,merge,compare" />
+	<meta name="author" content="Jamie Peabody" />
+	<link rel="icon" href="/favicon.svg" type="image/svg+xml">
+
+	<!-- Mergely -->
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mergely/5.0.0/mergely.min.js"></script>
+	<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mergely/5.0.0/mergely.css" />
+
+	<style type="text/css">
+		html, body {
+			height: 100%;
+			margin: 0;
+		}
+		#compare {
+			height: inherit;
+		}
+	</style>
+</head>
+<body>
+	<div id="compare"></div>
+
+	<script>
+		const mergely = new Mergely('#compare');
+		mergely.once('updated', () => {
+			mergely.lhs('the quick red fox\njumped over the hairy dog');
+			mergely.rhs('the quick brown fox\njumped over the lazy dog');
+		});
+	</script>
+</body>
+</html>

examples/index.html

@@ -21,6 +21,9 @@ This example demonstrates the minimum amount of code required to use Mergely.
 	<h1>Examples</h1>
 
 	<dl>
+		<dt><a href="cdn.html">cdn.html</a></dt>
+		<dd>Demonstrates how to use Mergely with CDN.</dd>
+
 		<dt><a href="editor.html">editor.html</a></dt>
 		<dd>An example editor showcasing some of Mergely's API features.</dd>
 

git-conventional-commits.json

@@ -22,6 +22,7 @@
 
   "changelog" : {
     "commitTypes": [
+      "docs",
       "feat",
       "fix",
       "perf",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mergely",
-  "version": "5.0.0-rc0",
+  "version": "5.1.3",
   "description": "A javascript UI for diff/merge",
   "license": "(GPL-3.0 OR LGPL-3.0 OR MPL-1.1 OR SEE LICENSE IN LICENSE)",
   "author": {
@@ -14,7 +14,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/wickedest/Mergely.git"
+    "url": "git@github.com:wickedest/Mergely.git"
   },
   "main": "lib/mergely.js",
   "files": [
@@ -36,6 +36,8 @@
     "@commitlint/cli": "^17.6.1",
     "@commitlint/config-conventional": "^15.0.0",
     "@commitlint/prompt-cli": "^15.0.0",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
     "babel-loader": "^8.2.3",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "chai": "^4.3.4",
@@ -55,7 +57,7 @@
     "karma-sourcemap-loader": "^0.4.0",
     "karma-webpack": "^5.0.0",
     "mocha": "^9.1.4",
-    "semantic-release": "^21.0.1",
+    "semantic-release": "^21.1.2",
     "simple-mock": "^0.8.0",
     "standard-version": "^9.3.2",
     "style-loader": "^3.3.1",

src/diff-view.js

@@ -2,6 +2,12 @@ const CodeMirror = require('codemirror');
 require('codemirror/addon/search/searchcursor.js');
 require('codemirror/addon/selection/mark-selection.js');
 require('codemirror/lib/codemirror.css');
+require('codemirror/mode/go/go.js');
+require('codemirror/mode/javascript/javascript.js');
+require('codemirror/mode/htmlmixed/htmlmixed.js');
+require('codemirror/mode/markdown/markdown.js');
+require('codemirror/mode/python/python.js');
+
 const dom = require('./dom.js');
 const VDoc = require('./vdoc');
 
@@ -44,16 +50,15 @@ CodeMirrorDiffView.prototype.init = function(el, options = {}) {
 		lineNumbers: this.settings.line_numbers,
 		gutters: (this.settings.line_numbers && [ 'merge', 'CodeMirror-linenumbers' ]) || [],
 	};
-	this._vdoc = new VDoc();
+	this._vdoc = new VDoc({ _debug: this.settings._debug });
+	this._linkedScrollTimeout = {};
 };
 
 CodeMirrorDiffView.prototype.unbind = function() {
 	if (this._unbound) {
 		return;
 	}
-	if (this.settings._debug) {
-		trace('api#unbind');
-	}
+	this.trace('api#unbind');
 	if (this._changedTimeout != null) {
 		clearTimeout(this._changedTimeout);
 	}
@@ -82,9 +87,7 @@ CodeMirrorDiffView.prototype.readOnly = function(side) {
 }
 
 CodeMirrorDiffView.prototype.lhs = function(text) {
-	if (this.settings._debug) {
-		trace('api#lhs', text && text.length);
-	}
+	this.trace('api#lhs', text && text.length);
 	// invalidate existing changes and current position
 	this.changes = [];
 	this._current_diff = -1;
@@ -93,33 +96,25 @@ CodeMirrorDiffView.prototype.lhs = function(text) {
 
 CodeMirrorDiffView.prototype.rhs = function(text) {
 	// invalidate existing changes and current position
-	if (this.settings._debug) {
-		trace('api#rhs', text && text.length);
-	}
+	this.trace('api#rhs', text && text.length);
 	this.changes = [];
 	this._current_diff = -1;
 	this.editor.rhs.setValue(text);
 };
 
 CodeMirrorDiffView.prototype.update = function() {
-	if (this.settings._debug) {
-		trace('api#update');
-	}
+	this.trace('api#update');
 	this.el.dispatchEvent(new Event('changed'));
 };
 
 CodeMirrorDiffView.prototype.unmarkup = function() {
-	if (this.settings._debug) {
-		trace('api#unmarkup');
-	}
+	this.trace('api#unmarkup');
 	this._clear();
 	this.el.dispatchEvent(new Event('updated'));
 };
 
 CodeMirrorDiffView.prototype.scrollToDiff = function(direction) {
-	if (this.settings._debug) {
-		trace('api#scrollToDiff', direction);
-	}
+	this.trace('api#scrollToDiff', direction);
 	if (!this.changes.length) return;
 	if (direction === 'next') {
 		if (this._current_diff === this.changes.length - 1
@@ -136,18 +131,14 @@ CodeMirrorDiffView.prototype.scrollToDiff = function(direction) {
 			this._current_diff = Math.max(--this._current_diff, 0);
 		}
 	}
-	if (this.settings._debug) {
-		trace('change', 'current-diff', this._current_diff);
-	}
+	this.trace('change', 'current-diff', this._current_diff);
 	// _current_diff changed, refresh the view
 	this._scroll_to_change(this.changes[this._current_diff]);
 	this.setChanges(this.changes);
 };
 
 CodeMirrorDiffView.prototype.mergeCurrentChange = function(side) {
-	if (this.settings._debug) {
-		trace('api#mergeCurrentChange', side);
-	}
+	this.trace('api#mergeCurrentChange', side);
 	if (!this.changes.length) return;
 	if (side == 'lhs' && !this.lhs_cmsettings.readOnly) {
 		this._merge_change(this.changes[this._current_diff], 'rhs', 'lhs');
@@ -158,9 +149,7 @@ CodeMirrorDiffView.prototype.mergeCurrentChange = function(side) {
 };
 
 CodeMirrorDiffView.prototype.scrollTo = function(side, num) {
-	if (this.settings._debug) {
-		trace('api#scrollTo', side, num);
-	}
+	this.trace('api#scrollTo', side, num);
 	const ed = this.editor[side];
 	ed.setCursor(num);
 	ed.centerOnCursor();
@@ -174,9 +163,7 @@ CodeMirrorDiffView.prototype.setOptions = function(opts) {
 		...this.settings,
 		...opts
 	};
-	if (this.settings._debug) {
-		trace('api#setOptions', opts);
-	}
+	this.trace('api#setOptions', opts);
 
 	// if options set after init
 	if (this.editor) {
@@ -209,9 +196,7 @@ CodeMirrorDiffView.prototype.setOptions = function(opts) {
 };
 
 CodeMirrorDiffView.prototype.get = function(side) {
-	if (this.settings._debug) {
-		trace('api#get', side);
-	}
+	this.trace('api#get', side);
 	const ed = this.editor[side];
 	const value = ed.getValue();
 	if (value === undefined) {
@@ -221,16 +206,12 @@ CodeMirrorDiffView.prototype.get = function(side) {
 };
 
 CodeMirrorDiffView.prototype.cm = function(side) {
-	if (this.settings._debug) {
-		trace('api#cm', 'side');
-	}
+	this.trace('api#cm', 'side');
 	return this.editor[side];
 };
 
 CodeMirrorDiffView.prototype.search = function(side, query, direction) {
-	if (this.settings._debug) {
-		trace('api#search', side, query, direction);
-	}
+	this.trace('api#search', side, query, direction);
 	const editor = this.editor[side];
 	if (!editor.getSearchCursor) {
 		throw new Error('install CodeMirror search addon');
@@ -257,9 +238,7 @@ CodeMirrorDiffView.prototype.search = function(side, query, direction) {
 };
 
 CodeMirrorDiffView.prototype.resize = function() {
-	if (this.settings._debug) {
-		trace('api#resize');
-	}
+	this.trace('api#resize');
 	const parent = this.el;
 	const contentHeight = parent.offsetHeight - 2;
 
@@ -282,19 +261,12 @@ CodeMirrorDiffView.prototype.resize = function() {
 };
 
 CodeMirrorDiffView.prototype.bind = function(container) {
-	if (this.settings._debug) {
-		trace('api#bind', container);
-	}
+	this.trace('api#bind', container);
 	this._origEl = {
 		style: container.style,
 		className: container.className
 	};
 	const el = dom.getMergelyContainer({ clazz: container.className });
-	// const found = document.getElementById(container.id);
-	// if (!found) {
-	// 	console.error(`Failed to find mergely: #${container.id}`);
-	// 	return;
-	// }
 	const computedStyle = window.getComputedStyle(container);
 	if (!computedStyle.height || computedStyle.height === '0px') {
 		throw new Error(
@@ -411,9 +383,7 @@ CodeMirrorDiffView.prototype.bind = function(container) {
 		}
 	});
 	this.editor.rhs.on('beforeChange', (cm, ev) => {
-		if (this.settings._debug) {
-			trace('event#rhs-beforeChange', ev);
-		}
+		this.trace('event#rhs-beforeChange', ev);
 		if (ev.text.length > 1
 			|| ((ev.from.line - ev.to.line) && ev.origin === '+delete')) {
 			this._clear();
@@ -421,45 +391,37 @@ CodeMirrorDiffView.prototype.bind = function(container) {
 	});
 
 	this.editor.lhs.on('change', (instance, ev) => {
-		if (this.settings._debug) {
-			trace('event#lhs-change');
-		}
+		this.trace('event#lhs-change');
 		this._changing();
-		if (this.settings._debug) {
-			trace('event#lhs-change [emitted]');
-		}
+		this.trace('event#lhs-change [emitted]');
 	});
 	this.editor.lhs.on('scroll', () => {
 		if (this._skipscroll.lhs) {
-			if (this.settings._debug) {
-				trace('event#lhs-scroll (skipped)');
-			}
+			this.trace('event#lhs-scroll (skipped)');
 			return;
 		} else {
-			if (this.settings._debug) {
-				trace('event#lhs-scroll');
-			}
+			this.trace('event#lhs-scroll');
 		}
-		this._scrolling({ side: 'lhs' });
+		// firefox scroll-linked effect render issue
+		setTimeout(() => {
+			this._scrolling({ side: 'lhs' });
+		}, 1);
 	});
 	this.editor.rhs.on('change', (instance, ev) => {
-		if (this.settings._debug) {
-			trace('event#rhs-change', ev);
-		}
+		this.trace('event#rhs-change', ev);
 		this._changing();
 	});
 	this.editor.rhs.on('scroll', () => {
 		if (this._skipscroll.rhs) {
-			if (this.settings._debug) {
-				trace('event#rhs-scroll (skipped)');
-			}
+			this.trace('event#rhs-scroll (skipped)');
 			return;
 		} else {
-			if (this.settings._debug) {
-				trace('event#rhs-scroll');
-			}
+			this.trace('event#rhs-scroll');
 		}
-		this._scrolling({ side: 'rhs' });
+		// firefox scroll-linked effect render issue
+		setTimeout(() => {
+			this._scrolling({ side: 'rhs' });
+		}, 1);
 	});
 
 	// resize event handeler
@@ -467,7 +429,7 @@ CodeMirrorDiffView.prototype.bind = function(container) {
 	const resize = () => {
 		if (this.settings._debug) {
 			traceTimeStart('event#resize');
-			trace('event#resize [start]');
+			this.trace('event#resize [start]');
 		}
 		this.resize();
 		if (this.settings._debug) {
@@ -524,16 +486,12 @@ CodeMirrorDiffView.prototype.bind = function(container) {
 	}
 
 	this.editor.lhs.on('gutterClick', (cm, n, gutterClass, ev) => {
-		if (this.settings._debug) {
-			trace('event#gutterClick', 'lhs', n, ev);
-		}
+		this.trace('event#gutterClick', 'lhs', n, ev);
 		gutterClicked.call(this, 'lhs', n, ev);
 	});
 
 	this.editor.rhs.on('gutterClick', (cm, n, gutterClass, ev) => {
-		if (this.settings._debug) {
-			trace('event#gutterClick', 'rhs', n, ev);
-		}
+		this.trace('event#gutterClick', 'rhs', n, ev);
 		gutterClicked.call(this, 'rhs', n, ev);
 	});
 
@@ -560,7 +518,7 @@ CodeMirrorDiffView.prototype._clearMarkup = function () {
 		traceTimeStart('draw#_clearMarkup');
 	}
 	this._vdoc.clear();
-	this._vdoc = new VDoc();
+	this._vdoc = new VDoc({ _debug: this.settings._debug });
 	if (this.settings._debug) {
 		traceTimeEnd('draw#_clearMarkup');
 	}
@@ -634,7 +592,10 @@ CodeMirrorDiffView.prototype._scrolling = function({ side }) {
 	const scroller = this.editor[side].getScrollerElement();
 	const { top } = scroller.getBoundingClientRect();
 	let height;
-	if (true || this.midway == undefined) {
+	if (scroller.offsetParent === null) {
+		return;
+	}
+	if (this.midway == undefined) {
 		height = scroller.clientHeight
 			- (scroller.offsetHeight - scroller.offsetParent.offsetHeight);
 		this.midway = (height / 2.0 + top).toFixed(2);
@@ -678,18 +639,14 @@ CodeMirrorDiffView.prototype._scrolling = function({ side }) {
 	const vp = this.editor[oside].getViewport();
 	let scroll = true;
 	if (last_change) {
-		if (this.settings._debug) {
-			trace('scroll#_scrolling', 'last change before midline', last_change);
-		}
+		this.trace('scroll#_scrolling', 'last change before midline', last_change);
 		if (midline.line >= vp.from && midline <= vp.to) {
 			scroll = false;
 		}
 	}
 	if (scroll || force_scroll) {
 		// scroll the other side
-		if (this.settings._debug) {
-			trace('scroll#_scrolling', 'other side', oside, 'pos:', top_to - top_adjust);
-		}
+		this.trace('scroll#_scrolling', 'other side', oside, 'pos:', top_to - top_adjust);
 
 		// disable linked scroll events for the opposite editor because this
 		// triggers the next one explicitly, and we don't want to link the
@@ -697,18 +654,21 @@ CodeMirrorDiffView.prototype._scrolling = function({ side }) {
 		// coming in 2s, so this will "link" scrolling the other editor to
 		// this editor until this editor stops scrolling and times out.
 		this._skipscroll[oside] = true;
-		if (this._linkedScrollTimeout) {
-			clearTimeout(this._linkedScrollTimeout);
+		this.trace('scroll#set oside skip set:', oside, this._skipscroll);
+		if (this._linkedScrollTimeout[oside]) {
+			clearTimeout(this._linkedScrollTimeout[oside]);
+			this.trace('scroll#clearing timeout:', this._skipscroll);
 		}
-		this._linkedScrollTimeout = setTimeout(() => {
+		this._linkedScrollTimeout[oside] = setTimeout(() => {
 			this._skipscroll[oside] = false;
+			this.trace('scroll#set oside skip unset:', oside, this._skipscroll);
 		}, 100);
 
 		const top = top_to - top_adjust;
 		// scroll the opposite editor
 		this.editor[oside].scrollTo(left_to, top);
-	} else if (this.settings._debug) {
-		trace('scroll#_scrolling', 'not scrolling other side');
+	} else {
+		this.trace('scroll#_scrolling', 'not scrolling other side');
 	}
 	this._renderChanges();
 
@@ -719,23 +679,19 @@ CodeMirrorDiffView.prototype._scrolling = function({ side }) {
 
 CodeMirrorDiffView.prototype._changing = function() {
 	if (!this.settings.autoupdate) {
-		if (this.settings._debug) {
-			trace('change#_changing autoupdate is disabled');
-		}
+		this.trace('change#_changing autoupdate is disabled');
 		return;
 	}
 	if (this.settings._debug) {
 		traceTimeStart('change#_changing');
-		trace('change#_changing [start]');
+		this.trace('change#_changing [start]');
 	}
 	const handleChange = () => {
 		this._changedTimeout = null;
 		this.el.dispatchEvent(new Event('changed'));
 	};
 	if (this.settings.change_timeout > 0) {
-		if (this.settings._debug) {
-			trace('change#setting timeout', this.settings.change_timeout)
-		}
+		this.trace('change#setting timeout', this.settings.change_timeout)
 		if (this._changedTimeout != null) {
 			clearTimeout(this._changedTimeout);
 		}
@@ -749,9 +705,7 @@ CodeMirrorDiffView.prototype._changing = function() {
 };
 
 CodeMirrorDiffView.prototype.setChanges = function(changes) {
-	if (this.settings._debug) {
-		trace('change#setChanges');
-	}
+	this.trace('change#setChanges');
 	this._clear();
 	// after clear, set the new changes
 	this.changes = changes;
@@ -761,7 +715,7 @@ CodeMirrorDiffView.prototype.setChanges = function(changes) {
 CodeMirrorDiffView.prototype._renderChanges = function() {
 	if (this.settings._debug) {
 		traceTimeStart('draw#_renderChanges');
-		trace('draw#_renderChanges [start]', this.changes.length, 'changes');
+		this.trace('draw#_renderChanges [start]', this.changes.length, 'changes');
 	}
 	this._clearCanvases();
 	this._calculateOffsets(this.changes);
@@ -991,14 +945,10 @@ CodeMirrorDiffView.prototype._markupLineChanges = function (changes) {
 		}
 	}
 	led.operation(() => {
-		for (let i = 0; i < changes.length; ++i) {
-			vdoc.update('lhs', i, led, lhsvp);
-		}
+		vdoc.update('lhs', led, lhsvp);
 	});
 	red.operation(() => {
-		for (let i = 0; i < changes.length; ++i) {
-			vdoc.update('rhs', i, red, rhsvp);
-		}
+		vdoc.update('rhs', red, rhsvp);
 	});
 	if (this.settings._debug) {
 		traceTimeEnd('draw#_markupLineChanges');
@@ -1093,12 +1043,9 @@ CodeMirrorDiffView.prototype._renderDiff = function(changes) {
 	const ctx_lhs = mcanvas_lhs.getContext('2d');
 	const ctx_rhs = mcanvas_rhs.getContext('2d');
 
-	if (this.settings._debug
-		&& this.settings._debug) {
-		trace('draw#_renderDiff', 'visible page height', ex.visible_page_height);
-		trace('draw#_renderDiff', 'scroller-top lhs', ex.lhs_scroller.scrollTop);
-		trace('draw#_renderDiff', 'scroller-top rhs', ex.rhs_scroller.scrollTop);
-	}
+	this.trace('draw#_renderDiff', 'visible page height', ex.visible_page_height);
+	this.trace('draw#_renderDiff', 'scroller-top lhs', ex.lhs_scroller.scrollTop);
+	this.trace('draw#_renderDiff', 'scroller-top rhs', ex.rhs_scroller.scrollTop);
 
 	ex.lhs_margin.removeEventListener('click', this._handleLhsMarginClick);
 	ex.rhs_margin.removeEventListener('click', this._handleRhsMarginClick);
@@ -1123,17 +1070,16 @@ CodeMirrorDiffView.prototype._renderDiff = function(changes) {
 		const rhs_y_end = change['rhs-y-end'] - rhsScrollTop;
 
 		if (Number.isNaN(lhs_y_start)) {
-			trace('draw#_renderDiff', 'unexpected NaN',
-				change['lhs-y-start'], change['lhs-y-end']);
+			this.trace(
+				'draw#_renderDiff unexpected NaN',
+				change['lhs-y-start'], change['lhs-y-end']
+			);
 			continue;
 		}
 
 		// draw margin indicators
-		if (this.settings._debug
-			&& this.settings._debug) {
-			trace('draw#_renderDiff', 'draw1', 'marker',
-				lhs_y_start, lhs_y_end, rhs_y_start, rhs_y_end);
-		}
+		this.trace('draw#_renderDiff', 'draw1', 'marker',
+			lhs_y_start, lhs_y_end, rhs_y_start, rhs_y_end);
 
 		const mkr_lhs_y_start = change['lhs-y-start'] * lratio;
 		const mkr_lhs_y_end = Math.max(change['lhs-y-end'] * lratio, 5);
@@ -1262,4 +1208,10 @@ CodeMirrorDiffView.prototype._queryElement = function(selector) {
 	return this[cacheName];
 }
 
+CodeMirrorDiffView.prototype.trace = function(...args) {
+	if (this.settings._debug) {
+		console.log(...args);
+	}
+}
+
 module.exports = CodeMirrorDiffView;

src/diff.js

@@ -146,7 +146,7 @@ diff.prototype._sms = function(lhs_ctx, lhs_lower, lhs_upper, rhs_ctx, rhs_lower
 			}
 		}
 		// Extend the reverse path.
-		for (k = kup - d; k <= kup + d; k += 2) {
+		for (let k = kup - d; k <= kup + d; k += 2) {
 			// find the only or better starting point
 			if (k === kup + d) {
 				x = vector_u[offset_up + k - 1]; // up

src/dom.js

@@ -67,7 +67,7 @@ function getColors(el) {
 function getMergelyContainer({ clazz = '' }) {
 	const classes = [ 'mergely-editor', clazz ]
 	return htmlToElement(`\
-<div class="${classes.join(' ')}" style="display:flex;height:100%;position:relative;"></div>`);
+<div class="${classes.join(' ')}" style="display:flex;height:100%;position:relative;overflow:hidden;"></div>`);
 }
 
 function getMarginTemplate({ id }) {

src/mergely.css

@@ -17,7 +17,7 @@
 }
 
 .mergely-editor .CodeMirror-selected {
-    background: #ffcb0f;
+	background: #0f73ff47;
 }
 
 .mergely-splash {
@@ -52,8 +52,6 @@
 .mergely-editor .merge-button {
 	height: 18px;
 	cursor: pointer;
-	width: 26px;
-	padding-left: 3px;
 }
 
 /* common stles */

src/mergely.js

@@ -23,7 +23,8 @@ const defaultOptions = {
 	vpcolor: 'rgba(0, 0, 200, 0.5)',
 	license: 'lgpl',
 	cmsettings: {
-		styleSelectedText: true
+		styleSelectedText: true,
+		mode: null
 	},
 	lhs_cmsettings: {},
 	rhs_cmsettings: {},
@@ -114,7 +115,7 @@ class Mergely {
 
 	_setOptions(options) {
 		if (this._options && this._options._debug) {
-			trace('api#options', opts);
+			trace('api#options');
 		}
 		const colors = dom.getColors(this.el);
 		this._options = {
@@ -186,7 +187,7 @@ class Mergely {
 
 	diff() {
 		if (this._options._debug) {
-			trace('api#diff', side);
+			trace('api#diff');
 		}
 		const lhs_text = this.get('lhs');
 		const rhs_text = this.get('rhs');

src/vdoc.js

@@ -1,7 +1,10 @@
 const diff = require('./diff');
 
+const trace = console.log;
+
 class VDoc {
-	constructor() {
+	constructor(options) {
+		this.options = options;
 		this._lines = {
 			lhs: {},
 			rhs: {}
@@ -13,6 +16,9 @@ class VDoc {
 	}
 
 	addRender(side, change, changeId, options) {
+		if (this.options._debug) {
+			trace('vdoc#addRender', side, changeId, change);
+		}
 		const {
 			isCurrent,
 			lineDiff,
@@ -23,6 +29,9 @@ class VDoc {
 		const alreadyRendered = !!this._rendered[side][changeId];
 
 		if (alreadyRendered) {
+			if (this.options._debug) {
+				trace('vdoc#addRender (already rendered)', side, changeId, change);
+			}
 			return;
 		}
 
@@ -116,6 +125,9 @@ class VDoc {
 	}
 
 	addInlineDiff(change, changeId, { getText, ignorews, ignoreaccents, ignorecase }) {
+		if (this.options._debug) {
+			trace('vdoc#addInlineDiff', changeId, change);
+		}
 		const { lf, lt, olf, olt } = getExtents('lhs', change);
 		const vdoc = this;
 
@@ -169,6 +181,9 @@ class VDoc {
 	}
 
 	_setRenderedChange(side, changeId) {
+		if (this.options._debug) {
+			trace('vdoc#_setRenderedChange', side, changeId);
+		}
 		return this._rendered[side][changeId] = true;
 	}
 
@@ -182,8 +197,10 @@ class VDoc {
 		return line;
 	}
 
-	update(side, changeId, editor, viewport) {
-		this._setRenderedChange(side, changeId);
+	update(side, editor, viewport) {
+		if (this.options._debug) {
+			trace('vdoc#update', side, editor, viewport);
+		}
 		const lines = Object.keys(this._lines[side]);
 		for (let i = 0; i < lines.length; ++i) {
 			const id = lines[i];
@@ -200,6 +217,9 @@ class VDoc {
 	}
 
 	clear() {
+		if (this.options._debug) {
+			trace('vdoc#clear');
+		}
 		for (const lineId in this._lines.lhs) {
 			this._lines.lhs[lineId].clear();
 		}

test/mergely.spec.js

@@ -22,7 +22,8 @@ const defaultOptions = {
 	vpcolor: 'rgba(0, 0, 200, 0.5)',
 	license: 'lgpl',
 	cmsettings: {
-		styleSelectedText: true
+		styleSelectedText: true,
+		mode: null
 	},
 	_debug: false
 };