fix resizing

Author: Rich-Harris

src/lib/client/viewer/Editor.svelte

@@ -11,6 +11,9 @@
 	/** @type {import('monaco-editor').editor.IStandaloneCodeEditor}*/
 	let editor;
 
+	let w = 0;
+	let h = 0;
+
 	onMount(() => {
 		editor = monaco.editor.create(container);
 
@@ -19,27 +22,24 @@
 		};
 	});
 
-	export function resize() {
-		if (editor) {
-			editor.layout();
-		}
-	}
-
 	$: if (editor) {
 		editor.setModel(model);
 	}
+
+	$: if ((editor && w) || h) {
+		editor.layout();
+	}
 </script>
 
-<div bind:this={container} />
+<div bind:clientWidth={w} bind:clientHeight={h}>
+	<div bind:this={container} />
+</div>
 
 <!-- <textarea value={file ? file.contents : 'loading...'} on:input /> -->
 <style>
 	div {
 		width: 100%;
 		height: 100%;
-		resize: none;
-		border: none;
-		box-sizing: border-box;
 		tab-size: 2;
 	}
 </style>

src/lib/client/viewer/Viewer.svelte

@@ -5,25 +5,20 @@
 	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%" on:change={resize}>
+	<SplitPane type="vertical" min="100px" max="-100px" pos="50%">
 		<section slot="a">
-			<SplitPane type="horizontal" min="20px" max="-20px" pos="200px" on:change={resize}>
+			<SplitPane type="horizontal" min="20px" max="-20px" pos="200px">
 				<section slot="a">
 					<div class="filetree">
 						<Folder {...$current.chapter.scope} files={$files} expanded />
 					</div>
 				</section>
 
 				<section slot="b">
-					<Editor bind:this={editor} model={$active} />
+					<Editor model={$active} />
 				</section>
 			</SplitPane>
 		</section>