feat: new encoder (wip)

2026-02-06 10:07:49 +08:00 · 2023-08-27 11:16:37 +01:00
18 changed files with 4438 additions and 5156 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,45 +1,3 @@
-## [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)


--- a/README.md
+++ b/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, such as .txt, .html, .xml, .c, .cpp, .java, .js, 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, 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. It computes the diff within the browser.

@@ -36,11 +36,11 @@ rm -rf .git

 ### Usage via CDN

-Add the following to the `<head>` of your target HTML source file. Note that `codemirror` is bundled.
+Unpack mergely.tgz into a folder, for example, `./lib`, and add the following to the `<head>` of your target HTML source file.

 ```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 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>
 ```

 ### Synchronous initialization
@@ -82,16 +82,6 @@ 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|
@@ -103,7 +93,8 @@ Mergely supports the following CodeMirror visualizations for [mode](codemirror.n
 |<a name="ignorews"></a>ignorews|boolean|`false`|Ignores white-space.|
 |<a name="ignorecase"></a>ignorecase|boolean|`false`|Ignores case.|
 |<a name="ignoreaccents"></a>ignoreaccents|boolean|`false`|Ignores accented characters.|
-|<a name="lcs"></a>lcs|boolean|`true`|Enables/disables LCS computation for paragraphs (char-by-char changes). Disabling can give a performance gain for large documents.|
+|<a name="inline"></a>inline|string|`chars`|The line-by-line (inline) type of diff. Valid values are: `none`, `chars`, `words`. When `none`, inline diff is disabled. When `chars` differientiation is done on a character-by-character basis. When `words` differentiation is done on a whitespace basis.|
+|<a name="lcs"></a>lcs|boolean|`true`|:warning: **Deprecated**, use [`inline`](#inline). Enables/disables LCS computation for paragraphs (char-by-char changes). Disabling can give a performance gain for large documents.|
 |<a name="lhs"></a>lhs|boolean,`function handler(setValue)`|`null`|Sets the value of the editor on the left-hand side.|
 |<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/examples/app.js
+++ b/examples/app.js
@@ -4,15 +4,9 @@ require('codemirror/addon/selection/mark-selection.js');
 require('codemirror/lib/codemirror.css');
 require('../src/mergely.css');

-const lhs = `\
-the quick red fox
-jumped over the hairy dog
-`;
+const lhs = `hello`;

-const rhs = `\
-the quick brown fox
-jumped over the lazy dog
-`;
+const rhs = `hello\ngoodbye`;


 document.onreadystatechange = function () {
@@ -22,6 +16,7 @@ document.onreadystatechange = function () {

 	const mergely = new Mergely('#compare', {
 		license: 'lgpl',
+		inline: 'words',
 		lhs,
 		rhs
 	});
--- a/examples/cdn.html
+++ b/examples/cdn.html
@@ -1,38 +0,0 @@
-<!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>
--- a/examples/change-styles.html
+++ b/examples/change-styles.html
@@ -304,7 +304,6 @@ dog
 and the postman
 `
 }];
-		console.log(data.length);
 		for (let i = 0; i < data.length; ++i) {
 			const { lhs, rhs } = data[i];
 			const darkModeOptions = i === 11 ? {
--- a/examples/editor.html
+++ b/examples/editor.html
@@ -298,7 +298,6 @@
 				rhs.style = 'color:initial';
 			});
 			jQuery('#search-text').on('keypress', (ev) => {
-				console.log(ev.which)
 				if (event.which === 13) {
 					ev.preventDefault();
 					jQuery('#search').click();
--- a/examples/index.html
+++ b/examples/index.html
@@ -21,9 +21,6 @@ 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>

--- a/git-conventional-commits.json
+++ b/git-conventional-commits.json
@@ -22,7 +22,6 @@

  "changelog" : {
    "commitTypes": [
-      "docs",
      "feat",
      "fix",
      "perf",
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "mergely",
-  "version": "5.1.3",
+  "version": "5.0.2",
  "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.1.2",
+    "semantic-release": "^21.0.1",
    "simple-mock": "^0.8.0",
    "standard-version": "^9.3.2",
    "style-loader": "^3.3.1",
--- a/src/diff-view.js
+++ b/src/diff-view.js
@@ -2,12 +2,6 @@ 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');

@@ -58,7 +52,9 @@ CodeMirrorDiffView.prototype.unbind = function() {
 	if (this._unbound) {
 		return;
 	}
-	this.trace('api#unbind');
+	if (this.settings._debug) {
+		trace('api#unbind');
+	}
 	if (this._changedTimeout != null) {
 		clearTimeout(this._changedTimeout);
 	}
@@ -87,7 +83,9 @@ CodeMirrorDiffView.prototype.readOnly = function(side) {
 }

 CodeMirrorDiffView.prototype.lhs = function(text) {
-	this.trace('api#lhs', text && text.length);
+	if (this.settings._debug) {
+		trace('api#lhs', text && text.length);
+	}
 	// invalidate existing changes and current position
 	this.changes = [];
 	this._current_diff = -1;
@@ -96,25 +94,33 @@ CodeMirrorDiffView.prototype.lhs = function(text) {

 CodeMirrorDiffView.prototype.rhs = function(text) {
 	// invalidate existing changes and current position
-	this.trace('api#rhs', text && text.length);
+	if (this.settings._debug) {
+		trace('api#rhs', text && text.length);
+	}
 	this.changes = [];
 	this._current_diff = -1;
 	this.editor.rhs.setValue(text);
 };

 CodeMirrorDiffView.prototype.update = function() {
-	this.trace('api#update');
+	if (this.settings._debug) {
+		trace('api#update');
+	}
 	this.el.dispatchEvent(new Event('changed'));
 };

 CodeMirrorDiffView.prototype.unmarkup = function() {
-	this.trace('api#unmarkup');
+	if (this.settings._debug) {
+		trace('api#unmarkup');
+	}
 	this._clear();
 	this.el.dispatchEvent(new Event('updated'));
 };

 CodeMirrorDiffView.prototype.scrollToDiff = function(direction) {
-	this.trace('api#scrollToDiff', direction);
+	if (this.settings._debug) {
+		trace('api#scrollToDiff', direction);
+	}
 	if (!this.changes.length) return;
 	if (direction === 'next') {
 		if (this._current_diff === this.changes.length - 1
@@ -131,14 +137,18 @@ CodeMirrorDiffView.prototype.scrollToDiff = function(direction) {
 			this._current_diff = Math.max(--this._current_diff, 0);
 		}
 	}
-	this.trace('change', 'current-diff', this._current_diff);
+	if (this.settings._debug) {
+		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) {
-	this.trace('api#mergeCurrentChange', side);
+	if (this.settings._debug) {
+		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');
@@ -149,7 +159,9 @@ CodeMirrorDiffView.prototype.mergeCurrentChange = function(side) {
 };

 CodeMirrorDiffView.prototype.scrollTo = function(side, num) {
-	this.trace('api#scrollTo', side, num);
+	if (this.settings._debug) {
+		trace('api#scrollTo', side, num);
+	}
 	const ed = this.editor[side];
 	ed.setCursor(num);
 	ed.centerOnCursor();
@@ -163,7 +175,9 @@ CodeMirrorDiffView.prototype.setOptions = function(opts) {
 		...this.settings,
 		...opts
 	};
-	this.trace('api#setOptions', opts);
+	if (this.settings._debug) {
+		trace('api#setOptions', opts);
+	}

 	// if options set after init
 	if (this.editor) {
@@ -196,7 +210,9 @@ CodeMirrorDiffView.prototype.setOptions = function(opts) {
 };

 CodeMirrorDiffView.prototype.get = function(side) {
-	this.trace('api#get', side);
+	if (this.settings._debug) {
+		trace('api#get', side);
+	}
 	const ed = this.editor[side];
 	const value = ed.getValue();
 	if (value === undefined) {
@@ -206,12 +222,16 @@ CodeMirrorDiffView.prototype.get = function(side) {
 };

 CodeMirrorDiffView.prototype.cm = function(side) {
-	this.trace('api#cm', 'side');
+	if (this.settings._debug) {
+		trace('api#cm', 'side');
+	}
 	return this.editor[side];
 };

 CodeMirrorDiffView.prototype.search = function(side, query, direction) {
-	this.trace('api#search', side, query, direction);
+	if (this.settings._debug) {
+		trace('api#search', side, query, direction);
+	}
 	const editor = this.editor[side];
 	if (!editor.getSearchCursor) {
 		throw new Error('install CodeMirror search addon');
@@ -238,7 +258,9 @@ CodeMirrorDiffView.prototype.search = function(side, query, direction) {
 };

 CodeMirrorDiffView.prototype.resize = function() {
-	this.trace('api#resize');
+	if (this.settings._debug) {
+		trace('api#resize');
+	}
 	const parent = this.el;
 	const contentHeight = parent.offsetHeight - 2;

@@ -261,7 +283,9 @@ CodeMirrorDiffView.prototype.resize = function() {
 };

 CodeMirrorDiffView.prototype.bind = function(container) {
-	this.trace('api#bind', container);
+	if (this.settings._debug) {
+		trace('api#bind', container);
+	}
 	this._origEl = {
 		style: container.style,
 		className: container.className
@@ -383,7 +407,9 @@ CodeMirrorDiffView.prototype.bind = function(container) {
 		}
 	});
 	this.editor.rhs.on('beforeChange', (cm, ev) => {
-		this.trace('event#rhs-beforeChange', ev);
+		if (this.settings._debug) {
+			trace('event#rhs-beforeChange', ev);
+		}
 		if (ev.text.length > 1
 			|| ((ev.from.line - ev.to.line) && ev.origin === '+delete')) {
 			this._clear();
@@ -391,16 +417,24 @@ CodeMirrorDiffView.prototype.bind = function(container) {
 	});

 	this.editor.lhs.on('change', (instance, ev) => {
-		this.trace('event#lhs-change');
+		if (this.settings._debug) {
+			trace('event#lhs-change');
+		}
 		this._changing();
-		this.trace('event#lhs-change [emitted]');
+		if (this.settings._debug) {
+			trace('event#lhs-change [emitted]');
+		}
 	});
 	this.editor.lhs.on('scroll', () => {
 		if (this._skipscroll.lhs) {
-			this.trace('event#lhs-scroll (skipped)');
+			if (this.settings._debug) {
+				trace('event#lhs-scroll (skipped)');
+			}
 			return;
 		} else {
-			this.trace('event#lhs-scroll');
+			if (this.settings._debug) {
+				trace('event#lhs-scroll');
+			}
 		}
 		// firefox scroll-linked effect render issue
 		setTimeout(() => {
@@ -408,15 +442,21 @@ CodeMirrorDiffView.prototype.bind = function(container) {
 		}, 1);
 	});
 	this.editor.rhs.on('change', (instance, ev) => {
-		this.trace('event#rhs-change', ev);
+		if (this.settings._debug) {
+			trace('event#rhs-change', ev);
+		}
 		this._changing();
 	});
 	this.editor.rhs.on('scroll', () => {
 		if (this._skipscroll.rhs) {
-			this.trace('event#rhs-scroll (skipped)');
+			if (this.settings._debug) {
+				trace('event#rhs-scroll (skipped)');
+			}
 			return;
 		} else {
-			this.trace('event#rhs-scroll');
+			if (this.settings._debug) {
+				trace('event#rhs-scroll');
+			}
 		}
 		// firefox scroll-linked effect render issue
 		setTimeout(() => {
@@ -429,7 +469,7 @@ CodeMirrorDiffView.prototype.bind = function(container) {
 	const resize = () => {
 		if (this.settings._debug) {
 			traceTimeStart('event#resize');
-			this.trace('event#resize [start]');
+			trace('event#resize [start]');
 		}
 		this.resize();
 		if (this.settings._debug) {
@@ -486,12 +526,16 @@ CodeMirrorDiffView.prototype.bind = function(container) {
 	}

 	this.editor.lhs.on('gutterClick', (cm, n, gutterClass, ev) => {
-		this.trace('event#gutterClick', 'lhs', n, ev);
+		if (this.settings._debug) {
+			trace('event#gutterClick', 'lhs', n, ev);
+		}
 		gutterClicked.call(this, 'lhs', n, ev);
 	});

 	this.editor.rhs.on('gutterClick', (cm, n, gutterClass, ev) => {
-		this.trace('event#gutterClick', 'rhs', n, ev);
+		if (this.settings._debug) {
+			trace('event#gutterClick', 'rhs', n, ev);
+		}
 		gutterClicked.call(this, 'rhs', n, ev);
 	});

@@ -639,14 +683,18 @@ CodeMirrorDiffView.prototype._scrolling = function({ side }) {
 	const vp = this.editor[oside].getViewport();
 	let scroll = true;
 	if (last_change) {
-		this.trace('scroll#_scrolling', 'last change before midline', last_change);
+		if (this.settings._debug) {
+			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
-		this.trace('scroll#_scrolling', 'other side', oside, 'pos:', top_to - top_adjust);
+		if (this.settings._debug) {
+			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
@@ -654,21 +702,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;
-		this.trace('scroll#set oside skip set:', oside, this._skipscroll);
+		trace('scroll#set oside skip set:', oside, this._skipscroll);
 		if (this._linkedScrollTimeout[oside]) {
 			clearTimeout(this._linkedScrollTimeout[oside]);
-			this.trace('scroll#clearing timeout:', this._skipscroll);
+			trace('scroll#clearing timeout:', this._skipscroll);
 		}
 		this._linkedScrollTimeout[oside] = setTimeout(() => {
 			this._skipscroll[oside] = false;
-			this.trace('scroll#set oside skip unset:', oside, this._skipscroll);
+			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 {
-		this.trace('scroll#_scrolling', 'not scrolling other side');
+	} else if (this.settings._debug) {
+		trace('scroll#_scrolling', 'not scrolling other side');
 	}
 	this._renderChanges();

@@ -679,19 +727,23 @@ CodeMirrorDiffView.prototype._scrolling = function({ side }) {

 CodeMirrorDiffView.prototype._changing = function() {
 	if (!this.settings.autoupdate) {
-		this.trace('change#_changing autoupdate is disabled');
+		if (this.settings._debug) {
+			trace('change#_changing autoupdate is disabled');
+		}
 		return;
 	}
 	if (this.settings._debug) {
 		traceTimeStart('change#_changing');
-		this.trace('change#_changing [start]');
+		trace('change#_changing [start]');
 	}
 	const handleChange = () => {
 		this._changedTimeout = null;
 		this.el.dispatchEvent(new Event('changed'));
 	};
 	if (this.settings.change_timeout > 0) {
-		this.trace('change#setting timeout', this.settings.change_timeout)
+		if (this.settings._debug) {
+			trace('change#setting timeout', this.settings.change_timeout)
+		}
 		if (this._changedTimeout != null) {
 			clearTimeout(this._changedTimeout);
 		}
@@ -705,7 +757,9 @@ CodeMirrorDiffView.prototype._changing = function() {
 };

 CodeMirrorDiffView.prototype.setChanges = function(changes) {
-	this.trace('change#setChanges');
+	if (this.settings._debug) {
+		trace('change#setChanges');
+	}
 	this._clear();
 	// after clear, set the new changes
 	this.changes = changes;
@@ -715,7 +769,7 @@ CodeMirrorDiffView.prototype.setChanges = function(changes) {
 CodeMirrorDiffView.prototype._renderChanges = function() {
 	if (this.settings._debug) {
 		traceTimeStart('draw#_renderChanges');
-		this.trace('draw#_renderChanges [start]', this.changes.length, 'changes');
+		trace('draw#_renderChanges [start]', this.changes.length, 'changes');
 	}
 	this._clearCanvases();
 	this._calculateOffsets(this.changes);
@@ -887,7 +941,6 @@ CodeMirrorDiffView.prototype._markupLineChanges = function (changes) {
 	for (let i = 0; i < changes.length; ++i) {
 		const change = changes[i];
 		const isCurrent = current_diff === i;
-		const lineDiff = this.settings.lcs !== false;
 		const lhsInView = this._isChangeInView('lhs', lhsvp, change);
 		const rhsInView = this._isChangeInView('rhs', rhsvp, change);

@@ -898,7 +951,7 @@ CodeMirrorDiffView.prototype._markupLineChanges = function (changes) {

 			vdoc.addRender('lhs', change, i, {
 				isCurrent,
-				lineDiff,
+				lineDiff: this.settings.inline !== 'none',
 				// TODO: move out of loop
 				getMergeHandler: (change, side, oside) => {
 					return () => this._merge_change(change, side, oside);
@@ -915,7 +968,7 @@ CodeMirrorDiffView.prototype._markupLineChanges = function (changes) {

 			vdoc.addRender('rhs', change, i, {
 				isCurrent,
-				lineDiff,
+				lineDiff: this.settings.inline !== 'none',
 				// TODO: move out of loop
 				getMergeHandler: (change, side, oside) => {
 					return () => this._merge_change(change, side, oside);
@@ -925,13 +978,14 @@ CodeMirrorDiffView.prototype._markupLineChanges = function (changes) {
 			});
 		}

-		if (lineDiff
+		if (this.settings.inline !== 'none'
 			&& (lhsInView || rhsInView)
 			&& change.op === 'c') {
 			vdoc.addInlineDiff(change, i, {
 				ignoreaccents: this.settings.ignoreaccents,
 				ignorews: this.settings.ignorews,
 				ignorecase: this.settings.ignorecase,
+				split: this.settings.inline,
 				getText: (side, lineNum) => {
 					if (side === 'lhs') {
 						const text = led.getLine(lineNum);
@@ -1043,9 +1097,12 @@ CodeMirrorDiffView.prototype._renderDiff = function(changes) {
 	const ctx_lhs = mcanvas_lhs.getContext('2d');
 	const ctx_rhs = mcanvas_rhs.getContext('2d');

-	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);
+	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);
+	}

 	ex.lhs_margin.removeEventListener('click', this._handleLhsMarginClick);
 	ex.rhs_margin.removeEventListener('click', this._handleRhsMarginClick);
@@ -1070,16 +1127,17 @@ CodeMirrorDiffView.prototype._renderDiff = function(changes) {
 		const rhs_y_end = change['rhs-y-end'] - rhsScrollTop;

 		if (Number.isNaN(lhs_y_start)) {
-			this.trace(
-				'draw#_renderDiff unexpected NaN',
-				change['lhs-y-start'], change['lhs-y-end']
-			);
+			trace('draw#_renderDiff', 'unexpected NaN',
+				change['lhs-y-start'], change['lhs-y-end']);
 			continue;
 		}

 		// draw margin indicators
-		this.trace('draw#_renderDiff', 'draw1', 'marker',
-			lhs_y_start, lhs_y_end, rhs_y_start, rhs_y_end);
+		if (this.settings._debug
+			&& this.settings._debug) {
+			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);
@@ -1208,10 +1266,4 @@ CodeMirrorDiffView.prototype._queryElement = function(selector) {
 	return this[cacheName];
 }

-CodeMirrorDiffView.prototype.trace = function(...args) {
-	if (this.settings._debug) {
-		console.log(...args);
-	}
-}
-
 module.exports = CodeMirrorDiffView;
--- a/src/diff.js
+++ b/src/diff.js
@@ -1,43 +1,52 @@
+const Encoder = require('./encoder.js');
+
 const SMS_TIMEOUT_SECONDS = 1.0;

-function diff(lhs, rhs, options = {}) {
+function diff(lhs, rhs, opts) {
 	const {
 		ignorews = false,
 		ignoreaccents = false,
 		ignorecase = false,
 		split = 'lines'
-	} = options;
-
-	this.codeify = new CodeifyText(lhs, rhs, {
+	} = opts || {};
+	const options = {
 		ignorews,
 		ignoreaccents,
 		ignorecase,
 		split
-	});
-	const lhs_ctx = {
-		codes: this.codeify.getCodes('lhs'),
+	};
+
+	const encoder = new Encoder();
+	const lhsCodes = encoder.encode(lhs, options);
+	const rhsCodes = encoder.encode(rhs, options);
+	const lhsCtx = {
+		codes: lhsCodes.codes,
+		length: lhsCodes.length,
+		parts: lhsCodes.parts,
 		modified: {}
 	};
-	const rhs_ctx = {
-		codes: this.codeify.getCodes('rhs'),
+	const rhsCtx = {
+		codes: rhsCodes.codes,
+		length: rhsCodes.length,
+		parts: rhsCodes.parts,
 		modified: {}
 	};
 	const vector_d = [];
 	const vector_u = [];
-	this._lcs(lhs_ctx, 0, lhs_ctx.codes.length, rhs_ctx, 0, rhs_ctx.codes.length, vector_u, vector_d);
-	this._optimize(lhs_ctx);
-	this._optimize(rhs_ctx);
-	this.items = this._create_diffs(lhs_ctx, rhs_ctx);
+	this._lcs(lhsCtx, 0, lhsCodes.length, rhsCtx, 0, rhsCodes.length, vector_u, vector_d);
+	this._optimize(lhsCtx);
+	this._optimize(rhsCtx);
+	this.items = this._create_diffs(lhsCtx, rhsCtx, options);
+	this.sides = {
+		lhs: lhsCtx,
+		rhs: rhsCtx
+	};
 };

 diff.prototype.changes = function() {
 	return this.items;
 };

-diff.prototype.getLines = function(side) {
-	return this.codeify.getLines(side);
-};
-
 diff.prototype.normal_form = function() {
 	let nf = '';
 	for (let index = 0; index < this.items.length; ++index) {
@@ -57,8 +66,8 @@ diff.prototype.normal_form = function() {
 		else rhs_str = (item.rhs_start + 1) + ',' + (item.rhs_start + item.rhs_inserted_count);
 		nf += lhs_str + change + rhs_str + '\n';

-		const lhs_lines = this.getLines('lhs');
-		const rhs_lines = this.getLines('rhs');
+		const lhs_lines = this.sides.lhs.parts;
+		const rhs_lines = this.sides.rhs.parts;
 		if (rhs_lines && lhs_lines) {
 			let i;
 			// if rhs/lhs lines have been retained, output contextual diff
@@ -102,7 +111,7 @@ diff.prototype._lcs = function(lhs_ctx, lhs_lower, lhs_upper, rhs_ctx, rhs_lower

 diff.prototype._sms = function(lhs_ctx, lhs_lower, lhs_upper, rhs_ctx, rhs_lower, rhs_upper, vector_u, vector_d) {
 	const timeout = Date.now() + SMS_TIMEOUT_SECONDS * 1000;
-	const max = lhs_ctx.codes.length + rhs_ctx.codes.length + 1;
+	const max = lhs_ctx.length + rhs_ctx.length + 1;
 	const kdown = lhs_lower - rhs_lower;
 	const kup = lhs_upper - rhs_upper;
 	const delta = (lhs_upper - lhs_lower) - (rhs_upper - rhs_lower);
@@ -115,12 +124,13 @@ diff.prototype._sms = function(lhs_ctx, lhs_lower, lhs_upper, rhs_ctx, rhs_lower
 	const ret = { x:0, y:0 }
 	let x;
 	let y;
+	let k;
 	for (let d = 0; d <= maxd; ++d) {
 		if (SMS_TIMEOUT_SECONDS && Date.now() > timeout) {
 			// bail if taking too long
 			return { x: lhs_lower, y: rhs_upper };
 		}
-		for (let k = kdown - d; k <= kdown + d; k += 2) {
+		for (k = kdown - d; k <= kdown + d; k += 2) {
 			if (k === kdown - d) {
 				x = vector_d[ offset_down + k + 1 ];//down
 			}
@@ -146,7 +156,7 @@ diff.prototype._sms = function(lhs_ctx, lhs_lower, lhs_upper, rhs_ctx, rhs_lower
 			}
 		}
 		// Extend the reverse path.
-		for (let k = kup - d; k <= kup + d; k += 2) {
+		for (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
@@ -178,15 +188,15 @@ diff.prototype._sms = function(lhs_ctx, lhs_lower, lhs_upper, rhs_ctx, rhs_lower
 diff.prototype._optimize = function(ctx) {
 	let start = 0;
 	let end = 0;
-	while (start < ctx.codes.length) {
-		while ((start < ctx.codes.length) && (ctx.modified[start] === undefined || ctx.modified[start] === false)) {
+	while (start < ctx.length) {
+		while ((start < ctx.length) && (ctx.modified[start] === undefined || ctx.modified[start] === false)) {
 			start++;
 		}
 		end = start;
-		while ((end < ctx.codes.length) && (ctx.modified[end] === true)) {
+		while ((end < ctx.length) && (ctx.modified[end] === true)) {
 			end++;
 		}
-		if ((end < ctx.codes.length) && (ctx.codes[start] === ctx.codes[end])) {
+		if ((end < ctx.length) && (ctx.codes[start] === ctx.codes[end])) {
 			ctx.modified[start] = false;
 			ctx.modified[end] = true;
 		}
@@ -196,16 +206,16 @@ diff.prototype._optimize = function(ctx) {
 	}
 };

-diff.prototype._create_diffs = function(lhs_ctx, rhs_ctx) {
+diff.prototype._create_diffs = function(lhs_ctx, rhs_ctx, options) {
 	const items = [];
 	let lhs_start = 0;
 	let rhs_start = 0;
 	let lhs_line = 0;
 	let rhs_line = 0;

-	while (lhs_line < lhs_ctx.codes.length || rhs_line < rhs_ctx.codes.length) {
-		if ((lhs_line < lhs_ctx.codes.length) && (!lhs_ctx.modified[lhs_line])
-			&& (rhs_line < rhs_ctx.codes.length) && (!rhs_ctx.modified[rhs_line])) {
+	while (lhs_line < lhs_ctx.length || rhs_line < rhs_ctx.length) {
+		if ((lhs_line < lhs_ctx.length) && (!lhs_ctx.modified[lhs_line])
+			&& (rhs_line < rhs_ctx.length) && (!rhs_ctx.modified[rhs_line])) {
 			// equal lines
 			lhs_line++;
 			rhs_line++;
@@ -215,19 +225,50 @@ diff.prototype._create_diffs = function(lhs_ctx, rhs_ctx) {
 			lhs_start = lhs_line;
 			rhs_start = rhs_line;

-			while (lhs_line < lhs_ctx.codes.length && (rhs_line >= rhs_ctx.codes.length || lhs_ctx.modified[lhs_line]))
+			while (lhs_line < lhs_ctx.length && (rhs_line >= rhs_ctx.length || lhs_ctx.modified[lhs_line]))
 				lhs_line++;

-			while (rhs_line < rhs_ctx.codes.length && (lhs_line >= lhs_ctx.codes.length || rhs_ctx.modified[rhs_line]))
+			while (rhs_line < rhs_ctx.length && (lhs_line >= lhs_ctx.length || rhs_ctx.modified[rhs_line]))
 				rhs_line++;

 			if ((lhs_start < lhs_line) || (rhs_start < rhs_line)) {
 				// store a new difference-item
+				let deleted_count;
+				let inserted_count;
+				let lhs_start = lhs_line;
+				let rhs_start = rhs_line;
+				if (options.split === 'lines') {
+					lhs_start = lhs_line;
+					rhs_start = rhs_line;
+					deleted_count = lhs_line - lhs_start;
+					inserted_count = rhs_line - rhs_start;
+				} else {
+					const ditem_lhs_start = (lhs_start >= lhs_ctx.length)
+						? lhs_ctx.length
+						: lhs_ctx.parts[lhs_start].from;
+					const ditem_rhs_start = (rhs_start >= rhs_ctx.length)
+						? rhs_ctx.length
+						: rhs_ctx.parts[rhs_start].from;
+
+					const ditem_lhs_end = (lhs_line >= lhs_ctx.length)
+						? lhs_ctx.length
+						: lhs_ctx.parts[lhs_line].from;
+					const ditem_rhs_end = (rhs_line >= rhs_ctx.length)
+						? rhs_ctx.length
+						: rhs_ctx.parts[rhs_line];
+					// const delim_len = (options.split === 'words') ? 1 : 0;
+					// const ditemLhs
+
+					deleted_count = ditem_lhs_end - ditem_lhs_start;
+					inserted_count = ditem_rhs_end - ditem_rhs_start;
+					lhs_start = ditem_lhs_start;
+					rhs_start = ditem_rhs_start;
+				}
 				items.push({
 					lhs_start: lhs_start,
 					rhs_start: rhs_start,
-					lhs_deleted_count: lhs_line - lhs_start,
-					rhs_inserted_count: rhs_line - rhs_start
+					lhs_deleted_count: deleted_count,
+					rhs_inserted_count: inserted_count
 				});
 			}
 		}
@@ -235,77 +276,4 @@ diff.prototype._create_diffs = function(lhs_ctx, rhs_ctx) {
 	return items;
 };

-function CodeifyText(lhs, rhs, options) {
-    this._max_code = 0;
-    this._diff_codes = {};
-	this.ctxs = {};
-	this.options = options;
-	this.options.split = this.options.split || 'lines';
-
-	if (typeof lhs === 'string') {
-		if (this.options.split === 'chars') {
-			this.lhs = lhs.split('');
-		} else if (this.options.split === 'words') {
-			this.lhs = lhs.split(/\s/);
-		} else if (this.options.split === 'lines') {
-			this.lhs = lhs.split('\n');
-		}
-	} else {
-		this.lhs = lhs;
-	}
-	if (typeof rhs === 'string') {
-		if (this.options.split === 'chars') {
-			this.rhs = rhs.split('');
-		} else if (this.options.split === 'words') {
-			this.rhs = rhs.split(/\s/);
-		} else if (this.options.split === 'lines') {
-			this.rhs = rhs.split('\n');
-		}
-	} else {
-		this.rhs = rhs;
-	}
-};
-
-CodeifyText.prototype.getCodes = function(side) {
-	if (!this.ctxs.hasOwnProperty(side)) {
-		var ctx = this._diff_ctx(this[side]);
-		this.ctxs[side] = ctx;
-		ctx.codes.length = Object.keys(ctx.codes).length;
-	}
-	return this.ctxs[side].codes;
-}
-
-CodeifyText.prototype.getLines = function(side) {
-	return this.ctxs[side].lines;
-}
-
-CodeifyText.prototype._diff_ctx = function(lines) {
-	var ctx = {i: 0, codes: {}, lines: lines};
-	this._codeify(lines, ctx);
-	return ctx;
-}
-
-CodeifyText.prototype._codeify = function(lines, ctx) {
-	for (let i = 0; i < lines.length; ++i) {
-		let line = lines[i];
-		if (this.options.ignorews) {
-			line = line.replace(/\s+/g, '');
-		}
-		if (this.options.ignorecase) {
-			line = line.toLowerCase();
-		}
-		if (this.options.ignoreaccents) {
-			line = line.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
-		}
-		const aCode = this._diff_codes[line];
-		if (aCode !== undefined) {
-			ctx.codes[i] = aCode;
-		} else {
-			++this._max_code;
-			this._diff_codes[line] = this._max_code;
-			ctx.codes[i] = this._max_code;
-		}
-	}
-}
-
 module.exports = diff;
--- a/src/encoder.js
+++ b/src/encoder.js
@@ -0,0 +1,79 @@
+class Encoder {
+    constructor() {
+        this._maxCode = 0;
+        this._codes = {};
+    }
+
+    encode(text, options) {
+        let exp;
+        let fudge = 0;
+        if (options.split === 'chars') {
+            exp = /./g;
+            fudge = 1;
+        } else if (options.split === 'words') {
+            exp = /\s+/g;
+        } else {
+            exp = /\n/g;
+        }
+        let match;
+        let p0 = -1;
+        const parts = [];
+        while ((match = exp.exec(text)) !== null) {
+            const from = (options.split === 'lines') ? parts.length : p0 + 1;
+            const to = (options.split === 'lines') ? parts.length + 1 : match.index + fudge;
+            const item = {
+                from,
+                to,
+                text: text.substr(p0 + 1, match.index - p0 - 1 + fudge)
+            };
+            parts.push(item);
+            p0 = match.index;
+        }
+        const from = (options.split === 'lines') ? parts.length : p0 + 1;
+        const to = (options.split === 'lines') ? parts.length + 1 : text.length;
+        parts.push({
+            from,
+            to,
+            text: text.substr(p0 + 1)
+        });
+        const hash = this._hash(parts, options)
+        return {
+            codes: hash.codes,
+            parts: hash.parts,
+            length: Object.keys(hash.codes).length
+        };
+    }
+
+    _hash(parts, options) {
+        const codes = {};
+        let i = 0;
+        for (const part of parts) {
+            let text = part.text;
+
+            if (options.ignorews) {
+                text = text.replace(/\s+/g, '');
+            }
+            if (options.ignorecase) {
+                text = text.toLowerCase();
+            }
+            if (options.ignoreaccents) {
+                text = text.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+            }
+            const code = this._codes[text];
+            if (code !== undefined) {
+                codes[i] = code;
+            } else {
+                ++this._maxCode;
+                this._codes[text] = this._maxCode;
+                codes[i] = this._maxCode;
+            }
+            i += 1;
+        }
+        return {
+            codes,
+            parts
+        };
+    }
+}
+
+module.exports = Encoder;
--- a/src/mergely.js
+++ b/src/mergely.js
@@ -12,6 +12,7 @@ const defaultOptions = {
 	wrap_lines: false,
 	line_numbers: true,
 	lcs: true,
+	inline: 'chars',
 	sidebar: true,
 	viewport: false,
 	ignorews: false,
@@ -23,8 +24,7 @@ const defaultOptions = {
 	vpcolor: 'rgba(0, 0, 200, 0.5)',
 	license: 'lgpl',
 	cmsettings: {
-		styleSelectedText: true,
-		mode: null
+		styleSelectedText: true
 	},
 	lhs_cmsettings: {},
 	rhs_cmsettings: {},
@@ -120,13 +120,15 @@ class Mergely {
 		const colors = dom.getColors(this.el);
 		this._options = {
 			...defaultOptions,//lgpl
+			...{
+				// default inline based off `lcs`
+				inline: options && options.lcs === false ? 'none' : 'chars'
+			},
 			...this._initOptions,
-			...options//lgpl-separate-notice
+			...options,//lgpl-separate-notice
 		};
 		this._viewOptions = {
-			...defaultOptions,
-			...this._initOptions,
-			...options,
+			...this._options,
 			_colors: colors
 		};
 	}
--- a/src/vdoc.js
+++ b/src/vdoc.js
@@ -124,7 +124,7 @@ class VDoc {
 		this._setRenderedChange(side, changeId);
 	}

-	addInlineDiff(change, changeId, { getText, ignorews, ignoreaccents, ignorecase }) {
+	addInlineDiff(change, changeId, { getText, ignorews, ignoreaccents, ignorecase, split = 'chars' }) {
 		if (this.options._debug) {
 			trace('vdoc#addInlineDiff', changeId, change);
 		}
@@ -152,7 +152,7 @@ class VDoc {
 					ignoreaccents,
 					ignorews,
 					ignorecase,
-					split: 'chars'
+					split
 				});
 				for (const change of results.changes()) {
 					const {
--- a/test/diff.spec.js
+++ b/test/diff.spec.js
@@ -0,0 +1,16 @@
+const diff = require('../src/diff');
+
+describe('diff', () => {
+    it('should insert one line when lhs is empty and rhs has no line ending', () => {
+        const _diff = new diff('', 'hello', { split: 'lines' });
+        const changes = _diff.changes();
+        console.log(changes);
+        // with lhs_start at 1, the insert is at the end
+        expect(changes).to.deep.equal([{
+            lhs_start: 1,
+            rhs_start: 1,
+            lhs_deleted_count: 0,
+            rhs_inserted_count: 0
+        }]);
+    });
+});
--- a/test/markup.spec.js
+++ b/test/markup.spec.js
@@ -189,7 +189,6 @@ describe('markup', () => {
 				expect(editor.querySelectorAll('.mergely.rhs')).to.have.length(0);
 			}
 		},
-
 		{
 			name: 'Changed lines (lhs)',
 			lhs: 'the quick red fox\njumped over the hairy dog',
@@ -233,6 +232,46 @@ describe('markup', () => {
 				expect(rhs_spans[1].innerText).to.equal('h');
 				expect(rhs_spans[2].innerText).to.equal('ir');
 			}
+		},
+		{
+			name: 'Changed lines with inline words (lhs)',
+			lhs: 'the quick red fox\njumped over the hairy dog',
+			rhs: 'the quick brown fox\njumped over the lazy dog',
+			options: { inline: 'words' },
+			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(2);
+				expect(lhs_spans[0].innerText).to.equal('red');
+				expect(lhs_spans[1].innerText).to.equal('hairy');
+				const rhs_spans = editor.querySelectorAll(RHS_INLINE_TEXT + '.cid-0');
+				expect(rhs_spans).to.have.length(2);
+				expect(rhs_spans[0].innerText).to.equal('brown');
+				expect(rhs_spans[1].innerText).to.equal('lazy');
+			}
+		},
+		{
+			name: 'Changed lines (rhs)',
+			lhs: 'the quick brown fox\njumped over the lazy dog',
+			rhs: 'the quick red fox\njumped over the hairy dog',
+			options: { inline: 'words' },
+			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(2);
+				expect(lhs_spans[0].innerText).to.equal('brown');
+				expect(lhs_spans[1].innerText).to.equal('lazy');
+				const rhs_spans = editor.querySelectorAll(RHS_INLINE_TEXT + '.cid-0');
+				expect(rhs_spans).to.have.length(2);
+				expect(rhs_spans[0].innerText).to.equal('red');
+				expect(rhs_spans[1].innerText).to.equal('hairy');
+			}
 		}
 	];

@@ -246,8 +285,9 @@ describe('markup', () => {
 				license: 'lgpl-separate-notice',
 				change_timeout: 0,
 				_debug: debug,
-				lhs: (setValue) => setValue(opt.lhs),
-				rhs: (setValue) => setValue(opt.rhs)
+				lhs: opt.lhs,
+				rhs: opt.rhs,
+				...opt.options
 			});
 			const test = () => {
 				try {
--- a/test/mergely.spec.js
+++ b/test/mergely.spec.js
@@ -8,6 +8,7 @@ const defaultOptions = {
 	rhs_margin: 'right',
 	wrap_lines: false,
 	line_numbers: true,
+	inline: 'chars',
 	lcs: true,
 	sidebar: true,
 	viewport: false,
@@ -22,8 +23,7 @@ const defaultOptions = {
 	vpcolor: 'rgba(0, 0, 200, 0.5)',
 	license: 'lgpl',
 	cmsettings: {
-		styleSelectedText: true,
-		mode: null
+		styleSelectedText: true
 	},
 	_debug: false
 };