feat(main:menu): add keymap to control editor font size (#229)

Author: antonreshetov

src/main/menu/main.ts

@@ -359,6 +359,36 @@ const editorMenu: MenuItemConstructorOptions[] = [
         'main-menu:preview-code'
       )
     }
+  },
+  {
+    type: 'separator'
+  },
+  {
+    label: i18n.t('menu:editor.fontSizeIncrease'),
+    accelerator: 'CommandOrControl+=',
+    click: () => {
+      BrowserWindow.getFocusedWindow()?.webContents.send(
+        'main-menu:font-size-increase'
+      )
+    }
+  },
+  {
+    label: i18n.t('menu:editor.fontSizeDecrease'),
+    accelerator: 'CommandOrControl+-',
+    click: () => {
+      BrowserWindow.getFocusedWindow()?.webContents.send(
+        'main-menu:font-size-decrease'
+      )
+    }
+  },
+  {
+    label: i18n.t('menu:editor.fontSizeReset'),
+    accelerator: 'CommandOrControl+0',
+    click: () => {
+      BrowserWindow.getFocusedWindow()?.webContents.send(
+        'main-menu:font-size-reset'
+      )
+    }
   }
 ]
 

src/main/services/i18n/locales/en/menu.json

@@ -66,7 +66,10 @@
     "format": "Format",
     "previewCode": "Preview Code",
     "previewScreenshot": "Preview Screenshot",
-    "previewMarkdown": "Preview Markdown"
+    "previewMarkdown": "Preview Markdown",
+    "fontSizeIncrease": "Font Size Increase",
+    "fontSizeDecrease": "Font Size Decrease",
+    "fontSizeReset": "Font Size Reset"
   },
   "markdown": {
     "label": "Markdown",

src/main/services/i18n/locales/ru/menu.json

@@ -65,7 +65,10 @@
     "copy": "Скопировать сниппет в буфер",
     "format": "Форматировать",
     "previewCode": "Просмотр результата HTML/CSS",
-    "previewScreenshot": "Просмотр скриншота"
+    "previewScreenshot": "Просмотр скриншота",
+    "fontSizeIncrease": "Увеличить шрифт",
+    "fontSizeDecrease": "Уменьшить шрифт",
+    "fontSizeReset": "Сбросить размер шрифта"
   },
   "markdown": {
     "label": "Markdown",

src/renderer/App.vue

@@ -27,7 +27,7 @@
 import router from '@/router'
 import { nextTick, ref, watch } from 'vue'
 import { ipc, store, track, i18n } from './electron'
-import { useAppStore } from './store/app'
+import { EDITOR_DEFAULTS, useAppStore } from './store/app'
 import { repository } from '../../package.json'
 import { useSnippetStore } from './store/snippets'
 import {
@@ -48,7 +48,6 @@ import {
   useSupportNotification,
   checkForRemoteNotification
 } from '@/composable/notification'
-import { useKeyMap } from '@/composable/keymap'
 
 // По какой то причине необходимо явно установить роут в '/'
 // для корректного поведения в продакшен сборке
@@ -98,7 +97,6 @@ const init = async () => {
 
   trackAppUpdate()
   checkForRemoteNotification()
-  useKeyMap()
 }
 
 const setTheme = (theme: string) => {
@@ -148,6 +146,14 @@ watch(
   }
 )
 
+watch(
+  () => appStore.editor,
+  v => {
+    store.preferences.set('editor', { ...v })
+  },
+  { deep: true }
+)
+
 ipc.on('main:update-available', () => {
   isUpdateAvailable.value = true
 })
@@ -210,6 +216,22 @@ ipc.on('main-menu:add-description', async () => {
   await onAddDescription()
 })
 
+ipc.on('main-menu:font-size-increase', async () => {
+  appStore.editor.fontSize += 1
+  emitter.emit('editor:refresh', true)
+})
+
+ipc.on('main-menu:font-size-decrease', async () => {
+  if (appStore.editor.fontSize === 1) return
+  appStore.editor.fontSize -= 1
+  emitter.emit('editor:refresh', true)
+})
+
+ipc.on('main-menu:font-size-reset', async () => {
+  appStore.editor.fontSize = EDITOR_DEFAULTS.fontSize
+  emitter.emit('editor:refresh', true)
+})
+
 ipc.on('api:snippet-create', (event, body: Snippet) => {
   onCreateSnippet(body)
 })

src/renderer/components/editor/EditorCodemirror.vue

@@ -38,7 +38,15 @@ import 'codemirror/addon/selection/active-line'
 import 'codemirror/addon/scroll/simplescrollbars'
 import 'codemirror/addon/scroll/simplescrollbars.css'
 import 'codemirror/lib/codemirror.css'
-import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import {
+  computed,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  watch
+} from 'vue'
 import { i18n, ipc, track } from '@/electron'
 import { languages } from './languages'
 import { useAppStore } from '@/store/app'
@@ -320,16 +328,21 @@ watch(
   }
 )
 
+watch(
+  () => appStore.editor.fontSize,
+  () => {
+    nextTick(() => editor.refresh())
+  }
+)
+
 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

@@ -45,6 +45,9 @@ type MainMenuAction =
   | 'preview-markdown'
   | 'search'
   | 'sort-snippets'
+  | 'font-size-increase'
+  | 'font-size-decrease'
+  | 'font-size-reset'
 
 type MainAction =
   | 'restart'