feat(keymap): add cmd+ / cmd- to control editor font size (#222)

Author: antonreshetov

src/renderer/App.vue

@@ -48,6 +48,7 @@ import {
   useSupportNotification,
   checkForRemoteNotification
 } from '@/composable/notification'
+import { useKeyMap } from '@/composable/keymap'
 
 // По какой то причине необходимо явно установить роут в '/'
 // для корректного поведения в продакшен сборке
@@ -97,6 +98,7 @@ const init = async () => {
 
   trackAppUpdate()
   checkForRemoteNotification()
+  useKeyMap()
 }
 
 const setTheme = (theme: string) => {

src/renderer/components/editor/EditorCodemirror.vue

@@ -323,13 +323,15 @@ watch(
 )
 
 emitter.on('snippet:format', () => format())
+emitter.on('editor:refresh', () => editor.refresh())
 
 onMounted(() => {
   init()
 })
 
 onUnmounted(() => {
   emitter.off('snippet:format')
+  emitter.off('editor:refresh')
 })
 </script>
 

src/renderer/composable/keymap.ts

@@ -0,0 +1,45 @@
+import { store } from '@/electron'
+import { EDITOR_DEFAULTS, useAppStore } from '@/store/app'
+import { useMagicKeys } from '@vueuse/core'
+import { watch } from 'vue'
+import router from '@/router'
+import { emitter } from '.'
+
+export const useKeyMap = () => {
+  const appStore = useAppStore()
+
+  // Вариант с meta.value && Equal.value вызывается только один раз,
+  // последующее нажатие на клавишу "="" не вызывает метод.
+  // Поэтому сделал так
+  useMagicKeys({
+    passive: false,
+    onEventFired: e => {
+      const { path } = router.currentRoute.value
+
+      if (path !== '/') return
+
+      if (e.metaKey && e.key === '=') {
+        appStore.editor.fontSize += 1
+      }
+
+      if (e.metaKey && e.key === '-') {
+        if (appStore.editor.fontSize === 1) return
+        appStore.editor.fontSize -= 1
+      }
+
+      if (e.metaKey && e.key === '0') {
+        appStore.editor.fontSize = EDITOR_DEFAULTS.fontSize
+      }
+
+      emitter.emit('editor:refresh', true)
+    }
+  })
+
+  watch(
+    () => appStore.editor,
+    v => {
+      store.preferences.set('editor', { ...v })
+    },
+    { deep: true }
+  )
+}

src/renderer/store/app.ts

@@ -10,7 +10,7 @@ import type {
 import { defineStore } from 'pinia'
 import { version } from '../../../package.json'
 
-const EDITOR_DEFAULTS: EditorSettings = {
+export const EDITOR_DEFAULTS: EditorSettings = {
   fontFamily: 'SF Mono, Consolas, Menlo, Ubuntu Mono, monospace',
   fontSize: 12,
   tabSize: 2,

src/shared/types/renderer/composable/index.d.ts

@@ -7,4 +7,5 @@ export type EmitterEvents = {
   'scroll-to:folder': string
   'scroll-to:snippet': string
   'search:focus': boolean
+  'editor:refresh': boolean
 }