mirror of
https://gitlab.com/ArkHost/HelixNotes.git
synced 2026-07-24 07:45:57 +02:00
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
This commit is contained in:
committed by
ArkHost
co-authored by
FS
parent
173e25dadc
commit
9bb55afccc
+62
-2
@@ -1,7 +1,7 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount } from 'svelte';
|
import { onDestroy, onMount } from 'svelte';
|
||||||
import { appConfig, vaultReady, theme } from '$lib/stores/app';
|
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 { getCurrentWebview } from '@tauri-apps/api/webview';
|
||||||
import VaultPicker from '$lib/components/VaultPicker.svelte';
|
import VaultPicker from '$lib/components/VaultPicker.svelte';
|
||||||
import AppLayout from '$lib/components/AppLayout.svelte';
|
import AppLayout from '$lib/components/AppLayout.svelte';
|
||||||
@@ -9,6 +9,60 @@
|
|||||||
|
|
||||||
let loading = $state(true);
|
let loading = $state(true);
|
||||||
let noteWindowPath = $state<string | null>(null);
|
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 () => {
|
onMount(async () => {
|
||||||
// Check for note window mode
|
// Check for note window mode
|
||||||
@@ -103,6 +157,7 @@
|
|||||||
console.error('Failed to apply interface scale:', e);
|
console.error('Failed to apply interface scale:', e);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
if (!noteWindowPath) removeEditorZoomShortcuts = installEditorZoomShortcuts();
|
||||||
|
|
||||||
// Auto-open last vault if available
|
// Auto-open last vault if available
|
||||||
if (config.active_vault) {
|
if (config.active_vault) {
|
||||||
@@ -121,6 +176,11 @@
|
|||||||
}
|
}
|
||||||
loading = false;
|
loading = false;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
onDestroy(() => {
|
||||||
|
removeEditorZoomShortcuts?.();
|
||||||
|
if (fontSizeSaveTimer) clearTimeout(fontSizeSaveTimer);
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if loading}
|
{#if loading}
|
||||||
|
|||||||
Reference in New Issue
Block a user