From 9daeb9d19c5414b633927d4d51e8f8e5ae336dfc Mon Sep 17 00:00:00 2001
From: Rich Harris <hello@rich-harris.dev>
Date: Fri, 16 Dec 2022 10:58:50 -0500
Subject: [PATCH 1/3] regain focus when it gets lost by mistake - closes #150

---
 src/routes/tutorial/[slug]/Editor.svelte | 34 ++++++++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/routes/tutorial/[slug]/Editor.svelte b/src/routes/tutorial/[slug]/Editor.svelte
index 5833a7d15..c81a3197e 100644
--- a/src/routes/tutorial/[slug]/Editor.svelte
+++ b/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,8 @@
 	let w = 0;
 	let h = 0;
 
+	let preserve_focus = true;
+
 	onMount(() => {
 		let destroyed = false;
 
@@ -234,8 +235,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;
+				});
+			}
+		}}
+		on:focusin={() => {
+			preserve_focus = true;
+		}}
+		on:focusout={() => {
+			if (preserve_focus) {
+				setTimeout(() => {
+					instance?.editor.focus();
+				}, 0);
+			}
+		}}
+	/>
 </div>
 
 <style>

From 8fa2e075bdc0af977dddb6887293d862469c5549 Mon Sep 17 00:00:00 2001
From: Rich Harris <hello@rich-harris.dev>
Date: Fri, 16 Dec 2022 11:04:20 -0500
Subject: [PATCH 2/3] explicit timeout

---
 src/routes/tutorial/[slug]/Editor.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/tutorial/[slug]/Editor.svelte b/src/routes/tutorial/[slug]/Editor.svelte
index c81a3197e..e319565dc 100644
--- a/src/routes/tutorial/[slug]/Editor.svelte
+++ b/src/routes/tutorial/[slug]/Editor.svelte
@@ -252,7 +252,7 @@
 
 				setTimeout(() => {
 					preserve_focus = true;
-				});
+				}, 0);
 			}
 		}}
 		on:focusin={() => {

From ce3b5232fd9d8e60fa2e46d1591bbd8381a8780b Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 16 Dec 2022 17:59:25 +0100
Subject: [PATCH 3/3] Update src/routes/tutorial/[slug]/Editor.svelte

---
 src/routes/tutorial/[slug]/Editor.svelte | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/routes/tutorial/[slug]/Editor.svelte b/src/routes/tutorial/[slug]/Editor.svelte
index e319565dc..e9864b05b 100644
--- a/src/routes/tutorial/[slug]/Editor.svelte
+++ b/src/routes/tutorial/[slug]/Editor.svelte
@@ -35,6 +35,11 @@
 	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(() => {