@sofereditor/export-pdf 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sofereditor/export-pdf",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "@sofereditor/export-pdf — Serialize the paginated Sofer DOM to self-contained HTML, ready for Puppeteer PDF rendering.",
   "license": "AGPL-3.0-or-later",
   "author": "Rafael Marreca",
@@ -21,27 +21,33 @@
     "sofer"
   ],
   "type": "module",
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./src/index.ts",
-      "import": "./src/index.ts",
-      "require": "./src/index.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     }
   },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
   "dependencies": {
-    "@sofereditor/core": "0.1.0"
+    "@sofereditor/core": "^0.2.0"
   },
   "devDependencies": {
     "typescript": "^5.7.2",
     "tsup": "^8.3.5",
     "vitest": "^2.1.8"
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run"
   }
-}
+}

package/src/__tests__/caption.test.ts

@@ -1,126 +0,0 @@
-import { describe, it, expect } from "vitest";
-import type { LegacySerializedDocument } from "@sofereditor/core";
-import { documentToHtmlFragment } from "../html";
-
-const PNG_1PX =
-  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNgAAIAAAUAAeImBZsAAAAASUVORK5CYII=";
-
-describe("image caption in HTML export", () => {
-  it("emits <figure><img/><figcaption> when caption is set", () => {
-    const doc: LegacySerializedDocument = [
-      {
-        type: "paragraph",
-        text: "",
-        delta: [
-          {
-            insert: {
-              type: "image",
-              src: PNG_1PX,
-              width: 100,
-              height: 80,
-              caption: "Figura 1",
-            },
-          },
-        ],
-        attrs: {},
-      },
-    ];
-    const html = documentToHtmlFragment(doc);
-    expect(html).toContain("<figure");
-    expect(html).toContain("<figcaption");
-    expect(html).toContain("Figura 1</figcaption>");
-    expect(html).toContain('data-embed-figure="true"');
-    // The img keeps its data-embed attribute for round-trip identification.
-    expect(html).toContain('data-embed="image"');
-  });
-
-  it("emits bare <img/> when caption is absent", () => {
-    const doc: LegacySerializedDocument = [
-      {
-        type: "paragraph",
-        text: "",
-        delta: [
-          { insert: { type: "image", src: PNG_1PX, width: 50, height: 50 } },
-        ],
-        attrs: {},
-      },
-    ];
-    const html = documentToHtmlFragment(doc);
-    expect(html).not.toContain("<figure");
-    expect(html).not.toContain("<figcaption");
-    expect(html).toContain('data-embed="image"');
-  });
-
-  it("respects captionAlign in <figcaption> inline style", () => {
-    const doc: LegacySerializedDocument = [
-      {
-        type: "paragraph",
-        text: "",
-        delta: [
-          {
-            insert: {
-              type: "image",
-              src: PNG_1PX,
-              width: 50,
-              height: 50,
-              caption: "à direita",
-              captionAlign: "right",
-            },
-          },
-        ],
-        attrs: {},
-      },
-    ];
-    const html = documentToHtmlFragment(doc);
-    expect(html).toContain('data-caption-align="right"');
-    expect(html).toContain("text-align:right");
-  });
-
-  it("defaults captionAlign to center when omitted", () => {
-    const doc: LegacySerializedDocument = [
-      {
-        type: "paragraph",
-        text: "",
-        delta: [
-          {
-            insert: {
-              type: "image",
-              src: PNG_1PX,
-              width: 50,
-              height: 50,
-              caption: "sem alinhamento",
-            },
-          },
-        ],
-        attrs: {},
-      },
-    ];
-    const html = documentToHtmlFragment(doc);
-    expect(html).toContain('data-caption-align="center"');
-    expect(html).toContain("text-align:center");
-  });
-
-  it("escapes HTML special chars in caption", () => {
-    const doc: LegacySerializedDocument = [
-      {
-        type: "paragraph",
-        text: "",
-        delta: [
-          {
-            insert: {
-              type: "image",
-              src: PNG_1PX,
-              width: 50,
-              height: 50,
-              caption: "<script>alert('x')</script>",
-            },
-          },
-        ],
-        attrs: {},
-      },
-    ];
-    const html = documentToHtmlFragment(doc);
-    expect(html).not.toContain("<script>");
-    expect(html).toContain("&lt;script&gt;");
-  });
-});

package/src/__tests__/html.test.ts

