refactor: migrate PDF export to desktop runtime abstraction
- Extract desktop-specific logic into src/services/desktop.ts - Add runtime detection for Electron vs Tauri environments - Simplify NoteEditor by delegating PDF export to desktop service - Update printExport.ts to remove unused storage helpers - Add Electron main process files in electron/ directory - Update vite config and types for Electron integration - Update .gitignore and package.json for Electron workflow
This commit is contained in:
drelich
14
src/App.tsx
14
src/App.tsx
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { lazy, Suspense, useEffect, useState } from 'react';
|
||||
import { LoginView } from './components/LoginView';
|
||||
import { NotesList } from './components/NotesList';
|
||||
import { NoteEditor } from './components/NoteEditor';
|
||||
@@ -9,9 +9,13 @@ import { syncManager, SyncStatus } from './services/syncManager';
|
||||
import { localDB } from './db/localDB';
|
||||
import { useOnlineStatus } from './hooks/useOnlineStatus';
|
||||
import { categoryColorsSync } from './services/categoryColorsSync';
|
||||
import { PrintView } from './components/PrintView';
|
||||
import { PRINT_EXPORT_QUERY_PARAM } from './printExport';
|
||||
|
||||
const LazyPrintView = lazy(async () => {
|
||||
const module = await import('./components/PrintView');
|
||||
return { default: module.PrintView };
|
||||
});
|
||||
|
||||
function MainApp() {
|
||||
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
||||
const [api, setApi] = useState<NextcloudAPI | null>(null);
|
||||
@@ -397,7 +401,11 @@ function App() {
|
||||
const printJobId = params.get(PRINT_EXPORT_QUERY_PARAM);
|
||||
|
||||
if (printJobId) {
|
||||
return <PrintView jobId={printJobId} />;
|
||||
return (
|
||||
<Suspense fallback={<div className="min-h-screen bg-gray-100 px-8 py-12 text-gray-900">Preparing print view...</div>}>
|
||||
<LazyPrintView jobId={printJobId} />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
return <MainApp />;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { fetch as tauriFetch } from '@tauri-apps/plugin-http';
|
||||
import { Note, APIConfig } from '../types';
|
||||
import { runtimeFetch } from '../services/runtimeFetch';
|
||||
|
||||
export class NextcloudAPI {
|
||||
private baseURL: string;
|
||||
@@ -16,7 +16,7 @@ export class NextcloudAPI {
|
||||
}
|
||||
|
||||
private async request<T>(path: string, options: RequestInit = {}): Promise<T> {
|
||||
const response = await fetch(`${this.baseURL}${path}`, {
|
||||
const response = await runtimeFetch(`${this.baseURL}${path}`, {
|
||||
...options,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
@@ -124,7 +124,7 @@ export class NextcloudAPI {
|
||||
const url = `${this.serverURL}${webdavPath}`;
|
||||
console.log(`[Note ${_noteId}] Fetching attachment via WebDAV:`, url);
|
||||
|
||||
const response = await tauriFetch(url, {
|
||||
const response = await runtimeFetch(url, {
|
||||
headers: {
|
||||
'Authorization': this.authHeader,
|
||||
},
|
||||
@@ -174,7 +174,7 @@ export class NextcloudAPI {
|
||||
// First, try to create the attachments directory (MKCOL)
|
||||
// This may fail if it already exists, which is fine
|
||||
try {
|
||||
await tauriFetch(`${this.serverURL}${webdavPath}/${attachmentDir}`, {
|
||||
await runtimeFetch(`${this.serverURL}${webdavPath}/${attachmentDir}`, {
|
||||
method: 'MKCOL',
|
||||
headers: {
|
||||
'Authorization': this.authHeader,
|
||||
@@ -188,7 +188,7 @@ export class NextcloudAPI {
|
||||
const arrayBuffer = await file.arrayBuffer();
|
||||
|
||||
// Upload the file via PUT
|
||||
const response = await tauriFetch(url, {
|
||||
const response = await runtimeFetch(url, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Authorization': this.authHeader,
|
||||
@@ -210,7 +210,7 @@ export class NextcloudAPI {
|
||||
const url = `${this.serverURL}${webdavPath}`;
|
||||
|
||||
try {
|
||||
const response = await tauriFetch(url, {
|
||||
const response = await runtimeFetch(url, {
|
||||
headers: {
|
||||
'Authorization': this.authHeader,
|
||||
},
|
||||
@@ -238,7 +238,7 @@ export class NextcloudAPI {
|
||||
|
||||
const content = JSON.stringify(colors, null, 2);
|
||||
|
||||
const response = await tauriFetch(url, {
|
||||
const response = await runtimeFetch(url, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Authorization': this.authHeader,
|
||||
@@ -281,7 +281,7 @@ export class NextcloudAPI {
|
||||
const webdavPath = `/remote.php/dav/files/${this.username}/Notes`;
|
||||
const url = `${this.serverURL}${webdavPath}`;
|
||||
|
||||
const response = await tauriFetch(url, {
|
||||
const response = await runtimeFetch(url, {
|
||||
method: 'PROPFIND',
|
||||
headers: {
|
||||
'Authorization': this.authHeader,
|
||||
@@ -361,7 +361,7 @@ export class NextcloudAPI {
|
||||
const webdavPath = `/remote.php/dav/files/${this.username}/Notes${categoryPath}/${encodeURIComponent(filename)}`;
|
||||
const url = `${this.serverURL}${webdavPath}`;
|
||||
|
||||
const response = await tauriFetch(url, {
|
||||
const response = await runtimeFetch(url, {
|
||||
headers: { 'Authorization': this.authHeader },
|
||||
});
|
||||
|
||||
@@ -383,7 +383,7 @@ export class NextcloudAPI {
|
||||
if (category) {
|
||||
try {
|
||||
const categoryUrl = `${this.serverURL}/remote.php/dav/files/${this.username}/Notes/${category}`;
|
||||
await tauriFetch(categoryUrl, {
|
||||
await runtimeFetch(categoryUrl, {
|
||||
method: 'MKCOL',
|
||||
headers: { 'Authorization': this.authHeader },
|
||||
});
|
||||
@@ -394,7 +394,7 @@ export class NextcloudAPI {
|
||||
|
||||
const noteContent = `${title}\n${content}`;
|
||||
|
||||
const response = await tauriFetch(url, {
|
||||
const response = await runtimeFetch(url, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Authorization': this.authHeader,
|
||||
@@ -451,7 +451,7 @@ export class NextcloudAPI {
|
||||
|
||||
const noteContent = this.formatNoteContent(note);
|
||||
|
||||
const response = await tauriFetch(url, {
|
||||
const response = await runtimeFetch(url, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Authorization': this.authHeader,
|
||||
@@ -482,7 +482,7 @@ export class NextcloudAPI {
|
||||
const oldPath = `/remote.php/dav/files/${this.username}/Notes${categoryPath}/${encodeURIComponent(note.filename!)}`;
|
||||
const newPath = `/remote.php/dav/files/${this.username}/Notes${categoryPath}/${encodeURIComponent(newFilename)}`;
|
||||
|
||||
const response = await tauriFetch(`${this.serverURL}${oldPath}`, {
|
||||
const response = await runtimeFetch(`${this.serverURL}${oldPath}`, {
|
||||
method: 'MOVE',
|
||||
headers: {
|
||||
'Authorization': this.authHeader,
|
||||
@@ -509,7 +509,7 @@ export class NextcloudAPI {
|
||||
const newAttachmentPath = `/remote.php/dav/files/${this.username}/Notes${categoryPath}/${newAttachmentFolder}`;
|
||||
|
||||
try {
|
||||
await tauriFetch(`${this.serverURL}${oldAttachmentPath}`, {
|
||||
await runtimeFetch(`${this.serverURL}${oldAttachmentPath}`, {
|
||||
method: 'MOVE',
|
||||
headers: {
|
||||
'Authorization': this.authHeader,
|
||||
@@ -535,7 +535,7 @@ export class NextcloudAPI {
|
||||
const webdavPath = `/remote.php/dav/files/${this.username}/Notes${categoryPath}/${encodeURIComponent(note.filename!)}`;
|
||||
const url = `${this.serverURL}${webdavPath}`;
|
||||
|
||||
const response = await tauriFetch(url, {
|
||||
const response = await runtimeFetch(url, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Authorization': this.authHeader },
|
||||
});
|
||||
@@ -560,7 +560,7 @@ export class NextcloudAPI {
|
||||
currentPath += (currentPath ? '/' : '') + part;
|
||||
try {
|
||||
const categoryUrl = `${this.serverURL}/remote.php/dav/files/${this.username}/Notes/${currentPath}`;
|
||||
await tauriFetch(categoryUrl, {
|
||||
await runtimeFetch(categoryUrl, {
|
||||
method: 'MKCOL',
|
||||
headers: { 'Authorization': this.authHeader },
|
||||
});
|
||||
@@ -570,7 +570,7 @@ export class NextcloudAPI {
|
||||
}
|
||||
}
|
||||
|
||||
const response = await tauriFetch(`${this.serverURL}${oldPath}`, {
|
||||
const response = await runtimeFetch(`${this.serverURL}${oldPath}`, {
|
||||
method: 'MOVE',
|
||||
headers: {
|
||||
'Authorization': this.authHeader,
|
||||
@@ -597,7 +597,7 @@ export class NextcloudAPI {
|
||||
console.log(` To: ${newAttachmentPath}`);
|
||||
|
||||
try {
|
||||
const attachmentResponse = await tauriFetch(`${this.serverURL}${oldAttachmentPath}`, {
|
||||
const attachmentResponse = await runtimeFetch(`${this.serverURL}${oldAttachmentPath}`, {
|
||||
method: 'MOVE',
|
||||
headers: {
|
||||
'Authorization': this.authHeader,
|
||||
|
||||
@@ -1,15 +1,17 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { marked } from 'marked';
|
||||
import { message } from '@tauri-apps/plugin-dialog';
|
||||
import { emitTo, listen } from '@tauri-apps/api/event';
|
||||
import { WebviewWindow } from '@tauri-apps/api/webviewWindow';
|
||||
import { Note } from '../types';
|
||||
import { NextcloudAPI } from '../api/nextcloud';
|
||||
import { FloatingToolbar } from './FloatingToolbar';
|
||||
import { InsertToolbar } from './InsertToolbar';
|
||||
import {
|
||||
exportPdfDocument,
|
||||
getDesktopRuntime,
|
||||
showDesktopMessage,
|
||||
} from '../services/desktop';
|
||||
import {
|
||||
getNoteTitleFromContent,
|
||||
PRINT_EXPORT_QUERY_PARAM,
|
||||
PrintExportPayload,
|
||||
sanitizeFileName,
|
||||
} from '../printExport';
|
||||
|
||||
@@ -51,6 +53,8 @@ export function NoteEditor({ note, onUpdateNote, onToggleFavorite, onUnsavedChan
|
||||
const previousNoteContentRef = useRef<string>('');
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const desktopRuntime = getDesktopRuntime();
|
||||
const exportActionLabel = desktopRuntime === 'electron' ? 'Export PDF' : 'Print Note';
|
||||
|
||||
useEffect(() => {
|
||||
onUnsavedChanges?.(hasUnsavedChanges);
|
||||
@@ -222,13 +226,6 @@ export function NoteEditor({ note, onUpdateNote, onToggleFavorite, onUnsavedChan
|
||||
if (!note) return;
|
||||
|
||||
setIsExportingPDF(true);
|
||||
const exportState: {
|
||||
printWindow: WebviewWindow | null;
|
||||
unlistenReady: (() => void) | null;
|
||||
} = {
|
||||
printWindow: null,
|
||||
unlistenReady: null,
|
||||
};
|
||||
|
||||
try {
|
||||
let contentForPrint = localContent;
|
||||
@@ -264,68 +261,22 @@ export function NoteEditor({ note, onUpdateNote, onToggleFavorite, onUnsavedChan
|
||||
|
||||
const title = getNoteTitleFromContent(localContent);
|
||||
const fileName = `${sanitizeFileName(title)}.pdf`;
|
||||
const jobId = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
|
||||
const windowLabel = `print-export-${jobId}`;
|
||||
const html = marked.parse(contentForPrint || '', { async: false }) as string;
|
||||
await new Promise<void>((resolve, reject) => {
|
||||
let settled = false;
|
||||
const timeoutId = window.setTimeout(() => {
|
||||
if (settled) return;
|
||||
settled = true;
|
||||
exportState.unlistenReady?.();
|
||||
reject(new Error('Print view initialization timed out.'));
|
||||
}, 10000);
|
||||
const noteHtml = marked.parse(contentForPrint || '', { async: false }) as string;
|
||||
const payload: PrintExportPayload = {
|
||||
fileName,
|
||||
title,
|
||||
html: noteHtml,
|
||||
previewFont,
|
||||
previewFontSize,
|
||||
};
|
||||
|
||||
listen<{ jobId: string }>('print-export-ready', (event) => {
|
||||
if (settled || event.payload.jobId !== jobId) return;
|
||||
|
||||
settled = true;
|
||||
window.clearTimeout(timeoutId);
|
||||
exportState.unlistenReady?.();
|
||||
|
||||
void emitTo(windowLabel, 'print-export-payload', {
|
||||
fileName,
|
||||
title,
|
||||
html,
|
||||
previewFont,
|
||||
previewFontSize,
|
||||
})
|
||||
.then(() => resolve())
|
||||
.catch(reject);
|
||||
})
|
||||
.then((unlisten) => {
|
||||
exportState.unlistenReady = unlisten;
|
||||
exportState.printWindow = new WebviewWindow(windowLabel, {
|
||||
url: `/?${PRINT_EXPORT_QUERY_PARAM}=${encodeURIComponent(jobId)}`,
|
||||
title: 'Opening Print Dialog',
|
||||
width: 960,
|
||||
height: 1100,
|
||||
center: true,
|
||||
visible: true,
|
||||
focus: true,
|
||||
skipTaskbar: true,
|
||||
resizable: false,
|
||||
parent: 'main',
|
||||
});
|
||||
|
||||
void exportState.printWindow.once('tauri://error', (event) => {
|
||||
if (settled) return;
|
||||
settled = true;
|
||||
window.clearTimeout(timeoutId);
|
||||
exportState.unlistenReady?.();
|
||||
reject(new Error(String(event.payload ?? 'Failed to create print window.')));
|
||||
});
|
||||
})
|
||||
.catch(reject);
|
||||
await exportPdfDocument({
|
||||
...payload,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('PDF export failed:', error);
|
||||
const pendingPrintWindow = exportState.printWindow;
|
||||
if (pendingPrintWindow) {
|
||||
void pendingPrintWindow.close().catch(() => undefined);
|
||||
}
|
||||
try {
|
||||
await message('Failed to open the print-to-PDF view. Please try again.', {
|
||||
await showDesktopMessage('Failed to export the PDF. Please try again.', {
|
||||
title: 'Export Failed',
|
||||
kind: 'error',
|
||||
});
|
||||
@@ -333,10 +284,6 @@ export function NoteEditor({ note, onUpdateNote, onToggleFavorite, onUnsavedChan
|
||||
console.error('Could not show error dialog');
|
||||
}
|
||||
} finally {
|
||||
const disposeReadyListener = exportState.unlistenReady;
|
||||
if (disposeReadyListener) {
|
||||
disposeReadyListener();
|
||||
}
|
||||
setIsExportingPDF(false);
|
||||
}
|
||||
};
|
||||
@@ -401,13 +348,13 @@ export function NoteEditor({ note, onUpdateNote, onToggleFavorite, onUnsavedChan
|
||||
setHasUnsavedChanges(true);
|
||||
}
|
||||
|
||||
await message(`Attachment uploaded successfully!`, {
|
||||
await showDesktopMessage('Attachment uploaded successfully!', {
|
||||
title: 'Upload Complete',
|
||||
kind: 'info',
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Upload failed:', error);
|
||||
await message(`Failed to upload attachment: ${error}`, {
|
||||
await showDesktopMessage(`Failed to upload attachment: ${error}`, {
|
||||
title: 'Upload Failed',
|
||||
kind: 'error',
|
||||
});
|
||||
@@ -719,13 +666,20 @@ export function NoteEditor({ note, onUpdateNote, onToggleFavorite, onUnsavedChan
|
||||
? 'text-blue-500 cursor-wait'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
title={isExportingPDF ? "Opening print dialog..." : "Print Note"}
|
||||
title={isExportingPDF ? `${exportActionLabel} in progress...` : exportActionLabel}
|
||||
>
|
||||
{isExportingPDF ? (
|
||||
<svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
) : desktopRuntime === 'electron' ? (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 16V4" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12l4 4 4-4" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 20h14" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 20v-2a1 1 0 011-1h8a1 1 0 011 1v2" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 9V4a1 1 0 011-1h10a1 1 0 011 1v5" />
|
||||
|
||||
@@ -7,10 +7,15 @@ export interface PrintExportPayload {
|
||||
}
|
||||
|
||||
export const PRINT_EXPORT_QUERY_PARAM = 'printJob';
|
||||
const PRINT_EXPORT_STORAGE_PREFIX = 'print-export:';
|
||||
|
||||
export const getPrintExportStorageKey = (jobId: string) =>
|
||||
`${PRINT_EXPORT_STORAGE_PREFIX}${jobId}`;
|
||||
const PRINT_DOCUMENT_CSP = [
|
||||
"default-src 'none'",
|
||||
"style-src 'unsafe-inline'",
|
||||
"img-src data: blob: https: http:",
|
||||
"font-src data:",
|
||||
"object-src 'none'",
|
||||
"base-uri 'none'",
|
||||
].join('; ');
|
||||
|
||||
export const getNoteTitleFromContent = (content: string) => {
|
||||
const firstLine = content
|
||||
@@ -26,3 +31,225 @@ export const sanitizeFileName = (name: string) =>
|
||||
.replace(/[\\/:*?"<>|]/g, '-')
|
||||
.replace(/\s+/g, ' ')
|
||||
.trim() || 'note';
|
||||
|
||||
const escapeHtml = (value: string) =>
|
||||
value
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
|
||||
const escapeFontFamily = (value: string) =>
|
||||
value.replace(/["\\]/g, '\\$&');
|
||||
|
||||
export const buildPrintDocument = (payload: PrintExportPayload) => {
|
||||
const fontFamily = `"${escapeFontFamily(payload.previewFont)}", Georgia, serif`;
|
||||
|
||||
return `<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta http-equiv="Content-Security-Policy" content="${PRINT_DOCUMENT_CSP}" />
|
||||
<title>${escapeHtml(payload.fileName)}</title>
|
||||
<style>
|
||||
:root {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #ffffff;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: ${fontFamily};
|
||||
font-size: ${payload.previewFontSize}px;
|
||||
line-height: 1.7;
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 18mm 16mm 18mm 16mm;
|
||||
}
|
||||
|
||||
article {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.print-note h1,
|
||||
.print-note h2,
|
||||
.print-note h3 {
|
||||
color: #020617;
|
||||
font-weight: 700;
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
.print-note h1 {
|
||||
font-size: 2em;
|
||||
line-height: 1.15;
|
||||
margin: 0 0 1.35em;
|
||||
letter-spacing: -0.015em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.print-note h2 {
|
||||
font-size: 1.55em;
|
||||
line-height: 1.2;
|
||||
margin: 1.25em 0 0.45em;
|
||||
}
|
||||
|
||||
.print-note h3 {
|
||||
font-size: 1.25em;
|
||||
line-height: 1.3;
|
||||
margin: 1.1em 0 0.4em;
|
||||
}
|
||||
|
||||
.print-note p {
|
||||
margin: 0 0 0.9em;
|
||||
}
|
||||
|
||||
.print-note ul,
|
||||
.print-note ol {
|
||||
margin: 0.75em 0 1em;
|
||||
padding-left: 1.7em;
|
||||
list-style-position: outside;
|
||||
}
|
||||
|
||||
.print-note ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.print-note ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.print-note li {
|
||||
margin: 0.28em 0;
|
||||
padding-left: 0.18em;
|
||||
}
|
||||
|
||||
.print-note li > p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.print-note li::marker {
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.print-note blockquote {
|
||||
margin: 1.15em 0;
|
||||
padding-left: 1em;
|
||||
border-left: 3px solid #cbd5e1;
|
||||
color: #475569;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.print-note blockquote > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.print-note blockquote > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.print-note pre {
|
||||
margin: 1.15em 0 1.3em;
|
||||
padding: 0.95em 1.05em;
|
||||
overflow-x: auto;
|
||||
border: 1px solid #dbe4f0;
|
||||
border-radius: 12px;
|
||||
background: #f5f7fb;
|
||||
color: #0f172a;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
.print-note pre code {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
font-size: 0.92em;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.print-note code {
|
||||
font-family: "SFMono-Regular", "SF Mono", "JetBrains Mono", "Fira Code", "Source Code Pro", Menlo, Consolas, monospace;
|
||||
font-size: 0.92em;
|
||||
padding: 0.08em 0.38em;
|
||||
border: 1px solid #dbe4f0;
|
||||
border-radius: 0.42em;
|
||||
background: #f5f7fb;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.print-note a {
|
||||
color: #2563eb;
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 0.08em;
|
||||
text-underline-offset: 0.14em;
|
||||
}
|
||||
|
||||
.print-note strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.print-note em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.print-note del {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.print-note hr {
|
||||
border: 0;
|
||||
border-top: 1px solid #cbd5e1;
|
||||
margin: 1.6em 0;
|
||||
}
|
||||
|
||||
.print-note img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin: 1.2em auto;
|
||||
border-radius: 12px;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
.print-note table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 1em 0 1.2em;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.print-note th,
|
||||
.print-note td {
|
||||
border: 1px solid #dbe4f0;
|
||||
padding: 0.5em 0.65em;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.print-note th {
|
||||
background: #f8fafc;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<article class="print-note">${payload.html}</article>
|
||||
</body>
|
||||
</html>`;
|
||||
};
|
||||
|
||||
139
src/services/desktop.ts
Normal file
139
src/services/desktop.ts
Normal file
@@ -0,0 +1,139 @@
|
||||
import {
|
||||
buildPrintDocument,
|
||||
PrintExportPayload,
|
||||
PRINT_EXPORT_QUERY_PARAM,
|
||||
} from '../printExport';
|
||||
|
||||
export interface DesktopMessageOptions {
|
||||
title?: string;
|
||||
kind?: 'info' | 'warning' | 'error';
|
||||
}
|
||||
|
||||
interface ExportPdfResult {
|
||||
canceled: boolean;
|
||||
filePath?: string;
|
||||
}
|
||||
|
||||
const isElectronRuntime = () =>
|
||||
typeof window !== 'undefined' && typeof window.electronDesktop !== 'undefined';
|
||||
|
||||
const isTauriRuntime = () =>
|
||||
typeof window !== 'undefined' &&
|
||||
(
|
||||
typeof (window as Window & { __TAURI__?: unknown }).__TAURI__ !== 'undefined' ||
|
||||
typeof (window as Window & { __TAURI_INTERNALS__?: unknown }).__TAURI_INTERNALS__ !== 'undefined'
|
||||
);
|
||||
|
||||
export const getDesktopRuntime = () => {
|
||||
if (isElectronRuntime()) return 'electron';
|
||||
if (isTauriRuntime()) return 'tauri';
|
||||
return 'browser';
|
||||
};
|
||||
|
||||
export const showDesktopMessage = async (
|
||||
messageText: string,
|
||||
options: DesktopMessageOptions = {}
|
||||
) => {
|
||||
if (window.electronDesktop) {
|
||||
await window.electronDesktop.showMessage({
|
||||
message: messageText,
|
||||
...options,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (isTauriRuntime()) {
|
||||
const { message } = await import('@tauri-apps/plugin-dialog');
|
||||
await message(messageText, options);
|
||||
return;
|
||||
}
|
||||
|
||||
window.alert(messageText);
|
||||
};
|
||||
|
||||
export const exportPdfDocument = async (
|
||||
payload: PrintExportPayload
|
||||
): Promise<ExportPdfResult> => {
|
||||
if (window.electronDesktop) {
|
||||
return window.electronDesktop.exportPdf({
|
||||
...payload,
|
||||
documentHtml: buildPrintDocument(payload),
|
||||
});
|
||||
}
|
||||
|
||||
if (isTauriRuntime()) {
|
||||
await exportPdfDocumentWithTauri(payload);
|
||||
return { canceled: false };
|
||||
}
|
||||
|
||||
throw new Error('PDF export is only available in a desktop runtime.');
|
||||
};
|
||||
|
||||
async function exportPdfDocumentWithTauri(payload: PrintExportPayload) {
|
||||
const [{ emitTo, listen }, { WebviewWindow }] = await Promise.all([
|
||||
import('@tauri-apps/api/event'),
|
||||
import('@tauri-apps/api/webviewWindow'),
|
||||
]);
|
||||
|
||||
const jobId = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
|
||||
const windowLabel = `print-export-${jobId}`;
|
||||
let printWindow: any = null;
|
||||
let unlistenReady: any = null;
|
||||
|
||||
try {
|
||||
await new Promise<void>((resolve, reject) => {
|
||||
let settled = false;
|
||||
const timeoutId = window.setTimeout(() => {
|
||||
if (settled) return;
|
||||
settled = true;
|
||||
unlistenReady?.();
|
||||
reject(new Error('Print view initialization timed out.'));
|
||||
}, 10000);
|
||||
|
||||
listen<{ jobId: string }>('print-export-ready', (event) => {
|
||||
if (settled || event.payload.jobId !== jobId) return;
|
||||
|
||||
settled = true;
|
||||
window.clearTimeout(timeoutId);
|
||||
unlistenReady?.();
|
||||
|
||||
void emitTo(windowLabel, 'print-export-payload', payload)
|
||||
.then(() => resolve())
|
||||
.catch(reject);
|
||||
})
|
||||
.then((unlisten) => {
|
||||
unlistenReady = unlisten;
|
||||
printWindow = new WebviewWindow(windowLabel, {
|
||||
url: `/?${PRINT_EXPORT_QUERY_PARAM}=${encodeURIComponent(jobId)}`,
|
||||
title: 'Opening Print Dialog',
|
||||
width: 960,
|
||||
height: 1100,
|
||||
center: true,
|
||||
visible: true,
|
||||
focus: true,
|
||||
skipTaskbar: true,
|
||||
resizable: false,
|
||||
parent: 'main',
|
||||
});
|
||||
|
||||
void printWindow.once('tauri://error', (event: { payload?: unknown }) => {
|
||||
if (settled) return;
|
||||
settled = true;
|
||||
window.clearTimeout(timeoutId);
|
||||
unlistenReady?.();
|
||||
reject(new Error(String(event.payload ?? 'Failed to create print window.')));
|
||||
});
|
||||
})
|
||||
.catch(reject);
|
||||
});
|
||||
} catch (error) {
|
||||
if (printWindow) {
|
||||
void printWindow.close().catch(() => undefined);
|
||||
}
|
||||
throw error;
|
||||
} finally {
|
||||
if (typeof unlistenReady === 'function') {
|
||||
unlistenReady();
|
||||
}
|
||||
}
|
||||
}
|
||||
155
src/services/runtimeFetch.ts
Normal file
155
src/services/runtimeFetch.ts
Normal file
@@ -0,0 +1,155 @@
|
||||
interface ElectronHttpRequest {
|
||||
url: string;
|
||||
method?: string;
|
||||
headers?: Record<string, string>;
|
||||
bodyText?: string;
|
||||
bodyBase64?: string;
|
||||
}
|
||||
|
||||
interface ElectronHttpResponse {
|
||||
ok: boolean;
|
||||
status: number;
|
||||
statusText: string;
|
||||
headers: Record<string, string>;
|
||||
bodyBase64: string;
|
||||
}
|
||||
|
||||
interface RuntimeResponse {
|
||||
ok: boolean;
|
||||
status: number;
|
||||
statusText: string;
|
||||
headers: {
|
||||
get(name: string): string | null;
|
||||
};
|
||||
text(): Promise<string>;
|
||||
json<T>(): Promise<T>;
|
||||
arrayBuffer(): Promise<ArrayBuffer>;
|
||||
blob(): Promise<Blob>;
|
||||
}
|
||||
|
||||
const textDecoder = new TextDecoder();
|
||||
|
||||
const bytesToBase64 = (bytes: Uint8Array) => {
|
||||
let binary = '';
|
||||
|
||||
for (let index = 0; index < bytes.length; index += 0x8000) {
|
||||
const chunk = bytes.subarray(index, index + 0x8000);
|
||||
binary += String.fromCharCode(...chunk);
|
||||
}
|
||||
|
||||
return btoa(binary);
|
||||
};
|
||||
|
||||
const base64ToBytes = (value: string) => {
|
||||
if (!value) {
|
||||
return new Uint8Array(0);
|
||||
}
|
||||
|
||||
const binary = atob(value);
|
||||
const bytes = new Uint8Array(binary.length);
|
||||
|
||||
for (let index = 0; index < binary.length; index += 1) {
|
||||
bytes[index] = binary.charCodeAt(index);
|
||||
}
|
||||
|
||||
return bytes;
|
||||
};
|
||||
|
||||
const normalizeHeaders = (headers: Record<string, string>) => {
|
||||
const normalized = new Map<string, string>();
|
||||
|
||||
for (const [key, value] of Object.entries(headers)) {
|
||||
normalized.set(key.toLowerCase(), value);
|
||||
}
|
||||
|
||||
return normalized;
|
||||
};
|
||||
|
||||
const createRuntimeResponse = (response: ElectronHttpResponse): RuntimeResponse => {
|
||||
const headers = normalizeHeaders(response.headers);
|
||||
const bytes = base64ToBytes(response.bodyBase64);
|
||||
const contentType = headers.get('content-type') || '';
|
||||
|
||||
return {
|
||||
ok: response.ok,
|
||||
status: response.status,
|
||||
statusText: response.statusText,
|
||||
headers: {
|
||||
get(name: string) {
|
||||
return headers.get(name.toLowerCase()) ?? null;
|
||||
},
|
||||
},
|
||||
async text() {
|
||||
return textDecoder.decode(bytes);
|
||||
},
|
||||
async json<T>() {
|
||||
return JSON.parse(textDecoder.decode(bytes)) as T;
|
||||
},
|
||||
async arrayBuffer() {
|
||||
return bytes.buffer.slice(
|
||||
bytes.byteOffset,
|
||||
bytes.byteOffset + bytes.byteLength,
|
||||
) as ArrayBuffer;
|
||||
},
|
||||
async blob() {
|
||||
return new Blob([bytes], { type: contentType });
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const headersToObject = (headers?: HeadersInit) => {
|
||||
if (!headers) {
|
||||
return {};
|
||||
}
|
||||
|
||||
return Object.fromEntries(new Headers(headers).entries());
|
||||
};
|
||||
|
||||
const serializeBody = async (body?: BodyInit | null) => {
|
||||
if (body == null) {
|
||||
return {};
|
||||
}
|
||||
|
||||
if (typeof body === 'string') {
|
||||
return { bodyText: body };
|
||||
}
|
||||
|
||||
if (body instanceof ArrayBuffer) {
|
||||
return { bodyBase64: bytesToBase64(new Uint8Array(body)) };
|
||||
}
|
||||
|
||||
if (ArrayBuffer.isView(body)) {
|
||||
return {
|
||||
bodyBase64: bytesToBase64(
|
||||
new Uint8Array(body.buffer, body.byteOffset, body.byteLength),
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
if (body instanceof Blob) {
|
||||
return {
|
||||
bodyBase64: bytesToBase64(new Uint8Array(await body.arrayBuffer())),
|
||||
};
|
||||
}
|
||||
|
||||
throw new Error('Unsupported request body for Electron runtime.');
|
||||
};
|
||||
|
||||
export const runtimeFetch = async (
|
||||
url: string,
|
||||
init: RequestInit = {},
|
||||
): Promise<Response | RuntimeResponse> => {
|
||||
if (!window.electronDesktop?.httpRequest) {
|
||||
return fetch(url, init);
|
||||
}
|
||||
|
||||
const payload: ElectronHttpRequest = {
|
||||
url,
|
||||
method: init.method,
|
||||
headers: headersToObject(init.headers),
|
||||
...(await serializeBody(init.body)),
|
||||
};
|
||||
|
||||
const response = await window.electronDesktop.httpRequest(payload);
|
||||
return createRuntimeResponse(response);
|
||||
};
|
||||
45
src/vite-env.d.ts
vendored
45
src/vite-env.d.ts
vendored
@@ -1 +1,46 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
interface ElectronDesktopMessageOptions {
|
||||
message: string;
|
||||
title?: string;
|
||||
kind?: 'info' | 'warning' | 'error';
|
||||
}
|
||||
|
||||
interface ElectronDesktopExportPayload {
|
||||
fileName: string;
|
||||
title: string;
|
||||
html: string;
|
||||
previewFont: string;
|
||||
previewFontSize: number;
|
||||
documentHtml: string;
|
||||
}
|
||||
|
||||
interface ElectronDesktopExportResult {
|
||||
canceled: boolean;
|
||||
filePath?: string;
|
||||
}
|
||||
|
||||
interface ElectronDesktopHttpRequest {
|
||||
url: string;
|
||||
method?: string;
|
||||
headers?: Record<string, string>;
|
||||
bodyText?: string;
|
||||
bodyBase64?: string;
|
||||
}
|
||||
|
||||
interface ElectronDesktopHttpResponse {
|
||||
ok: boolean;
|
||||
status: number;
|
||||
statusText: string;
|
||||
headers: Record<string, string>;
|
||||
bodyBase64: string;
|
||||
}
|
||||
|
||||
interface Window {
|
||||
electronDesktop?: {
|
||||
showMessage: (options: ElectronDesktopMessageOptions) => Promise<void>;
|
||||
exportPdf: (payload: ElectronDesktopExportPayload) => Promise<ElectronDesktopExportResult>;
|
||||
httpRequest: (payload: ElectronDesktopHttpRequest) => Promise<ElectronDesktopHttpResponse>;
|
||||
getRuntime: () => 'electron';
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user