diff --git a/site/src/components/Repl/CodeMirror.svelte b/site/src/components/Repl/CodeMirror.svelte index 39e761c1ed..e9519e516e 100644 --- a/site/src/components/Repl/CodeMirror.svelte +++ b/site/src/components/Repl/CodeMirror.svelte @@ -58,6 +58,10 @@ editor.refresh(); } + export function focus() { + editor.focus(); + } + const modes = { js: { name: 'javascript', diff --git a/site/src/components/Repl/Input/ComponentSelector.svelte b/site/src/components/Repl/Input/ComponentSelector.svelte index d635d68a08..60f39a46ad 100644 --- a/site/src/components/Repl/Input/ComponentSelector.svelte +++ b/site/src/components/Repl/Input/ComponentSelector.svelte @@ -5,7 +5,7 @@ export let handle_select; - const { components, selected } = getContext('REPL'); + const { components, selected, request_focus } = getContext('REPL'); let editing = null; @@ -32,6 +32,9 @@ handle_select($selected); components = components; // TODO necessary? + + // focus the editor, but wait a beat (so key events aren't misdirected) + setTimeout(request_focus); } function remove(component) { @@ -99,10 +102,14 @@ font: 400 1.2rem/1.5 var(--font); border-bottom: var(--border-w) solid transparent; padding: 1.2rem 1.4rem 0.8rem 0.8rem; - margin: 0 0.5rem 0 0; + margin: 0; color: #999; } + .file-tabs .button:first-child { + padding-left: 1.2rem; + } + .file-tabs .button.active { /* color: var(--second); */ color: #333; diff --git a/site/src/components/Repl/Input/ModuleEditor.svelte b/site/src/components/Repl/Input/ModuleEditor.svelte index 272066e84f..bf1716e373 100644 --- a/site/src/components/Repl/Input/ModuleEditor.svelte +++ b/site/src/components/Repl/Input/ModuleEditor.svelte @@ -11,6 +11,10 @@ onMount(() => { register_module_editor(editor); }); + + export function focus() { + editor.focus(); + }