Tutorial/REPL tweaks (#2196)

* make dropdown more obviously interactive

* make component removal work in firefox

* dont recompile on component selection

* oops

* focus editor on selector blur, finesse styles

* fix input alignment on firefox

site/src/components/Repl/CodeMirror.svelte

@@ -39,7 +39,9 @@
 		}
 
 		code = new_code;
+		updating_externally = true;
 		if (editor) editor.setValue(code);
+		updating_externally = false;
 	}
 
 	export function update(new_code) {
@@ -56,6 +58,10 @@
 		editor.refresh();
 	}
 
+	export function focus() {
+		editor.focus();
+	}
+
 	const modes = {
 		js: {
 			name: 'javascript',
@@ -73,7 +79,7 @@
 
 	const refs = {};
 	let editor;
-	let updating = false;
+	let updating_externally = false;
 	let marker;
 	let error_line;
 	let destroyed = false;
@@ -131,10 +137,6 @@
 		}
 	});
 
-	beforeUpdate(() => {
-		updating = false;
-	});
-
 	function createEditor(mode) {
 		if (destroyed || !CodeMirror) return;
 
@@ -163,10 +165,9 @@
 		editor = CodeMirror.fromTextArea(refs.editor, opts);
 
 		editor.on('change', instance => {
-			if (!updating) {
+			if (!updating_externally) {
-				updating = true;
+				const value = instance.getValue();
-				// code = instance.getValue();
+				dispatch('change', { value });
-				dispatch('change', { value: instance.getValue() });
 			}
 		});
 

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;
 
@@ -28,7 +28,13 @@
 		if (match && match[2]) $selected.type = match[2];
 		editing = null;
 
+		// re-select, in case the type changed
+		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) {
@@ -43,7 +49,7 @@
 				console.error(`Could not find component! That's... odd`);
 			}
 
-			selected.set($components[index] || $components[$components.length - 1]);
+			handle_select($components[index] || $components[$components.length - 1]);
 		}
 	}
 
@@ -70,7 +76,7 @@
 		});
 
 		components.update(components => components.concat(component));
-		selected.set(component);
+		handle_select(component);
 	}
 </script>
 
@@ -83,7 +89,6 @@
 
 	.file-tabs {
 		border: none;
-		padding: 0 0 0 5rem;
 		margin: 0;
 		white-space: nowrap;
 		overflow-x: auto;
@@ -91,16 +96,21 @@
 		height: 10em;
 	}
 
-	.file-tabs button {
+	.file-tabs .button, .file-tabs button {
 		position: relative;
+		display: inline-block;
 		font: 400 1.2rem/1.5 var(--font);
 		border-bottom: var(--border-w) solid transparent;
-		padding: 1.2rem 1.2rem 0.8rem 0.5rem;
+		padding: 1.2rem 1.4rem 0.8rem 0.8rem;
-		margin: 0 0.5rem 0 0;
+		margin: 0;
 		color: #999;
 	}
 
-	.file-tabs button.active {
+	.file-tabs .button:first-child {
+		padding-left: 1.2rem;
+	}
+
+	.file-tabs .button.active {
 		/* color: var(--second); */
 		color: #333;
 		border-bottom: var(--border-w) solid var(--prime);
@@ -119,26 +129,15 @@
 	input {
 		position: absolute;
 		width: 100%;
-		left: 0.5rem;
+		left: 0.8rem;
 		top: 1.2rem;
-		/* padding: 0 0.4rem; */
-		/* font-size: 1rem; */
 		font: 400 1.2rem/1.5 var(--font);
 		border: none;
 		color: var(--flash);
 		outline: none;
-		line-height: 1;
 		background-color: transparent;
 	}
 
-	.editable {
-		/* margin-right: 2.4rem; */
-	}
-
-	.uneditable {
-		/* padding-left: 1.2rem; */
-	}
-
 	.remove {
 		position: absolute;
 		display: none;
@@ -155,36 +154,38 @@
 		color: var(--flash);
 	}
 
-	.file-tabs button.active .editable {
+	.file-tabs .button.active .editable {
 		cursor: text;
 	}
 
-	.file-tabs button.active .remove {
+	.file-tabs .button.active .remove {
-		display: inline-block;
+		display: block;
 	}
 
 	.add-new {
 		position: absolute;
 		left: 0;
 		top: 0;
-		width: 5rem;
+		padding: 1.2rem 1rem 0.8rem 0 !important;
-		height: 100%;
+		height: 4.2rem;
 		text-align: center;
 		background-color: white;
 	}
 
 	.add-new:hover {
-		color: var(--flash);
+		color: var(--flash) !important;
 	}
 </style>
 
 <div class="component-selector">
+	{#if $components.length}
 		<div class="file-tabs" on:dblclick="{addNew}">
 			{#each $components as component}
-			<button
+				<div
 					id={component.name}
+					class="button"
+					role="button"
 					class:active="{component === $selected}"
-				data-name={component.name}
 					on:click="{() => selectComponent(component)}"
 					on:dblclick="{e => e.stopPropagation()}"
 				>
@@ -198,9 +199,10 @@
 
 							<input
 								autofocus
+								spellcheck={false}
 								bind:value={editing.name}
 								on:focus={selectInput}
-							on:blur="{() => closeEdit()}"
+								on:blur={closeEdit}
 								use:enter="{e => e.target.blur()}"
 							>
 						{:else}
@@ -218,11 +220,12 @@
 							</span>
 						{/if}
 					{/if}
-			</button>
-		{/each}
 				</div>
+			{/each}
 
 			<button class="add-new" on:click={addNew} title="add new component">
 				<Icon name="plus" />
 			</button>
 		</div>
+	{/if}
+</div>

site/src/components/Repl/Input/ModuleEditor.svelte

@@ -11,6 +11,10 @@
 	onMount(() => {
 		register_module_editor(editor);
 	});
+
+	export function focus() {
+		editor.focus();
+	}
 </script>
 
 <style>

site/src/components/Repl/Output/index.svelte

@@ -100,7 +100,7 @@
 		position: relative;
 		font: 400 1.2rem/1.5 var(--font);
 		border-bottom: var(--border-w) solid transparent;
-		padding: 1.2rem 0.8rem 0.8rem 0.8rem;
+		padding: 1.2rem 1.2rem 0.8rem 1.2rem;
 		color: #999;
 	}
 

site/src/components/Repl/index.svelte

@@ -113,6 +113,10 @@
 
 		register_output(handlers) {
 			output = handlers;
+		},
+
+		request_focus() {
+			module_editor.focus();
 		}
 	});
 

site/src/routes/tutorial/[slug]/_components/TableOfContents.svelte

@@ -24,7 +24,6 @@
 		font-weight: 300;
 		font-size: var(--h6);
 		color: white;
-		cursor: pointer;
 	}
 
 	a {
@@ -54,6 +53,7 @@
 		width: 100%;
 		height: 100%;
 		opacity: 0.0001;
+		cursor: pointer;
 	}
 </style>