From 9bb55afcccfaa17bca7fbb752eca9975d3ea97dd Mon Sep 17 00:00:00 2001
From: Milad <milaforge@noreply.codeberg.org>
Date: Mon, 15 Jun 2026 18:46:17 +0200
Subject: [PATCH] Add editor zoom shortcuts (#108)

Adds Ctrl/Cmd +/-/0 and Ctrl/Cmd scroll shortcuts that change only markdown editor font size.

Co-authored-by: FS <failuresmith@proton.me>
Reviewed-on: https://codeberg.org/ArkHost/HelixNotes/pulls/108
---
 src/routes/+page.svelte | 64 +++++++++++++++++++++++++++++++++++++++--
 1 file changed, 62 insertions(+), 2 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e3a930a..56c8331 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 	import { appConfig, vaultReady, theme } from '$lib/stores/app';
-	import { getAppConfig, openVault } from '$lib/api';
+	import { getAppConfig, openVault, setFontSize } from '$lib/api';
 	import { getCurrentWebview } from '@tauri-apps/api/webview';
 	import VaultPicker from '$lib/components/VaultPicker.svelte';
 	import AppLayout from '$lib/components/AppLayout.svelte';
@@ -9,6 +9,60 @@
 
 	let loading = $state(true);
 	let noteWindowPath = $state<string | null>(null);
+	let fontSizeSaveTimer: ReturnType<typeof setTimeout> | null = null;
+	let removeEditorZoomShortcuts: (() => void) | null = null;
+
+	const defaultEditorFontSize = 14;
+	const minEditorFontSize = 10;
+	const maxEditorFontSize = 32;
+
+	function setEditorFontSize(value: number) {
+		const nextSize = Math.max(minEditorFontSize, Math.min(maxEditorFontSize, Math.round(value)));
+		if ($appConfig) $appConfig.font_size = nextSize;
+		document.documentElement.style.setProperty('--editor-font-size', `${nextSize}px`);
+		if (fontSizeSaveTimer) clearTimeout(fontSizeSaveTimer);
+		fontSizeSaveTimer = setTimeout(() => {
+			setFontSize(nextSize).catch((e) => console.error('Failed to save font size:', e));
+			fontSizeSaveTimer = null;
+		}, 150);
+	}
+
+	function installEditorZoomShortcuts() {
+		const zoomEditor = (delta: number) => setEditorFontSize(($appConfig?.font_size ?? defaultEditorFontSize) + delta);
+		const handleKeydown = (event: KeyboardEvent) => {
+			if (!event.ctrlKey && !event.metaKey) return;
+			if (event.altKey || event.shiftKey) return;
+
+			if (event.key === '+' || event.key === '=') {
+				event.preventDefault();
+				event.stopPropagation();
+				zoomEditor(1);
+			} else if (event.key === '-' || event.key === '_') {
+				event.preventDefault();
+				event.stopPropagation();
+				zoomEditor(-1);
+			} else if (event.key === '0') {
+				event.preventDefault();
+				event.stopPropagation();
+				setEditorFontSize(defaultEditorFontSize);
+			}
+		};
+
+		const handleWheel = (event: WheelEvent) => {
+			if (!event.ctrlKey && !event.metaKey) return;
+			event.preventDefault();
+			event.stopPropagation();
+			zoomEditor(event.deltaY < 0 ? 1 : -1);
+		};
+
+		window.addEventListener('keydown', handleKeydown);
+		window.addEventListener('wheel', handleWheel, { passive: false, capture: true });
+
+		return () => {
+			window.removeEventListener('keydown', handleKeydown);
+			window.removeEventListener('wheel', handleWheel, { capture: true });
+		};
+	}
 
 	onMount(async () => {
 		// Check for note window mode
@@ -103,6 +157,7 @@
 					console.error('Failed to apply interface scale:', e);
 				}
 			}
+			if (!noteWindowPath) removeEditorZoomShortcuts = installEditorZoomShortcuts();
 
 			// Auto-open last vault if available
 			if (config.active_vault) {
@@ -121,6 +176,11 @@
 		}
 		loading = false;
 	});
+
+	onDestroy(() => {
+		removeEditorZoomShortcuts?.();
+		if (fontSizeSaveTimer) clearTimeout(fontSizeSaveTimer);
+	});
 </script>
 
 {#if loading}