mosage 0.2.0 → 0.8.0

package/src/app/lib/export-docx.ts

@@ -0,0 +1,289 @@
+/**
+ * The document as a Word file Word can reflow.
+ *
+ * A PDF reproduces the sheets; a .docx must not, or the first edit breaks it.
+ * So every flow section is laid out again as one continuous column — no page
+ * breaks, no repeated footers, no top margins stripped at the head of a sheet —
+ * with each block still answering as the sheet it printed on, and that copy is
+ * scanned and read.
+ */
+
+import { createElement, type ReactNode } from 'react';
+import { FlowPage } from '../components/flow-page';
+import { defaultDesign } from './design';
+import { type ExtractSource, extractDocument } from './docx/extract';
+import { halfPoints, twipsFromMm } from './docx/units';
+import { DOCX_MIME, writeDocx } from './docx/write';
+import { collectCss, downloadBundle, type FileBundle, mountOffscreen, pacer } from './export-dom';
+import { designDeclarations, htmlToSvg, inlineAssets, rasterise } from './rasterize';
+import { type DocModule, resolvePageGeometry } from './sdk';
+import type { ExpandedPage, FlowSlice } from './use-doc-pages';
+
+export type DocxExportProgress = {
+  phase: 'rendering' | 'reading' | 'writing' | 'done';
+  percent: number;
+};
+
+/**
+ * Page numbers no real footer prints. A running footer is drawn once more with
+ * these, and each one becomes a PAGE or NUMPAGES field.
+ */
+const SENTINELS = { page: 38271, count: 69154 };
+
+type FlowGroup = FlowSlice & {
+  kind: 'flow';
+  index: number;
+  /** How many sheets the section printed on. */
+  pages: number;
+  /** Block index → the sheet it printed on. */
+  sheets: Map<number, number>;
+};
+
+type Group = { kind: 'fixed'; index: number; page: ExpandedPage } | FlowGroup;
+
+/** Consecutive sheets of one flow section become one run of blocks again. */
+function groupPages(pages: ExpandedPage[]): Group[] {
+  const groups: Group[] = [];
+  pages.forEach((page, index) => {
+    const slice = page.flow;
+    if (!slice) {
+      groups.push({ kind: 'fixed', index, page });
+      return;
+    }
+    const last = groups[groups.length - 1];
+    let group: FlowGroup;
+    if (last?.kind === 'flow' && last.entry === slice.entry) {
+      group = last;
+    } else {
+      group = {
+        ...slice,
+        kind: 'flow',
+        index,
+        pages: 0,
+        blockIndices: [],
+        notes: [],
+        sheets: new Map(),
+      };
+      groups.push(group);
+    }
+    group.pages += 1;
+    group.blockIndices.push(...slice.blockIndices);
+    group.notes.push(...slice.notes);
+    for (const block of slice.blockIndices) group.sheets.set(block, index);
+  });
+  return groups;
+}
+
+function mountCopy(doc: DocModule, pages: ExpandedPage[], onProgress: (percent: number) => void) {
+  const total = pages.length;
+  return mountOffscreen(doc, async (mount, pace) => {
+    const sheet = (node: ReactNode, index: number, frame: boolean) =>
+      mount(node, { index, total }, { frame: frame ? index : undefined, sheet: true, paint: true });
+    // A running header or footer reads the page number, so it is drawn again
+    // with sentinels in place of the real ones.
+    const sentinel = (node: ReactNode) =>
+      mount(
+        node,
+        { index: SENTINELS.page - 1, total: SENTINELS.count },
+        { sheet: true, paint: true },
+      );
+
+    const sources: ExtractSource[] = [];
+    const groups = groupPages(pages);
+    for (const [done, group] of groups.entries()) {
+      if (group.kind === 'fixed') {
+        const { content } = group.page;
+        sources.push({
+          kind: 'fixed',
+          page: group.index + 1,
+          host: sheet(content, group.index, true),
+          sentinel: sentinel(content),
+        });
+      } else {
+        const { section } = group;
+        const body = createElement(FlowPage, {
+          section: { ...section, footer: undefined },
+          design: doc.design,
+          blocks: group.blocks,
+          blockIndices: group.blockIndices,
+          notes: group.notes,
+          sheets: group.sheets,
+        });
+        const footer = createElement(FlowPage, { section, design: doc.design, blockIndices: [] });
+        sources.push({
+          kind: 'flow',
+          page: group.index + 1,
+          // Not a frame itself: its blocks are, each as the sheet it printed on.
+          host: mount(body, { index: group.index, total }, { paint: true }),
+          // Drawn for the first sheet and the next: a footer hidden or different
+          // on the opening page is Word's first-page footer, not the running one.
+          footer: section.footer && {
+            sentinel: sentinel(footer),
+            first: sheet(footer, group.index, false),
+            next: group.pages > 1 ? sheet(footer, group.index + 1, false) : undefined,
+          },
+        });
+      }
+      onProgress(Math.round(((done + 1) / groups.length) * 40));
+      await pace();
+    }
+    return sources;
+  });
+}
+
+/** Properties a drawing inherits from where it sits, and loses when drawn out of place. */
+const INHERITED = [
+  'color',
+  'direction',
+  'font-family',
+  'font-feature-settings',
+  'font-size',
+  'font-stretch',
+  'font-style',
+  'font-variant',
+  'font-weight',
+  'hyphens',
+  'letter-spacing',
+  'line-height',
+  'overflow-wrap',
+  'tab-size',
+  'text-align',
+  'text-indent',
+  'text-transform',
+  'white-space',
+  'word-break',
+  'word-spacing',
+  'writing-mode',
+];
+
+/** One element, drawn as a picture of itself with the page's stylesheet and fonts. */
+function rasterizer(doc: DocModule): (el: Element) => Promise<Uint8Array | null> {
+  let css: Promise<string> | null = null;
+  const design = designDeclarations(doc);
+  // The same drawing in the same place — a logo in every section's footer — is drawn once.
+  const drawn = new Map<string, Promise<Uint8Array | null>>();
+  const draw = async (html: string, size: { width: number; height: number }, style: string) => {
+    try {
+      css ??= inlineAssets(collectCss(), []).then((result) => result.css);
+      const sheet = await css;
+      const { html: inlined } = await inlineAssets('', [html]);
+      const svg = htmlToSvg(inlined[0] ?? '', sheet, size, style);
+      return new Uint8Array(await (await rasterise(svg, size)).arrayBuffer());
+    } catch {
+      return null;
+    }
+  };
+  return (el) => {
+    const { width, height } = el.getBoundingClientRect();
+    const cs = getComputedStyle(el);
+    const clone = el.cloneNode(true) as HTMLElement;
+    Object.assign(clone.style, {
+      margin: '0',
+      width: `${width}px`,
+      height: `${height}px`,
+      boxSizing: 'border-box',
+    });
+    // The picture's box is where it was drawn; offsets and transforms would move
+    // it again inside that box, and out of the picture.
+    if (cs.position !== 'static')
+      Object.assign(clone.style, { position: 'relative', inset: 'auto' });
+    if (
+      cs.transform !== 'none' ||
+      cs.translate !== 'none' ||
+      cs.rotate !== 'none' ||
+      cs.scale !== 'none'
+    ) {
+      Object.assign(clone.style, {
+        transform: 'none',
+        translate: 'none',
+        rotate: 'none',
+        scale: 'none',
+      });
+    }
+    // A clone's canvases are blank: their pixels go along as pictures.
+    const canvases = el.querySelectorAll('canvas');
+    try {
+      clone.querySelectorAll('canvas').forEach((copy, i) => {
+        const canvas = canvases[i];
+        const box = canvas.getBoundingClientRect();
+        const picture = document.createElement('img');
+        picture.src = canvas.toDataURL();
+        picture.setAttribute('style', copy.getAttribute('style') ?? '');
+        picture.className = copy.className;
+        Object.assign(picture.style, { width: `${box.width}px`, height: `${box.height}px` });
+        copy.replaceWith(picture);
+      });
+    } catch {
+      // A canvas drawn from another origin cannot be read back.
+      return Promise.resolve(null);
+    }
+    const parent = el.parentElement ? getComputedStyle(el.parentElement) : null;
+    const inherited = parent
+      ? [...INHERITED, ...Array.from(parent).filter((name) => name.startsWith('--'))]
+          .map((name) => `${name}:${parent.getPropertyValue(name)}`)
+          .join(';')
+      : '';
+    const style = `${design};${inherited}`;
+    const html = clone.outerHTML;
+    const key = `${width}x${height}\n${style}\n${html}`;
+    let picture = drawn.get(key);
+    if (!picture) {
+      picture = draw(html, { width, height }, style);
+      drawn.set(key, picture);
+    }
+    return picture;
+  };
+}
+
+export async function buildDocxBundle(
+  doc: DocModule,
+  docId: string,
+  pages: ExpandedPage[],
+  onProgress?: (progress: DocxExportProgress) => void,
+): Promise<FileBundle | null> {
+  if (pages.length === 0) return null;
+  const report = (phase: DocxExportProgress['phase'], percent: number) =>
+    onProgress?.({ phase, percent });
+
+  try {
+    const copy = await mountCopy(doc, pages, (percent) => report('rendering', percent));
+    const [across, down] = resolvePageGeometry(doc.meta).mm;
+    const pace = pacer();
+    const extracted = await extractDocument({
+      sources: copy.value,
+      sheet: { width: twipsFromMm(across), height: twipsFromMm(down) },
+      margin: doc.design?.margin ?? defaultDesign.margin,
+      sentinels: SENTINELS,
+      pageCount: pages.length,
+      rasterize: rasterizer(doc),
+      onSection: (done, total) => {
+        report('reading', 45 + Math.round((done / total) * 45));
+        return pace();
+      },
+    }).finally(copy.dispose);
+
+    report('writing', 90);
+    const scale = doc.design?.typeScale;
+    const bytes = writeDocx({
+      title: doc.meta?.title ?? docId,
+      subject: doc.meta?.subtitle,
+      author: doc.meta?.author,
+      created: doc.meta?.createdAt,
+      headingSizes: scale && [scale.h1, scale.h2, scale.h3].map(halfPoints),
+      ...extracted,
+    });
+    return { filename: `${docId}.docx`, mimeType: DOCX_MIME, bytes };
+  } finally {
+    report('done', 100);
+  }
+}
+
+export async function exportDocAsDocx(
+  doc: DocModule,
+  docId: string,
+  pages: ExpandedPage[],
+  onProgress?: (progress: DocxExportProgress) => void,
+): Promise<void> {
+  const bundle = await buildDocxBundle(doc, docId, pages, onProgress);
+  if (bundle) downloadBundle(bundle);
+}

