feat(#220): Exposes Mergely's instance of CodeMirror as Mergely.CodeMirror

## [5.3.6](https://github.com/wickedest/Mergely/compare/v5.3.5...v5.3.6) (2024-10-11)

### Bug Fixes

* **#207:** Updated documentation for search method. ([#214](https://github.com/wickedest/Mergely/issues/214)) ([350e5af](350e5af2e8)), closes [#207](https://github.com/wickedest/Mergely/issues/207)

CHANGELOG.md

@@ -1,3 +1,101 @@
+## [5.3.6](https://github.com/wickedest/Mergely/compare/v5.3.5...v5.3.6) (2024-10-11)
+
+
+### Bug Fixes
+
+* **#207:** Updated documentation for search method. ([#214](https://github.com/wickedest/Mergely/issues/214)) ([350e5af](https://github.com/wickedest/Mergely/commit/350e5af2e8b2e852364dc5a5729e03e3bc75358b)), closes [#207](https://github.com/wickedest/Mergely/issues/207)
+
+## [5.3.5](https://github.com/wickedest/Mergely/compare/v5.3.4...v5.3.5) (2024-10-11)
+
+
+### Bug Fixes
+
+* bump dependencies ([#213](https://github.com/wickedest/Mergely/issues/213)) ([83df02d](https://github.com/wickedest/Mergely/commit/83df02d967ce3100a33216f8ca77c2168bd53234))
+
+## [5.3.4](https://github.com/wickedest/Mergely/compare/v5.3.3...v5.3.4) (2024-10-11)
+
+
+### Reverts
+
+* Revert "build(deps-dev): bump webpack from 5.91.0 to 5.94.0 (#203)" ([c36d2a7](https://github.com/wickedest/Mergely/commit/c36d2a7ba9ca895844126711aa00b9634814e1dc)), closes [#203](https://github.com/wickedest/Mergely/issues/203)
+
+## [5.3.3](https://github.com/wickedest/Mergely/compare/v5.3.2...v5.3.3) (2024-10-11)
+
+
+### Bug Fixes
+
+* **#209:** Fixes issue with options not being preserved when individually set. ([#211](https://github.com/wickedest/Mergely/issues/211)) ([4cd8897](https://github.com/wickedest/Mergely/commit/4cd8897c6b157d506560bb09f508f9debe2a4211))
+
+## [5.3.2](https://github.com/wickedest/Mergely/compare/v5.3.1...v5.3.2) (2024-07-31)
+
+
+### Bug Fixes
+
+* Removed debug code ([c7b0fd0](https://github.com/wickedest/Mergely/commit/c7b0fd03b01cb3267d292c2985ca8b62adda11e0))
+
+## [5.3.1](https://github.com/wickedest/Mergely/compare/v5.3.0...v5.3.1) (2024-06-19)
+
+
+### Bug Fixes
+
+* Fixed a regression rendering inline markup for numbers, punctuation, and symbols ([#199](https://github.com/wickedest/Mergely/issues/199)) ([c40672c](https://github.com/wickedest/Mergely/commit/c40672c458723bdd0d9a0062ef1457e435866765))
+
+# [5.3.0](https://github.com/wickedest/Mergely/compare/v5.2.0...v5.3.0) (2024-06-16)
+
+
+### Features
+
+* Supports unicode diacritical marks when rendering line diff (fixes [#169](https://github.com/wickedest/Mergely/issues/169)) ([#197](https://github.com/wickedest/Mergely/issues/197)) ([a469a65](https://github.com/wickedest/Mergely/commit/a469a6510122356a7cae3fb1259e999e6cc34c94))
+
+# [5.2.0](https://github.com/wickedest/Mergely/compare/v5.1.4...v5.2.0) (2024-06-09)
+
+
+### Features
+
+* Allows height to be not explicit height, e.g. 'inherit' or '100%' ([#196](https://github.com/wickedest/Mergely/issues/196)) ([b9e3641](https://github.com/wickedest/Mergely/commit/b9e3641c852a8926db5efdf33e65a607d5f2df5e))
+
+## [5.1.4](https://github.com/wickedest/Mergely/compare/v5.1.3...v5.1.4) (2024-05-17)
+
+
+### Bug Fixes
+
+* removed accidental change that enabled code display modes (e.g. javascript, python, html) ([692d01f](https://github.com/wickedest/Mergely/commit/692d01f1653ae8f1163a2c6228f457549086b75d))
+
+## [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)
 
 

README.md

@@ -36,13 +36,11 @@ rm -rf .git
 
 ### Usage via CDN
 
-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 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" />
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.12/codemirror.min.js"></script>
-<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.12/codemirror.css" />
 ```
 
 ### Synchronous initialization
@@ -84,6 +82,18 @@ Mergely will emit an `updated` event when the editor is first initialized, and e
 </body>
 ```
 
+### Visualization modes
+
+Mergely does not support any CodeMirror highlighting for different languages (xml, html, javascript etc.) out of the box.
+You can compile your own Mergely-Version with support for the desired modes by adding them to diff-view.js. For example:
+```
+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');
+```
+
 ## Options
 
 |Option|Type|Default value|Description|
@@ -345,7 +355,7 @@ Scrolls to the next change specified by `direction`.
 doc.scrollToDiff('next');
 ```
 
-### <a name="search"></a>search(side: string, needle: string)
+### <a name="search"></a>search(side: string, needle: string, direction: string = 'next')
 
 Search the editor for `needle`, scrolling to the next available match. Repeating the call will find the next available token.
 
@@ -355,6 +365,7 @@ Search the editor for `needle`, scrolling to the next available match. Repeating
 |----|----|-----------|
 |side|string|The editor side, either `lhs` or `rhs`.|
 |needle|string|The text for which to search.|
+|direction|string|The direction to search, either `prev` or `next`.|
 
 #### Example
 

examples/cdn.html

@@ -14,9 +14,6 @@
 	<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" />
 
-	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.12/codemirror.min.js"></script>
-	<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.12/codemirror.css" />
-
 	<style type="text/css">
 		html, body {
 			height: 100%;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mergely",
-  "version": "5.0.3",
+  "version": "5.3.6",
   "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": {
@@ -57,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,7 @@ const CodeMirror = require('codemirror');
 require('codemirror/addon/search/searchcursor.js');
 require('codemirror/addon/selection/mark-selection.js');
 require('codemirror/lib/codemirror.css');
+
 const dom = require('./dom.js');
 const VDoc = require('./vdoc');
 
@@ -17,9 +18,11 @@ function CodeMirrorDiffView(el, options) {
 		const coords = this.cursorCoords(null, 'local');
 		this.scrollTo(null,
 			(coords.top + coords.bottom) / 2 - (this.getScrollerElement().clientHeight / 2));
-	});
-	this.init(el, options);
-};
+		});
+		this.init(el, options);
+	};
+
+CodeMirrorDiffView.CodeMirror = CodeMirror;
 
 const trace = console.log;
 const traceTimeStart = console.time;
@@ -52,9 +55,7 @@ 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);
 	}
@@ -66,7 +67,6 @@ CodeMirrorDiffView.prototype.unbind = function() {
 		this.el.removeChild(this.el.lastChild);
 	}
 	if (this._origEl) {
-		this.el.style = this._origEl.style;
 		this.el.className = this._origEl.className;
 	}
 	this._unbound = true;
@@ -83,9 +83,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;
@@ -94,33 +92,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
@@ -137,18 +127,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');
@@ -159,9 +145,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();
@@ -175,9 +159,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) {
@@ -210,9 +192,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) {
@@ -222,16 +202,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');
@@ -258,9 +234,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;
 
@@ -283,19 +257,18 @@ CodeMirrorDiffView.prototype.resize = function() {
 };
 
 CodeMirrorDiffView.prototype.bind = function(container) {
-	if (this.settings._debug) {
-		trace('api#bind', container);
-	}
-	this._origEl = {
-		style: container.style,
-		className: container.className
-	};
+	this.trace('api#bind', container);
 	const el = dom.getMergelyContainer({ clazz: container.className });
 	const computedStyle = window.getComputedStyle(container);
-	if (!computedStyle.height || computedStyle.height === '0px') {
+	if (!el.style.height
+		&& (!computedStyle.height || computedStyle.height === '0px')
+	) {
 		throw new Error(
 			`The element "${container.id}" requires an explicit height`);
 	}
+	this._origEl = {
+		className: container.className
+	};
 	this.id = `${container.id}`;
 	this.lhsId = `${container.id}-lhs`;
 	this.rhsId = `${container.id}-rhs`;
@@ -407,9 +380,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();
@@ -417,24 +388,16 @@ 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');
 		}
 		// firefox scroll-linked effect render issue
 		setTimeout(() => {
@@ -442,21 +405,15 @@ CodeMirrorDiffView.prototype.bind = function(container) {
 		}, 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');
 		}
 		// firefox scroll-linked effect render issue
 		setTimeout(() => {
@@ -469,7 +426,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) {
@@ -494,7 +451,6 @@ CodeMirrorDiffView.prototype.bind = function(container) {
 			ev.preventDefault();
 			return;
 		}
-		const ed = this.editor[side];
 		// See if the user clicked the line number of a difference:
 		let found = false;
 		for (let i = 0; i < this.changes.length; ++i) {
@@ -526,16 +482,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);
 	});
 
@@ -683,18 +635,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
@@ -702,21 +650,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;
-		trace('scroll#set oside skip set:', oside, this._skipscroll);
+		this.trace('scroll#set oside skip set:', oside, this._skipscroll);
 		if (this._linkedScrollTimeout[oside]) {
 			clearTimeout(this._linkedScrollTimeout[oside]);
-			trace('scroll#clearing timeout:', this._skipscroll);
+			this.trace('scroll#clearing timeout:', this._skipscroll);
 		}
 		this._linkedScrollTimeout[oside] = setTimeout(() => {
 			this._skipscroll[oside] = false;
-			trace('scroll#set oside skip unset:', oside, this._skipscroll);
+			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();
 
@@ -727,23 +675,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);
 		}
@@ -757,9 +701,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;
@@ -769,7 +711,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);
@@ -812,6 +754,9 @@ CodeMirrorDiffView.prototype._set_top_offset = function (side) {
 	// this is the distance from the top of the screen to the top of the
 	// content of the first codemirror editor
 	const topnode = this._queryElement('.CodeMirror-measure');
+	if (!topnode.offsetParent) {
+		return false;
+	}
 	const top_offset = topnode.offsetParent.offsetTop + 4;
 
 	// restore editor's scroll position
@@ -1097,12 +1042,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);
@@ -1127,17 +1069,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);
@@ -1266,4 +1207,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
@@ -241,10 +241,13 @@ function CodeifyText(lhs, rhs, options) {
 	this.ctxs = {};
 	this.options = options;
 	this.options.split = this.options.split || 'lines';
+	const exp = /\p{Letter}\p{Mark}*|\p{Number}\p{Mark}*|\p{Punctuation}\p{Mark}*|\p{Symbol}\p{Mark}*|\p{White_Space}/gu;
 
 	if (typeof lhs === 'string') {
 		if (this.options.split === 'chars') {
-			this.lhs = lhs.split('');
+			// split characters and include their diacritical marks
+			this.lhs = lhs.match(exp) || [];
+			// this.lhs = [...lhs];
 		} else if (this.options.split === 'words') {
 			this.lhs = lhs.split(/\s/);
 		} else if (this.options.split === 'lines') {
@@ -255,7 +258,9 @@ function CodeifyText(lhs, rhs, options) {
 	}
 	if (typeof rhs === 'string') {
 		if (this.options.split === 'chars') {
-			this.rhs = rhs.split('');
+			// split characters and include their diacritical marks
+			this.rhs = rhs.match(exp) || [];
+			// this.rhs = [...rhs];
 		} else if (this.options.split === 'words') {
 			this.rhs = rhs.split(/\s/);
 		} else if (this.options.split === 'lines') {

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: {},
@@ -45,7 +46,9 @@ class Mergely {
 		}
 
 		const computedStyle = window.getComputedStyle(element);
-		if (!computedStyle.height || computedStyle.height === '0px') {
+		if (!element.style.height
+			&& (!computedStyle.height || computedStyle.height === '0px')
+		) {
 			throw new Error(
 				`The element "${selector}" requires an explicit height`);
 		}
@@ -119,13 +122,11 @@ class Mergely {
 		const colors = dom.getColors(this.el);
 		this._options = {
 			...defaultOptions,//lgpl
-			...this._initOptions,
+			...(this._options || this._initOptions),
 			...options//lgpl-separate-notice
 		};
 		this._viewOptions = {
-			...defaultOptions,
-			...this._initOptions,
-			...options,
+			...this._options,
 			_colors: colors
 		};
 	}
@@ -252,6 +253,8 @@ class Mergely {
 	}
 }
 
+Mergely.CodeMirror = CodeMirrorDiffView.CodeMirror;
+
 window.Mergely = Mergely;
 
 module.exports = Mergely;

src/vdoc.js

@@ -2,6 +2,10 @@ const diff = require('./diff');
 
 const trace = console.log;
 
+const expLetters = new RegExp(
+	/\p{Letter}\p{Mark}*|\p{Number}\p{Mark}*|\p{Punctuation}\p{Mark}*|\p{Symbol}\p{Mark}*|\p{White_Space}/gu
+);
+
 class VDoc {
 	constructor(options) {
 		this.options = options;
@@ -275,15 +279,18 @@ class VLine {
 				editor.setGutterMarker(this.id, name, item);
 			}
 			if (this.markup.length) {
+				// while Mergely diffs unicode chars (letters+mark), CM is by character,
+				// so diffs need to be mapped.
+				const mapped = mapLettersToChars(editor.getValue());
 				for (const markup of this.markup) {
 					const [ charFrom, charTo, className ] = markup;
 					const fromPos = { line: this.id };
 					const toPos = { line: this.id };
 					if (charFrom >= 0) {
-						fromPos.ch = charFrom;
+						fromPos.ch = mapped[charFrom];
 					}
 					if (charTo >= 0) {
-						toPos.ch = charTo;
+						toPos.ch = mapped[charTo];
 					}
 					this._clearMarkup.push(
 						editor.markText(fromPos, toPos, { className }));
@@ -334,4 +341,15 @@ function getExtents(side, change) {
 	};
 }
 
+function mapLettersToChars(text) {
+	let match;
+	let mapped = {};
+	let index = 0;
+	expLetters.lastIndex = 0;
+	while ((match = expLetters.exec(text)) !== null) {
+		mapped[index++] = match.index;
+	}
+	return mapped;
+}
+
 module.exports = VDoc;

test/markup.spec.js

@@ -42,6 +42,7 @@ describe('markup', () => {
 
 	const LHS_CHANGE_START = '.mergely.lhs.c.CodeMirror-linebackground.start';
 	const LHS_CHANGE_END = '.mergely.lhs.c.CodeMirror-linebackground.end';
+	const LHS_CHANGE_START_AND_END = '.mergely.lhs.c.CodeMirror-linebackground.start.end';
 	const RHS_CHANGE_START = '.mergely.rhs.c.CodeMirror-linebackground.start';
 	const RHS_CHANGE_END = '.mergely.rhs.c.CodeMirror-linebackground.end';
 
@@ -233,7 +234,130 @@ describe('markup', () => {
 				expect(rhs_spans[1].innerText).to.equal('h');
 				expect(rhs_spans[2].innerText).to.equal('ir');
 			}
-		}
+		},
+		{
+			name: 'single word single diacritic non-spacing marks',
+			lhs: 'كلمة',
+			rhs: 'كَلمة',
+			check: (editor) => {
+				expect(editor.querySelectorAll(LHS_CHANGE_START + '.cid-0')).to.have.length(1);
+				expect(editor.querySelectorAll(LHS_CHANGE_END + '.cid-0')).to.have.length(1);
+				expect(editor.querySelectorAll(RHS_CHANGE_START + '.cid-0')).to.have.length(1);
+				expect(editor.querySelectorAll(RHS_CHANGE_END + '.cid-0')).to.have.length(1);
+				const lhs_spans = editor.querySelectorAll(LHS_INLINE_TEXT + '.cid-0');
+				expect(lhs_spans).to.have.length(1);
+				expect(lhs_spans[0].innerText).to.equal('ك');
+				const rhs_spans = editor.querySelectorAll(RHS_INLINE_TEXT + '.cid-0');
+				expect(rhs_spans).to.have.length(1);
+				expect(rhs_spans[0].innerText).to.equal('كَ');
+			}
+		},
+		{
+			name: 'single word multiple diacritic non-spacing marks',
+			lhs: ['\u006E', '\u0061', '\u0314', '\u0065'].join(''), // na̔e
+			rhs: ['\u006E', '\u0061', '\u0314', '\u034A', '\u0065'].join(''), // na̔͊e
+			check: (editor) => {
+				expect(editor.querySelectorAll(LHS_CHANGE_START + '.cid-0')).to.have.length(1);
+				expect(editor.querySelectorAll(LHS_CHANGE_END + '.cid-0')).to.have.length(1);
+				expect(editor.querySelectorAll(RHS_CHANGE_START + '.cid-0')).to.have.length(1);
+				expect(editor.querySelectorAll(RHS_CHANGE_END + '.cid-0')).to.have.length(1);
+				const lhs_spans = editor.querySelectorAll(LHS_INLINE_TEXT + '.cid-0');
+				expect(lhs_spans).to.have.length(1);
+				expect(lhs_spans[0].innerText).to.equal(['\u0061', '\u0314'].join(''));
+				const rhs_spans = editor.querySelectorAll(RHS_INLINE_TEXT + '.cid-0');
+				expect(rhs_spans).to.have.length(1);
+				expect(rhs_spans[0].innerText).to.equal('a̔͊');
+			}
+		},
+		{
+			name: 'multiple words diacritic non-spacing marks',
+			lhs: 'كلمة اخرى',
+			rhs: 'كْلمة اخرى',
+			check: (editor) => {
+				expect(editor.querySelectorAll(LHS_CHANGE_START + '.cid-0')).to.have.length(1);
+				expect(editor.querySelectorAll(LHS_CHANGE_END + '.cid-0')).to.have.length(1);
+				expect(editor.querySelectorAll(RHS_CHANGE_START + '.cid-0')).to.have.length(1);
+				expect(editor.querySelectorAll(RHS_CHANGE_END + '.cid-0')).to.have.length(1);
+				const lhs_spans = editor.querySelectorAll(LHS_INLINE_TEXT + '.cid-0');
+				expect(lhs_spans).to.have.length(1);
+				expect(lhs_spans[0].innerText).to.equal('ك');
+				const rhs_spans = editor.querySelectorAll(RHS_INLINE_TEXT + '.cid-0');
+				expect(rhs_spans).to.have.length(1);
+				expect(rhs_spans[0].innerText).to.equal('كْ');
+			}
+		},
+		{
+			name: 'nonnormalizable diacritic non-spacing marks',
+			lhs: 'naeg',
+			// there are 2 marks on 'e', tilde (0303) and x (0353)
+			rhs: ['\u006E', '\u0061', '\u0353', '\u0065', '\u0353', '\u0303', '\u0067'].join(''),
+			check: (editor) => {
+				expect(editor.querySelectorAll(LHS_CHANGE_START + '.cid-0')).to.have.length(1);
+				expect(editor.querySelectorAll(LHS_CHANGE_END + '.cid-0')).to.have.length(1);
+				expect(editor.querySelectorAll(RHS_CHANGE_START + '.cid-0')).to.have.length(1);
+				expect(editor.querySelectorAll(RHS_CHANGE_END + '.cid-0')).to.have.length(1);
+				const lhs_spans = editor.querySelectorAll(LHS_INLINE_TEXT + '.cid-0');
+				expect(lhs_spans).to.have.length(1);
+				expect(lhs_spans[0].innerText).to.equal('ae');
+				const rhs_spans = editor.querySelectorAll(RHS_INLINE_TEXT + '.cid-0');
+				expect(rhs_spans).to.have.length(1);
+				expect(rhs_spans[0].innerText).to.equal(
+					['\u0061', '\u0353', '\u0065', '\u0353', '\u0303'].join('')
+				);
+			}
+		},
+		{
+			name: 'nonnormalizable diacritic non-spacing marks',
+			lhs: [
+				'\u0065', '\u0353', '\u0303',
+				'\u0065', '\u0353', '\u0303',
+				'\u0065', '\u0353', '\u0303',
+				'x',
+				'\u0065', '\u0353', '\u0303',
+			].join(''),
+			// there are 2 marks on 'e', tilde (0303) and x (0353)
+			rhs: [
+				'\u0065', '\u0353', '\u0303',
+				'\u0065', '\u0353', '\u0303',
+				'\u0065', '\u0353', '\u0303',
+				'y',
+				'\u0065', '\u0353', '\u0303',
+			].join(''),
+			check: (editor) => {
+				expect(editor.querySelectorAll(LHS_CHANGE_START + '.cid-0')).to.have.length(1);
+				expect(editor.querySelectorAll(LHS_CHANGE_END + '.cid-0')).to.have.length(1);
+				expect(editor.querySelectorAll(RHS_CHANGE_START + '.cid-0')).to.have.length(1);
+				expect(editor.querySelectorAll(RHS_CHANGE_END + '.cid-0')).to.have.length(1);
+				const lhs_spans = editor.querySelectorAll(LHS_INLINE_TEXT + '.cid-0');
+				expect(lhs_spans).to.have.length(1);
+				expect(lhs_spans[0].innerText).to.equal('x');
+				const rhs_spans = editor.querySelectorAll(RHS_INLINE_TEXT + '.cid-0');
+				expect(rhs_spans).to.have.length(1);
+				expect(rhs_spans[0].innerText).to.equal('y');
+			}
+		},
+		{
+			name: 'Changes with non-letter chars',
+			lhs: '~# 00 == ! (dog) \n',
+			rhs: '~? 11 ++ ] (fox) .\n',
+			check: (editor) => {
+				expect(editor.querySelectorAll(LHS_CHANGE_START_AND_END + '.cid-0')).to.have.length(1);
+				expect(editor.querySelectorAll(LHS_INLINE_TEXT + '.cid-0')).to.have.length(6);
+				expect(editor.querySelectorAll(RHS_INLINE_TEXT + '.cid-0')).to.have.length(7);
+				const lhs_changes = editor.querySelectorAll(LHS_INLINE_TEXT + '.cid-0');
+				const rhs_changes = editor.querySelectorAll(RHS_INLINE_TEXT + '.cid-0');
+				const lhs_values = [];
+				for (const value of lhs_changes.values()) {
+					lhs_values.push(value.innerText);
+				}
+				const rhs_values = [];
+				for (const value of rhs_changes.values()) {
+					rhs_values.push(value.innerText);
+				}
+				expect(lhs_values).to.deep.equal(['#', '00', '==', '!', 'd', 'g']);
+				expect(rhs_values).to.deep.equal(['?', '11', '++', ']', 'f', 'x', '.']);
+			}
+		},
 	];
 
 	// to debug, add `only: true` to the test `opts` above, and run `npm run debug`

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
 };
@@ -61,19 +62,17 @@ describe('mergely', function () {
 				try {
 					const { children } = editor.el.children[0];
 					const items = Array.from(children).map(a => a.className);
+					expect(items[0] == 'mergely-margin');
+					expect(items[1] == 'mergely-column');
 					// NOTE: if running karma debug, these tests can fail because
 					// the debugger grabs the focus and the CodeMirror instance
 					// loses `CodeMirror-focused`
-					expect(items).to.deep.equal([
-						'mergely-margin',
-						'mergely-column',
-						'CodeMirror cm-s-default CodeMirror-focused',
-						'mergely-canvas',
-						'mergely-column',
-						'CodeMirror cm-s-default',
-						'mergely-margin',
-						'mergely-splash'
-					]);
+					expect(items[2].indexOf('CodeMirror cm-s-default' == 0));
+					expect(items[3] == 'mergely-margin');
+					expect(items[4] == 'mergely-column');
+					expect(items[5] == 'CodeMirror cm-s-default');
+					expect(items[6] == 'mergely-column');
+					expect(items[7] == 'mergely-splash');
 					expect(editor.get('lhs')).to.equal('');
 					expect(editor.get('rhs')).to.equal('');
 					done();
@@ -98,15 +97,17 @@ describe('mergely', function () {
 					// NOTE: if running karma debug, these tests can fail because
 					// the debugger grabs the focus and the CodeMirror instance
 					// loses `CodeMirror-focused`
-					expect(items).to.deep.equal([
-						'mergely-margin',
-						'mergely-column',
-						'CodeMirror cm-s-default CodeMirror-focused',
-						'mergely-canvas',
-						'mergely-column',
-						'CodeMirror cm-s-default',
-						'mergely-margin'
-					]);
+					expect(items[0] == 'mergely-margin');
+					expect(items[1] == 'mergely-column');
+					// NOTE: if running karma debug, these tests can fail because
+					// the debugger grabs the focus and the CodeMirror instance
+					// loses `CodeMirror-focused`
+					expect(items[2].indexOf('CodeMirror cm-s-default' == 0));
+					expect(items[3] == 'mergely-margin');
+					expect(items[4] == 'mergely-column');
+					expect(items[5] == 'CodeMirror cm-s-default');
+					expect(items[6] == 'mergely-column');
+					expect(items[7] == 'mergely-splash');
 					expect(editor.get('lhs')).to.equal('left-hand side text');
 					expect(editor.get('rhs')).to.equal('right-hand side text');
 					done();
@@ -128,18 +129,17 @@ describe('mergely', function () {
 				try {
 					const { children } = editor.el.children[0];
 					const items = Array.from(children).map(a => a.className);
+					expect(items[0] == 'mergely-margin');
+					expect(items[1] == 'mergely-column');
 					// NOTE: if running karma debug, these tests can fail because
 					// the debugger grabs the focus and the CodeMirror instance
 					// loses `CodeMirror-focused`
-					expect(items).to.deep.equal([
-						'mergely-margin',
-						'mergely-column',
-						'CodeMirror cm-s-default CodeMirror-focused',
-						'mergely-canvas',
-						'mergely-column',
-						'CodeMirror cm-s-default',
-						'mergely-margin'
-					]);
+					expect(items[2].indexOf('CodeMirror cm-s-default' == 0));
+					expect(items[3] == 'mergely-margin');
+					expect(items[4] == 'mergely-column');
+					expect(items[5] == 'CodeMirror cm-s-default');
+					expect(items[6] == 'mergely-column');
+					expect(items[7] == 'mergely-splash');
 					expect(editor.get('lhs')).to.equal('left-hand side text');
 					expect(editor.get('rhs')).to.equal('right-hand side text');
 					done();
@@ -160,18 +160,17 @@ describe('mergely', function () {
 				try {
 					const { children } = editor.el.children[0];
 					const items = Array.from(children).map(a => a.className);
+					expect(items[0] == 'mergely-margin');
+					expect(items[1] == 'mergely-column');
 					// NOTE: if running karma debug, these tests can fail because
 					// the debugger grabs the focus and the CodeMirror instance
 					// loses `CodeMirror-focused`
-					expect(items).to.deep.equal([
-						'mergely-margin',
-						'mergely-column',
-						'CodeMirror cm-s-default CodeMirror-focused',
-						'mergely-canvas',
-						'mergely-column',
-						'CodeMirror cm-s-default',
-						'mergely-margin'
-					]);
+					expect(items[2].indexOf('CodeMirror cm-s-default' == 0));
+					expect(items[3] == 'mergely-margin');
+					expect(items[4] == 'mergely-column');
+					expect(items[5] == 'CodeMirror cm-s-default');
+					expect(items[6] == 'mergely-column');
+					expect(items[7] == 'mergely-splash');
 					expect(children[0].style.visibility).to.equal('hidden');
 					expect(children[6].style.visibility).to.equal('hidden');
 					done();
@@ -502,6 +501,24 @@ describe('mergely', function () {
 			});
 		});
 
+		it('should preserve changed option', function (done) {
+			const editor = init({
+				change_timeout: 0,
+				license: 'lgpl-separate-notice',
+				lhs: 'left-hand side text',
+				rhs: 'right-hand side text'
+			});
+			editor.once('updated', () => {
+				editor.options({ sidebar: false });
+				expect(editor.options().wrap_lines).to.equal(false, 'wrap_lines');
+				expect(editor.options().sidebar).to.equal(false, 'sidebar');
+				editor.options({ wrap_lines: false });
+				expect(editor.options().wrap_lines).to.equal(false, 'wrap_lines-2');
+				expect(editor.options().sidebar).to.equal(false, 'sidebar-2');
+				done();
+			});
+		});
+
 		it('should ignore white-space', function (done) {
 			const editor = init({
 				height: 100,

webpack.dev.js

@@ -1,4 +1,5 @@
 const path = require('path')
+const chalk = require('chalk');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
@@ -50,8 +51,8 @@ module.exports = {
 				compiler.hooks.entryOption.tap('MyPlugin', (context, entry) => {
 					console.log('-'.repeat(78));
 					console.log('Applications:');
-					console.log('http://localhost:8080/app.html');
-					console.log('http://localhost:8080/app-styles.html');
+					console.log(chalk.bold(chalk.underline(chalk.cyan('http://localhost:8080/app.html'))));
+					console.log(chalk.bold(chalk.underline(chalk.cyan('http://localhost:8080/app-styles.html'))));
 					console.log('-'.repeat(78));
 				});
 			}

webpack.prod.js

@@ -15,6 +15,10 @@ module.exports = (mode) => {
 			...webpackDevConfig.output,
 			path: path.join(__dirname, 'lib'),
 			filename: './[name].js',
+			library: {
+				name: 'mergely',
+				type: 'umd',
+			}
 		},
 		optimization: {
 			minimize: true,