massCodeIO · antonreshetov · Jul 13, 2022 · Jul 13, 2022 · Jul 13, 2022 · Jul 13, 2022
diff --git a/config/vite.ts b/config/vite.ts
@@ -33,15 +33,16 @@ export default defineConfig({
       resolvers: [
         IconsResolver({
           prefix: '',
-          customCollections: ['unicons']
+          customCollections: ['unicons', 'svg']
         })
       ]
     }),
     Icons({
       customCollections: {
         unicons: FileSystemIconLoader(
           './node_modules/@iconscout/unicons/svg/line'
-        )
+        ),
+        svg: FileSystemIconLoader(pathSrc + '/assets/svg')
       }
     })
   ],

diff --git a/src/main/menu/main.ts b/src/main/menu/main.ts
@@ -341,6 +341,15 @@ const editorMenu: MenuItemConstructorOptions[] = [
         'main-menu:preview-markdown'
       )
     }
+  },
+  {
+    label: 'Preview Code',
+    accelerator: 'Shift+CommandOrControl+P',
+    click: () => {
+      BrowserWindow.getFocusedWindow()?.webContents.send(
+        'main-menu:preview-code'
+      )
+    }
   }
 ]
 

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
@@ -197,6 +197,10 @@ ipc.on('main-menu:preview-markdown', async () => {
   }
 })
 
+ipc.on('main-menu:preview-code', () => {
+  snippetStore.isCodePreview = !snippetStore.isCodePreview
+})
+
 ipc.on('main-menu:copy-snippet', () => {
   onCopySnippet()
 })

diff --git a/src/renderer/assets/scss/base.scss b/src/renderer/assets/scss/base.scss
@@ -70,6 +70,25 @@ h6 {
     z-index: 10;
   }
 }
