chore(release): 5.4.5 [skip ci]

## [5.4.5](https://github.com/wickedest/Mergely/compare/v5.4.4...v5.4.5) (2026-02-23)

### Bug Fixes

* **#222:** Fixed issue with poor rendering performance and marker misalignment ([27778f0](27778f0840)), closes [#222](https://github.com/wickedest/Mergely/issues/222) [#227](https://github.com/wickedest/Mergely/issues/227)

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [5.4.5](https://github.com/wickedest/Mergely/compare/v5.4.4...v5.4.5) (2026-02-23)
+
+
+### Bug Fixes
+
+* **#222:** Fixed issue with poor rendering performance and marker misalignment ([27778f0](https://github.com/wickedest/Mergely/commit/27778f0840895bf5e029d8c962e99890b8a0a8f6)), closes [#222](https://github.com/wickedest/Mergely/issues/222) [#227](https://github.com/wickedest/Mergely/issues/227)
+
 ## [5.4.4](https://github.com/wickedest/Mergely/compare/v5.4.3...v5.4.4) (2026-02-23)
 
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "mergely",
-  "version": "5.4.4",
+  "version": "5.4.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mergely",
-      "version": "5.4.4",
+      "version": "5.4.5",
       "license": "(GPL-3.0 OR LGPL-3.0 OR MPL-1.1 OR SEE LICENSE IN LICENSE)",
       "devDependencies": {
         "@babel/core": "^7.1.6",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mergely",
-  "version": "5.4.4",
+  "version": "5.4.5",
   "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": {

src/diff-view.js

@@ -740,6 +740,10 @@ CodeMirrorDiffView.prototype._isChangeInView = function(side, vp, change) {
 		return true;
 	}
 
+	// there are 3 conditions to test
+	// 1: the change "from" is within the viewport from/to
+	// 2: the change "to" is within the viewport from/to
+	// 3: the change is so big that the viewport is within
 	return (change[`${side}-line-from`] >= vp.from && change[`${side}-line-from`] <= vp.to) ||
 		(change[`${side}-line-to`] >= vp.from && change[`${side}-line-to`] <= vp.to) ||
 		(vp.from >= change[`${side}-line-from`] && vp.to <= change[`${side}-line-to`]);
@@ -1090,8 +1094,8 @@ CodeMirrorDiffView.prototype._renderDiff = function(changes) {
 		ctx_lhs.strokeRect(1.5, mkr_lhs_y_start, 4.5, Math.max(mkr_lhs_y_end - mkr_lhs_y_start, 5));
 		ctx_lhs.stroke();
 
-		const mkr_rhs_y_start = change['rhs-y-start'] * lratio;
-		const mkr_rhs_y_end = Math.max(change['rhs-y-end'] * lratio, 5);
+		const mkr_rhs_y_start = change['rhs-y-start'] * rratio;
+		const mkr_rhs_y_end = Math.max(change['rhs-y-end'] * rratio, 5);
 		ctx_rhs.beginPath();
 		ctx_rhs.fillStyle = '#a3a3a3';
 		ctx_rhs.strokeStyle = '#000';

src/vdoc.js

@@ -205,9 +205,13 @@ class VDoc {
 		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];
+		const keys = Object.keys(this._lines[side]);
+		// while Mergely diffs unicode diacritic chars (letters+mark),
+		// CM is by character, so diffs need to be mapped.
+		const mappedChars = mapLettersToChars(editor.getValue());
+
+		for (const key of keys) {
+			const { id } = this._lines[side][key];
 			if (id < viewport.from || id > viewport.to) {
 				continue;
 			}
@@ -216,7 +220,7 @@ class VDoc {
 			if (vline.rendered) {
 				continue;
 			}
-			vline.update(editor);
+			vline.update(editor, mappedChars);
 		}
 	}
 
@@ -257,7 +261,7 @@ class VLine {
 		this.markup.push([ charFrom, charTo, className ]);
 	}
 
-	update(editor) {
+	update(editor, mappedChars) {
 		if (this.rendered) {
 			// FIXME: probably do not need this now
 			console.log('already rendered', this.id);
@@ -279,18 +283,17 @@ 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());
+				// while Mergely diffs unicode diacritic chars (letters+mark),
+				// CM is by character, so diffs need to be mapped.
 				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 = mapped[charFrom];
+						fromPos.ch = mappedChars[charFrom];
 					}
 					if (charTo >= 0) {
-						toPos.ch = mapped[charTo];
+						toPos.ch = mappedChars[charTo];
 					}
 					this._clearMarkup.push(
 						editor.markText(fromPos, toPos, { className }));