@lotics/docx 0.1.0

package/src/render/node_views.ts

@@ -0,0 +1,296 @@
+import type { Node as PMNode } from "prosemirror-model";
+import type { EditorView, NodeView } from "prosemirror-view";
+import { emuToPx, pxToEmu } from "./units";
+import type { MediaResolver } from "./media_resolver";
+import { isTableXml, renderTable } from "./table_dom";
+import { paginationPluginKey } from "../pm/pagination_plugin";
+import type { LayoutResult } from "../layout/types";
+
+export function sectionBreakView(node: PMNode): NodeView {
+  const dom = document.createElement("div");
+  dom.className = "docx-section-break";
+  dom.setAttribute("data-section-break", "true");
+  dom.setAttribute("aria-hidden", "true");
+  if (node.attrs.isFinal === true) {
+    dom.setAttribute("data-final", "true");
+  }
+  return { dom };
+}
+
+export function opaqueBlockView(node: PMNode): NodeView {
+  const dom = document.createElement("div");
+  dom.className = "docx-opaque-block";
+  dom.setAttribute("data-opaque-block", "true");
+
+  const xml = node.attrs.xml;
+  if (isTableXml(xml)) {
+    dom.appendChild(renderTable(xml));
+  } else {
+    const placeholder = document.createElement("div");
+    placeholder.className = "docx-opaque-block__placeholder";
+    placeholder.textContent = "[unsupported content]";
+    dom.appendChild(placeholder);
+  }
+  return { dom };
+}
+
+export function opaqueInlineView(): NodeView {
+  const dom = document.createElement("span");
+  dom.className = "docx-opaque-inline";
+  dom.setAttribute("data-opaque-inline", "true");
+  return { dom };
+}
+
+function applyAnchorStyle(
+  wrapper: HTMLElement,
+  wrap: string | null,
+  floatSide: string | null,
+  behindDoc: boolean,
+  offsetXEmu: number | null,
+  offsetYEmu: number | null,
+): void {
+  // behindDoc: image renders behind text. The wrapper stays in flow when
+  // wrap is "none" but its z-index drops below the editor content.
+  if (behindDoc) {
+    wrapper.style.zIndex = "-1";
+  }
+
+  if (!wrap) return;
+  if (wrap === "topAndBottom") {
+    wrapper.style.display = "block";
+    wrapper.style.clear = "both";
+    return;
+  }
+  if (wrap === "none") {
+    // wrap:none + behindDoc=true = "Behind text" mode (image positioned
+    // freely, text flows over it). wrap:none + behindDoc=false = "In front
+    // of text" mode.
+    wrapper.style.position = "absolute";
+    if (offsetXEmu !== null) wrapper.style.left = `${emuToPx(offsetXEmu)}px`;
+    if (offsetYEmu !== null) wrapper.style.top = `${emuToPx(offsetYEmu)}px`;
+    if (!behindDoc) wrapper.style.zIndex = "2";
+    return;
+  }
+  if (floatSide === "right") {
+    wrapper.style.float = "right";
+    wrapper.style.marginLeft = "8px";
+  } else {
+    wrapper.style.float = "left";
+    wrapper.style.marginRight = "8px";
+  }
+  if (wrap === "tight" || wrap === "through") {
+    wrapper.style.shapeOutside = "margin-box";
+  }
+}
+
+type ResizeCorner = "nw" | "ne" | "sw" | "se";
+
+function attachResizeHandles(
+  wrapper: HTMLElement,
+  img: HTMLElement,
+  view: EditorView,
+  getPos: () => number | undefined,
+): void {
+  const corners: ResizeCorner[] = ["nw", "ne", "sw", "se"];
+  for (const corner of corners) {
+    const handle = document.createElement("span");
+    handle.className = `docx-image-resize-handle docx-image-resize-handle--${corner}`;
+    handle.setAttribute("data-corner", corner);
+    handle.setAttribute("contenteditable", "false");
+    wrapper.appendChild(handle);
+
+    handle.addEventListener("pointerdown", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      handle.setPointerCapture(e.pointerId);
+      const startX = e.clientX;
+      const startY = e.clientY;
+      const rect = img.getBoundingClientRect();
+      const startW = rect.width;
+      const startH = rect.height;
+      const ratio = startH / Math.max(startW, 1);
+
+      const onMove = (m: PointerEvent) => {
+        const dxRaw = m.clientX - startX;
+        const dyRaw = m.clientY - startY;
+        const sx = corner === "ne" || corner === "se" ? 1 : -1;
+        const sy = corner === "sw" || corner === "se" ? 1 : -1;
+        let nextW = Math.max(20, startW + dxRaw * sx);
+        let nextH = Math.max(20, startH + dyRaw * sy);
+        if (m.shiftKey) {
+          // Constrain aspect using width as driver
+          nextH = nextW * ratio;
+        }
+        img.style.width = `${nextW}px`;
+        img.style.height = `${nextH}px`;
+      };
+      const onUp = (u: PointerEvent) => {
+        handle.releasePointerCapture(u.pointerId);
+        handle.removeEventListener("pointermove", onMove);
+        handle.removeEventListener("pointerup", onUp);
+        const finalRect = img.getBoundingClientRect();
+        const pos = getPos();
+        if (pos === undefined) return;
+        const node = view.state.doc.nodeAt(pos);
+        if (!node) return;
+        const tr = view.state.tr.setNodeMarkup(pos, undefined, {
+          ...node.attrs,
+          widthEmu: pxToEmu(finalRect.width),
+          heightEmu: pxToEmu(finalRect.height),
+        });
+        view.dispatch(tr);
+      };
+      handle.addEventListener("pointermove", onMove);
+      handle.addEventListener("pointerup", onUp);
+    });
+  }
+}
+
+export function buildImageInlineView(media: MediaResolver) {
+  return (node: PMNode, view: EditorView, getPos: () => number | undefined): NodeView => {
+    const wrapper = document.createElement("span");
+    wrapper.className = "docx-image-inline";
+    const relId = node.attrs.relationshipId as string | null;
+    if (relId) wrapper.setAttribute("data-rid", relId);
+
+    const widthEmu = node.attrs.widthEmu as number | null;
+    const heightEmu = node.attrs.heightEmu as number | null;
+    const alt = (node.attrs.alt as string) ?? "";
+    const wrap = node.attrs.wrap as string | null;
+    const floatSide = node.attrs.floatSide as string | null;
+    const behindDoc = (node.attrs.behindDoc as boolean | null) ?? false;
+    const offsetXEmu = node.attrs.offsetXEmu as number | null;
+    const offsetYEmu = node.attrs.offsetYEmu as number | null;
+
+    if (wrap || behindDoc) {
+      wrapper.classList.add("docx-image-inline--anchored");
+      if (wrap) wrapper.setAttribute("data-wrap", wrap);
+      if (floatSide) wrapper.setAttribute("data-float-side", floatSide);
+      if (behindDoc) wrapper.setAttribute("data-behind-doc", "true");
+      applyAnchorStyle(
+        wrapper,
+        wrap,
+        floatSide,
+        behindDoc,
+        offsetXEmu,
+        offsetYEmu,
+      );
+    }
+
+    const url = relId ? media.resolveByRelationshipId(relId) : null;
+    if (url) {
+      const img = document.createElement("img");
+      img.setAttribute("src", url);
+      img.setAttribute("alt", alt);
+      img.setAttribute("draggable", "false");
+      if (widthEmu !== null) img.style.width = `${emuToPx(widthEmu)}px`;
+      if (heightEmu !== null) img.style.height = `${emuToPx(heightEmu)}px`;
+      wrapper.appendChild(img);
+      if (view.editable) attachResizeHandles(wrapper, img, view, getPos);
+    } else {
+      const placeholder = document.createElement("span");
+      placeholder.className = "docx-image-inline__placeholder";
+      placeholder.textContent = alt ? `[image: ${alt}]` : "[image]";
+      wrapper.appendChild(placeholder);
+    }
+    return { dom: wrapper };
+  };
+}
+
+export function imageInlineView(
+  node: PMNode,
+  view: EditorView,
+  getPos: () => number | undefined,
+): NodeView {
+  return buildImageInlineView({
+    resolveByRelationshipId: () => null,
+    destroy: () => {},
+  })(node, view, getPos);
+}
+
+export function fieldInlineView(
+  node: PMNode,
+  view: import("prosemirror-view").EditorView | undefined,
+  getPos: (() => number | undefined) | undefined,
+): NodeView {
+  const dom = document.createElement("span");
+  dom.className = "docx-field-inline";
+  dom.setAttribute("data-field", node.attrs.instruction as string);
+
+  const render = (currentNode: PMNode) => {
+    const instruction = (currentNode.attrs.instruction as string) || "";
+    const resolved = resolveFieldText(instruction, view, getPos);
+    dom.textContent =
+      resolved !== null
+        ? resolved
+        : ((currentNode.attrs.cachedResult as string) || "");
+  };
+
+  render(node);
+
+  return {
+    dom,
+    update(nextNode) {
+      if (nextNode.type.name !== "field_inline") return false;
+      render(nextNode);
+      return true;
+    },
+  };
+}
+
+/**
+ * Resolve PAGE / NUMPAGES field instructions against the pagination
+ * plugin state. Returns null for instructions the renderer doesn't
+ * recognize, so the caller falls back to the cached OOXML result.
+ *
+ * Word fields use a SPACE-separated instruction string. We tolerate
+ * whitespace and switches by checking the first significant token.
+ */
+function resolveFieldText(
+  instruction: string,
+  view: import("prosemirror-view").EditorView | undefined,
+  getPos: (() => number | undefined) | undefined,
+): string | null {
+  if (!view) return null;
+  const token = instruction.trim().split(/\s+/)[0]?.toUpperCase() ?? "";
+  if (token !== "PAGE" && token !== "NUMPAGES") return null;
+  const layout = paginationPluginKey.getState(view.state)?.layout;
+  if (!layout) return null;
+  if (token === "NUMPAGES") return String(layout.totalPages);
+  const pos = getPos?.();
+  if (pos === undefined) return null;
+  const pageNumber = pageNumberForPos(layout, view.state.doc, pos);
+  return String(pageNumber);
+}
+
+/**
+ * Map a PM doc position to the page number that contains it. Uses the
+ * cumulative block sizes to determine which top-level block holds the
+ * position, then looks the block up in the layout result.
+ */
+function pageNumberForPos(
+  layout: LayoutResult,
+  doc: PMNode,
+  pos: number,
+): number {
+  let acc = 0;
+  let blockIndex = -1;
+  for (let i = 0; i < doc.childCount; i++) {
+    const size = doc.child(i).nodeSize;
+    if (pos >= acc && pos < acc + size) {
+      blockIndex = i;
+      break;
+    }
+    acc += size;
+  }
+  if (blockIndex === -1) return 1;
+  for (const page of layout.pages) {
+    if (
+      blockIndex >= page.firstBlockIndex &&
+      blockIndex <= page.lastBlockIndex
+    ) {
+      return page.pageNumber;
+    }
+  }
+  return 1;
+}