+.gutter-line-horizontal {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 1px;
+  background-color: var(--color-border);
+  cursor: row-resize;
+  &::after {
+    content: '';
+    display: block;
+    height: 8px;
+    width: 100%;
+    position: absolute;
+    top: -2px;
+    z-index: 10;
+  }
+}
 
 .desc {
   font-size: var(--text-sm);

diff --git a/src/renderer/assets/svg/arrow-slash.svg b/src/renderer/assets/svg/arrow-slash.svg
diff --git a/src/renderer/components/editor/EditorPreview.vue b/src/renderer/components/editor/EditorPreview.vue
@@ -0,0 +1,128 @@
+<template>
+  <div
+    ref="previewRef"
+    class="editor-preview"
+  >
+    <div class="tools">
+      <div class="left">
+        <AppCheckbox
+          v-model="appStore.codePreview.darkMode"
+          name="Dark mode"
+          label="Dark mode"
+        />
+      </div>
+      <div class="right">
+        <AppActionButton @click="onSaveToHtml">
+          <UniconsFileDownload />
+        </AppActionButton>
+      </div>
+    </div>
+    <div class="body">
+      <iframe
+        :srcDoc="srcDoc"
+        frameborder="0"
+        height="100%"
+        width="100%"
+      />
+    </div>
+    <div
+      ref="gutterRef"
+      class="gutter-line-horizontal"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useSnippetStore } from '@/store/snippets'
+import { computed, ref, onMounted, watch } from 'vue'
+import interact from 'interactjs'
+import { useAppStore } from '@/store/app'
+
+const snippetStore = useSnippetStore()
+const appStore = useAppStore()
+const srcDoc = ref()
+const height = computed(() => appStore.sizes.codePreviewHeight + 'px')
+
+const previewRef = ref()
+const gutterRef = ref()
+
+snippetStore.$subscribe(() => {
+  setSrcDoc()
+})
+
+watch(
+  () => appStore.codePreview.darkMode,
+  () => {
+    setSrcDoc()
+  }
+)
+
+const setSrcDoc = () => {
+  const html = snippetStore.selected?.content.find(
+    i => i.language === 'html'
+  )?.value
+  const css = snippetStore.selected?.content.find(
+    i => i.language === 'css'
+  )?.value
+
+  const htmlDefault =
+    '<div>Add fragments with HTML & CSS languages to view result.</div>'
+  const bg = appStore.codePreview.darkMode ? 'background: #263238;' : ''
+  const cssDefault = `
+    body {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100vh;
+      margin: 0;
+      ${bg}
+    }
+  `
+
+  srcDoc.value = `<html>
+    <body>${html || htmlDefault}<body>
+    <style>${cssDefault + css}<style>
+  </html>
+  `
+}
+setSrcDoc()
+
+const onSaveToHtml = () => {
+  const a = document.createElement('a')
+
+  a.href = `data:text/plain;charset=utf-8, ${encodeURIComponent(srcDoc.value)}`
+  console.log(a)
+  a.download = `${snippetStore.selected?.name}.html`
+  a.click()
+}
+
+onMounted(() => {
+  interact(previewRef.value).resizable({
+    edges: { top: true },
+    onmove: e => {
+      const { pageY } = e
+      appStore.sizes.codePreviewHeight = Math.floor(window.innerHeight - pageY)
+    }
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+.editor-preview {
+  position: relative;
+  .body {
+    height: calc(v-bind(height) - 34px);
+  }
+  .tools {
+    height: 34px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4px var(--spacing-xs);
+    border-bottom: 1px solid var(--color-border);
+  }
+  iframe {
+    background-color: #fff;
+  }
+}
+</style>
diff --git a/src/renderer/components/editor/TheEditor.vue b/src/renderer/components/editor/TheEditor.vue
@@ -83,8 +83,8 @@ const editorHeight = computed(() => {
   forceRefresh.value
 
   let result =
-    appStore.sizes.editor.titleHeight +
     appStore.sizes.titlebar +
+    appStore.sizes.editor.titleHeight +
     appStore.sizes.editor.footerHeight
 
   if (snippetStore.isFragmentsShow) {
@@ -99,6 +99,10 @@ const editorHeight = computed(() => {
     result += appStore.sizes.editor.descriptionHeight
   }
 
+  if (snippetStore.isCodePreview) {
+    result += appStore.sizes.codePreviewHeight
+  }
+
   return window.innerHeight - result + 'px'
 })
 

diff --git a/src/renderer/components/snippets/SnippetHeader.vue b/src/renderer/components/snippets/SnippetHeader.vue
@@ -21,8 +21,9 @@
           <UniconsCamera v-if="!snippetStore.isScreenshotPreview" />
           <UniconsCameraSlash v-else />
         </AppActionButton>
-        <AppActionButton @click="onCopySnippet">
-          <UniconsArrow />
+        <AppActionButton @click="onCodePreview">
+          <SvgArrowSlash v-if="snippetStore.isCodePreview" />
+          <UniconsArrow v-else />
         </AppActionButton>
         <AppActionButton @click="onAddDescription">
           <UniconsText />
@@ -53,6 +54,7 @@ import { useSnippetStore } from '@/store/snippets'
 import { useDebounceFn } from '@vueuse/core'
 import { computed, onUnmounted, ref } from 'vue'
 import { useAppStore } from '@/store/app'
+import { track } from '@/electron'
 
 const snippetStore = useSnippetStore()
 const appStore = useAppStore()
@@ -77,6 +79,10 @@ const onClickMarkdownPreview = () => {
 const onClickScreenshotPreview = () => {
   snippetStore.isScreenshotPreview = !snippetStore.isScreenshotPreview
 }
+const onCodePreview = () => {
+  snippetStore.isCodePreview = !snippetStore.isCodePreview
+  track('snippets/code-preview')
+}
 
 emitter.on('snippet:focus-name', () => {
   inputRef.value?.select()

diff --git a/src/renderer/components/snippets/SnippetsView.vue b/src/renderer/components/snippets/SnippetsView.vue
@@ -7,6 +7,7 @@
   >
     <template v-if="snippetStore.selected">
       <SnippetHeader />
+      <!-- TODO: упростить условия отображения -->
       <TheEditor
         v-if="
           !snippetStore.isMarkdownPreview && !snippetStore.isScreenshotPreview
@@ -18,6 +19,13 @@
         :is-search-mode="isSearchMode"
         :fragments="snippetStore.isFragmentsShow"
       />
+      <EditorPreview
+        v-if="
+          snippetStore.isCodePreview &&
+            !snippetStore.isScreenshotPreview &&
+            !snippetStore.isMarkdownPreview
+        "
+      />
       <TheMarkdown
         v-if="
           snippetStore.isMarkdownPreview && !snippetStore.isScreenshotPreview

diff --git a/src/renderer/store/app.ts b/src/renderer/store/app.ts
@@ -1,5 +1,6 @@
 import { platform, store } from '@/electron'
 import type {
+  CodePreviewSettings,
   EditorSettings,
   ScreenshotSettings,
   State,
@@ -29,6 +30,10 @@ const SCREENSHOT_DEFAULTS: ScreenshotSettings = {
   width: 600
 }
 
+const CODE_PREVIEW_DEFAULTS: CodePreviewSettings = {
+  darkMode: false
+}
+
 export const useAppStore = defineStore('app', {
   state: (): State => ({
     isInit: false,
@@ -38,6 +43,7 @@ export const useAppStore = defineStore('app', {
       titlebar: 15,
       sidebar: 180,
       snippetList: 250,
+      codePreviewHeight: 200,
       editor: {
         titleHeight: 34,
         fragmentsHeight: 25,
@@ -48,6 +54,7 @@ export const useAppStore = defineStore('app', {
     },
     editor: EDITOR_DEFAULTS,
     screenshot: SCREENSHOT_DEFAULTS,
+    codePreview: CODE_PREVIEW_DEFAULTS,
     selectedPreferencesMenu: 'storage',
     version,
     platform: platform()

diff --git a/src/renderer/store/snippets.ts b/src/renderer/store/snippets.ts
@@ -29,7 +29,8 @@ export const useSnippetStore = defineStore('snippets', {
     sort: 'updatedAt',
     isContextState: false,
     isMarkdownPreview: false,
-    isScreenshotPreview: false
+    isScreenshotPreview: false,
+    isCodePreview: false
   }),
 
   getters: {

diff --git a/src/shared/types/main/analytics.d.ts b/src/shared/types/main/analytics.d.ts
@@ -16,6 +16,7 @@ type SnippetEvents =
   | 'search'
   | 'set-language'
   | 'create-screenshot'
+  | 'code-preview'
 type FolderEvents = 'add-new' | 'delete' | 'set-language'
 type TagEvents = 'add-new' | 'delete'
 type AppEvents =

diff --git a/src/shared/types/main/index.d.ts b/src/shared/types/main/index.d.ts
@@ -38,6 +38,7 @@ type MainMenuAction =
   | 'new-snippet'
   | 'preferences'
   | 'preview-markdown'
+  | 'preview-code'
   | 'search'
   | 'sort-snippets'
 

diff --git a/src/shared/types/renderer/store/app.d.ts b/src/shared/types/renderer/store/app.d.ts
@@ -24,6 +24,7 @@ export interface AppSizes {
   titlebar: number
   sidebar: number
   snippetList: number
+  codePreviewHeight: number
   editor: {
     titleHeight: number
     fragmentsHeight: number
@@ -54,6 +55,10 @@ export interface ScreenshotSettings {
   width: number
 }
 
+export interface CodePreviewSettings {
+  darkMode: boolean
+}
+
 export interface State {
   platform: NodeJS.Platform
   theme: Theme
@@ -63,5 +68,6 @@ export interface State {
   editor: EditorSettings
   selectedPreferencesMenu: string
   screenshot: ScreenshotSettings
+  codePreview: CodePreviewSettings
   isInit: boolean
 }
diff --git a/src/shared/types/renderer/store/snippets.d.ts b/src/shared/types/renderer/store/snippets.d.ts
@@ -15,4 +15,5 @@ export interface State {
   isContextState: boolean
   isMarkdownPreview: boolean
   isScreenshotPreview: boolean
+  isCodePreview: boolean
 }