perf(preview): typeset only the active chapter in live preview

This commit is contained in:
pj committed 2026-06-20 19:03:46 -04:00
1 parent 29e8842847
commit bfba86a01b
1 file changed
+5 -3
+5 -3
View File
@@ -3,7 +3,7 @@ import { generateHTML } from "@tiptap/core";
import { useBook } from "../store/useBook"; import { useBook } from "../store/useBook";
import type { TrimSize } from "../model/book"; import type { TrimSize } from "../model/book";
import { editorExtensions } from "../editor/extensions"; import { editorExtensions } from "../editor/extensions";
import { bookToPdfInputs } from "../export/typst"; import { chapterToPdfInputs } from "../export/typst";
import { compilePdf, isDesktop } from "../ipc"; import { compilePdf, isDesktop } from "../ipc";
import { PdfPreview } from "./PdfPreview"; import { PdfPreview } from "./PdfPreview";
@@ -39,6 +39,7 @@ export function Dock() {
function PdfDock() { function PdfDock() {
const book = useBook((s) => s.book); const book = useBook((s) => s.book);
const activeChapterId = useBook((s) => s.activeChapterId);
const [pdf, setPdf] = useState<Uint8Array | null>(null); const [pdf, setPdf] = useState<Uint8Array | null>(null);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [busy, setBusy] = useState(false); const [busy, setBusy] = useState(false);
@@ -46,10 +47,11 @@ function PdfDock() {
useEffect(() => { useEffect(() => {
if (!book) return; if (!book) return;
const idx = Math.max(0, book.chapters.findIndex((c) => c.id === activeChapterId));
clearTimeout(timer.current); clearTimeout(timer.current);
setBusy(true); setBusy(true);
timer.current = setTimeout(() => { timer.current = setTimeout(() => {
const { source, images } = bookToPdfInputs(book); const { source, images } = chapterToPdfInputs(book, idx);
compilePdf(source, images) compilePdf(source, images)
.then((bytes) => { .then((bytes) => {
setPdf(bytes); setPdf(bytes);
@@ -59,7 +61,7 @@ function PdfDock() {
.finally(() => setBusy(false)); .finally(() => setBusy(false));
}, 350); }, 350);
return () => clearTimeout(timer.current); return () => clearTimeout(timer.current);
}, [book]); }, [book, activeChapterId]);
return ( return (
<section className="dock"> <section className="dock">