package/src/render/numbering_counter.ts

@@ -0,0 +1,149 @@
+import type {
+  AbstractNum,
+  NumberFormat,
+  NumberingLevel,
+  NumberingTable,
+} from "../model/numbering_table";
+
+export type NumberingState = Map<number, Map<number, number>>;
+
+function intToLowerLetter(n: number): string {
+  if (n <= 0) return "";
+  let value = n;
+  let out = "";
+  while (value > 0) {
+    const rem = (value - 1) % 26;
+    out = String.fromCharCode(0x61 + rem) + out;
+    value = Math.floor((value - 1) / 26);
+  }
+  return out;
+}
+
+function intToRoman(n: number): string {
+  if (n <= 0) return "";
+  const map: Array<[number, string]> = [
+    [1000, "m"],
+    [900, "cm"],
+    [500, "d"],
+    [400, "cd"],
+    [100, "c"],
+    [90, "xc"],
+    [50, "l"],
+    [40, "xl"],
+    [10, "x"],
+    [9, "ix"],
+    [5, "v"],
+    [4, "iv"],
+    [1, "i"],
+  ];
+  let value = n;
+  let out = "";
+  for (const [v, sym] of map) {
+    while (value >= v) {
+      out += sym;
+      value -= v;
+    }
+  }
+  return out;
+}
+
+function formatLevelValue(numFmt: NumberFormat, value: number): string {
+  switch (numFmt) {
+    case "decimal":
+      return String(value);
+    case "decimalZero":
+      return value < 10 ? `0${value}` : String(value);
+    case "lowerLetter":
+      return intToLowerLetter(value);
+    case "upperLetter":
+      return intToLowerLetter(value).toUpperCase();
+    case "lowerRoman":
+      return intToRoman(value);
+    case "upperRoman":
+      return intToRoman(value).toUpperCase();
+    case "bullet":
+    case "none":
+      return "";
+  }
+}
+
+function applyTemplate(
+  lvlText: string,
+  counters: ReadonlyMap<number, number>,
+  abstractNum: AbstractNum,
+): string {
+  return lvlText.replace(/%(\d+)/g, (_, idxStr: string) => {
+    const idx = Number.parseInt(idxStr, 10) - 1;
+    const value = counters.get(idx) ?? abstractNum.levels.get(idx)?.start ?? 1;
+    const fmt = abstractNum.levels.get(idx)?.numFmt ?? "decimal";
+    return formatLevelValue(fmt, value);
+  });
+}
+
+function getLevel(
+  table: NumberingTable,
+  numId: number,
+  ilvl: number,
+): { level: NumberingLevel; abstractNum: AbstractNum } | null {
+  const num = table.nums.get(numId);
+  if (!num) return null;
+  const abstractNum = table.abstractNums.get(num.abstractNumId);
+  if (!abstractNum) return null;
+
+  const override = num.overrides.get(ilvl);
+  if (override?.level) {
+    return { level: override.level, abstractNum };
+  }
+
+  const level = abstractNum.levels.get(ilvl);
+  if (!level) return null;
+  return { level, abstractNum };
+}
+
+export function createNumberingState(): NumberingState {
+  return new Map();
+}
+
+export function computeLabel(
+  state: NumberingState,
+  table: NumberingTable,
+  numId: number,
+  ilvl: number,
+): string | null {
+  const resolved = getLevel(table, numId, ilvl);
+  if (!resolved) return null;
+  const { level, abstractNum } = resolved;
+
+  let counters = state.get(numId);
+  if (!counters) {
+    counters = new Map();
+    state.set(numId, counters);
+  }
+
+  const num = table.nums.get(numId);
+  const override = num?.overrides.get(ilvl);
+
+  let current = counters.get(ilvl);
+  if (current === undefined) {
+    current = override?.startOverride ?? level.start;
+  } else {
+    current += 1;
+  }
+  counters.set(ilvl, current);
+
+  for (const [otherIlvl, lvl] of abstractNum.levels) {
+    if (otherIlvl <= ilvl) continue;
+    const restart = lvl.lvlRestart ?? otherIlvl;
+    if (restart >= ilvl + 1) {
+      counters.delete(otherIlvl);
+    }
+  }
+
+  if (level.numFmt === "bullet") {
+    return level.lvlText;
+  }
+  if (level.numFmt === "none") {
+    return "";
+  }
+  return applyTemplate(level.lvlText, counters, abstractNum);
+}

