@uurtech/jdf 0.2.2 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uurtech/jdf",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Render JDF (JSON Document Format) documents in the browser. Drop-in replacement for embedding PDFs — point at a .jdf file and it appears on the page, fully styled, searchable, with a clickable TOC.",
   "license": "MIT",
   "author": "Ugur Kazdal <ugur@uurtech.com>",

package/src/renderers/element.ts

@@ -103,6 +103,7 @@ function textTag(h: TextElement["heading"]): keyof HTMLElementTagNameMap {
 // ── richtext ────────────────────────────────────────────────────────────────
 function renderRichText(el: RichTextElement, ctx: RenderContext): HTMLElement {
   const p = document.createElement("p");
+  p.style.whiteSpace = "pre-wrap"; // keep "\n" line breaks (folded paragraphs) — same as the reader
   p.className = "jdfjs-richtext";
   p.style.margin = "0";
   applyStyle(p, resolveStyle(el.style, ctx.styles));
@@ -294,7 +295,13 @@ function colWidthCss(w: string | number | undefined): string | undefined {
 function renderTable(el: TableElement, ctx: RenderContext): HTMLElement {
   const wrap = document.createElement("div");
   wrap.className = "jdfjs-table-wrap";
-  applyStyle(wrap, resolveStyle(el.style, ctx.styles));
+  // `style.fontSize` / `lineHeight` size the cells and `style.padding` is the
+  // cell padding (the PDF importer writes compact values so a converted
+  // statement occupies the same box as the source rows). Same rules as the
+  // reader's TableElement — keep them identical.
+  const tableCss = resolveStyle(el.style, ctx.styles);
+  const { padding: cellPad = "8px 12px", ...wrapCss } = tableCss;
+  applyStyle(wrap, wrapCss);
   wrap.style.overflowX = "auto";
 
   const headerCss = (() => {
@@ -335,7 +342,8 @@ function renderTable(el: TableElement, ctx: RenderContext): HTMLElement {
   table.style.width = "100%";
   table.style.borderCollapse = "collapse";
   table.style.tableLayout = el.columns?.some((c) => c.width != null) ? "fixed" : "auto";
-  table.style.fontSize = "14px";
+  table.style.fontSize = tableCss["font-size"] || "14px";
+  if (tableCss["line-height"]) table.style.lineHeight = tableCss["line-height"];
   if (borders.outer) table.style.border = `${borders.width || 1}px solid ${borders.color || "#e2e8f0"}`;
 
   // Column widths — honour columns[].width via a <colgroup> so both header
@@ -358,9 +366,11 @@ function renderTable(el: TableElement, ctx: RenderContext): HTMLElement {
     headers.forEach((h, i) => {
       const th = document.createElement("th");
       th.textContent = h;
-      th.style.padding = "8px 12px";
+      th.style.padding = cellPad;
       th.style.fontWeight = "600";
-      th.style.background = "#f8fafc";
+      // Designed tables get the light header band; a table that brings its own
+      // headerStyle (the PDF importer, hand-authored docs) shows exactly that.
+      if (!el.headerStyle) th.style.background = "#f8fafc";
       th.style.textAlign = colAlign(i) || "left";
       if (borders.inner) th.style.border = `${borders.width || 1}px solid ${borders.color || "#e2e8f0"}`;
       tr.appendChild(th);
@@ -381,13 +391,17 @@ function renderTable(el: TableElement, ctx: RenderContext): HTMLElement {
     const tr = document.createElement("tr");
     applyStyle(tr, rowCss as any);
     if (ri % 2 === 1) applyStyle(tr, altRowCss as any);
+    // A spacer row (every cell empty — the PDF importer keeps a statement's
+    // blank separator lines) must still be one line tall, so it gets a
+    // non-breaking space; an empty cell in a filled row stays empty.
+    const blankRow = row.every((c) => cellText(c) === "");
     row.forEach((cell, ci) => {
       const td = document.createElement("td");
-      td.textContent = cellText(cell);
+      td.textContent = blankRow ? "\u00a0" : cellText(cell);
       const attrs = cellAttrs(cell);
       if (attrs.colspan) td.colSpan = attrs.colspan;
       if (attrs.rowspan) td.rowSpan = attrs.rowspan;
-      td.style.padding = "8px 12px";
+      td.style.padding = cellPad;
       td.style.verticalAlign = "top";
       // Cell-level align wins over the column default.
       td.style.textAlign = cellAlign(cell) || colAlign(ci) || "left";

package/src/utils/style.ts

@@ -1,3 +1,4 @@
+import { unitToPx } from "@jdf/core";
 import type { Style, StyleRef } from "@jdf/core";
 
 function paddingToCss(p: NonNullable<Style["padding"]>): string {
@@ -16,6 +17,8 @@ export function styleToCss(style: Style): Record<string, string> {
   if (style.color) css["color"] = style.color;
   if (style.backgroundColor) css["background-color"] = style.backgroundColor;
   if (style.textAlign) css["text-align"] = style.textAlign;
+  if (style.lineHeight) css["line-height"] = String(style.lineHeight); // unitless, same as the reader
+  if (style.textIndent) css["text-indent"] = `${unitToPx(style.textIndent)}px`;
   if (style.textDecoration) {
     const td = style.textDecoration === "strikethrough" ? "line-through" : style.textDecoration;
     css["text-decoration"] = td;