Add export note to PDF (#243)

Komediruzecki · Rokt33r · commit 52f41d1a228c · 2020-11-21T17:28:46.000+09:00
Add export note markdown to PDF in note page toolbar
Add render_md_to_pdf.html file for rendering markdown to HTML first
Add logic for printing to PDF via webContents.printToPdf
Refactor note title sanitization to shared function
diff --git a/src/components/organisms/NotePageToolbar.tsx b/src/components/organisms/NotePageToolbar.tsx
@@ -21,13 +21,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 +78,7 @@ const NotePageToolbar = ({
   const { previewStyle } = usePreviewStyle()
   const { generalStatus } = useGeneralStatus()
   const { noteViewMode, preferredEditingViewMode } = generalStatus
+  const { pushMessage } = useToast()
 
   const storageId = storage.id
   const storageName = storage.name
@@ -180,20 +183,26 @@ const NotePageToolbar = ({
             type: 'normal',
             label: 'HTML export',
             click: async () =>
-              await exportNoteAsHtmlFile(note, preferences, previewStyle),
+              await exportNoteAsHtmlFile(note, preferences, pushMessage, previewStyle),
           },
           {
             type: 'normal',
             label: 'Markdown export',
             click: async () =>
-              await exportNoteAsMarkdownFile(note, {
+              await exportNoteAsMarkdownFile(note, pushMessage, {
                 includeFrontMatter: preferences['markdown.includeFrontMatter'],
               }),
           },
+          {
+            type: 'normal',
+            label: 'PDF export',
+            click: async () =>
+              await exportNoteAsPdfFile(note, preferences, pushMessage, previewStyle),
+          },
         ],
       })
     },
-    [note, preferences, previewStyle]
+    [note, preferences, previewStyle, pushMessage]
   )
 
   const routeParams = useRouteParams()
diff --git a/src/lib/exports.ts b/src/lib/exports.ts
@@ -11,10 +11,19 @@ import rehypeKatex from 'rehype-katex'
 import { mergeDeepRight } from 'ramda'
 import gh from 'hast-util-sanitize/lib/github.json'
 import { rehypeCodeMirror } from './../components/atoms/MarkdownPreviewer'
-import { downloadString } from './download'
+import { downloadBlob, downloadString } from './download'
 import { NoteDoc } from './db/types'
 import { Preferences } from './preferences'
 import { filenamify } from './string'
+import React from 'react'
+import remarkEmoji from 'remark-emoji'
+import rehypeReact from 'rehype-react'
+import CodeFence from '../components/atoms/markdown/CodeFence'
+import {getGlobalCss, selectTheme } from './styled/styleUtil'
+
+const sanitizeNoteName = function (rawNoteName: string): string {
+  return filenamify(rawNoteName.toLowerCase().replace(/\s+/g, '-'))
+}
 
 const sanitizeSchema = mergeDeepRight(gh, {
   attributes: { '*': ['className'] },
@@ -23,7 +32,8 @@ const sanitizeSchema = mergeDeepRight(gh, {
 export const exportNoteAsHtmlFile = async (
   note: NoteDoc,
   preferences: Preferences,
-  previewStyle?: string
+  pushMessage: (context: any) => any,
+  previewStyle?: string,
 ): Promise<void> => {
   await unified()
     .use(remarkParse)
@@ -45,14 +55,16 @@ export const exportNoteAsHtmlFile = async (
     .use(rehypeKatex)
     .process(note.content, (err, file) => {
       if (err != null) {
-        /* TODO: Toast error */
-        console.error(err)
+        pushMessage({
+          title: 'Note processing failed',
+          description: 'Please check markdown syntax and try again later.',
+        })
         return
       }
 
       downloadString(
         file.toString(),
-        `${filenamify(note.title.toLowerCase().replace(/\s+/g, '-'))}.html`,
+        `${sanitizeNoteName(note.title)}.html`,
         'text/html'
       )
       return
@@ -61,15 +73,18 @@ 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) {
-        /* TODO: Toast error */
-        console.error(err)
+        pushMessage({
+          title: 'Note processing failed',
+          description: 'Please check markdown syntax and try again later.',
+        })
         return
       }
       let content = file.toString().trim() + '\n'
@@ -87,10 +102,138 @@ export const exportNoteAsMarkdownFile = async (
 
       downloadString(
         content,
-        `${filenamify(note.title.toLowerCase().replace(/\s+/g, '-'))}.md`,
+        `${sanitizeNoteName(note.title)}.md`,
         'text/markdown'
       )
       return
     })
   return
 }
+
+const schema = mergeDeepRight(gh, {
+  attributes: {
+    '*': [...gh.attributes['*'], 'className', 'align'],
+    input: [...gh.attributes.input, 'checked'],
+    pre: ['dataRaw'],
+  },
+})
+
+const getCssLinks = (preferences : Preferences) => {
+  let cssHrefs : string[] = []
+  const app = window.require('electron').remote.app;
+  const isProd = app.isPackaged
+  const parentPathTheme = app.getAppPath() + ((isProd === true) ? "/compiled/app" : "/../node_modules")
+  let editorTheme = preferences['editor.theme']
+  let markdownCodeBlockTheme = preferences['markdown.codeBlockTheme']
+  if (editorTheme === 'solarized-dark') {
+    editorTheme = 'solarized'
+  }
+  const editorThemePath = `${parentPathTheme}/codemirror/theme/${editorTheme}.css`
+  cssHrefs.push(editorThemePath)
+  if (editorTheme !== markdownCodeBlockTheme) {
+    if (markdownCodeBlockTheme) {
+      if (markdownCodeBlockTheme === 'solarized-dark') {
+        markdownCodeBlockTheme = 'solarized'
+      }
+      const markdownCodeBlockThemePath = `${parentPathTheme}/codemirror/theme/${markdownCodeBlockTheme}.css`
+      cssHrefs.push(markdownCodeBlockThemePath)
+    }
+  }
+  return cssHrefs
+}
+
+export const exportNoteAsPdfFile = async (
+  note: NoteDoc,
+  preferences: Preferences,
+  pushMessage: (context: any) => any,
+  previewStyle?: string,
+): 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.',
+        })
+      }
+      let content = file.toString().trim() + '\n'
+      const markdownProcessor = unified()
+        .use(remarkParse)
+        .use(remarkEmoji, { emoticon: false })
+        .use([remarkRehype, { allowDangerousHTML: true }])
+        .use(rehypeRaw)
+        .use(rehypeSanitize, schema)
+        .use(remarkMath)
+        .use(rehypeCodeMirror, {
+          ignoreMissing: true,
+          theme: preferences['markdown.codeBlockTheme'],
+        })
+        .use(rehypeKatex)
+        .use(rehypeReact, {
+          createElement: React.createElement,
+          components: {
+            pre: CodeFence,
+          },
+        })
+        .use(rehypeStringify)
+
+      // Process note-markdown content into react string
+      let resultObj = markdownProcessor.processSync(content)
+
+      // Create new window (hidden)
+      const { BrowserWindow } = window.require('electron').remote
+      const app = window.require('electron').remote.app;
+      const ipcMain = window.require('electron').remote.ipcMain;
+      const isProd = app.isPackaged === true
+      const parentPathHTML = app.getAppPath() + ((isProd === true) ? "/compiled/app/static" : "/../static")
+      const windowOptions = {
+        webPreferences: { nodeIntegration: true, webSecurity: false },
+        show: false
+      }
+      const win = new BrowserWindow(windowOptions)
+
+      // Load HTML for rendering react string for markdown content created earlier
+      win.loadFile(`${parentPathHTML}/render_md_to_pdf.html`)
+      win.webContents.on('did-finish-load', function () {
+        // Fetch needed CSS styles
+        const generalThemeName = preferences['general.theme']
+        const appThemeCss = getGlobalCss(selectTheme(generalThemeName))
+        let cssHrefs: string[] = getCssLinks(preferences)
+        if (previewStyle) {
+          win.webContents.insertCSS(previewStyle)
+          win.webContents.insertCSS(appThemeCss)
+        }
+        // Do not show the window while exporting (for debugging purposes only)
+        // win.show()
+        setTimeout(() => {
+          // Send message to window to render the markdown content with the applied css and theme class
+          win.webContents.send('render-markdown-to-pdf', resultObj.contents, cssHrefs, generalThemeName)
+        }, 500)
+      })
+
+      // When PDF rendered, notify me (doing this only once removes it for further messages)
+      // this way no need to remove it manually after receving the message
+      // another click on PDF export would once again bind the current note markdown to HTML rendered page
+      ipcMain.once('pdf-notify-export-data', (_: object, data: string, error: any) => {
+        if (data && !error) {
+          // We got the PDF offer user to save it
+          const pdfName = `${sanitizeNoteName(note.title)}.pdf`
+          const pdfBlob = new Blob([data], {
+            type: "application/pdf" // application/octet-stream
+          })
+          downloadBlob(pdfBlob, pdfName)
+        } else {
+          pushMessage({
+            title: 'PDF export failed',
+            description: 'Please try again later.' + " Error: " + JSON.stringify(error),
+          })
+        }
+        // Close window (it's hidden anyway, but dispose it)
+        win.close()
+      })
+      return
+    })
+  return
+}
diff --git a/src/lib/styled/styleUtil.ts b/src/lib/styled/styleUtil.ts
@@ -0,0 +1,90 @@
+import { BaseTheme } from './BaseTheme'
+import { lightTheme } from '../../themes/light'
+import { legacyTheme } from '.'
+import { darkTheme } from '../../themes/dark'
+import { sepiaTheme } from '../../themes/sepia'
+import { solarizedDarkTheme } from '../../themes/solarizedDark'
+
+export const getGlobalCss = (theme: BaseTheme) => `body {
+        margin: 10px;
+        background-color: ${theme.backgroundColor};
+        color: ${theme.textColor};
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Fira sans', Roboto, Helvetica,
+        Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+        font-size: 15px;
+        font-weight: 400;
+      }
+
+      * {
+        box-sizing: border-box;
+        scrollbar-color: rgba(0, 0, 0, 0.12) #efe8d6; /* scrollbar style for firefox */
+      }
+
+      *:focus {
+        outline: none;
+      }
+
+      input, button {
+        font-size: 15px;
+      }
+
+      h1,h2,h3,h4,h5,h6 {
+        font-weight: 500;
+      }
+
+      b, strong {
+        font-weight: 700;
+      }
+
+      button,
+      input {
+        padding: 0;
+        outline: none;
+      }
+
+      a {
+        color: inherit;
+      }
+
+      th,
+      td {
+          background-color: ${theme.backgroundColor};
+      }
+
+      /* total width */
+      ::-webkit-scrollbar {
+        background-color: transparent;
+        width:12px;
+      }
+
+      /* background of the scrollbar except button or resizer */
+      ::-webkit-scrollbar-track {
+        background-color: ${theme.scrollBarTrackColor};
+      }
+
+      /* scrollbar itself */
+      ::-webkit-scrollbar-thumb {
+        background-color: ${theme.scrollBarThumbColor};
+      }
+
+      /* set button(top and bottom of the scrollbar) */
+      ::-webkit-scrollbar-button {
+        display: none
+      }
+    `
+
+export function selectTheme(theme: string): BaseTheme {
+  switch (theme) {
+    case 'legacy':
+      return legacyTheme
+    case 'light':
+      return lightTheme
+    case 'sepia':
+      return sepiaTheme
+    case 'solarizedDark':
+      return solarizedDarkTheme
+    case 'dark':
+    default:
+      return darkTheme
+  }
+};
diff --git a/static/render_md_to_pdf.html b/static/render_md_to_pdf.html
