Fix markdown exporting

Author: Rokt33r

package-lock.json

@@ -165,7 +165,8 @@
     "styled-components": "^4.3.2",
     "unified": "^9.1.0",
     "unist-util-visit": "^2.0.3",
-    "use-force-update": "^1.0.7"
+    "use-force-update": "^1.0.7",
+    "yaml": "^1.10.0"
   },
   "build": {
     "appId": "com.boostio.boostnote",

package.json

@@ -171,6 +171,8 @@ const NotePageToolbar = ({
     selectViewMode('preview')
   }, [selectViewMode])
 
+  const includeFrontMatter = preferences['markdown.includeFrontMatter']
+
   const openExportContextMenu = useCallback(
     (event: React.MouseEvent<HTMLButtonElement>) => {
       event.preventDefault()
@@ -183,8 +185,8 @@ const NotePageToolbar = ({
             type: 'normal',
             label: 'Markdown export',
             click: async () =>
-              await exportNoteAsMarkdownFile(note, pushMessage, {
-                includeFrontMatter: preferences['markdown.includeFrontMatter'],
+              await exportNoteAsMarkdownFile(note, {
+                includeFrontMatter,
               }),
           },
           {
@@ -207,16 +209,15 @@ const NotePageToolbar = ({
                 preferences,
                 pushMessage,
                 {
-                  includeFrontMatter:
-                    preferences['markdown.includeFrontMatter'],
+                  includeFrontMatter,
                 },
                 previewStyle
               ),
           },
         ],
       })
     },
-    [note, preferences, previewStyle, pushMessage]
+    [note, preferences, includeFrontMatter, previewStyle, pushMessage]
   )
 
   const routeParams = useRouteParams()

src/components/organisms/NotePageToolbar.tsx

@@ -1,7 +1,6 @@
 import unified from 'unified'
 import remarkParse from 'remark-parse'
 import remarkRehype from 'remark-rehype'
-import remarkStringify from 'remark-stringify'
 import remarkMath from 'remark-math'
 import rehypeDocument from 'rehype-document'
 import rehypeRaw from 'rehype-raw'
@@ -20,6 +19,7 @@ import remarkEmoji from 'remark-emoji'
 import rehypeReact from 'rehype-react'
 import CodeFence from '../components/atoms/markdown/CodeFence'
 import { getGlobalCss, selectTheme } from './styled/styleUtil'
+import yaml from 'yaml'
 
 const filenamifyNoteTitle = function (noteTitle: string): string {
   return filenamify(noteTitle.toLowerCase().replace(/\s+/g, '-'))
@@ -28,11 +28,14 @@ const filenamifyNoteTitle = function (noteTitle: string): string {
 const getFrontMatter = (note: NoteDoc): string => {
   return [
     '---',
-    `title: "${note.title}"`,
-    `tags: "${note.tags.join()}"`,
+    yaml
+      .stringify({
+        title: note.title,
+        tags: note.tags,
+      })
+      .trim(),
     '---',
     '',
-    '',
   ].join('\n')
 }
 
@@ -84,29 +87,17 @@ export const exportNoteAsHtmlFile = async (
 
 export const exportNoteAsMarkdownFile = async (
   note: NoteDoc,
-  pushMessage: (context: any) => any,
   { includeFrontMatter }: { includeFrontMatter: boolean }
 ): Promise<void> => {
-  await unified()
-    .use(remarkParse)
-    .use(remarkStringify)
-    .process(note.content, (err, file) => {
-      if (err != null) {
-        pushMessage({
-          title: 'Note processing failed',
-          description: 'Please check markdown syntax and try again later.',
-        })
-        return
-      }
-      let content = file.toString().trim() + '\n'
-      content += includeFrontMatter ? getFrontMatter(note) : ''
-      downloadString(
-        content,
-        `${filenamifyNoteTitle(note.title)}.md`,
-        'text/markdown'
-      )
-      return
-    })
+  let content = note.content.trim() + '\n'
+  if (includeFrontMatter) {
+    content = getFrontMatter(note) + '\n' + content
+  }
+  downloadString(
+    content,
+    `${filenamifyNoteTitle(note.title)}.md`,
+    'text/markdown'
+  )
   return
 }