[fix] focus management between editor and iframe (sveltejs#168)

Fixes sveltejs#167

Co-authored-by: Simon H <[email protected]>

Author: tomoam

content/tutorial/common/src/__client.js

@@ -89,3 +89,18 @@ if (import.meta.hot) {
 		);
 	});
 }
+
+/** 
+ * The iframe sometimes takes focus control in ways we can't prevent
+ * while the editor is focussed. Refocus the editor in these cases.
+ */
+window.addEventListener('focusin', (e) => {
+	if (e.target.tagName === 'BODY') {
+		parent.postMessage(
+			{
+				type: 'focus_on_editor'
+			},
+			'*'
+		);
+	}
+});

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

@@ -41,6 +41,8 @@
 	 * This boolean tracks whether or not the editor should be refocused.
 	 */
 	let preserve_focus = true;
+	/** @type {any} */
+	let remove_focus_timeout;
 
 	onMount(() => {
 		let destroyed = false;
@@ -241,34 +243,27 @@
 </script>
 
 <svelte:window
-	on:pointerdown={(e) => {
-		if (!container.contains(/** @type {HTMLElement} */ (e.target))) {
-			preserve_focus = false;
+	on:message={(e) => {
+		if (preserve_focus && e.data.type === 'focus_on_editor') {
+			instance?.editor.focus();
 		}
 	}}
 />
 
 <div bind:clientWidth={w} bind:clientHeight={h}>
 	<div
 		bind:this={container}
-		on:keydown={(e) => {
-			if (e.key === 'Tab') {
-				preserve_focus = false;
-
-				setTimeout(() => {
-					preserve_focus = true;
-				}, 0);
-			}
-		}}
 		on:focusin={() => {
+			clearTimeout(remove_focus_timeout);
 			preserve_focus = true;
 		}}
 		on:focusout={() => {
-			if (preserve_focus) {
-				setTimeout(() => {
-					instance?.editor.focus();
-				}, 0);
-			}
+			// Heuristic: user did refocus themmselves if focus_on_editor
+			// doesn't happen in the next few miliseconds. Needed
+			// because else navigations inside the iframe refocus the editor.
+			remove_focus_timeout = setTimeout(() => {
+				preserve_focus = false;
+			}, 500)
 		}}
 	/>
 </div>