fix solve button (#258)

* style tweak

* fix solve button - closes #256

---------

Co-authored-by: Rich Harris <[email protected]>

Author: Rich-Harris

src/routes/tutorial/[slug]/Editor.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { browser, dev } from '$app/environment';
-	import { onMount } from 'svelte';
+	import { onMount, tick } from 'svelte';
 	import { basicSetup } from 'codemirror';
 	import { EditorView, keymap } from '@codemirror/view';
 	import { EditorState } from '@codemirror/state';
@@ -12,7 +12,7 @@
 	import { tags } from '@lezer/highlight';
 	import { HighlightStyle } from '@codemirror/language';
 	import { syntaxHighlighting } from '@codemirror/language';
-	import { afterNavigate } from '$app/navigation';
+	import { afterNavigate, beforeNavigate } from '$app/navigation';
 	import { files, selected_file, selected_name, update_file } from './state.js';
 	import './codemirror.css';
 
@@ -30,6 +30,7 @@
 	let container;
 
 	let preserve_editor_focus = false;
+	let skip_reset = true;
 
 	/** @type {any} */
 	let remove_focus_timeout;
@@ -40,44 +41,79 @@
 	/** @type {import('@codemirror/view').EditorView} */
 	let editor_view;
 
-	$: if (editor_view && $selected_name) {
-		select_state($selected_name);
+	const extensions = [
+		basicSetup,
+		EditorState.tabSize.of(2),
+		keymap.of([indentWithTab]),
+		indentUnit.of('\t'),
+		theme
+	];
+
+	$: if (editor_view) select_state($selected_name);
+
+	$: reset($files);
+
+	/** @param {import('$lib/types').Stub[]} $files */
+	function reset($files) {
+		if (skip_reset) return;
+
+		for (const file of $files) {
+			if (file.type !== 'file') continue;
+
+			let state = editor_states.get(file.name);
+
+			if (state) {
+				const existing = state.doc.toString();
+
+				if (file.contents !== existing) {
+					const transaction = state.update({
+						changes: {
+							from: 0,
+							to: existing.length,
+							insert: file.contents
+						}
+					});
+
+					editor_states.set(file.name, transaction.state);
+					state = transaction.state;
+
+					if ($selected_name === file.name) {
+						editor_view.setState(state);
+					}
+				}
+			} else {
+				let lang;
+
+				if (file.name.endsWith('.js') || file.name.endsWith('.json')) {
+					lang = javascript();
+				} else if (file.name.endsWith('.html')) {
+					lang = html();
+				} else if (file.name.endsWith('.svelte')) {
+					lang = svelte();
+				}
+
+				state = EditorState.create({
+					doc: file.contents,
+					extensions: lang ? [...extensions, lang] : extensions
+				});
+
+				editor_states.set(file.name, state);
+			}
+		}
 	}
 
-	/** @param {string} $selected_name */
+	/** @param {string | null} $selected_name */
 	function select_state($selected_name) {
-		const file = $files.find((file) => file.name === $selected_name);
-		if (file?.type !== 'file') return;
-
-		let state = editor_states.get(file.name);
-		if (!state) {
-			const extensions = [
-				basicSetup,
-				EditorState.tabSize.of(2),
-				keymap.of([indentWithTab]),
-				indentUnit.of('\t'),
-				theme
-			];
-
-			if (file.name.endsWith('.js') || file.name.endsWith('.json')) {
-				extensions.push(javascript());
-			} else if (file.name.endsWith('.html')) {
-				extensions.push(html());
-			} else if (file.name.endsWith('.svelte')) {
-				extensions.push(svelte());
-			}
+		if (skip_reset) return;
 
-			state = EditorState.create({
-				doc: file.contents,
-				extensions
+		const state =
+			($selected_name && editor_states.get($selected_name)) ||
+			EditorState.create({
+				doc: '',
+				extensions: [EditorState.readOnly.of(true)]
 			});
 
-			editor_states.set(file.name, state);
-		}
-
-		if (editor_view) {
-			editor_view.setState(state);
-		}
+		editor_view.setState(state);
 	}
 
 	onMount(() => {
@@ -101,10 +137,12 @@
 
 		editor_view = new EditorView({
 			parent: container,
-			dispatch(transaction) {
+			async dispatch(transaction) {
 				editor_view.update([transaction]);
 
 				if (transaction.docChanged && $selected_file) {
+					skip_reset = true;
+
 					// TODO do we even need to update `$files`? maintaining separate editor states is probably sufficient
 					update_file({
 						...$selected_file,
@@ -113,6 +151,9 @@
 
 					// keep `editor_states` updated so that undo/redo history is preserved for files independently
 					editor_states.set($selected_file.name, editor_view.state);
+
+					await tick();
+					skip_reset = false;
 				}
 			}
 		});
@@ -126,8 +167,16 @@
 		};
 	});
 
+	beforeNavigate(() => {
+		skip_reset = true;
+	});
+
 	afterNavigate(() => {
+		skip_reset = false;
+
 		editor_states.clear();
+		reset($files);
+
 		select_state($selected_name);
 	});
 </script>
@@ -214,4 +263,10 @@
 	.fake-content {
 		padding: 0 1rem;
 	}
+
+	@media (prefers-color-scheme: dark) {
+		.fake * {
+			color: #666;
+		}
+	}
 </style>

src/routes/tutorial/[slug]/state.js

@@ -34,6 +34,12 @@ export function update_file(file) {
 
 /** @param {import('$lib/types').Stub[]} new_files */
 export function reset_files(new_files) {
+	// if the selected file no longer exists, clear it
+	selected_name.update(($selected_name) => {
+		const file = new_files.find((file) => file.name === $selected_name);
+		return file?.name ?? null;
+	});
+
 	files.set(new_files);
 	adapter.reset(new_files);
 }