From 7ac3c53d16520c51e7547721fcb038a85f3f28b0 Mon Sep 17 00:00:00 2001
From: Kiril Videlov <kiril@videlov.com>
Date: Tue, 28 Feb 2023 00:45:15 +0100
Subject: [PATCH] scroll code viewer to last changed line

---
 src/lib/components/CodeViewer.svelte          | 22 ++++++++++++++++++-
 .../[projectId]/timeline/+page.svelte         |  9 +++++++-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/CodeViewer.svelte b/src/lib/components/CodeViewer.svelte
index 3784f1800..6757d9a80 100644
--- a/src/lib/components/CodeViewer.svelte
+++ b/src/lib/components/CodeViewer.svelte
@@ -32,6 +32,23 @@
 	});
 
 	export let value: string;
+	export let scrollToChar = 0;
+
+	$: characterLineNumber = getLineNumber(value, scrollToChar);
+
+	function getLineNumber(value: string, characterIndex: number): number {
+		const lines = value.split('\n');
+
+		let totalCharacters = 0;
+		for (let i = 0; i < lines.length; i++) {
+			const lineLength = lines[i].length + 1;
+			if (characterIndex < totalCharacters + lineLength) {
+				return i + 1;
+			}
+			totalCharacters += lineLength;
+		}
+		return -1;
+	}
 
 	let element: HTMLDivElement;
 	let editorView: EditorView;
@@ -55,10 +72,13 @@
 	}
 
 	function create_editor_view(value: string): EditorView {
-		return new EditorView({
+		const view = new EditorView({
 			state: create_editor_state(value),
 			parent: element
 		});
+
+		view.scrollDOM.scrollTo(0, view.lineBlockAtHeight(0).height * (characterLineNumber - 5));
+		return view;
 	}
 
 	let state_extensions = [
diff --git a/src/routes/projects/[projectId]/timeline/+page.svelte b/src/routes/projects/[projectId]/timeline/+page.svelte
index 68a7e4489..977ecb028 100644
--- a/src/routes/projects/[projectId]/timeline/+page.svelte
+++ b/src/routes/projects/[projectId]/timeline/+page.svelte
@@ -521,7 +521,14 @@
 													<div class="col-span-2" />
 													<div class="col-span-8  bg-zinc-500/70 rounded select-text">
 														{#await doc then dd}
-															<CodeViewer value={dd} />
+															<CodeViewer
+																value={dd}
+																scrollToChar={Object.values(
+																	Object.values(selection.deltas[selection.selectedFilePath])
+																		.pop()
+																		?.['operations'].slice(-1)?.[0] || {}
+																)[0][0]}
+															/>
 														{/await}
 													</div>
 													<div class="" />