handle resizing - closes #15

Author: Rich-Harris

src/lib/client/viewer/Editor.svelte

@@ -19,6 +19,12 @@
 		};
 	});
 
+	export function resize() {
+		if (editor) {
+			editor.layout();
+		}
+	}
+
 	$: if (editor) {
 		editor.setModel(model);
 	}

src/lib/client/viewer/Viewer.svelte

@@ -5,20 +5,25 @@
 	import Folder from './FileTree/Folder.svelte';
 
 	const { files, current, active, started, base, update } = getContext('filetree');
+
+	/** @type {import('svelte').SvelteComponent} */
+	let editor;
+
+	const resize = () => editor.resize();
 </script>
 
 <div class="viewer">
-	<SplitPane type="vertical" min="100px" max="-100px" pos="50%">
+	<SplitPane type="vertical" min="100px" max="-100px" pos="50%" on:change={resize}>
 		<section slot="a">
-			<SplitPane type="horizontal" min="20px" max="-20px" pos="200px">
+			<SplitPane type="horizontal" min="20px" max="-20px" pos="200px" on:change={resize}>
 				<section slot="a">
 					<div class="filetree">
 						<Folder {...$current.chapter.scope} files={$files} expanded />
 					</div>
 				</section>
 
 				<section slot="b">
-					<Editor model={$active} />
+					<Editor bind:this={editor} model={$active} />
 				</section>
 			</SplitPane>
 		</section>

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

@@ -17,7 +17,6 @@
 	import Viewer from '$lib/client/viewer/Viewer.svelte';
 	import TableOfContents from './_/TableOfContents.svelte';
 	import { monaco } from '$lib/client/monaco/monaco.js';
-	import { browser } from '$app/env';
 
 	/** @type {import('$lib/types').SectionIndex} */
 	export let index;