feat(repl): Add font size adjustment to editor

Author: ssssota

packages/repl/src/lib/Editor/Editor.svelte

@@ -55,6 +55,7 @@
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="container"
+	style="--editor-font-size: {workspace.fontSize}px"
 	bind:this={container}
 	onpointerdown={() => {
 		workspace.enable_tab_indent();
@@ -121,4 +122,8 @@
 	.fake-content {
 		padding: 0 1rem;
 	}
+
+	.container :global(.cm-editor .cm-scroller) {
+		font-size: var(--editor-font-size, var(--sk-font-size-mono));
+	}
 </style>

packages/repl/src/lib/Input/ComponentSelector.svelte

@@ -186,6 +186,17 @@
 				/>
 			</label>
 
+			<label class="option">
+				<span>Font Size</span>
+				<input
+					type="number"
+					min="10"
+					max="128"
+					value={workspace.fontSize}
+					onchange={(ev) => (workspace.fontSize = ev.currentTarget.valueAsNumber)}
+				/>
+			</label>
+
 			{#if download}
 				<button onclick={download}>Download app</button>
 			{/if}

packages/repl/src/lib/Workspace.svelte.ts

@@ -117,6 +117,7 @@ export class Workspace {
 	#files = $state.raw<Item[]>([]);
 	#current = $state.raw() as File;
 	#vim = $state(false);
+	#fontSize = $state(14);
 	#aliases = $state.raw(undefined) as undefined | Record<string, string>;
 	#tailwind = $state(false);
 
@@ -292,6 +293,7 @@ export class Workspace {
 		untrack(() => {
 			view.setState(this.#get_state(untrack(() => this.#current)));
 			this.vim = localStorage.getItem('vim') === 'true';
+			this.fontSize = Number(localStorage.getItem('fontSize')) || 14;
 		});
 	}
 
@@ -552,6 +554,15 @@ export class Workspace {
 		}
 	}
 
+	get fontSize() {
+		return this.#fontSize;
+	}
+
+	set fontSize(value: number) {
+		this.#fontSize = value;
+		localStorage.setItem('fontSize', value.toString());
+	}
+
 	#create_directories(item: Item) {
 		// create intermediate directories as necessary
 		const parts = item.name.split('/');