@@ -1,226 +0,0 @@
-import { describe, it, expect } from "vitest";
-import type { LegacySerializedDocument } from "@sofereditor/core";
-import { documentToHtml, documentToHtmlFragment, documentToJson } from "../html";
-
-function frag(doc: LegacySerializedDocument): string {
-  return documentToHtmlFragment(doc);
-}
-
-describe("documentToHtmlFragment", () => {
-  it("renders paragraphs with text", () => {
-    const html = frag([
-      { type: "paragraph", text: "olá", delta: [{ insert: "olá" }], attrs: {} },
-    ]);
-    expect(html).toBe(`<p class="ed-paragraph ed-block">olá</p>`);
-  });
-
-  it("escapes HTML special characters", () => {
-    const html = frag([
-      {
-        type: "paragraph",
-        text: '<b>a & "b"</b>',
-        delta: [{ insert: '<b>a & "b"</b>' }],
-        attrs: {},
-      },
-    ]);
-    expect(html).toContain("&lt;b&gt;a &amp; &quot;b&quot;&lt;/b&gt;");
-    expect(html).not.toContain("<b>");
-  });
-
-  it("wraps marks innermost-first (bold inside italic inside link)", () => {
-    const html = frag([
-      {
-        type: "paragraph",
-        text: "hi",
-        delta: [
-          {
-            insert: "hi",
-            attributes: { bold: true, italic: true, link: { href: "https://x" } },
-          },
-        ],
-        attrs: {},
-      },
-    ]);
-    expect(html).toContain(
-      `<a href="https://x" rel="noopener noreferrer" target="_blank"><em><strong>hi</strong></em></a>`,
-    );
-  });
-
-  it("emits heading levels and clamps out-of-range", () => {
-    const html = frag([
-      { type: "heading", text: "A", delta: [{ insert: "A" }], attrs: { level: 2 as any } },
-      { type: "heading", text: "B", delta: [{ insert: "B" }], attrs: { level: 99 as any } },
-    ]);
-    expect(html).toContain("<h2");
-    expect(html).toContain("<h6"); // clamped
-  });
-
-  it("reconstructs nested lists from flat listItem blocks", () => {
-    const html = frag([
-      {
-        type: "listItem",
-        text: "a",
-        delta: [{ insert: "a" }],
-        attrs: { listKind: "bullet", listLevel: 0 },
-      },
-      {
-        type: "listItem",
-        text: "a1",
-        delta: [{ insert: "a1" }],
-        attrs: { listKind: "bullet", listLevel: 1 },
-      },
-      {
-        type: "listItem",
-        text: "b",
-        delta: [{ insert: "b" }],
-        attrs: { listKind: "bullet", listLevel: 0 },
-      },
-    ]);
-    // outer ul > li (a) + nested ul > li (a1); then sibling li (b)
-    expect(html).toMatch(/<ul[^>]*>.*<li[^>]*>a<ul[^>]*>.*<li[^>]*>a1<\/li><\/ul><\/li><li[^>]*>b<\/li><\/ul>/);
-  });
-
-  it("renders tables and skips covered cells", () => {
-    const html = frag([
-      {
-        type: "table",
-        text: "",
-        delta: [],
-        attrs: { rows: 1, cols: 2 },
-        cells: [
-          { text: "x", delta: [{ insert: "x" }], attrs: { colspan: 2 } },
-          { text: "", delta: [], attrs: { covered: true } },
-        ],
-      },
-    ]);
-    expect(html).toContain('colspan="2"');
-    // exactly one td emitted
-    const tdCount = (html.match(/<td/g) ?? []).length;
-    expect(tdCount).toBe(1);
-  });
-
-  it("emits image embeds with data URL and dimensions", () => {
-    const html = frag([
-      {
-        type: "paragraph",
-        text: "",
-        delta: [
-          {
-            insert: {
-              type: "image",
-              src: "data:image/png;base64,abc",
-              width: 100,
-              height: 50,
-            } as any,
-          },
-        ],
-        attrs: {},
-      },
-    ]);
-    expect(html).toContain(`<img src="data:image/png;base64,abc"`);
-    expect(html).toContain(`width="100"`);
-    expect(html).toContain(`height="50"`);
-  });
-
-  it("blocks CSS injection in mark style values", () => {
-    const html = frag([
-      {
-        type: "paragraph",
-        text: "x",
-        delta: [
-          { insert: "x", attributes: { color: 'red";</style><script>alert(1)</script><style>"' } },
-        ],
-        attrs: {},
-      },
-    ]);
-    // The dangerous chars should be stripped from the inline style.
-    expect(html).not.toContain("</style>");
-    expect(html).not.toContain("<script>");
-  });
-
-  it("puts align class on the block", () => {
-    const html = frag([
-      {
-        type: "paragraph",
-        text: "x",
-        delta: [{ insert: "x" }],
-        attrs: { align: "center" },
-      },
-    ]);
-    expect(html).toContain("ed-align-center");
-  });
-});
-
-describe("documentToHtml (standalone)", () => {
-  it("wraps the fragment with a full html document and a stylesheet", () => {
-    const html = documentToHtml([
-      { type: "paragraph", text: "a", delta: [{ insert: "a" }], attrs: {} },
-    ]);
-    expect(html.startsWith("<!doctype html>")).toBe(true);
-    expect(html).toContain("<title>Documento</title>");
-    expect(html).toContain("@page");
-    expect(html).toContain("</body></html>");
-  });
-
-  it("escapes the title", () => {
-    const html = documentToHtml([], { title: "<x>" });
-    expect(html).toContain("<title>&lt;x&gt;</title>");
-  });
-});
-
-describe("standalone HTML margins", () => {
-  // Regression: previously, both `@page { margin: ... }` AND `body { padding: ... }`
-  // declared the same offsets, doubling the printable margin when Chromium
-  // honored `@page` (via `preferCSSPageSize` in puppeteer or `window.print`).
-  it("declares margins via @page only — body padding never carries page offsets", () => {
-    const html = documentToHtml(
-      {
-        blocks: [{ type: "paragraph", text: "x", delta: [{ insert: "x" }], attrs: {} }],
-        pageSettings: {
-          width: 794,
-          height: 1123,
-          marginTop: 96,
-          marginBottom: 96,
-          marginLeft: 96,
-          marginRight: 96,
-        },
-      },
-      { standalone: true },
-    );
-    expect(html).toMatch(/@page\s*\{[^}]*margin:\s*25\.40mm/);
-    // No `body { ... padding: <Xmm> ... }` carrying the page margin (Xmm > 0).
-    // `padding: 0` (CSS reset) is fine; anything in mm/cm/in would double the
-    // page margin on top of `@page`.
-    expect(html).not.toMatch(/body[^{]*\{[^}]*padding:\s*\d+(?:\.\d+)?(?:mm|cm|in|px)\b/i);
-  });
-
-  it("@page margin reflects custom pageSettings (Ofício + estreita)", () => {
-    const html = documentToHtml(
-      {
-        blocks: [{ type: "paragraph", text: "x", delta: [{ insert: "x" }], attrs: {} }],
-        pageSettings: {
-          width: 816,
-          height: 1248,
-          marginTop: 48,
-          marginBottom: 48,
-          marginLeft: 48,
-          marginRight: 48,
-        },
-      },
-      { standalone: true },
-    );
-    // 48 px → 12.70mm; 816 px ≈ 215.90mm (Ofício preset); 1248 px ≈ 330.20mm
-    expect(html).toMatch(/@page[^}]*size:\s*215\.90mm\s+330\.20mm/);
-    expect(html).toMatch(/@page[^}]*margin:\s*12\.70mm\s+12\.70mm\s+12\.70mm\s+12\.70mm/);
-  });
-});
-
-describe("documentToJson", () => {
-  it("round-trips through JSON.parse", () => {
-    const doc: LegacySerializedDocument = [
-      { type: "paragraph", text: "ç", delta: [{ insert: "ç" }], attrs: {} },
-    ];
-    const round = JSON.parse(documentToJson(doc));
-    expect(round).toEqual({ blocks: doc });
-  });
-});

