global state: textdata, font och storlek

src/components/textarea.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { shortforms } from '$lib/stores.svelte';
+	import { appState, shortforms, textSettings } from '$lib/stores.svelte';
 	import { onMount } from 'svelte';
 	import { browser } from '$app/environment';
 
@@ -7,13 +7,15 @@
 	import { cacheShortforms, expandShortform } from '../modules/shortforms';
 	import { defaultExpanders } from '../modules/keyboard';
 	import { db, type Shortform } from '../db/main';
-  import { liveQuery } from "dexie";
+	  import { liveQuery } from "dexie";
 
 	import * as Select from "$lib/components/ui/select/index.js";
-
-	let styles = {
+	
+	$: styles = {
 		"text-bg": "#333333",
 		"text-fg": "#baff00",
+		"text-font": textSettings.font,
+		"text-size": textSettings.size + "px",
 	}
 
 	$: cssVarStyles = Object.entries(styles)
@@ -34,7 +36,6 @@
 	};
 
 	let textarea: HTMLTextAreaElement;
-	let text = '';
 
 	onMount(() => {
 		shortforms.cache = cacheShortforms([890324]);
@@ -97,8 +98,17 @@
 	*/
 </script>
 
-<div class="docContainer h-full flex flex-col" role="application" id="docContainer">
-	<textarea style={cssVarStyles} class="textarea flex-grow" id="doc" on:keyup={change} on:beforeinput={input} bind:value={text}></textarea>
+<div class="docContainer h-95 flex flex-col" role="application" id="docContainer">
+	<textarea style="
+		font-size:{textSettings.size}px;
+		font-family:{textSettings.font};
+		"
+		class="textarea flex-grow" 
+		id="doc" 
+		on:keyup={change} 
+		on:beforeinput={input} 
+		bind:value={appState.text}
+	></textarea>
 	<Select.Root
 		selected={selectedStandardList}
 		onSelectedChange={selectedStandardListChanged}
@@ -121,14 +131,17 @@
 	.docContainer {
 		width: 100%;
 	}
+
 	.docContainer textarea {
 		width: 100%;
 		padding: 0.3em;
 		resize: none;
-		font-size: 2em;
 	}
+	
 	.textarea {
 		color: var(--text-fg, black);
 		background-color: var(--text-bg, white);
+		font-family: var(--text-font, "Arial");
+		font-size: var(--text-size, "20px");
 	}
 </style>

src/lib/stores.svelte.ts

@@ -1,2 +1,27 @@
 export const shortforms = $state({ standardList: "", subjectLists: [], cache: new Map() })
 export const importState = $state({ data: "", errors: [] })
+export const textSettings = $state({ font: "Arial", size: 30, padding: 0, lineheight: 1 })
+export const appState = $state({ text: "" })
+
+export const incTextSize = () => {
+	console.log(textSettings.size)
+	if (textSettings.size < 200) {
+		textSettings.size += 5
+		return
+	} 
+	if (textSettings.size > 200) {
+		textSettings.size = 200
+		return
+	} 
+}
+
+export const decTextSize = () => {
+	if (textSettings.size > 15) {
+		textSettings.size -= 5
+		return
+	} 
+	if (textSettings.size <= 15) {
+		textSettings.size = 15
+		return
+	} 
+}

src/modules/keyboard.ts

@@ -1,6 +1,7 @@
 import { goto } from '$app/navigation';
 import type { ExpanderType } from "./index.d.ts";
 import { getCurrentWindow } from "@tauri-apps/api/window";
+import { incTextSize, decTextSize, appState } from "$lib/stores.svelte"
 
 let fullscreen = true;
 export const defaultExpanders: Map<string, ExpanderType> = new Map();
@@ -85,6 +86,29 @@ hotkeys.set("F1", {
 	}
 })
 
+hotkeys.set("F4", {
+	action: (e) => {
+		e.preventDefault()
+		console.log("Clear text", appState.text)
+		appState.text = ""
+	}
+})
+hotkeys.set("F6", {
+	action: (e) => {
+		e.preventDefault()
+		console.log("Decrease text size")
+		decTextSize()
+	}
+})
+
+hotkeys.set("F7", {
+	action: (e) => {
+		e.preventDefault()
+		console.log("Increase text size")
+		incTextSize()
+	}
+})
+
 hotkeys.set("F11", {
 	action: (e) => {
 		e.preventDefault()