package/src/app/lib/export-dom.ts

@@ -0,0 +1,318 @@
+/**
+ * Shared by every exporter so there is one way to draw the document offscreen.
+ * Two copies would drift on font waiting, scanning, or design variables, and the
+ * difference would only ever show up in an exported file.
+ */
+
+import { Component, createElement, type ReactNode } from 'react';
+import { flushSync } from 'react-dom';
+import { createRoot, type Root } from 'react-dom/client';
+import { designToCssVars } from './design';
+import { PAGE_ATTR, PAGE_INDEX_ATTR } from './outline';
+import { DocPageProvider } from './page-context';
+import { nextFrame, waitForDataWaitfor, waitForFonts, waitForImages } from './print-ready';
+import { captureScan, restoreScan, scanDocument } from './scan';
+import { type DocModule, resolvePageGeometry } from './sdk';
+import type { ExpandedPage } from './use-doc-pages';
+
+export const ASSET_EXT_RE =
+  /\.(?:png|jpe?g|gif|svg|webp|avif|woff2?|ttf|otf)(?:\?[^#]*)?(?:#.*)?$/i;
+
+export type FileBundle = { filename: string; mimeType: string; bytes: Uint8Array };
+
+export type HostOptions = {
+  /** 0-based page index; makes the host a frame the outline and numbering scans read. */
+  frame?: number;
+  /** Sheet height; without it the host grows with its content. */
+  sheet?: boolean;
+  className?: string;
+  /** The design's paper and ink on the host itself, as a printed sheet has them. */
+  paint?: boolean;
+};
+
+/** Mounts `node` in a host of its own, rendered as page `index` of `total`. */
+export type PageMount = (
+  node: ReactNode,
+  page: { index: number; total: number },
+  host?: HostOptions,
+) => HTMLElement;
+
+export type OffscreenCopy<T> = { root: HTMLElement; value: T; dispose: () => void };
+
+function offscreenContainer(): HTMLElement {
+  const container = document.createElement('div');
+  container.setAttribute('aria-hidden', 'true');
+  Object.assign(container.style, {
+    position: 'fixed',
+    left: '-99999px',
+    top: '0',
+    pointerEvents: 'none',
+  });
+  document.body.appendChild(container);
+  return container;
+}
+
+/**
+ * Around every page of a copy. Rendered synchronously, a page that throws would
+ * take the whole export with it; one that only fails for the pages chosen —
+ * `chapters[n - 3]` on page 1 of a one-page export, or on the Word export's
+ * sentinel page 38271 — prints blank instead.
+ */
+class PageBoundary extends Component<{ children?: ReactNode }, { failed: boolean }> {
+  state = { failed: false };
+
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+
+  render() {
+    return this.state.failed ? null : this.props.children;
+  }
+}
+
+/**
+ * Renders and commits before returning. A concurrent render can still be
+ * pending when the next line reads the DOM — right after a document first
+ * loads, the viewer's own rendering is ahead of it in the queue — and a scan of
+ * an uncommitted copy sees blank sheets: an empty table of contents, figures
+ * without numbers. Never call it from inside a render or an effect.
+ */
+function renderNow(host: HTMLElement, node: ReactNode): Root {
+  const root = createRoot(host);
+  flushSync(() => root.render(node));
+  return root;
+}
+
+/** Everything a page waits on before it can be read: fonts, images, `data-waitfor`. */
+async function settle(root: HTMLElement): Promise<void> {
+  await nextFrame();
+  await waitForFonts();
+  await waitForImages(root);
+  await waitForDataWaitfor(root);
+}
+
+/**
+ * Hands the thread back between synchronous renders. Committed back to back, a
+ * long document holds the main thread and the progress percentage never paints.
+ * It yields through a message rather than a timer: a timer in a background tab
+ * waits a whole second, once per yield.
+ */
+export function pacer(budgetMs = 50): () => Promise<void> {
+  let last = performance.now();
+  return async () => {
+    if (performance.now() - last < budgetMs) return;
+    await new Promise<void>((resolve) => {
+      const channel = new MessageChannel();
+      channel.port1.onmessage = () => {
+        channel.port1.close();
+        resolve();
+      };
+      channel.port2.postMessage(null);
+    });
+    last = performance.now();
+  };
+}
+
+/**
+ * A private copy of the document, drawn offscreen by `draw`, scanned, and
+ * settled — the lifecycle every exporter shares. The scan is the copy's own, so
+ * the pages its contents and references quote are the pages it shows; the
+ * viewer's is put back by `dispose()`, which also runs if anything throws first.
+ */
+export async function mountOffscreen<T>(
+  doc: DocModule,
+  draw: (mount: PageMount, pace: () => Promise<void>) => Promise<T>,
+  opts: { root?: HTMLElement; onDispose?: () => void } = {},
+): Promise<OffscreenCopy<T>> {
+  const root = opts.root ?? offscreenContainer();
+  const geometry = resolvePageGeometry(doc.meta);
+  const vars = doc.design ? Object.entries(designToCssVars(doc.design)) : [];
+  const previousScan = captureScan();
+  const roots: Root[] = [];
+  const dispose = () => {
+    for (const r of roots) r.unmount();
+    root.remove();
+    restoreScan(previousScan);
+    opts.onDispose?.();
+  };
+
+  // Styled as the viewer styles a sheet, so positioned content lands where it
+  // does on screen.
+  const mount: PageMount = (node, page, host = {}) => {
+    const el = document.createElement('div');
+    if (host.className) el.className = host.className;
+    if (host.frame !== undefined) {
+      el.setAttribute(PAGE_ATTR, '');
+      el.setAttribute(PAGE_INDEX_ATTR, String(host.frame));
+    }
+    Object.assign(el.style, {
+      width: `${geometry.width}px`,
+      height: host.sheet ? `${geometry.height}px` : '',
+      position: 'relative',
+      overflow: 'hidden',
+      textAlign: 'start',
+    });
+    for (const [name, value] of vars) el.style.setProperty(name, value);
+    if (host.paint) {
+      // Paper and ink of its own, as the viewer's sheet has: the copy hangs off
+      // <body>, and a document with no design would otherwise print in the
+      // chrome's colours, which follow the viewer's dark mode.
+      el.style.background = doc.design ? 'var(--od-bg)' : '#ffffff';
+      el.style.color = doc.design ? 'var(--od-text)' : '#000000';
+    }
+    root.appendChild(el);
+    const content = createElement(PageBoundary, null, node);
+    roots.push(renderNow(el, createElement(DocPageProvider, page, content)));
+    return el;
+  };
+
+  try {
+    const value = await draw(mount, pacer());
+    await settle(root);
+    // What the scan resolves — contents, numbers, references — is committed
+    // before anything reads the copy, and gets its fonts like the rest. Images
+    // and data-waitfor were settled above; waiting on them again only doubles
+    // the timeout of one that never arrives.
+    flushSync(() => scanDocument(root, doc.meta));
+    await nextFrame();
+    await waitForFonts();
+    return { root, value, dispose };
+  } catch (err) {
+    dispose();
+    throw err;
+  }
+}
+
+/** Every sheet as it would print, serialized. */
+export async function renderPagesToHtml(pages: ExpandedPage[], doc: DocModule): Promise<string[]> {
+  const total = pages.length;
+  const copy = await mountOffscreen(doc, async (mount, pace) => {
+    const hosts: HTMLElement[] = [];
+    for (const [index, page] of pages.entries()) {
+      hosts.push(mount(page.content, { index, total }, { frame: index, sheet: true }));
+      await pace();
+    }
+    return hosts;
+  });
+  try {
+    return copy.value.map((host) => host.innerHTML);
+  } finally {
+    copy.dispose();
+  }
+}
+
+export function collectCss(): string {
+  const chunks: string[] = [];
+  for (const sheet of Array.from(document.styleSheets)) {
+    let rules: CSSRuleList | null = null;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue;
+    }
+    if (!rules) continue;
+    for (const rule of Array.from(rules)) chunks.push(rule.cssText);
+  }
+  return chunks.join('\n');
+}
+export function collectExternalStylesheetLinks(): string {
+  const links: string[] = [];
+  for (const sheet of Array.from(document.styleSheets)) {
+    try {
+      void sheet.cssRules;
+    } catch {
+      if (sheet.href) links.push(`<link rel="stylesheet" href="${escapeAttr(sheet.href)}">`);
+    }
+  }
+  return links.join('\n');
+}
+export function findHtmlAssetUrls(html: string): string[] {
+  const out: string[] = [];
+  for (const m of html.matchAll(/\s(?:src|href)="([^"]+)"/g)) {
+    if (looksLikeAsset(m[1])) out.push(m[1]);
+  }
+  for (const m of html.matchAll(/\ssrcset="([^"]+)"/g)) {
+    for (const part of m[1].split(',')) {
+      const url = part.trim().split(/\s+/)[0];
+      if (url && looksLikeAsset(url)) out.push(url);
+    }
+  }
+  return out;
+}
+export function findCssAssetUrls(css: string): string[] {
+  const out: string[] = [];
+  for (const m of css.matchAll(/url\(\s*(['"]?)([^)'"]+)\1\s*\)/g)) {
+    const url = m[2].trim();
+    if (looksLikeAsset(url)) out.push(url);
+  }
+  return out;
+}
+export function looksLikeAsset(url: string): boolean {
+  if (!url) return false;
+  if (url.startsWith('data:') || url.startsWith('blob:') || url.startsWith('#')) return false;
+  if (url.startsWith('mailto:') || url.startsWith('javascript:')) return false;
+  const abs = toAbsolute(url);
+  if (!abs) return false;
+  try {
+    if (new URL(abs).origin !== window.location.origin) return false;
+  } catch {
+    return false;
+  }
+  return ASSET_EXT_RE.test(url);
+}
+export function toAbsolute(url: string): string | null {
+  try {
+    return new URL(url, window.location.href).toString();
+  } catch {
+    return null;
+  }
+}
+export function uniqueAssetName(absoluteUrl: string, used: Set<string>): string {
+  let base = 'asset';
+  try {
+    base = new URL(absoluteUrl).pathname.split('/').pop() || 'asset';
+  } catch {}
+  if (!used.has(base)) {
+    used.add(base);
+    return base;
+  }
+  const hash = shortHash(absoluteUrl);
+  const dot = base.lastIndexOf('.');
+  const name = dot > 0 ? `${base.slice(0, dot)}-${hash}${base.slice(dot)}` : `${base}-${hash}`;
+  used.add(name);
+  return name;
+}
+export function shortHash(input: string): string {
+  let h = 2166136261;
+  for (let i = 0; i < input.length; i++) {
+    h ^= input.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return (h >>> 0).toString(36).slice(0, 6);
+}
+export function downloadBundle(bundle: FileBundle): void {
+  downloadBlob(new Blob([bundle.bytes as BlobPart], { type: bundle.mimeType }), bundle.filename);
+}
+
+export function downloadBlob(blob: Blob, filename: string): void {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  a.rel = 'noopener';
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+export function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+export function escapeAttr(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+}