Accomplish url sync with $effect, not afterNavigate

libris · Dec 11, 2024 · 1276696 · 1276696
1 parent 20e33b2
commit 1276696
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 13 deletions.
diff --git a/packages/supersearch/src/lib/components/CodeMirror.svelte b/packages/supersearch/src/lib/components/CodeMirror.svelte
@@ -7,8 +7,7 @@
 
 <script lang="ts">
 	import { DEV } from 'esm-env';
-	import { onMount, tick } from 'svelte';
-	import { afterNavigate } from '$app/navigation';
+	import { onMount } from 'svelte';
 	import { EditorView } from '@codemirror/view';
 	import { EditorState, StateEffect, type Extension, type SelectionRange } from '@codemirror/state';
 	import isViewUpdateFromUserInput from '$lib/utils/isViewUpdateFromUserInput.js';
@@ -95,16 +94,11 @@
 		});
 	});
 
-	afterNavigate(() => {
-		tick().then(() => {
-			editorView?.dispatch({
-				changes: {
-					from: 0,
-					to: editorView.state.doc.length,
-					insert: value
-				}
-			});
-		});
+	$effect(() => {
+		if (value !== editorView?.state.doc.toString()) {
+			// Reset editor when value changes from outside (= user navigating)
+			reset({ doc: value });
+		}
 	});
 
 	$effect(() => {

diff --git a/packages/supersearch/src/lib/components/SuperSearch.svelte b/packages/supersearch/src/lib/components/SuperSearch.svelte
@@ -77,7 +77,7 @@
 	}
 
 	function handleChangeCodeMirror(event: ChangeCodeMirrorEvent) {
-		if (!dialog?.open) {
+		if (!dialog?.open && value !== event.value) {
 			showExpandedSearch();
 		}
 		value = event.value;