@lotics/docx 0.1.0

package/src/render/table_dom.ts

@@ -0,0 +1,288 @@
+import {
+  getAttr,
+  getChildren,
+  getTagName,
+  getTextContent,
+  type XmlElement,
+} from "@lotics/ooxml/xml";
+import {
+  extractParagraphProperties,
+  extractRunProperties,
+} from "../model/properties";
+import type { ParagraphProperties, RunProperties } from "../model/properties";
+import { halfPointsToPx } from "./units";
+
+function alignmentCss(align: ParagraphProperties["alignment"]): string | null {
+  if (align === null) return null;
+  if (align === "both") return "justify";
+  if (align === "start") return "left";
+  if (align === "end") return "right";
+  return align;
+}
+
+function buildParagraphInlineStyle(props: ParagraphProperties): string {
+  const parts: string[] = [];
+  const align = alignmentCss(props.alignment);
+  if (align) parts.push(`text-align: ${align}`);
+  return parts.join("; ");
+}
+
+function buildRunInlineStyle(props: RunProperties): string {
+  const parts: string[] = [];
+  const family = props.fontAscii ?? props.fontHAnsi ?? props.fontEastAsia;
+  if (family) parts.push(`font-family: "${family}"`);
+  if (props.size !== null) parts.push(`font-size: ${halfPointsToPx(props.size).toFixed(2)}px`);
+  if (props.color !== null) parts.push(`color: #${props.color}`);
+  if (props.highlight !== null) parts.push(`background-color: ${props.highlight}`);
+  return parts.join("; ");
+}
+
+function renderRun(runEl: XmlElement): HTMLElement {
+  const span = document.createElement("span");
+  let runProps: RunProperties | null = null;
+
+  for (const child of getChildren(runEl)) {
+    const tag = getTagName(child);
+    if (tag === "w:rPr") {
+      runProps = extractRunProperties(getChildren(child));
+      const style = buildRunInlineStyle(runProps);
+      if (style.length > 0) span.setAttribute("style", style);
+      continue;
+    }
+    if (tag === "w:t") {
+      span.appendChild(document.createTextNode(getTextContent(child)));
+      continue;
+    }
+    if (tag === "w:tab") {
+      span.appendChild(document.createTextNode("\t"));
+      continue;
+    }
+    if (tag === "w:br") {
+      span.appendChild(document.createElement("br"));
+      continue;
+    }
+  }
+
+  let inner: HTMLElement = span;
+  if (runProps) {
+    if (runProps.bold === true) {
+      const strong = document.createElement("strong");
+      while (inner.firstChild) strong.appendChild(inner.firstChild);
+      inner.appendChild(strong);
+      inner = strong;
+    }
+    if (runProps.italic === true) {
+      const em = document.createElement("em");
+      while (inner.firstChild) em.appendChild(inner.firstChild);
+      inner.appendChild(em);
+      inner = em;
+    }
+    if (runProps.underline !== null) {
+      const u = document.createElement("u");
+      while (inner.firstChild) u.appendChild(inner.firstChild);
+      inner.appendChild(u);
+      inner = u;
+    }
+  }
+
+  return span;
+}
+
+function renderHyperlink(hyperlinkEl: XmlElement): HTMLElement {
+  const a = document.createElement("a");
+  const anchor = getAttr(hyperlinkEl, "w:anchor");
+  if (anchor) a.setAttribute("href", `#${anchor}`);
+  else a.setAttribute("href", "#");
+  for (const child of getChildren(hyperlinkEl)) {
+    if (getTagName(child) === "w:r") {
+      a.appendChild(renderRun(child));
+    }
+  }
+  return a;
+}
+
+export function renderParagraph(pEl: XmlElement): HTMLElement {
+  const p = document.createElement("p");
+  p.className = "docx-paragraph";
+
+  let pPrChildren: XmlElement[] | null = null;
+  for (const child of getChildren(pEl)) {
+    const tag = getTagName(child);
+    if (tag === "w:pPr") {
+      pPrChildren = getChildren(child);
+      const props = extractParagraphProperties(pPrChildren);
+      const style = buildParagraphInlineStyle(props);
+      if (style.length > 0) p.setAttribute("style", style);
+      continue;
+    }
+    if (tag === "w:r") {
+      p.appendChild(renderRun(child));
+      continue;
+    }
+    if (tag === "w:hyperlink") {
+      p.appendChild(renderHyperlink(child));
+      continue;
+    }
+  }
+  return p;
+}
+
+function pickBorderColor(value: string | undefined): string | null {
+  if (!value || value === "auto") return null;
+  return `#${value}`;
+}
+
+function renderCellBorder(side: string, borderEl: XmlElement | null): string | null {
+  if (!borderEl) return null;
+  const styleVal = getAttr(borderEl, "w:val") ?? "single";
+  const color = pickBorderColor(getAttr(borderEl, "w:color"));
+  const sizePts = (() => {
+    const v = getAttr(borderEl, "w:sz");
+    if (!v) return 0.5;
+    const n = Number.parseInt(v, 10);
+    return Number.isFinite(n) ? n / 8 : 0.5;
+  })();
+  if (styleVal === "nil" || styleVal === "none") return `border-${side}: 0`;
+  const cssStyle = styleVal === "double" ? "double" : "solid";
+  const colorStr = color ?? "#888";
+  return `border-${side}: ${sizePts}pt ${cssStyle} ${colorStr}`;
+}
+
+function applyCellBorders(td: HTMLElement, tcPr: XmlElement | null): void {
+  if (!tcPr) return;
+  let borders: XmlElement | null = null;
+  for (const child of getChildren(tcPr)) {
+    if (getTagName(child) === "w:tcBorders") {
+      borders = child;
+      break;
+    }
+  }
+  if (!borders) return;
+  const sides: Array<[string, string]> = [
+    ["w:top", "top"],
+    ["w:bottom", "bottom"],
+    ["w:left", "left"],
+    ["w:right", "right"],
+  ];
+  const styles: string[] = [];
+  for (const [borderTag, cssSide] of sides) {
+    let borderEl: XmlElement | null = null;
+    for (const child of getChildren(borders)) {
+      if (getTagName(child) === borderTag) {
+        borderEl = child;
+        break;
+      }
+    }
+    const css = renderCellBorder(cssSide, borderEl);
+    if (css) styles.push(css);
+  }
+  const existing = td.getAttribute("style") ?? "";
+  td.setAttribute(
+    "style",
+    [existing, ...styles].filter((s) => s.length > 0).join("; "),
+  );
+}
+
+function renderCell(tcEl: XmlElement, vMergeOpen: number[], colIdx: number): HTMLElement | null {
+  let tcPr: XmlElement | null = null;
+  let gridSpan = 1;
+  let vMerge: "restart" | "continue" | null = null;
+
+  for (const child of getChildren(tcEl)) {
+    const tag = getTagName(child);
+    if (tag === "w:tcPr") {
+      tcPr = child;
+      for (const propChild of getChildren(tcPr)) {
+        const propTag = getTagName(propChild);
+        if (propTag === "w:gridSpan") {
+          const v = getAttr(propChild, "w:val");
+          if (v) {
+            const n = Number.parseInt(v, 10);
+            if (Number.isFinite(n) && n > 0) gridSpan = n;
+          }
+        } else if (propTag === "w:vMerge") {
+          const v = getAttr(propChild, "w:val");
+          vMerge = v === "restart" ? "restart" : "continue";
+        }
+      }
+    }
+  }
+
+  if (vMerge === "continue") {
+    if (vMergeOpen[colIdx] !== undefined) vMergeOpen[colIdx] += 1;
+    return null;
+  }
+
+  const td = document.createElement("td");
+  if (gridSpan > 1) td.setAttribute("colspan", String(gridSpan));
+  if (vMerge === "restart") {
+    vMergeOpen[colIdx] = 1;
+    td.setAttribute("data-vmerge", "restart");
+  }
+
+  applyCellBorders(td, tcPr);
+
+  for (const child of getChildren(tcEl)) {
+    const tag = getTagName(child);
+    if (tag === "w:p") td.appendChild(renderParagraph(child));
+    else if (tag === "w:tbl") td.appendChild(renderTable(child));
+  }
+  return td;
+}
+
+function finalizeRowSpans(rows: HTMLTableRowElement[]): void {
+  for (const row of rows) {
+    for (let i = 0; i < row.cells.length; i++) {
+      const cell = row.cells[i];
+      const spanAttr = cell.getAttribute("data-row-span");
+      if (spanAttr !== null) cell.setAttribute("rowspan", spanAttr);
+    }
+  }
+}
+
+export function renderTable(tableEl: XmlElement): HTMLElement {
+  const table = document.createElement("table");
+  table.className = "docx-table";
+  table.style.borderCollapse = "collapse";
+
+  const tbody = document.createElement("tbody");
+  table.appendChild(tbody);
+
+  const rows: HTMLTableRowElement[] = [];
+  const vMergeOpen: number[] = [];
+  const vMergeOriginCell: Array<HTMLTableCellElement | null> = [];
+
+  for (const child of getChildren(tableEl)) {
+    if (getTagName(child) !== "w:tr") continue;
+    const tr = document.createElement("tr");
+    let colIdx = 0;
+    for (const tc of getChildren(child)) {
+      if (getTagName(tc) !== "w:tc") continue;
+      const cell = renderCell(tc, vMergeOpen, colIdx);
+      if (cell) {
+        if (cell.getAttribute("data-vmerge") === "restart") {
+          vMergeOriginCell[colIdx] = cell as HTMLTableCellElement;
+        }
+        tr.appendChild(cell);
+      } else if (vMergeOriginCell[colIdx]) {
+        const origin = vMergeOriginCell[colIdx]!;
+        const current = origin.getAttribute("data-row-span");
+        const next = current ? Number.parseInt(current, 10) + 1 : 2;
+        origin.setAttribute("data-row-span", String(next));
+      }
+      const cellSpanAttr = cell?.getAttribute("colspan");
+      const span = cellSpanAttr ? Number.parseInt(cellSpanAttr, 10) : 1;
+      colIdx += span;
+    }
+    tbody.appendChild(tr);
+    rows.push(tr);
+  }
+
+  finalizeRowSpans(rows);
+  return table;
+}
+
+export function isTableXml(xml: unknown): xml is XmlElement {
+  if (typeof xml !== "object" || xml === null) return false;
+  return getTagName(xml as XmlElement) === "w:tbl";
+}

