From 24a31d2c7f90aee6b26a303cd81c600f58d4fcb8 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 23 Jan 2023 12:51:14 -0500 Subject: [PATCH 1/3] revert #168, fix #167 --- content/tutorial/common/src/__client.js | 24 ++++++-------- src/routes/tutorial/[slug]/+page.svelte | 3 ++ src/routes/tutorial/[slug]/Editor.svelte | 40 ++++++++++++------------ src/routes/tutorial/[slug]/state.js | 11 +++++++ 4 files changed, 43 insertions(+), 35 deletions(-) create mode 100644 src/routes/tutorial/[slug]/state.js diff --git a/content/tutorial/common/src/__client.js b/content/tutorial/common/src/__client.js index e9bca1cbb..51033a8cd 100644 --- a/content/tutorial/common/src/__client.js +++ b/content/tutorial/common/src/__client.js @@ -63,6 +63,15 @@ window.addEventListener('message', async (e) => { } }); +window.addEventListener('pointerdown', () => { + parent.postMessage( + { + type: 'pointerdown' + }, + '*' + ); +}); + function ping() { parent.postMessage( { @@ -89,18 +98,3 @@ 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' - }, - '*' - ); - } -}); diff --git a/src/routes/tutorial/[slug]/+page.svelte b/src/routes/tutorial/[slug]/+page.svelte index d056851cc..8e53e3bea 100644 --- a/src/routes/tutorial/[slug]/+page.svelte +++ b/src/routes/tutorial/[slug]/+page.svelte @@ -13,6 +13,7 @@ import Loading from './Loading.svelte'; import ScreenToggle from './ScreenToggle.svelte'; import Filetree from '$lib/components/filetree/Filetree.svelte'; + import { set_preserve_editor_focus } from './state'; /** @type {import('./$types').PageData} */ export let data; @@ -292,6 +293,8 @@ }, 1000); } else if (e.data.type === 'ping-pause') { clearTimeout(timeout); + } else if (e.data.type === 'pointerdown') { + set_preserve_editor_focus(false); } } diff --git a/src/routes/tutorial/[slug]/Editor.svelte b/src/routes/tutorial/[slug]/Editor.svelte index ceab418fd..0b0588ca8 100644 --- a/src/routes/tutorial/[slug]/Editor.svelte +++ b/src/routes/tutorial/[slug]/Editor.svelte @@ -1,6 +1,7 @@ { - if (preserve_focus && e.data.type === 'focus_on_editor') { - instance?.editor.focus(); + on:pointerdown={(e) => { + console.log(`pointerdown ${container.contains(e.target)}`); + if (!container.contains(/** @type {HTMLElement} */ (e.target))) { + set_preserve_editor_focus(false); } }} /> @@ -253,17 +246,24 @@
{ + if (e.key === 'Tab') { + set_preserve_editor_focus(false); + + setTimeout(() => { + set_preserve_editor_focus(true); + }, 100); + } + }} on:focusin={() => { - clearTimeout(remove_focus_timeout); - preserve_focus = true; + set_preserve_editor_focus(true); }} on:focusout={() => { - // 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) + if (preserve_editor_focus) { + setTimeout(() => { + instance?.editor.focus(); + }, 0); + } }} />
diff --git a/src/routes/tutorial/[slug]/state.js b/src/routes/tutorial/[slug]/state.js new file mode 100644 index 000000000..41174bf53 --- /dev/null +++ b/src/routes/tutorial/[slug]/state.js @@ -0,0 +1,11 @@ +/** + * The iframe sometimes takes focus control in ways we can't prevent + * while the editor is focused. Refocus the editor in these cases. + * This boolean tracks whether or not the editor should be refocused. + */ +export let preserve_editor_focus = false; + +/** @param {boolean} value */ +export function set_preserve_editor_focus(value) { + preserve_editor_focus = value; +} From cf17c6a365ecdadc8a97a0aeb6aacd1c1e08d6b2 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 24 Jan 2023 13:40:42 -0500 Subject: [PATCH 2/3] fix --- src/routes/tutorial/[slug]/+page.svelte | 2 +- src/routes/tutorial/[slug]/Output.svelte | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/routes/tutorial/[slug]/+page.svelte b/src/routes/tutorial/[slug]/+page.svelte index 769e70082..aeb9c6c18 100644 --- a/src/routes/tutorial/[slug]/+page.svelte +++ b/src/routes/tutorial/[slug]/+page.svelte @@ -11,7 +11,7 @@ import ImageViewer from './ImageViewer.svelte'; import ScreenToggle from './ScreenToggle.svelte'; import Sidebar from './Sidebar.svelte'; - import { state, selected, completed, set_preserve_editor_focus } from './state.js'; + import { state, selected, completed } from './state.js'; /** @type {import('./$types').PageData} */ export let data; diff --git a/src/routes/tutorial/[slug]/Output.svelte b/src/routes/tutorial/[slug]/Output.svelte index e566260a7..461b2371e 100644 --- a/src/routes/tutorial/[slug]/Output.svelte +++ b/src/routes/tutorial/[slug]/Output.svelte @@ -5,7 +5,7 @@ import Chrome from './Chrome.svelte'; import Loading from './Loading.svelte'; import { create_adapter } from './adapter'; - import { state } from './state'; + import { set_preserve_editor_focus, state } from './state.js'; /** @type {string} */ export let path; @@ -177,6 +177,8 @@ }, 1000); } else if (e.data.type === 'ping-pause') { clearTimeout(timeout); + } else if (e.data.type === 'pointerdown') { + set_preserve_editor_focus(false); } } From bf71e6e532db547ceefe34599f75c3ffbf44d804 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 24 Jan 2023 14:40:57 -0500 Subject: [PATCH 3/3] better organisation --- src/routes/tutorial/[slug]/Editor.svelte | 23 ++++++++++++----------- src/routes/tutorial/[slug]/Output.svelte | 4 +--- src/routes/tutorial/[slug]/state.js | 12 ------------ 3 files changed, 13 insertions(+), 26 deletions(-) diff --git a/src/routes/tutorial/[slug]/Editor.svelte b/src/routes/tutorial/[slug]/Editor.svelte index 1d766f8dc..97e08b504 100644 --- a/src/routes/tutorial/[slug]/Editor.svelte +++ b/src/routes/tutorial/[slug]/Editor.svelte @@ -1,13 +1,7 @@