feat(export): Chunk #6 Export Pipeline — 7 exporters, ExportDialog & tests
Add the @pubscript/exporters package exporting a flattened ProseMirror project to Markdown, HTML, EPUB, DOCX, ODT and PDF, plus a deterministic generatedAt timestamp threaded through every format (ZIP entry dates, PDF /ID, DOCX dc:created/modified, EPUB id, HTML/XML footers) so golden files are byte-stable. Wire an ExportDialog into the web app (Topbar trigger, App route) with format selection, theme pick, and download helpers. Add round-trip and golden-file determinism tests (22) covering non-empty output, byte-identical re-exports, Markdown round-trip through the editor, and EPUB/ODT ZIP + mimetype + XML validation.
This commit is contained in:
Schwitzz
@@ -0,0 +1,190 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { Modal, Button } from "@pubscript/ui";
|
||||
import {
|
||||
THEMES,
|
||||
exportProjectData,
|
||||
type ExportFormat,
|
||||
} from "@pubscript/exporters";
|
||||
import { useProjectStore } from "../../store/project-store.js";
|
||||
import { buildExportProject } from "./buildExportProject.js";
|
||||
import { downloadFile } from "./download.js";
|
||||
import { EXPORT_FORMATS, type FormatInfo } from "./formats.js";
|
||||
|
||||
export interface ExportDialogProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
type Scope = "project" | "chapter";
|
||||
|
||||
/** Collapse a string into a filesystem-safe slug. */
|
||||
function slug(value: string): string {
|
||||
return value
|
||||
.trim()
|
||||
.replace(/[^\w-]+/g, "-")
|
||||
.replace(/-+/g, "-")
|
||||
.replace(/^-+|-+$/g, "")
|
||||
.slice(0, 60) || "project";
|
||||
}
|
||||
|
||||
export function ExportDialog({ open, onClose }: ExportDialogProps) {
|
||||
const adapter = useProjectStore((s) => s.adapter);
|
||||
const projectId = useProjectStore((s) => s.project?.projectId);
|
||||
const chapters = useProjectStore((s) => s.chapters);
|
||||
|
||||
const [format, setFormat] = useState<ExportFormat>("markdown");
|
||||
const [themeId, setThemeId] = useState("ink");
|
||||
const [scope, setScope] = useState<Scope>("project");
|
||||
const [chapterId, setChapterId] = useState<string>("");
|
||||
const [books, setBooks] = useState<{ id: string; title: string }[]>([]);
|
||||
const [exporting, setExporting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Populate the book/chapter selectors when the dialog opens.
|
||||
useEffect(() => {
|
||||
if (!open || !adapter || !projectId) return;
|
||||
let active = true;
|
||||
void (async () => {
|
||||
const allBooks = await adapter.listBooks(projectId);
|
||||
if (!active) return;
|
||||
setBooks(allBooks);
|
||||
// Resolve the first chapter across books so the selector has a default.
|
||||
let firstChapterId = "";
|
||||
for (const book of allBooks) {
|
||||
const cs = await adapter.listChapters(book.id);
|
||||
const first = cs[0];
|
||||
if (first) {
|
||||
firstChapterId = first.id;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!active) return;
|
||||
setChapterId(firstChapterId);
|
||||
})();
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
}, [open, adapter, projectId]);
|
||||
|
||||
const chapterOptions = useMemo(() => {
|
||||
const byBook = new Map<string, { id: string; title: string }[]>();
|
||||
for (const book of books) {
|
||||
byBook.set(book.id, chapters.filter((c) => c.bookId === book.id));
|
||||
}
|
||||
return byBook;
|
||||
}, [books, chapters]);
|
||||
|
||||
const formatInfo: FormatInfo | undefined = useMemo(
|
||||
() => EXPORT_FORMATS.find((f) => f.id === format),
|
||||
[format]
|
||||
);
|
||||
|
||||
const handleExport = async () => {
|
||||
if (!adapter || !projectId) return;
|
||||
setExporting(true);
|
||||
setError(null);
|
||||
try {
|
||||
const project = await buildExportProject(adapter, projectId);
|
||||
const options: Parameters<typeof exportProjectData>[2] = {
|
||||
scope: scope === "chapter" ? "chapter" : "project",
|
||||
theme: themeId,
|
||||
};
|
||||
if (scope === "chapter") options.scopeId = chapterId;
|
||||
const data = await exportProjectData(project, format, options);
|
||||
const ext = formatInfo?.extension ?? "bin";
|
||||
downloadFile(`${slug(projectId)}.${ext}`, data, formatInfo?.mime ?? "application/octet-stream");
|
||||
onClose();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : String(err));
|
||||
} finally {
|
||||
setExporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title="Export project"
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
footer={
|
||||
<>
|
||||
<Button variant="ghost" onClick={onClose} disabled={exporting}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleExport} disabled={exporting || !formatInfo}>
|
||||
{exporting ? "Exporting…" : "Export"}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="ps-export-grid">
|
||||
<label className="ps-export-field">
|
||||
<span>Format</span>
|
||||
<select
|
||||
className="ps-select"
|
||||
value={format}
|
||||
onChange={(e) => setFormat(e.target.value as ExportFormat)}
|
||||
disabled={exporting}
|
||||
>
|
||||
{EXPORT_FORMATS.map((f) => (
|
||||
<option key={f.id} value={f.id}>
|
||||
{f.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="ps-export-field">
|
||||
<span>Theme</span>
|
||||
<select
|
||||
className="ps-select"
|
||||
value={themeId}
|
||||
onChange={(e) => setThemeId(e.target.value)}
|
||||
disabled={exporting}
|
||||
>
|
||||
{Object.entries(THEMES).map(([id, t]) => (
|
||||
<option key={id} value={id}>
|
||||
{t.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="ps-export-field">
|
||||
<span>Scope</span>
|
||||
<select
|
||||
className="ps-select"
|
||||
value={scope}
|
||||
onChange={(e) => setScope(e.target.value as Scope)}
|
||||
disabled={exporting}
|
||||
>
|
||||
<option value="project">Entire book</option>
|
||||
<option value="chapter">Selected chapter</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{scope === "chapter" && (
|
||||
<label className="ps-export-field">
|
||||
<span>Chapter</span>
|
||||
<select
|
||||
className="ps-select"
|
||||
value={chapterId}
|
||||
onChange={(e) => setChapterId(e.target.value)}
|
||||
disabled={exporting || chapterOptions.size === 0}
|
||||
>
|
||||
{Array.from(chapterOptions.values()).flatMap((cs) =>
|
||||
cs.map((c) => (
|
||||
<option key={c.id} value={c.id}>
|
||||
{c.title}
|
||||
</option>
|
||||
))
|
||||
)}
|
||||
</select>
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && <p className="ps-export-error" role="alert">{error}</p>}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user