[fix] reset focus after iframe reload

dummdidumm · dummdidumm · commit 53748b754be9 · 2022-12-16T12:42:38.000+01:00
Fixes #150
diff --git a/src/routes/tutorial/[slug]/+page.svelte b/src/routes/tutorial/[slug]/+page.svelte
@@ -51,6 +51,8 @@
 
 	let width = browser ? window.innerWidth : 1000;
 	let selected_view = 0;
+	/** @type {import('monaco-editor').editor.IStandaloneCodeEditor | undefined} */
+	let editor_instance;
 
 	$: mobile = writable(false);
 	$: $mobile = width < 768;
@@ -293,13 +295,30 @@
 
 	/** @param {string} src */
 	function set_iframe_src(src) {
-		// removing the iframe from the document allows us to
+		// Removing the iframe from the document allows us to
 		// change the src without adding a history entry, which
-		// would make back/forward traversal very annoying
+		// would make back/forward traversal very annoying.
 		const parentNode = /** @type {HTMLElement} */ (iframe.parentNode);
 		parentNode?.removeChild(iframe);
 		iframe.src = src;
 		parentNode?.appendChild(iframe);
+		// We need to reset focus because it's lost on reload when the
+		// inner app has `export const ssr = false`, which results in
+		// a initial navigation with a focus reset at the end.
+		const editor_has_focus = editor_instance?.hasTextFocus();
+		const active_element = document.activeElement;
+		const on_blur = () => {
+			// Timeout so that following focus event happens first
+			setTimeout(() => {
+				if (editor_has_focus) {
+					editor_instance?.focus();
+				} else {
+					active_element?.focus();
+				}
+			});
+		};
+		document.addEventListener('focusout', on_blur, { once: true });
+		setTimeout(() => document.removeEventListener('focusout', on_blur), 2000);
 	}
 </script>
 
@@ -391,6 +410,7 @@
 								stubs={$files}
 								selected={$selected}
 								read_only={$mobile}
+								bind:editor_instance
 								on:change={update_stub}
 							/>
 							<ImageViewer selected={$selected} />
diff --git a/src/routes/tutorial/[slug]/Editor.svelte b/src/routes/tutorial/[slug]/Editor.svelte
@@ -24,18 +24,20 @@
 	/** @type {import('$lib/types').Stub | null} */
 	export let selected = null;
 	export let read_only = false;
+	/** @type {import('monaco-editor').editor.IStandaloneCodeEditor | undefined} */
+	export let editor_instance;
 
 	const dispatch = createEventDispatcher();
 
 	/** @type {HTMLDivElement} */
 	let container;
 
-	/** @type {ReturnType<typeof init> | undefined}*/
-	let instance;
-
 	let w = 0;
 	let h = 0;
 
+	/** @type {ReturnType<typeof init> | undefined}*/
+	let instance;
+
 	onMount(() => {
 		let destroyed = false;
 
@@ -50,6 +52,7 @@
 		import('$lib/client/monaco/monaco.js').then(({ monaco }) => {
 			if (destroyed) return;
 			instance = init(monaco, dark_mode);
+			editor_instance = instance.editor;
 		});
 
 		/** @param {MediaQueryListEvent} event */
