Display emptys lines correctly

src/differences_view.ts

@@ -1,7 +1,7 @@
 import { ItemView, TFile, WorkspaceLeaf } from "obsidian";
 import { Difference } from "./data/difference";
 import { FileDifferences } from "./data/file_differences";
-import { replaceLine } from "./line_replacer/replace_line";
+import { preventEmptyString, replaceLine } from "./utils/string_utils";
 
 export const VIEW_TYPE_PATCH = "patch-view";
 
@@ -36,7 +36,7 @@ export class DifferencesView extends ItemView {
 		);
 
 		for (let i = 0; i <= lineCount; i++) {
-			const line = i in lines ? lines[i] : null;
+			let line = i in lines ? lines[i] : null;
 			const difference = this.fileDifferences.differences.find(
 				(d) => d.start === i
 			);
@@ -48,7 +48,11 @@ export class DifferencesView extends ItemView {
 				line != null &&
 				(difference == null || !difference.hasChangesFromFile1())
 			) {
-				container.createDiv({ text: line, cls: "line" });
+				container.createDiv({
+					// Necessary to give the line a height when it's empty.
+					text: preventEmptyString(line),
+					cls: "line",
+				});
 			}
 		}
 	}
@@ -62,12 +66,14 @@ export class DifferencesView extends ItemView {
 		difference.lines.forEach((line) => {
 			if (line.startsWith("+")) {
 				container.createDiv({
-					text: line.slice(1, line.length),
+					// Necessary to give the line a height when it's empty.
+					text: preventEmptyString(line.slice(1, line.length)),
 					cls: "line bg-turquoise-light",
 				});
 			} else if (line.startsWith("-")) {
 				container.createDiv({
-					text: line.slice(1, line.length),
+					// Necessary to give the line a height when it's empty.
+					text: preventEmptyString(line.slice(1, line.length)),
 					cls: "line bg-blue-light",
 				});
 			}

src/line_replacer/replace_line.ts

@@ -1,10 +0,0 @@
-// Method to replace line in a string
-export function replaceLine(
-	content: string,
-	lineNumber: number,
-	contentToInsert: string
-) {
-	const lines = content.split("\n");
-	lines[lineNumber] = contentToInsert;
-	return lines.join("\n");
-}

src/utils/string_utils.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { replaceLine } from "./replace_line";
+import { replaceLine } from "./string_utils";
 
 describe("replaceLine", () => {
 	it("should replace the line at the given line number with the new content", () => {
@@ -8,7 +8,7 @@ describe("replaceLine", () => {
 		expect(newContent).toBe("line1\nnewLine2\nline3");
 	});
 
-    it("should replace the line at the given line number with multiple lines", () => {
+	it("should replace the line at the given line number with multiple lines", () => {
 		const content = "line1\nline2\nline3";
 		const newContent = replaceLine(content, 1, "newLine2\nnewLine3");
 		expect(newContent).toBe("line1\nnewLine2\nnewLine3\nline3");

src/utils/string_utils.ts

@@ -0,0 +1,15 @@
+/** Method to replace line in a string */
+export function replaceLine(
+	text: string,
+	lineNumber: number,
+	contentToInsert: string
+): string {
+	const lines = text.split("\n");
+	lines[lineNumber] = contentToInsert;
+	return lines.join("\n");
+}
+
+/** Returns an invisible character when the text is empty. */
+export function preventEmptyString(text: string): string {
+	return text != "" ? text : "‎";
+}