package/src/render/units.ts

@@ -0,0 +1,18 @@
+export const DXA_PER_INCH = 1440;
+export const PX_PER_INCH = 96;
+
+export function dxaToPx(dxa: number): number {
+  return (dxa * PX_PER_INCH) / DXA_PER_INCH;
+}
+
+export function halfPointsToPx(halfPoints: number): number {
+  return (halfPoints / 2) * (PX_PER_INCH / 72);
+}
+
+export function emuToPx(emu: number): number {
+  return (emu * PX_PER_INCH) / 914400;
+}
+
+export function pxToEmu(px: number): number {
+  return Math.round((px * 914400) / PX_PER_INCH);
+}

package/src/render/view.test.ts

@@ -0,0 +1,165 @@
+// @vitest-environment happy-dom
+import { describe, it, expect, beforeEach } from "vitest";
+import { docxSchema } from "../pm/schema";
+import { buildFontRegistry } from "../fonts/registry";
+import { DEFAULT_SECTION_PROPERTIES } from "../model/sections";
+import { createReadOnlyView } from "./view";
+import type { Section } from "../model/sections";
+
+const fontRegistry = buildFontRegistry({
+  embeddedFonts: [],
+  workspaceFonts: [],
+});
+
+const defaultSections: Section[] = [
+  {
+    properties: { ...DEFAULT_SECTION_PROPERTIES },
+    blockStartIndex: 0,
+    blockEndIndex: 0,
+  },
+];
+
+function paraWithText(text: string, marks: string[] = []) {
+  const { paragraph } = docxSchema.nodes;
+  const markInstances = marks.map((m) => docxSchema.marks[m].create());
+  return paragraph.create({}, [docxSchema.text(text, markInstances)]);
+}
+
+let host: HTMLElement;
+
+beforeEach(() => {
+  document.body.innerHTML = "";
+  host = document.createElement("div");
+  document.body.appendChild(host);
+});
+
+describe("createReadOnlyView", () => {
+  it("mounts an EditorView inside the page stack", () => {
+    const doc = docxSchema.nodes.doc.create({}, [paraWithText("Hello")]);
+    const view = createReadOnlyView(host, doc, {
+      fontRegistry,
+      sections: defaultSections,
+    });
+
+    expect(host.querySelector(".docx-page-stack")).not.toBeNull();
+    expect(host.querySelector("[data-docx-editor]")).not.toBeNull();
+    expect(host.textContent).toContain("Hello");
+    view.destroy();
+  });
+
+  it("sizes the canvas inner from section page geometry (8.5\" x 11\")", () => {
+    const doc = docxSchema.nodes.doc.create({}, [paraWithText("page sizing")]);
+    const view = createReadOnlyView(host, doc, {
+      fontRegistry,
+      sections: defaultSections,
+    });
+
+    const canvasInner = host.querySelector(".docx-canvas-inner") as HTMLElement;
+    // 8.5 inch * 96 dpi = 816 px
+    expect(canvasInner.style.width).toBe("816px");
+    view.destroy();
+  });
+
+  it("renders bold marks as <strong>", () => {
+    const doc = docxSchema.nodes.doc.create({}, [
+      paraWithText("emphasized", ["bold"]),
+    ]);
+    const view = createReadOnlyView(host, doc, {
+      fontRegistry,
+      sections: defaultSections,
+    });
+
+    expect(host.querySelector("strong")).not.toBeNull();
+    expect(host.querySelector("strong")!.textContent).toBe("emphasized");
+    view.destroy();
+  });
+
+  it("renders italic marks as <em>", () => {
+    const doc = docxSchema.nodes.doc.create({}, [
+      paraWithText("italicized", ["italic"]),
+    ]);
+    const view = createReadOnlyView(host, doc, {
+      fontRegistry,
+      sections: defaultSections,
+    });
+
+    expect(host.querySelector("em")).not.toBeNull();
+    view.destroy();
+  });
+
+  it("renders opaque_block via custom nodeView with placeholder text for unsupported XML", () => {
+    const { doc, paragraph, opaque_block } = docxSchema.nodes;
+    const node = doc.create({}, [
+      paragraph.create({}, []),
+      opaque_block.create({ xml: { "w:sdt": [] } }),
+    ]);
+    const view = createReadOnlyView(host, node, {
+      fontRegistry,
+      sections: defaultSections,
+    });
+
+    const placeholder = host.querySelector("[data-opaque-block]");
+    expect(placeholder).not.toBeNull();
+    expect(placeholder!.textContent).toContain("unsupported");
+    view.destroy();
+  });
+
+  it("renders section_break via custom nodeView (hidden indicator)", () => {
+    const { doc, paragraph, section_break } = docxSchema.nodes;
+    const node = doc.create({}, [
+      paragraph.create({}, []),
+      section_break.create({
+        properties: { ...DEFAULT_SECTION_PROPERTIES },
+        isFinal: true,
+      }),
+    ]);
+    const view = createReadOnlyView(host, node, {
+      fontRegistry,
+      sections: defaultSections,
+    });
+
+    const breakEl = host.querySelector("[data-section-break]");
+    expect(breakEl).not.toBeNull();
+    expect(breakEl!.getAttribute("data-final")).toBe("true");
+    view.destroy();
+  });
+
+  it("is non-editable", () => {
+    const doc = docxSchema.nodes.doc.create({}, [paraWithText("locked")]);
+    const view = createReadOnlyView(host, doc, {
+      fontRegistry,
+      sections: defaultSections,
+    });
+    expect(view.editorView.editable).toBe(false);
+    const editorContent = host.querySelector(".ProseMirror") as HTMLElement;
+    expect(editorContent.getAttribute("contenteditable")).toBe("false");
+    view.destroy();
+  });
+
+  it("injects a stylesheet with @font-face rules for bundled fonts", () => {
+    const doc = docxSchema.nodes.doc.create({}, [paraWithText("fonts")]);
+    const view = createReadOnlyView(host, doc, {
+      fontRegistry,
+      sections: defaultSections,
+    });
+
+    const styleEl = host.querySelector(
+      "style[data-docx-editor-styles]",
+    ) as HTMLStyleElement;
+    expect(styleEl).not.toBeNull();
+    expect(styleEl.textContent).toContain("@font-face");
+    expect(styleEl.textContent).toContain("Liberation Serif");
+    view.destroy();
+  });
+
+  it("destroy() removes the editor and styles", () => {
+    const doc = docxSchema.nodes.doc.create({}, [paraWithText("destroy")]);
+    const view = createReadOnlyView(host, doc, {
+      fontRegistry,
+      sections: defaultSections,
+    });
+    view.destroy();
+    expect(host.querySelector(".docx-canvas")).toBeNull();
+    expect(host.querySelector("style[data-docx-editor-styles]")).toBeNull();
+  });
+});