package/src/render/page_chrome.test.ts

@@ -0,0 +1,262 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it } from "vitest";
+import {
+  DEFAULT_SECTION_PROPERTIES,
+  type Section,
+} from "../model/sections";
+import type { HeaderFooterRegistry } from "../parse/header_footer";
+import type { LayoutResult, SectionGeometry } from "../layout/types";
+import { createPageChromeManager } from "./page_chrome";
+
+const baseSection: Section = {
+  properties: { ...DEFAULT_SECTION_PROPERTIES },
+  blockStartIndex: 0,
+  blockEndIndex: 0,
+};
+
+const baseGeometry: SectionGeometry = {
+  sectionIndex: 0,
+  blockStartIndex: 0,
+  blockEndIndex: 0,
+  pageHeight: 1056,
+  pageWidth: 816,
+  pageContentHeight: 900,
+  headerBand: 78,
+  footerBand: 78,
+  titlePage: false,
+  hasEvenHeader: false,
+};
+
+function layout(pageCount: number): LayoutResult {
+  return {
+    pages: Array.from({ length: pageCount }, (_, i) => ({
+      pageNumber: i + 1,
+      sectionIndex: 0,
+      firstBlockIndex: i,
+      lastBlockIndex: i,
+      headerKind: "default" as const,
+      isFirstInSection: i === 0,
+      startsWithContinuation: null,
+      endsWithContinuation: null,
+    })),
+    totalPages: pageCount,
+  };
+}
+
+let host: HTMLDivElement;
+
+beforeEach(() => {
+  document.body.innerHTML = "";
+  host = document.createElement("div");
+  document.body.appendChild(host);
+});
+
+describe("createPageChromeManager", () => {
+  it("mounts a layer with N page rectangles", () => {
+    const mgr = createPageChromeManager({
+      host,
+      sections: [baseSection],
+      sectionGeometries: [baseGeometry],
+      headerFooterRegistry: null,
+    });
+
+    mgr.setLayout(layout(3));
+
+    const layer = host.querySelector(".docx-pages-layer");
+    expect(layer).toBeTruthy();
+    expect(layer?.querySelectorAll(".docx-page")).toHaveLength(3);
+  });
+
+  it("positions pages stacked with a fixed gap", () => {
+    const mgr = createPageChromeManager({
+      host,
+      sections: [baseSection],
+      sectionGeometries: [baseGeometry],
+      headerFooterRegistry: null,
+      pageGapPx: 30,
+    });
+
+    mgr.setLayout(layout(3));
+
+    const pages = Array.from(host.querySelectorAll<HTMLElement>(".docx-page"));
+    expect(pages[0].style.top).toBe("0px");
+    // Page 2: 1056 + 30 = 1086
+    expect(pages[1].style.top).toBe("1086px");
+    // Page 3: 2 * (1056 + 30) = 2172
+    expect(pages[2].style.top).toBe("2172px");
+
+    // Layer total height = 3 pages + 2 gaps = 3*1056 + 2*30 = 3228
+    expect((host.querySelector(".docx-pages-layer") as HTMLElement).style.height).toBe(
+      "3228px",
+    );
+  });
+
+  it("adds new pages when layout grows", () => {
+    const mgr = createPageChromeManager({
+      host,
+      sections: [baseSection],
+      sectionGeometries: [baseGeometry],
+      headerFooterRegistry: null,
+    });
+
+    mgr.setLayout(layout(2));
+    expect(host.querySelectorAll(".docx-page")).toHaveLength(2);
+
+    mgr.setLayout(layout(5));
+    expect(host.querySelectorAll(".docx-page")).toHaveLength(5);
+  });
+
+  it("removes pages when layout shrinks", () => {
+    const mgr = createPageChromeManager({
+      host,
+      sections: [baseSection],
+      sectionGeometries: [baseGeometry],
+      headerFooterRegistry: null,
+    });
+
+    mgr.setLayout(layout(5));
+    mgr.setLayout(layout(2));
+    expect(host.querySelectorAll(".docx-page")).toHaveLength(2);
+  });
+
+  it("retains existing page DOM when same page number persists across layouts", () => {
+    const mgr = createPageChromeManager({
+      host,
+      sections: [baseSection],
+      sectionGeometries: [baseGeometry],
+      headerFooterRegistry: null,
+    });
+
+    mgr.setLayout(layout(2));
+    const page1Before = host.querySelector('[data-docx-page="1"]');
+    mgr.setLayout(layout(3));
+    const page1After = host.querySelector('[data-docx-page="1"]');
+    // Same DOM node — manager diffed and reused.
+    expect(page1Before).toBe(page1After);
+  });
+
+  it("destroys cleanly", () => {
+    const mgr = createPageChromeManager({
+      host,
+      sections: [baseSection],
+      sectionGeometries: [baseGeometry],
+      headerFooterRegistry: null,
+    });
+    mgr.setLayout(layout(3));
+    mgr.destroy();
+    expect(host.querySelectorAll(".docx-pages-layer")).toHaveLength(0);
+  });
+
+  it("reports total height and gap heights via getter", () => {
+    const mgr = createPageChromeManager({
+      host,
+      sections: [baseSection],
+      sectionGeometries: [baseGeometry],
+      headerFooterRegistry: null,
+      pageGapPx: 20,
+    });
+    mgr.setLayout(layout(3));
+    // 3 * 1056 + 2 * 20 = 3208
+    expect(mgr.getTotalHeight()).toBe(3208);
+    expect(mgr.getGapHeights()).toEqual([20, 20]);
+  });
+});
+
+describe("createPageChromeManager — header/footer factory", () => {
+  it("falls back to read-only DOM when no factory is provided", () => {
+    const registry: HeaderFooterRegistry = {
+      byRelationshipId: new Map([
+        [
+          "rId1",
+          {
+            blocks: [
+              {
+                kind: "paragraph",
+                properties: null,
+                content: [
+                  {
+                    kind: "run",
+                    properties: null,
+                    content: [
+                      { kind: "text", value: "Header text", preserveSpace: false },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      ]),
+    };
+    const sectionWithHeader: Section = {
+      properties: {
+        ...DEFAULT_SECTION_PROPERTIES,
+        headerRefs: [{ type: "default", relationshipId: "rId1" }],
+      },
+      blockStartIndex: 0,
+      blockEndIndex: 0,
+    };
+
+    const mgr = createPageChromeManager({
+      host,
+      sections: [sectionWithHeader],
+      sectionGeometries: [baseGeometry],
+      headerFooterRegistry: registry,
+    });
+
+    mgr.setLayout(layout(2));
+
+    const headers = host.querySelectorAll('[data-docx-header="true"]');
+    expect(headers).toHaveLength(2);
+    expect(headers[0].textContent).toContain("Header text");
+    expect(headers[1].textContent).toContain("Header text");
+  });
+
+  it("uses the factory override when supplied; receives page metadata", () => {
+    const registry: HeaderFooterRegistry = {
+      byRelationshipId: new Map([
+        [
+          "rId1",
+          {
+            blocks: [
+              {
+                kind: "paragraph",
+                properties: null,
+                content: [],
+              },
+            ],
+          },
+        ],
+      ]),
+    };
+    const sectionWithHeader: Section = {
+      properties: {
+        ...DEFAULT_SECTION_PROPERTIES,
+        headerRefs: [{ type: "default", relationshipId: "rId1" }],
+      },
+      blockStartIndex: 0,
+      blockEndIndex: 0,
+    };
+
+    const factoryCalls: number[] = [];
+    const mgr = createPageChromeManager({
+      host,
+      sections: [sectionWithHeader],
+      sectionGeometries: [baseGeometry],
+      headerFooterRegistry: registry,
+      renderHeaderFooter: ({ pageNumber, kind }) => {
+        factoryCalls.push(pageNumber);
+        const el = document.createElement("div");
+        el.textContent = `${kind}:${pageNumber}`;
+        return el;
+      },
+    });
+
+    mgr.setLayout(layout(3));
+
+    expect(factoryCalls).toEqual([1, 2, 3]);
+    expect(host.textContent).toContain("hdr:1");
+    expect(host.textContent).toContain("hdr:2");
+    expect(host.textContent).toContain("hdr:3");
+  });
+});