package/src/download.ts

@@ -1,26 +0,0 @@
-/**
- * Trigger a browser download for an in-memory blob/string. Tiny utility — kept
- * in this package because PDF/HTML/JSON exporters all want it.
- */
-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";
-  a.style.display = "none";
-  document.body.appendChild(a);
-  a.click();
-  setTimeout(() => {
-    a.remove();
-    URL.revokeObjectURL(url);
-  }, 0);
-}
-
-export function downloadString(
-  text: string,
-  filename: string,
-  mimeType = "text/plain;charset=utf-8",
-): void {
-  downloadBlob(new Blob([text], { type: mimeType }), filename);
-}

package/src/html.ts

@@ -1,474 +0,0 @@
-import type {
-  AlignValue,
-  BlockAttrs,
-  DeltaOp,
-  DirValue,
-  ImageEmbed,
-  LegacySerializedDocument,
-  ListKind,
-  MarkAttrs,
-  PageSettings,
-  SerializedBlock,
-  SerializedCell,
-  SerializedDocument,
-} from "@sofereditor/core";
-import { isImageEmbed, isLegacySerializedDocument, pxToMm } from "@sofereditor/core";
-
-function normalize(doc: SerializedDocument | LegacySerializedDocument): SerializedDocument {
-  return isLegacySerializedDocument(doc) ? { blocks: doc } : doc;
-}
-
-export interface DocumentToHtmlOptions {
-  /** Document title (set on `<title>` and used as the file name hint). Default "Documento". */
-  title?: string;
-  /** When true (default) emits a full `<html>` document. When false emits only the body fragment. */
-  standalone?: boolean;
-  /** Extra CSS appended after the default print stylesheet. Only honored when `standalone`. */
-  extraCss?: string;
-  /** Page geometry hints injected into `@page`. Defaults to A4. */
-  page?: {
-    width: string;
-    height: string;
-    marginTop: string;
-    marginBottom: string;
-    marginLeft: string;
-    marginRight: string;
-  };
-}
-
-const DEFAULT_PAGE = {
-  width: "210mm",
-  height: "297mm",
-  marginTop: "25mm",
-  marginBottom: "25mm",
-  marginLeft: "25mm",
-  marginRight: "25mm",
-};
-
-/**
- * Serialize a `SerializedDocument` to standalone HTML.
- *
- * Output structure mirrors what `@sofereditor/react` paints at runtime: each
- * top-level block becomes one element (`<p>`, `<h1..6>`, `<blockquote>`, `<pre>`,
- * `<table>`), consecutive `listItem` blocks are reconstructed into nested
- * `<ul>`/`<ol>` trees, and image embeds are emitted as `<img>` tags carrying the
- * embed's data URL (so the export is self-contained).
- *
- * NOT a fragment of the live editor DOM — this walks the model so the output is
- * editor-state agnostic (no caret artifacts, no zero-width phantom anchors).
- */
-export function documentToHtml(
-  doc: SerializedDocument | LegacySerializedDocument,
-  options: DocumentToHtmlOptions = {},
-): string {
-  const normalized = normalize(doc);
-  const body = documentToHtmlFragment(normalized);
-  if (options.standalone === false) return body;
-  const page = options.page ?? pageFromSettings(normalized.pageSettings);
-  const title = escapeHtml(options.title ?? "Documento");
-  const extra = options.extraCss ?? "";
-  return [
-    "<!doctype html>",
-    `<html lang="pt-BR"><head><meta charset="utf-8"><title>${title}</title>`,
-    `<style>${baseStylesheet(page)}${extra}</style>`,
-    "</head><body>",
-    body,
-    "</body></html>",
-  ].join("");
-}
-
-function pageFromSettings(s: PageSettings | undefined): NonNullable<DocumentToHtmlOptions["page"]> {
-  if (!s) return DEFAULT_PAGE;
-  const fmt = (px: number) => `${pxToMm(px).toFixed(2)}mm`;
-  return {
-    width: fmt(s.width),
-    height: fmt(s.height),
-    marginTop: fmt(s.marginTop),
-    marginBottom: fmt(s.marginBottom),
-    marginLeft: fmt(s.marginLeft),
-    marginRight: fmt(s.marginRight),
-  };
-}
-
-/** Body-only HTML for embedding in other documents. */
-export function documentToHtmlFragment(
-  doc: SerializedDocument | LegacySerializedDocument,
-): string {
-  const blocks = normalize(doc).blocks;
-  const out: string[] = [];
-  let i = 0;
-  while (i < blocks.length) {
-    const block = blocks[i];
-    if (block.type === "listItem") {
-      const groupStart = i;
-      const kind: ListKind = block.attrs.listKind === "ordered" ? "ordered" : "bullet";
-      const items: SerializedBlock[] = [];
-      while (
-        i < blocks.length &&
-        blocks[i].type === "listItem" &&
-        (blocks[i].attrs.listKind ?? "bullet") === kind
-      ) {
-        items.push(blocks[i]);
-        i++;
-      }
-      out.push(renderListGroup(items, kind, groupStart));
-      continue;
-    }
-    out.push(renderBlock(block, i));
-    i++;
-  }
-  return out.join("");
-}
-
-/** JSON export — a stable serialization for save/load round-trips. */
-export function documentToJson(
-  doc: SerializedDocument | LegacySerializedDocument,
-  pretty = true,
-): string {
-  return JSON.stringify(normalize(doc), null, pretty ? 2 : 0);
-}
-
-// ---------- blocks ----------
-
-function renderBlock(block: SerializedBlock, index: number): string {
-  switch (block.type) {
-    case "paragraph":
-      return `<p${blockAttrs("ed-paragraph", block.attrs)}>${renderInline(block.delta)}</p>`;
-    case "heading": {
-      const level = clampHeadingLevel(block.attrs.level);
-      return `<h${level}${blockAttrs(`ed-heading ed-heading-${level}`, block.attrs)}>${renderInline(
-        block.delta,
-      )}</h${level}>`;
-    }
-    case "blockquote":
-      return `<blockquote${blockAttrs("ed-blockquote", block.attrs)}>${renderInline(
-        block.delta,
-      )}</blockquote>`;
-    case "codeBlock": {
-      const lang = block.attrs.language;
-      const codeAttrs = lang ? ` class="language-${escapeAttr(lang)}"` : "";
-      return `<pre${blockAttrs("ed-codeblock", block.attrs)}><code${codeAttrs}>${renderInline(
-        block.delta,
-      )}</code></pre>`;
-    }
-    case "table":
-      return renderTable(block);
-    default:
-      return `<p${blockAttrs("ed-paragraph", block.attrs)}>${renderInline(block.delta)}</p>`;
-  }
-}
-
-function renderListGroup(items: SerializedBlock[], kind: ListKind, key: number): string {
-  // Tree-build using listLevel just like Editor.buildListTree.
-  interface Node { item: SerializedBlock; children: Node[]; }
-  const roots: Node[] = [];
-  const stack: { children: Node[]; level: number }[] = [{ children: roots, level: -1 }];
-  for (const it of items) {
-    const level = clampListLevel(it.attrs.listLevel);
-    while (stack.length > 1 && stack[stack.length - 1].level >= level) stack.pop();
-    const node: Node = { item: it, children: [] };
-    stack[stack.length - 1].children.push(node);
-    stack.push({ children: node.children, level });
-  }
-  return renderListTree(roots, kind, `list-${key}`);
-}
-
-function renderListTree(nodes: { item: SerializedBlock; children: any[] }[], kind: ListKind, _key: string): string {
-  const Tag = kind === "ordered" ? "ol" : "ul";
-  const cls = `ed-list ed-list-${kind}`;
-  const items = nodes
-    .map((n) => {
-      const inner = renderInline(n.item.delta);
-      const nested =
-        n.children.length > 0 ? renderListTree(n.children, kind, _key + "n") : "";
-      return `<li${blockAttrs("ed-listitem", n.item.attrs)}>${inner}${nested}</li>`;
-    })
-    .join("");
-  return `<${Tag} class="${cls}" data-list-kind="${kind}">${items}</${Tag}>`;
-}
-
-function renderTable(block: SerializedBlock): string {
-  const rows = typeof block.attrs.rows === "number" ? block.attrs.rows : 0;
-  const cols = typeof block.attrs.cols === "number" ? block.attrs.cols : 0;
-  const cells = block.cells ?? [];
-  if (rows <= 0 || cols <= 0) return "";
-
-  const colGroup = renderColGroup(block.attrs.colWidths, cols);
-  const trs: string[] = [];
-  for (let r = 0; r < rows; r++) {
-    const tds: string[] = [];
-    for (let c = 0; c < cols; c++) {
-      const cell = cells[r * cols + c];
-      if (!cell) {
-        tds.push("<td class=\"ed-cell\"></td>");
-        continue;
-      }
-      if (cell.attrs?.covered) continue;
-      tds.push(renderCell(cell));
-    }
-    trs.push(`<tr>${tds.join("")}</tr>`);
-  }
-  return `<div class="ed-table-wrap"><table class="ed-table">${colGroup}<tbody>${trs.join("")}</tbody></table></div>`;
-}
-
-function renderColGroup(widths: number[] | undefined, cols: number): string {
-  if (!widths || widths.length === 0) return "";
-  const cells: string[] = [];
-  for (let i = 0; i < cols; i++) {
-    const w = widths[i];
-    cells.push(typeof w === "number" ? `<col style="width:${w}px">` : "<col>");
-  }
-  return `<colgroup>${cells.join("")}</colgroup>`;
-}
-
-function renderCell(cell: SerializedCell): string {
-  const rs = cell.attrs?.rowspan && cell.attrs.rowspan > 1
-    ? ` rowspan="${cell.attrs.rowspan}"`
-    : "";
-  const cs = cell.attrs?.colspan && cell.attrs.colspan > 1
-    ? ` colspan="${cell.attrs.colspan}"`
-    : "";
-  return `<td class="ed-cell"${rs}${cs}>${renderInline(cell.delta)}</td>`;
-}
-
-// ---------- inline ----------
-
-function renderInline(delta: DeltaOp[]): string {
-  if (delta.length === 0) return "<br>";
-  const parts: string[] = [];
-  // Floating wrap-left/wrap-right embeds are emitted FIRST so CSS float wraps
-  // the following inline text — mirrors the in-editor renderer.
-  const wraps: string[] = [];
-  for (const op of delta) {
-    if (typeof op.insert === "string") {
-      if (op.insert.length === 0) continue;
-      parts.push(applyMarks(escapeHtml(op.insert), op.attributes));
-    } else if (isImageEmbed(op.insert)) {
-      const layout = op.insert.layout ?? "inline";
-      if (layout === "wrap-left" || layout === "wrap-right") {
-        wraps.push(renderImg(op.insert));
-      } else {
-        parts.push(renderImg(op.insert));
-      }
-    }
-  }
-  if (wraps.length === 0 && parts.length === 0) return "<br>";
-  return wraps.join("") + parts.join("");
-}
-
-function applyMarks(text: string, attrs: MarkAttrs | undefined): string {
-  if (!attrs) return text;
-  let html = text;
-  if (attrs.bold) html = `<strong>${html}</strong>`;
-  if (attrs.italic) html = `<em>${html}</em>`;
-  if (attrs.underline) html = `<u>${html}</u>`;
-  if (attrs.strike) html = `<s>${html}</s>`;
-  const styles: string[] = [];
-  if (attrs.color) styles.push(`color:${cssValue(attrs.color)}`);
-  if (attrs.fontFamily) styles.push(`font-family:${cssValue(attrs.fontFamily)}`);
-  if (attrs.fontSize) styles.push(`font-size:${cssValue(attrs.fontSize)}`);
-  if (styles.length > 0) html = `<span style="${styles.join(";")}">${html}</span>`;
-  if (attrs.link?.href) {
-    const t = attrs.link.title ? ` title="${escapeAttr(attrs.link.title)}"` : "";
-    html = `<a href="${escapeAttr(attrs.link.href)}"${t} rel="noopener noreferrer" target="_blank">${html}</a>`;
-  }
-  if (attrs.comment?.markId) {
-    html = `<span data-comment-id="${escapeAttr(attrs.comment.markId)}">${html}</span>`;
-  }
-  return html;
-}
-
-function renderImg(embed: ImageEmbed): string {
-  const layout = embed.layout ?? "inline";
-  const align = embed.align;
-  const ox = embed.offsetX ?? 0;
-  const oy = embed.offsetY ?? 0;
-  const hasCaption = !!embed.caption && embed.caption.length > 0;
-
-  // The wrapper carries the positioning (float/absolute/inline-block/block).
-  // The img keeps the intrinsic size when wrapped; when there's no caption we
-  // keep the historical bare `<img>` output for unchanged DOM/CSS.
-  const wrapperStyles: string[] = [];
-  switch (layout) {
-    case "wrap-left":
-      wrapperStyles.push(
-        "float:left",
-        `width:${embed.width}px`,
-        `margin-right:${Math.max(8, ox)}px`,
-        `margin-top:${Math.max(0, oy)}px`,
-        "margin-bottom:4px",
-      );
-      break;
-    case "wrap-right":
-      wrapperStyles.push(
-        "float:right",
-        `width:${embed.width}px`,
-        `margin-left:${Math.max(8, ox)}px`,
-        `margin-top:${Math.max(0, oy)}px`,
-        "margin-bottom:4px",
-      );
-      break;
-    case "behind":
-    case "front":
-      wrapperStyles.push(
-        "position:absolute",
-        `left:${ox}px`,
-        `top:${oy}px`,
-        `width:${embed.width}px`,
-        `z-index:${layout === "behind" ? -1 : 2}`,
-      );
-      break;
-    case "inline":
-    default:
-      if (align) {
-        wrapperStyles.push(
-          "display:block",
-          `width:${embed.width}px`,
-          `margin-left:${align === "left" ? "0" : "auto"}`,
-          `margin-right:${align === "right" ? "0" : "auto"}`,
-        );
-      } else {
-        wrapperStyles.push(
-          "display:inline-block",
-          "vertical-align:text-bottom",
-          `width:${embed.width}px`,
-        );
-      }
-      break;
-  }
-
-  const imgStyles: string[] = hasCaption
-    ? [`width:${embed.width}px`, `height:${embed.height}px`, "display:block"]
-    : wrapperStyles.concat(
-        // Preserve old height when emitting bare <img>.
-        `height:${embed.height}px`,
-      );
-
-  const imgHtml = `<img src="${escapeAttr(embed.src)}" width="${embed.width}" height="${embed.height}" alt="${escapeAttr(embed.caption ?? "")}" data-embed="image" data-embed-layout="${layout}"${
-    align ? ` data-embed-align="${escapeAttr(align)}"` : ""
-  } style="${imgStyles.join(";")}">`;
-
-  if (!hasCaption) return imgHtml;
-
-  const captionAlign = embed.captionAlign ?? "center";
-  return `<figure class="ed-figure" data-embed-figure="true" data-embed-layout="${layout}" style="${wrapperStyles.join(";")}">${imgHtml}<figcaption class="ed-figcaption" data-caption-align="${captionAlign}" style="text-align:${captionAlign}">${escapeHtml(
-    embed.caption!,
-  )}</figcaption></figure>`;
-}
-
-// ---------- helpers ----------
-
-function blockAttrs(baseClass: string, attrs: BlockAttrs): string {
-  const classes = [baseClass, "ed-block"];
-  const align = clampAlign(attrs.align);
-  if (align) classes.push(`ed-align-${align}`);
-  const dir = clampDir(attrs.dir);
-  const dirAttr = dir ? ` dir="${dir}"` : "";
-  return ` class="${classes.join(" ")}"${dirAttr}`;
-}
-
-function clampHeadingLevel(l: unknown): 1 | 2 | 3 | 4 | 5 | 6 {
-  if (typeof l !== "number") return 1;
-  const n = Math.trunc(l);
-  if (n < 1) return 1;
-  if (n > 6) return 6;
-  return n as 1 | 2 | 3 | 4 | 5 | 6;
-}
-
-function clampListLevel(l: unknown): number {
-  if (typeof l !== "number" || !Number.isFinite(l)) return 0;
-  return Math.max(0, Math.min(5, Math.trunc(l)));
-}
-
-function clampAlign(a: unknown): AlignValue | undefined {
-  if (a === "left" || a === "center" || a === "right" || a === "justify") return a;
-  return undefined;
-}
-
-function clampDir(d: unknown): DirValue | undefined {
-  if (d === "ltr" || d === "rtl") return d;
-  return undefined;
-}
-
-const HTML_ESCAPES: Record<string, string> = {
-  "&": "&amp;",
-  "<": "&lt;",
-  ">": "&gt;",
-  '"': "&quot;",
-  "'": "&#39;",
-};
-
-function escapeHtml(s: string): string {
-  return s.replace(/[&<>"']/g, (c) => HTML_ESCAPES[c]);
-}
-
-function escapeAttr(s: string): string {
-  return s.replace(/[&<>"']/g, (c) => HTML_ESCAPES[c]);
-}
-
-/** Allow only safe characters in CSS values — defense in depth against injected `</style>`. */
-function cssValue(v: string): string {
-  return v.replace(/[<>"';\\]/g, "");
-}
-
-function baseStylesheet(page: NonNullable<DocumentToHtmlOptions["page"]>): string {
-  // Margins are owned by `@page` only. Chromium honors that block both for
-  // `window.print()` (client-side `exportPdfFromDocument`) and for
-  // `page.pdf({ preferCSSPageSize: true })` (server-side `renderPdf` in
-  // `@sofereditor/export-pdf-server`). Adding the same offsets via `body { padding }`
-  // would compound and double the margin in the output PDF.
-  return `
-@page {
-  size: ${page.width} ${page.height};
-  margin: ${page.marginTop} ${page.marginRight} ${page.marginBottom} ${page.marginLeft};
-}
-html, body { margin: 0; padding: 0; background: white; color: #1a1a1f; }
-body {
-  font-family: "Arial", "Helvetica", sans-serif;
-  font-size: 11pt;
-  line-height: 1.5;
-}
-.ed-paragraph { margin: 0 0 0.5em; min-height: 1.5em; }
-.ed-heading { margin: 0.5em 0 0.25em; font-weight: 600; line-height: 1.25; }
-.ed-heading-1 { font-size: 28pt; }
-.ed-heading-2 { font-size: 22pt; }
-.ed-heading-3 { font-size: 18pt; }
-.ed-heading-4 { font-size: 14pt; }
-.ed-heading-5 { font-size: 12pt; }
-.ed-heading-6 { font-size: 11pt; color: #6b7280; }
-.ed-blockquote {
-  margin: 0 0 0.5em; padding: 0.25em 12px;
-  border-inline-start: 3px solid #e5e7eb; color: #6b7280;
-}
-.ed-codeblock {
-  margin: 0 0 0.5em; background: #0f172a; color: #e2e8f0;
-  padding: 12px 14px; border-radius: 6px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11pt; white-space: pre-wrap;
-}
-.ed-codeblock code { font-family: inherit; background: transparent; color: inherit; }
-.ed-block[dir="rtl"] { text-align: start; }
-.ed-align-left { text-align: left; }
-.ed-align-center { text-align: center; }
-.ed-align-right { text-align: right; }
-.ed-align-justify { text-align: justify; }
-.ed-list { margin: 0 0 0.5em; padding-inline-start: 28px; }
-.ed-list .ed-list { margin-block: 0; }
-.ed-list-bullet { list-style-type: disc; }
-.ed-list-bullet .ed-list-bullet { list-style-type: circle; }
-.ed-list-bullet .ed-list-bullet .ed-list-bullet { list-style-type: square; }
-.ed-list-ordered { list-style-type: decimal; }
-.ed-list-ordered .ed-list-ordered { list-style-type: lower-alpha; }
-.ed-list-ordered .ed-list-ordered .ed-list-ordered { list-style-type: lower-roman; }
-.ed-listitem { margin: 0; min-height: 1.5em; }
-.ed-table-wrap { margin: 0 0 0.5em; position: relative; }
-.ed-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
-.ed-cell {
-  border: 1px solid #cbd5e1; padding: 6px 8px;
-  vertical-align: top; word-break: break-word; white-space: pre-wrap;
-}
-img[data-embed="image"] { max-width: 100%; }
-.ed-block { position: relative; isolation: isolate; }
-a { color: #2563eb; }
-`;
-}

package/src/index.ts

@@ -1,17 +0,0 @@
-export {
-  documentToHtml,
-  documentToHtmlFragment,
-  documentToJson,
-} from "./html";
-export type { DocumentToHtmlOptions } from "./html";
-export {
-  exportPdfFromDocument,
-  exportPdfFromElement,
-  serializePaginatedHtml,
-} from "./pdf";
-export type {
-  ExportPdfFromDocumentOptions,
-  ExportPdfFromElementOptions,
-  SerializePaginatedHtmlOptions,
-} from "./pdf";
-export { downloadBlob, downloadString } from "./download";

package/src/pdf.ts

@@ -1,223 +0,0 @@
-import type { LegacySerializedDocument, SerializedDocument } from "@sofereditor/core";
-import { documentToHtml, type DocumentToHtmlOptions } from "./html";
-
-export interface ExportPdfFromDocumentOptions extends DocumentToHtmlOptions {
-  /** Suggested file name (used by the OS save dialog as the default). */
-  filename?: string;
-}
-
-/**
- * Open the browser's print dialog for a `SerializedDocument`.
- *
- * Strategy: render the document to standalone HTML in a hidden iframe and call
- * `iframe.contentWindow.print()`. The user picks "Save as PDF" (or any printer)
- * from the native dialog. No external PDF library required.
- *
- * The returned promise resolves after the print dialog closes (`afterprint`).
- */
-export async function exportPdfFromDocument(
-  doc: SerializedDocument | LegacySerializedDocument,
-  options: ExportPdfFromDocumentOptions = {},
-): Promise<void> {
-  const html = documentToHtml(doc, { ...options, standalone: true });
-  await printHtmlInIframe(html, options.filename ?? options.title ?? "Documento");
-}
-
-export interface SerializePaginatedHtmlOptions {
-  /** Document title (becomes `<title>` and is used as default filename). */
-  title?: string;
-  /** Extra CSS appended to the cloned styles (e.g. for headers/footers). */
-  extraCss?: string;
-  /**
-   * Override the `@page { size }`. Default reads `--ed-page-width` /
-   * `--ed-page-height` CSS variables off the root (set by `<Editor>` from the
-   * current `PageSettings`); falls back to A4 if absent.
-   */
-  pageSize?: { width: string; height: string };
-}
-
-export interface ExportPdfFromElementOptions extends SerializePaginatedHtmlOptions {
-  /** Suggested file name. */
-  filename?: string;
-}
-
-function cssPageSizeFromRoot(
-  cs: CSSStyleDeclaration | undefined,
-): { width: string; height: string } {
-  if (!cs) return { width: "210mm", height: "297mm" };
-  const w = cs.getPropertyValue("--ed-page-width").trim();
-  const h = cs.getPropertyValue("--ed-page-height").trim();
-  if (!w || !h) return { width: "210mm", height: "297mm" };
-  // CSS vars come back as e.g. "794px". `@page` accepts px directly.
-  return { width: w, height: h };
-}
-
-/**
- * Serialize a live editor root (the `.ed-root` paginated DOM) into a
- * self-contained HTML string. The output preserves the in-editor pagination
- * decisions verbatim — each `.ed-page` becomes a fixed-size page in the final
- * print medium with no re-layout possible.
- *
- * The returned HTML inlines every accessible stylesheet from the host document
- * (or links it as a fallback for cross-origin sheets) so the layout survives
- * transplant to an iframe, a saved file, or a headless renderer.
- *
- * This is the building block for two paths:
- *  - `exportPdfFromElement` (this file): writes the HTML into a hidden iframe
- *    and calls `window.print()` for the local "Save as PDF" flow.
- *  - Upload-to-server snapshots: POST the string to a backend that converts it
- *    to PDF via Puppeteer's `setContent + page.pdf()` without re-running the
- *    pagination engine.
- */
-export function serializePaginatedHtml(
-  root: HTMLElement,
-  options: SerializePaginatedHtmlOptions = {},
-): string {
-  const clone = root.cloneNode(true) as HTMLElement;
-  // Strip interactive scaffolding that print styles can't see ahead of time.
-  clone.querySelectorAll("[contenteditable]").forEach((el) => {
-    (el as HTMLElement).removeAttribute("contenteditable");
-  });
-  clone.querySelectorAll(".ed-image-overlay").forEach((el) => el.remove());
-
-  // Read the page size baked into the editor via `--ed-page-*` CSS variables.
-  // The Editor component sets these on its root from the current PageSettings
-  // (`packages/react/src/Editor.tsx`). Falls back to A4 if we can't read them.
-  const cs = root.ownerDocument?.defaultView?.getComputedStyle(root);
-  const pageSize = options.pageSize ?? cssPageSizeFromRoot(cs);
-
-  const styles = collectStyles();
-  const title = escapeHtml(options.title ?? "Documento");
-  const extra = options.extraCss ?? "";
-  // The `@page { size }` and page-break rules live inside `@media print` so
-  // they merge cleanly with any host-document print stylesheet that already
-  // declares its own `@page` (e.g. `apps/playground/src/styles.css`). Putting
-  // ours after the cloned `<style>`s gives our override last-write-wins.
-  return [
-    "<!doctype html>",
-    `<html><head><meta charset="utf-8"><title>${title}</title>`,
-    styles,
-    `<style>
-      html, body { margin: 0; padding: 0; background: white; }
-      @media print {
-        @page { size: ${pageSize.width} ${pageSize.height}; margin: 0; }
-        .ed-page { box-shadow: none !important; border: none !important; border-radius: 0 !important; margin: 0 !important; page-break-after: always; break-after: page; }
-        .ed-page:last-child { page-break-after: auto; break-after: auto; }
-        .ed-image-overlay { display: none !important; }
-      }
-      ${extra}
-    </style>`,
-    "</head><body>",
-    clone.outerHTML,
-    "</body></html>",
-  ].join("");
-}
-
-/**
- * Snapshot a live editor root element (the `.ed-root` paginated DOM) and open
- * the browser's print dialog. Preserves the in-editor pagination decisions
- * verbatim — no re-layout in the print frame.
- *
- * For the "send the snapshot to a server" use case, use
- * `serializePaginatedHtml` directly and POST the returned string.
- */
-export async function exportPdfFromElement(
-  root: HTMLElement,
-  options: ExportPdfFromElementOptions = {},
-): Promise<void> {
-  const html = serializePaginatedHtml(root, options);
-  await printHtmlInIframe(html, options.filename ?? options.title ?? "Documento");
-}
-
-// ---------- internals ----------
-
-async function printHtmlInIframe(html: string, _filename: string): Promise<void> {
-  const iframe = document.createElement("iframe");
-  iframe.setAttribute("aria-hidden", "true");
-  iframe.style.cssText =
-    "position:fixed;right:0;bottom:0;width:0;height:0;border:0;visibility:hidden;";
-  document.body.appendChild(iframe);
-
-  const win = iframe.contentWindow;
-  const docu = iframe.contentDocument ?? win?.document;
-  if (!win || !docu) {
-    iframe.remove();
-    throw new Error("export-pdf: failed to access iframe document");
-  }
-
-  docu.open();
-  docu.write(html);
-  docu.close();
-
-  // Wait for the iframe to finish loading (images, fonts).
-  await new Promise<void>((resolve) => {
-    if (docu.readyState === "complete") resolve();
-    else iframe.addEventListener("load", () => resolve(), { once: true });
-  });
-  // Best-effort wait for embedded images: print dialogs that snapshot too early
-  // miss late-loading data URIs (rare, but real).
-  await waitForImages(docu);
-
-  await new Promise<void>((resolve) => {
-    const cleanup = () => {
-      win.removeEventListener("afterprint", cleanup);
-      // Defer removal one tick so Safari's print queue doesn't choke.
-      setTimeout(() => iframe.remove(), 0);
-      resolve();
-    };
-    win.addEventListener("afterprint", cleanup);
-    win.focus();
-    win.print();
-    // Fallback in case afterprint never fires (older browsers).
-    setTimeout(() => {
-      if (iframe.isConnected) cleanup();
-    }, 60_000);
-  });
-}
-
-function collectStyles(): string {
-  const parts: string[] = [];
-  for (const sheet of Array.from(document.styleSheets)) {
-    try {
-      const rules = sheet.cssRules;
-      if (!rules) continue;
-      const css = Array.from(rules)
-        .map((r) => r.cssText)
-        .join("\n");
-      if (css) parts.push(`<style>${css}</style>`);
-    } catch {
-      // Cross-origin sheet — fall back to linking it.
-      const href = sheet.href;
-      if (href) parts.push(`<link rel="stylesheet" href="${escapeAttr(href)}">`);
-    }
-  }
-  return parts.join("\n");
-}
-
-async function waitForImages(docu: Document): Promise<void> {
-  const imgs = Array.from(docu.images);
-  await Promise.all(
-    imgs.map(
-      (img) =>
-        new Promise<void>((resolve) => {
-          if (img.complete) return resolve();
-          img.addEventListener("load", () => resolve(), { once: true });
-          img.addEventListener("error", () => resolve(), { once: true });
-        }),
-    ),
-  );
-}
-
-const HTML_ESCAPES: Record<string, string> = {
-  "&": "&amp;",
-  "<": "&lt;",
-  ">": "&gt;",
-  '"': "&quot;",
-  "'": "&#39;",
-};
-function escapeHtml(s: string): string {
-  return s.replace(/[&<>"']/g, (c) => HTML_ESCAPES[c]);
-}
-function escapeAttr(s: string): string {
-  return escapeHtml(s);
-}

package/tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "noEmit": true,
-    "rootDir": "src"
-  },
-  "include": ["src/**/*"]
-}

package/tsup.config.ts

@@ -1,11 +0,0 @@
-import { defineConfig } from "tsup";
-
-export default defineConfig({
-  entry: ["src/index.ts"],
-  format: ["esm", "cjs"],
-  dts: true,
-  sourcemap: true,
-  clean: true,
-  target: "es2022",
-  external: ["@sofereditor/core"],
-});