[fix] regain focus when it gets lost by mistake (#161)

closes #150

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

Author: Rich-Harris

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

@@ -1,6 +1,5 @@
 <script>
 	import { dev } from '$app/environment';
-	import { monaco } from '$lib/client/monaco/monaco.js';
 	import { createEventDispatcher, onMount } from 'svelte';
 
 	/**
@@ -36,6 +35,13 @@
 	let w = 0;
 	let h = 0;
 
+	/** 
+	 * The iframe sometimes takes focus control in ways we can't prevent
+	 * while the editor is focussed. Refocus the editor in these cases.
+	 * This boolean tracks whether or not the editor should be refocused.
+	 */
+	let preserve_focus = true;
+
 	onMount(() => {
 		let destroyed = false;
 
@@ -234,8 +240,37 @@
 	}
 </script>
 
+<svelte:window
+	on:pointerdown={(e) => {
+		if (!container.contains(/** @type {HTMLElement} */ (e.target))) {
+			preserve_focus = false;
+		}
+	}}
+/>
+
 <div bind:clientWidth={w} bind:clientHeight={h}>
-	<div bind:this={container} />
+	<div
+		bind:this={container}
+		on:keydown={(e) => {
+			if (e.key === 'Tab') {
+				preserve_focus = false;
+
+				setTimeout(() => {
+					preserve_focus = true;
+				}, 0);
+			}
+		}}
+		on:focusin={() => {
+			preserve_focus = true;
+		}}
+		on:focusout={() => {
+			if (preserve_focus) {
+				setTimeout(() => {
+					instance?.editor.focus();
+				}, 0);
+			}
+		}}
+	/>
 </div>
 
 <style>