Add PDF note export for desktop and web

Author: adibhanna

apps/desktop/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zennotes/desktop",
   "productName": "ZenNotes",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "ZenNotes desktop shell",
   "private": true,
   "main": "./out/main/index.js",

apps/desktop/src/main/index.ts

@@ -766,6 +766,124 @@ async function disconnectRemoteWorkspace(): Promise<VaultInfo | null> {
   return null
 }
 
+function noteTitleFromRelPath(relPath: string): string {
+  const base = path.posix.basename(relPath)
+  return base.replace(/\.md$/i, '') || 'Note'
+}
+
+function sanitizePdfFilename(name: string): string {
+  const sanitized = name
+    .replace(/[<>:"/\\|?*\x00-\x1f]/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+  return sanitized || 'Note'
+}
+
+function ensurePdfExtension(targetPath: string): string {
+  return targetPath.toLowerCase().endsWith('.pdf') ? targetPath : `${targetPath}.pdf`
+}
+
+async function waitForExportWindowState(
+  win: BrowserWindow,
+  timeoutMs = 15000
+): Promise<void> {
+  const startedAt = Date.now()
+  while (!win.isDestroyed()) {
+    const state = await win.webContents.executeJavaScript(
+      'document.body?.dataset.exportState ?? ""',
+      true
+    )
+    if (state === 'ready') return
+    if (state === 'error') {
+      const message = await win.webContents.executeJavaScript(
+        'document.body?.dataset.exportError ?? "The export renderer reported an error."',
+        true
+      )
+      throw new Error(typeof message === 'string' ? message : 'The export renderer reported an error.')
+    }
+    if (Date.now() - startedAt >= timeoutMs) {
+      throw new Error('Timed out while preparing the note preview for PDF export.')
+    }
+    await new Promise((resolve) => setTimeout(resolve, 100))
+  }
+  throw new Error('The export window closed before PDF export completed.')
+}
+
+async function exportNotePdf(
+  relPath: string,
+  parentWindow: BrowserWindow | null | undefined
+): Promise<string | null> {
+  const current = currentVault ?? (isRemoteWorkspaceActive() ? await requireRemoteWorkspaceClient().getCurrentVault() : null)
+  if (!current) {
+    throw new Error('No active vault is available for PDF export.')
+  }
+
+  const suggestedName = `${sanitizePdfFilename(noteTitleFromRelPath(relPath))}.pdf`
+  const result = await dialog.showSaveDialog(parentWindow ?? undefined, {
+    title: 'Export Note as PDF',
+    defaultPath: path.join(app.getPath('documents'), suggestedName),
+    buttonLabel: 'Export PDF',
+    filters: [{ name: 'PDF', extensions: ['pdf'] }]
+  })
+  if (result.canceled || !result.filePath) return null
+
+  const targetPath = ensurePdfExtension(result.filePath)
+  const mac = isMac()
+  const exportWindow = new BrowserWindow({
+    width: 1024,
+    height: 1400,
+    show: false,
+    autoHideMenuBar: true,
+    titleBarStyle: mac ? 'hiddenInset' : 'hidden',
+    trafficLightPosition: { x: 12, y: 12 },
+    ...(mac
+      ? {
+          backgroundColor: '#ffffff'
+        }
+      : {
+          backgroundColor: '#ffffff',
+          icon: windowIconPath()
+        }),
+    webPreferences: {
+      preload: path.join(__dirname, '../preload/index.js'),
+      sandbox: false,
+      contextIsolation: true,
+      nodeIntegration: false
+    }
+  })
+
+  try {
+    installNavigationGuards(exportWindow)
+    applyZoomFactor(exportWindow, currentZoomFactor)
+    const params = `?exportNote=${encodeURIComponent(relPath)}`
+    const devServerUrl = process.env['ELECTRON_RENDERER_URL']
+    if (devServerUrl) {
+      await exportWindow.loadURL(`${devServerUrl}${params}`)
+    } else {
+      await exportWindow.loadFile(path.join(__dirname, '../renderer/index.html'), {
+        search: params.slice(1)
+      })
+    }
+
+    await waitForExportWindowState(exportWindow)
+    await exportWindow.webContents.executeJavaScript(
+      'document.fonts ? document.fonts.ready.then(() => true) : Promise.resolve(true)',
+      true
+    )
+    const pdf = await exportWindow.webContents.printToPDF({
+      printBackground: true,
+      preferCSSPageSize: true
+    })
+    await fsp.mkdir(path.dirname(targetPath), { recursive: true })
+    await fsp.writeFile(targetPath, pdf)
+    return targetPath
+  } finally {
+    if (!exportWindow.isDestroyed()) {
+      exportWindow.destroy()
+    }
+  }
+}
+
 async function listRemoteWorkspaceProfiles(): Promise<RemoteWorkspaceProfile[]> {
   const cfg = await loadConfig()
   return await Promise.all(
@@ -1346,6 +1464,10 @@ function registerIpc(): void {
     return await duplicateNote(v.root, relPath)
   })
 
+  handle(IPC.VAULT_EXPORT_NOTE_PDF, async (event, relPath: string) => {
+    return await exportNotePdf(relPath, BrowserWindow.fromWebContents(event.sender))
+  })
+
   handle(IPC.VAULT_REVEAL_NOTE, async (_e, relPath: string) => {
     if (isRemoteWorkspaceActive()) {
       throw new Error('Reveal in file manager is only available for local vaults.')

apps/desktop/src/preload/index.ts

@@ -241,6 +241,8 @@ const api: ZenBridge = {
     ipcRenderer.invoke(IPC.VAULT_UNARCHIVE_NOTE, relPath),
   duplicateNote: (relPath: string): Promise<NoteMeta> =>
     ipcRenderer.invoke(IPC.VAULT_DUPLICATE_NOTE, relPath),
+  exportNotePdf: (relPath: string): Promise<string | null> =>
+    ipcRenderer.invoke(IPC.VAULT_EXPORT_NOTE_PDF, relPath),
   revealNote: (relPath: string): Promise<void> => ipcRenderer.invoke(IPC.VAULT_REVEAL_NOTE, relPath),
   moveNote: (
     relPath: string,

apps/desktop/src/renderer/export-window.tsx

@@ -0,0 +1,237 @@
+import React, { useEffect, useState } from 'react'
+import ReactDOM from 'react-dom/client'
+import type { AssetMeta, NoteContent, NoteMeta, VaultInfo } from '@shared/ipc'
+import { Preview } from '@renderer/components/Preview'
+import { useStore } from '@renderer/store'
+import '@renderer/styles/index.css'
+
+const PREFS_KEY = 'zen:prefs:v2'
+
+type ExportPrefs = {
+  editorFontSize: number
+  editorLineHeight: number
+  previewMaxWidth: number
+  editorMaxWidth: number
+  contentAlign: 'center' | 'left'
+  interfaceFont: string | null
+  textFont: string | null
+  monoFont: string | null
+}
+
+const DEFAULT_EXPORT_PREFS: ExportPrefs = {
+  editorFontSize: 16,
+  editorLineHeight: 1.7,
+  previewMaxWidth: 920,
+  editorMaxWidth: 920,
+  contentAlign: 'center',
+  interfaceFont: null,
+  textFont: null,
+  monoFont: null
+}
+
+function setExportState(state: 'loading' | 'ready' | 'error', message?: string): void {
+  if (!document.body) return
+  document.body.dataset.exportState = state
+  if (message) document.body.dataset.exportError = message
+  else delete document.body.dataset.exportError
+}
+
+function safeString(value: unknown): string | null {
+  return typeof value === 'string' && value.trim() ? value : null
+}
+
+function safeNumber(value: unknown, fallback: number): number {
+  return typeof value === 'number' && Number.isFinite(value) ? value : fallback
+}
+
+function loadExportPrefs(): ExportPrefs {
+  try {
+    const raw = window.localStorage.getItem(PREFS_KEY)
+    if (!raw) return DEFAULT_EXPORT_PREFS
+    const parsed = JSON.parse(raw) as Record<string, unknown>
+    const contentAlign = parsed.contentAlign === 'left' ? 'left' : 'center'
+    return {
+      editorFontSize: safeNumber(parsed.editorFontSize, DEFAULT_EXPORT_PREFS.editorFontSize),
+      editorLineHeight: safeNumber(parsed.editorLineHeight, DEFAULT_EXPORT_PREFS.editorLineHeight),
+      previewMaxWidth: safeNumber(parsed.previewMaxWidth, DEFAULT_EXPORT_PREFS.previewMaxWidth),
+      editorMaxWidth: safeNumber(parsed.editorMaxWidth, DEFAULT_EXPORT_PREFS.editorMaxWidth),
+      contentAlign,
+      interfaceFont: safeString(parsed.interfaceFont),
+      textFont: safeString(parsed.textFont),
+      monoFont: safeString(parsed.monoFont)
+    }
+  } catch {
+    return DEFAULT_EXPORT_PREFS
+  }
+}
+
+function applyExportPrefs(prefs: ExportPrefs): void {
+  const html = document.documentElement
+  html.dataset.theme = 'github-light'
+  html.dataset.contentAlign = prefs.contentAlign
+  html.setAttribute('data-opaque', '')
+  html.style.colorScheme = 'light'
+  html.style.setProperty('--z-editor-font-size', `${prefs.editorFontSize}px`)
+  html.style.setProperty('--z-editor-line-height', String(prefs.editorLineHeight))
+  html.style.setProperty('--z-preview-max-width', `${prefs.previewMaxWidth}px`)
+  html.style.setProperty('--z-editor-max-width', `${prefs.editorMaxWidth}px`)
+
+  const setFont = (name: string, value: string | null, fallback: string): void => {
+    if (value) html.style.setProperty(name, `"${value}", ${fallback}`)
+    else html.style.removeProperty(name)
+  }
+  setFont(
+    '--z-interface-font',
+    prefs.interfaceFont,
+    '-apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif'
+  )
+  setFont(
+    '--z-text-font',
+    prefs.textFont,
+    '"SF Mono", "SFMono-Regular", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace'
+  )
+  setFont(
+    '--z-mono-font',
+    prefs.monoFont,
+    '"SF Mono", "SFMono-Regular", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace'
+  )
+}
+
+function ExportNoteWindow({ notePath }: { notePath: string }): JSX.Element {
+  const [note, setNote] = useState<NoteContent | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    applyExportPrefs(loadExportPrefs())
+    setExportState('loading')
+
+    let cancelled = false
+
+    const load = async (): Promise<void> => {
+      try {
+        const [vault, notes, assetFiles, noteContent] = await Promise.all([
+          window.zen.getCurrentVault(),
+          window.zen.listNotes(),
+          window.zen.listAssets(),
+          window.zen.readNote(notePath)
+        ])
+        if (cancelled) return
+        if (!vault) {
+          throw new Error('No active vault was available for PDF export.')
+        }
+
+        useStore.setState({
+          vault: vault as VaultInfo,
+          notes: notes as NoteMeta[],
+          assetFiles: assetFiles as AssetMeta[],
+          selectedPath: noteContent.path,
+          activeNote: noteContent
+        })
+        document.title = noteContent.title
+        setNote(noteContent)
+      } catch (err) {
+        if (cancelled) return
+        const message = err instanceof Error ? err.message : String(err)
+        setError(message)
+        setExportState('error', message)
+      }
+    }
+
+    void load()
+
+    return () => {
+      cancelled = true
+    }
+  }, [notePath])
+
+  if (error) {
+    return (
+      <main className="min-h-screen bg-[color:rgb(var(--z-bg))] px-10 py-12 text-[color:rgb(var(--z-fg))]">
+        <div className="mx-auto max-w-3xl rounded-2xl border border-[color:rgb(var(--z-red)/0.35)] bg-[color:rgb(var(--z-bg-1))] px-6 py-5">
+          <h1 className="text-xl font-semibold text-[color:rgb(var(--z-red))]">PDF export failed</h1>
+          <p className="mt-3 whitespace-pre-wrap text-sm leading-7 text-[color:rgb(var(--z-fg-2))]">
+            {error}
+          </p>
+        </div>
+      </main>
+    )
+  }
+
+  if (!note) {
+    return (
+      <main className="min-h-screen bg-[color:rgb(var(--z-bg))] px-10 py-12 text-[color:rgb(var(--z-fg))]">
+        <div className="mx-auto max-w-3xl rounded-2xl border border-[color:rgb(var(--z-bg-3))] bg-[color:rgb(var(--z-bg-1))] px-6 py-5">
+          <p className="text-sm leading-7 text-[color:rgb(var(--z-fg-2))]">Preparing note export…</p>
+        </div>
+      </main>
+    )
+  }
+
+  return (
+    <>
+      <style>{`
+        @page {
+          margin: 0.7in;
+        }
+        html,
+        body,
+        #root {
+          height: auto !important;
+          min-height: 0 !important;
+          overflow: visible !important;
+          background: #ffffff !important;
+        }
+        body,
+        #root {
+          display: block !important;
+          margin: 0 !important;
+          padding: 0 !important;
+        }
+        body {
+          user-select: text !important;
+        }
+        .export-note-shell {
+          min-height: auto;
+          width: 100%;
+          overflow: visible;
+          background: #ffffff;
+          color: rgb(var(--z-fg));
+        }
+        .export-note-shell .prose-zen {
+          padding: 32px 40px 48px;
+        }
+        @media print {
+          html,
+          body,
+          #root {
+            height: auto !important;
+            min-height: 0 !important;
+            overflow: visible !important;
+            background: #ffffff !important;
+          }
+          .export-note-shell {
+            min-height: auto;
+            overflow: visible;
+          }
+          .export-note-shell .prose-zen {
+            max-width: none;
+            width: 100%;
+            padding: 0;
+            margin: 0;
+          }
+        }
+      `}</style>
+      <main className="export-note-shell">
+        <Preview
+          markdown={note.body}
+          notePath={note.path}
+          onRendered={() => setExportState('ready')}
+        />
+      </main>
+    </>
+  )
+}
+
+export function renderExportNoteWindow(root: HTMLElement, notePath: string): void {
+  ReactDOM.createRoot(root).render(<ExportNoteWindow notePath={notePath} />)
+}