Add export note to PDF (#243)

package.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",

src/components/organisms/NotePageToolbar.tsx

@@ -10,6 +10,7 @@ import {
   mdiDotsVertical,
   mdiStarOutline,
   mdiStar,
+  mdiExportVariant,
 } from '@mdi/js'
 import { borderBottom, flexCenter } from '../../lib/styled/styleFunctions'
 import ToolbarIconButton from '../atoms/ToolbarIconButton'
@@ -21,13 +22,15 @@ import { values, isTagNameValid } from '../../lib/db/utils'
 import {
   exportNoteAsHtmlFile,
   exportNoteAsMarkdownFile,
+  exportNoteAsPdfFile,
 } from '../../lib/exports'
 import { usePreferences } from '../../lib/preferences'
 import { usePreviewStyle } from '../../lib/preview'
 import { useTranslation } from 'react-i18next'
 import { useDb } from '../../lib/db'
 import { useRouteParams } from '../../lib/routeParams'
 import { useAnalytics, analyticsEvents } from '../../lib/analytics'
+import { useToast } from '../../lib/toast'
 import TopbarSwitchSelector from '../atoms/TopbarSwitchSelector'
 import { openContextMenu } from '../../lib/electronOnly'
 
@@ -76,6 +79,7 @@ const NotePageToolbar = ({
   const { previewStyle } = usePreviewStyle()
   const { generalStatus } = useGeneralStatus()
   const { noteViewMode, preferredEditingViewMode } = generalStatus
+  const { pushMessage } = useToast()
 
   const storageId = storage.id
   const storageName = storage.name
@@ -168,6 +172,8 @@ const NotePageToolbar = ({
     selectViewMode('preview')
   }, [selectViewMode])
 
+  const includeFrontMatter = preferences['markdown.includeFrontMatter']
+
   const openExportContextMenu = useCallback(
     (event: React.MouseEvent<HTMLButtonElement>) => {
       event.preventDefault()
@@ -176,24 +182,43 @@ const NotePageToolbar = ({
       }
       openContextMenu({
         menuItems: [
+          {
+            type: 'normal',
+            label: 'Markdown export',
+            click: async () =>
+              await exportNoteAsMarkdownFile(note, {
+                includeFrontMatter,
+              }),
+          },
           {
             type: 'normal',
             label: 'HTML export',
             click: async () =>
-              await exportNoteAsHtmlFile(note, preferences, previewStyle),
+              await exportNoteAsHtmlFile(
+                note,
+                preferences,
+                pushMessage,
+                previewStyle
+              ),
           },
           {
             type: 'normal',
-            label: 'Markdown export',
+            label: 'PDF export',
             click: async () =>
-              await exportNoteAsMarkdownFile(note, {
-                includeFrontMatter: preferences['markdown.includeFrontMatter'],
-              }),
+              await exportNoteAsPdfFile(
+                note,
+                preferences,
+                pushMessage,
+                {
+                  includeFrontMatter,
+                },
+                previewStyle
+              ),
           },
         ],
       })
     },
-    [note, preferences, previewStyle]
+    [note, preferences, includeFrontMatter, previewStyle, pushMessage]
   )
 
   const routeParams = useRouteParams()
@@ -320,6 +345,11 @@ const NotePageToolbar = ({
             onClick={!note.data.bookmarked ? bookmark : unbookmark}
             iconPath={note.data.bookmarked ? mdiStar : mdiStarOutline}
           />
+          <ToolbarIconButton
+            title={t('note.export')}
+            onClick={openExportContextMenu}
+            iconPath={mdiExportVariant}
+          />
           {note.trashed ? (
             <>
               <ToolbarIconButton
@@ -340,11 +370,6 @@ const NotePageToolbar = ({
               iconPath={mdiTrashCan}
             />
           )}
-          <ToolbarIconButton
-            title={t('note.export')}
-            onClick={openExportContextMenu}
-            iconPath={mdiDotsVertical}
-          />
         </Control>
       )}
     </Container>

src/electron/index.ts

@@ -3,6 +3,7 @@ import {
   BrowserWindow,
   BrowserWindowConstructorOptions,
   Menu,
+  protocol,
 } from 'electron'
 import path from 'path'
 import url from 'url'
@@ -102,6 +103,11 @@ app.on('activate', () => {
 
 // create main BrowserWindow when electron is ready
 app.on('ready', () => {
+  /* This file protocol registration will be needed from v9.x.x for PDF export feature */
+  protocol.registerFileProtocol('file', (request, callback) => {
+    const pathname = decodeURI(request.url.replace('file:///', ''))
+    callback(pathname)
+  })
   mainWindow = createMainWindow()
 
   app.on('open-url', (_event, url) => {