feat: use escape to exit from markdown, code & screenshot previews (#235)

Author: antonreshetov

src/renderer/components/editor/EditorPreview.vue

@@ -47,9 +47,12 @@ import { computed, ref, onMounted, watch } from 'vue'
 import interact from 'interactjs'
 import { useAppStore } from '@/store/app'
 import { i18n, ipc, track } from '@/electron'
+import { useMagicKeys } from '@vueuse/core'
 
 const snippetStore = useSnippetStore()
 const appStore = useAppStore()
+const { escape } = useMagicKeys()
+
 const srcDoc = ref()
 const height = computed(() => appStore.sizes.codePreviewHeight + 'px')
 
@@ -112,6 +115,10 @@ const onClickSnippetShowcase = () => {
   track('app/open-url', 'https://masscode.io/snippets')
 }
 
+watch(escape, () => {
+  snippetStore.isCodePreview = false
+})
+
 onMounted(() => {
   interact(previewRef.value).resizable({
     edges: { top: true },

src/renderer/components/markdown/TheMarkdown.vue

@@ -18,6 +18,7 @@ import mermaid from 'mermaid'
 import { useHljsTheme, goToSnippet } from '@/composable'
 import { useCodemirror } from '@/composable/codemirror'
 import { nanoid } from 'nanoid'
+import { useMagicKeys } from '@vueuse/core'
 
 const isDev = import.meta.env.DEV
 
@@ -38,6 +39,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const appStore = useAppStore()
 const snippetStore = useSnippetStore()
+const { escape } = useMagicKeys()
 
 const renderedHtml = ref()
 
@@ -269,6 +271,10 @@ watch(
   }
 )
 
+watch(escape, () => {
+  snippetStore.isMarkdownPreview = false
+})
+
 init()
 
 onMounted(() => {

src/renderer/components/screenshot/TheScreenshot.vue

@@ -26,7 +26,8 @@
       <div class="right">
         <AppActionButton
           v-tooltip="i18n.t('saveScreenshot')"
-          @click="onSaveScreenshot">
+          @click="onSaveScreenshot"
+        >
           <UniconsFileDownload />
         </AppActionButton>
       </div>
@@ -109,6 +110,7 @@ import { computed, onMounted, ref, watch } from 'vue'
 import { useHljsTheme } from '@/composable'
 import { store, track, i18n } from '@/electron'
 import { useSnippetStore } from '@/store/snippets'
+import { useMagicKeys } from '@vueuse/core'
 
 const GUTTER_RIGHT_OFFSET = 10
 const GUTTER_WIDTH = 8
@@ -125,6 +127,7 @@ const props = defineProps<Props>()
 
 const appStore = useAppStore()
 const snippetStore = useSnippetStore()
+const { escape } = useMagicKeys()
 
 const frameRef = ref<HTMLElement>()
 const snippetRef = ref<HTMLElement>()
@@ -211,6 +214,10 @@ watch(
   { deep: true }
 )
 
+watch(escape, () => {
+  snippetStore.isScreenshotPreview = false
+})
+
 onMounted(() => {
   interact(frameRef.value!).resizable({
     allowFrom: gutterRef.value!,