show code in REPL before it loads, tab switch between prop editors

site/src/routes/repl/_components/CodeMirror.html

@@ -24,6 +24,7 @@
 	export let warningCount = 0;
 	export let flex = false;
 	export let lineNumbers = true;
+	export let tab = true;
 
 	let w;
 	let h;
@@ -129,7 +130,11 @@
 			mode: modes[mode] || {
 				name: mode
 			},
-			readOnly: readonly
+			readOnly: readonly,
+			extraKeys: {
+				Tab: tab,
+				'Shift-Tab': tab
+			}
 		});
 
 		editor.on('change', instance => {
@@ -150,6 +155,7 @@
 		width: 100%;
 		height: 100%;
 		border: none;
+		line-height: 1.5;
 	}
 
 	.codemirror-container :global(.CodeMirror) {
@@ -197,7 +203,39 @@
 		margin: 2.4rem 0 0 0;
 	}
 
-	textarea { width: 100%; border: none }
+	.loading {
+		background-color: #666;
+	}
+
+	textarea {
+		visibility: hidden;
+	}
+
+	pre {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+		border: none;
+		padding: 4px 4px 4px 57px;
+		resize: none;
+		font-family: var(--font-mono);
+		font-size: 1.3rem;
+		line-height: 1.7;
+		user-select: none;
+		pointer-events: none;
+		color: #ccc;
+	}
+
+	.flex pre {
+		padding: 0 0 0 4px;
+		height: auto;
+	}
+
+	.flex .loading {
+		display: none;
+	}
 </style>
 
 <!--
@@ -208,7 +246,12 @@
 -----------------------------------------------
 -->
 <div class='codemirror-container' class:flex bind:offsetWidth={w} bind:offsetHeight={h}>
-	<textarea tabindex='2' bind:this={refs.editor}></textarea>
+	<textarea
+		tabindex='2'
+		bind:this={refs.editor}
+		readonly
+		value={code}
+	></textarea>
 
 	{#if error}
 		<p class='error message'>
@@ -232,13 +275,11 @@
 			Compiled, but with {warningCount} {warningCount === 1 ? 'warning' : 'warnings'} — check the console for details
 		</p>
 	{/if}
-</div>
 
-{#if !CodeMirror}
-	<p class='loading'>loading editor...</p>
-{/if}
+	{#if !CodeMirror}
+		<pre style="position: absolute; left: 0; top: 0"
+		>{code}</pre>
 
-<!-- TODO -->
-<!-- {:catch err}
-<p class='error'>error loading CodeMirror</p>
-{/await} -->
+		<p class='loading message'>loading editor...</p>
+	{/if}
+</div>

site/src/routes/repl/_components/Output/CompilerOptions.html

@@ -92,7 +92,7 @@
 	}
 
 	input[type=radio]:checked + label:before {
-		background-color: var(--second);
+		background-color: var(--prime);
 		box-shadow: inset 0 0 0 .15em rgba(255, 255, 255, .95);
 		border: 1px solid var(--second);
 		transition: box-shadow 0.2s ease-out;

site/src/routes/repl/_components/Output/PropEditor.html

@@ -65,6 +65,7 @@
 		code={stringify(value)}
 		lineNumbers={false}
 		on:change={handleChange}
+		tab={false}
 		flex
 	/>
 </div>

site/src/routes/repl/_components/Repl.html

@@ -220,7 +220,7 @@
 		margin: 0;
 		padding: 1.2rem 1.6rem 1.2rem 4.4rem;
 		vertical-align: middle;
-		font: 300 1.2rem/1.7 var(--font-ui);
+		font: 300 1.2rem/1.7 var(--font);
 		color: white;
 	}
 

site/static/global.css

@@ -4,7 +4,6 @@
 @font-face {
 	font-family: 'Overpass';
 	font-style: normal;
-	font-display: swap;
 	font-weight: 100;
 	src:
 		local('Overpass Thin '),
@@ -16,7 +15,6 @@
 @font-face {
 	font-family: 'Overpass';
 	font-style: italic;
-	font-display: swap;
 	font-weight: 100;
 	src:
 		local('Overpass Thin italic'),
@@ -28,7 +26,6 @@
 @font-face {
 	font-family: 'Overpass';
 	font-style: normal;
-	font-display: swap;
 	font-weight: 300;
 	src:
 		local('Overpass Light '),
@@ -40,7 +37,6 @@
 @font-face {
 	font-family: 'Overpass';
 	font-style: italic;
-	font-display: swap;
 	font-weight: 300;
 	src:
 		local('Overpass Light italic'),
@@ -52,7 +48,6 @@
 @font-face {
 	font-family: 'Overpass';
 	font-style: normal;
-	font-display: swap;
 	font-weight: 700;
 	src:
 		local('Overpass Bold '),
@@ -64,7 +59,6 @@
 @font-face {
 	font-family: 'Overpass';
 	font-style: italic;
-	font-display: swap;
 	font-weight: 700;
 	src:
 		local('Overpass Bold italic'),
@@ -76,7 +70,6 @@
 @font-face {
 	font-family: 'Overpass Mono';
 	font-style: normal;
-	font-display: swap;
 	font-weight: 400;
 	src:
 		local('Overpass Mono Regular '),