feat(editor): add embed image in mardown (#201)

Author: antonreshetov

package.json

@@ -68,6 +68,7 @@
     "prettier-plugin-sh": "0.8.2",
     "prettier-plugin-toml": "^0.3.1",
     "sanitize-html": "^2.7.0",
+    "slash": "^3.0.0",
     "universal-analytics": "^0.5.3",
     "vercel-toast": "^1.5.5",
     "vue": "^3.2.33",

pnpm-lock.yaml

@@ -0,0 +1,27 @@
+import { store } from '../../store'
+import { ipcMain } from 'electron'
+import { ensureDirSync, copySync } from 'fs-extra'
+import { join, parse } from 'path'
+import { nanoid } from 'nanoid'
+import slash from 'slash'
+
+const ASSETS_DIR = 'assets'
+
+export const subscribeToFs = () => {
+  ipcMain.handle<string, string>('main:copy-to-assets', (event, payload) => {
+    return new Promise(resolve => {
+      const storagePath = store.preferences.get('storagePath')
+      const payloadPath = payload
+      const assetsPath = join(storagePath, ASSETS_DIR)
+      const { ext } = parse(payloadPath)
+
+      const name = `${nanoid()}${ext}`
+      const dest = join(assetsPath, name)
+
+      ensureDirSync(assetsPath)
+      copySync(payloadPath, dest)
+
+      resolve(slash(join(ASSETS_DIR, name)))
+    })
+  })
+}

src/main/services/ipc/fs.ts

@@ -1,9 +1,11 @@
 import { subscribeToContextMenu } from './context-menu'
+import { subscribeToFs } from './fs'
 import { subscribeToNotification } from './notifications'
 import { subscribeToPrettier } from './prettier'
 
 export const subscribeToChannels = () => {
   subscribeToContextMenu()
   subscribeToNotification()
   subscribeToPrettier()
+  subscribeToFs()
 }

src/main/services/ipc/index.ts

@@ -159,6 +159,21 @@ const init = async () => {
   })
   editor.on('scroll', hideScrollbar)
 
+  editor.on('paste', async (cm, e) => {
+    if (props.lang === 'markdown') {
+      const item = e.clipboardData?.items[0]
+
+      if (item?.type.startsWith('image')) {
+        e.preventDefault()
+
+        const blob = item.getAsFile()
+        const path = await ipc.invoke('main:copy-to-assets', blob?.path)
+
+        cm.replaceSelection(`![](./${path})`)
+      }
+    }
+  })
+
   editor.setOption('extraKeys', {
     'Cmd-F': () => {
       emitter.emit('search:focus', true)

src/renderer/components/editor/EditorCodemirror.vue

@@ -12,11 +12,13 @@ import { useSnippetStore } from '@/store/snippets'
 import sanitizeHtml from 'sanitize-html'
 import hljs from 'highlight.js'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { ipc } from '@/electron'
+import { ipc, store } from '@/electron'
 import { marked } from 'marked'
 import mermaid from 'mermaid'
 import { useHljsTheme } from '@/composable'
 
+const isDev = import.meta.env.DEV
+
 interface Props {
   value: string
 }
@@ -68,7 +70,7 @@ onMounted(() => {
 
 const getRenderer = () => {
   const raw = marked.parse(props.value)
-  const html = sanitizeHtml(raw, {
+  let html = sanitizeHtml(raw, {
     allowedTags: [
       'h1',
       'h2',
@@ -151,6 +153,14 @@ const getRenderer = () => {
       ]
     }
   })
+
+  const re = /src="\.\//g
+  const path = store.preferences.get('storagePath')
+
+  html = isDev
+    ? html.replace(re, `src="file://${path}/`)
+    : html.replace(re, `src="${path}/`)
+
   return html
 }
 

src/renderer/components/markdown/TheMarkdown.vue

@@ -54,6 +54,7 @@ type MainAction =
   | 'open-url'
   | 'prettier'
   | 'focus'
+  | 'copy-to-assets'
 
 type ApiAction = 'snippet-create'