@lotics/docx 0.1.0

package/src/render/page_chrome.ts

@@ -0,0 +1,343 @@
+import type {
+  HeaderFooterFragment,
+  HeaderFooterRegistry,
+} from "../parse/header_footer";
+import type { Section } from "../model/sections";
+import type { HeaderFooterKind, LayoutResult, SectionGeometry } from "../layout/types";
+import { renderHeaderFooterFragment } from "./header_footer_view";
+
+/**
+ * Visual gap between page rectangles. Word's "page setup" reserves
+ * the page margin around content; the gap is purely aesthetic to
+ * distinguish one page from the next.
+ */
+export const DEFAULT_PAGE_GAP_PX = 24;
+
+/**
+ * Optional factory the caller can use to override how a header or footer
+ * is mounted into a given page. View.ts uses this to attach an editable
+ * ProseMirror EditorView to page 1 in editable mode while the chrome
+ * manager continues to mount read-only DOM for pages 2..N.
+ *
+ * Return null to use the default (read-only DOM clone).
+ */
+export type HeaderFooterFactory = (args: {
+  pageNumber: number;
+  kind: "hdr" | "ftr";
+  fragment: HeaderFooterFragment;
+  relationshipId: string | null;
+  /** True if this is the very first page of the document (pageNumber === 1). */
+  isFirstPage: boolean;
+  /** True if this page is the first page of its section. */
+  isFirstInSection: boolean;
+  /** Which header/footer variant the layout engine selected. */
+  headerKind: HeaderFooterKind;
+}) => HTMLElement | null;
+
+export type PageChromeOptions = {
+  host: HTMLElement;
+  sections: readonly Section[];
+  sectionGeometries: readonly SectionGeometry[];
+  headerFooterRegistry: HeaderFooterRegistry | null;
+  /** Visual gap between page rectangles in CSS pixels. Defaults to 24. */
+  pageGapPx?: number;
+  /**
+   * Override how header/footer DOM is built per page. If not provided or
+   * the override returns null, the manager falls back to read-only DOM.
+   */
+  renderHeaderFooter?: HeaderFooterFactory;
+};
+
+export type PageChromeManager = {
+  /**
+   * Reconcile the page rectangles to match the supplied layout. Diffs against
+   * the previous layout so unchanged pages are not re-rendered.
+   */
+  setLayout(layout: LayoutResult): void;
+  /**
+   * Replace the per-page footnote DOM. The map's key is the page number
+   * (1-based); the value is the DOM the manager should mount above that
+   * page's footer band. Pass an empty map to clear all footnotes.
+   */
+  setFootnotes(footnotesByPage: ReadonlyMap<number, HTMLElement>): void;
+  /**
+   * Total Y height occupied by the page chrome layer.
+   */
+  getTotalHeight(): number;
+  /**
+   * Per-page-boundary gap height in px. Used by the pagination plugin to
+   * emit widget decorations that visually separate page content.
+   *
+   * Returns an array of length `pageCount - 1`. Entry `i` is the gap that
+   * sits between page `i+1` and page `i+2`.
+   */
+  getGapHeights(): readonly number[];
+  destroy(): void;
+};
+
+/**
+ * Build the absolutely-positioned page rectangles that sit behind the
+ * editor content. The editor's contentDOM overlays this layer at the
+ * same Y origin; matching headerBand padding on the editor content keeps
+ * paragraphs aligned with each page's content area.
+ */
+export function createPageChromeManager(
+  options: PageChromeOptions,
+): PageChromeManager {
+  const gapPx = options.pageGapPx ?? DEFAULT_PAGE_GAP_PX;
+  const layerEl = document.createElement("div");
+  layerEl.className = "docx-pages-layer";
+  layerEl.setAttribute("data-docx-pages-layer", "true");
+  options.host.appendChild(layerEl);
+
+  // Reconciliation key: pageNumber. We diff by pageNumber so unchanged
+  // pages retain their DOM (and any focus/selection state on editable
+  // header sub-views).
+  const mounted = new Map<number, MountedPage>();
+  let lastTotalHeight = 0;
+  let lastGapHeights: readonly number[] = [];
+
+  const setLayout = (layout: LayoutResult): void => {
+    const seen = new Set<number>();
+    let nextY = 0;
+    const gaps: number[] = [];
+
+    for (let i = 0; i < layout.pages.length; i++) {
+      const page = layout.pages[i];
+      const geometry = options.sectionGeometries[page.sectionIndex];
+      if (!geometry) continue;
+
+      let mountedPage = mounted.get(page.pageNumber);
+      if (
+        !mountedPage ||
+        mountedPage.sectionIndex !== page.sectionIndex ||
+        mountedPage.headerKind !== page.headerKind
+      ) {
+        // Mount or remount.
+        if (mountedPage) {
+          mountedPage.element.remove();
+          mounted.delete(page.pageNumber);
+        }
+        mountedPage = mountPage({
+          page,
+          geometry,
+          section: options.sections[page.sectionIndex],
+          registry: options.headerFooterRegistry,
+          factory: options.renderHeaderFooter,
+          isFirstPage: page.pageNumber === 1,
+        });
+        mounted.set(page.pageNumber, mountedPage);
+        layerEl.appendChild(mountedPage.element);
+      }
+
+      mountedPage.element.style.top = `${nextY}px`;
+      mountedPage.element.style.left = "0";
+      mountedPage.element.style.width = `${geometry.pageWidth}px`;
+      mountedPage.element.style.height = `${geometry.pageHeight}px`;
+
+      seen.add(page.pageNumber);
+
+      if (i < layout.pages.length - 1) {
+        // Gap between this page and the next.
+        const nextGeometry =
+          options.sectionGeometries[layout.pages[i + 1].sectionIndex] ??
+          geometry;
+        const sameSection =
+          layout.pages[i + 1].sectionIndex === page.sectionIndex;
+        // Always use the same gap height so the editor content's gap
+        // decoration is a fixed value. Section-boundary aesthetics are
+        // handled by the canvas, not the gap.
+        gaps.push(gapPx);
+        nextY += geometry.pageHeight + gapPx;
+        // Reference nextGeometry to avoid an unused-symbol lint when the
+        // next section has different page dimensions but we still use the
+        // shared gap.
+        void nextGeometry;
+        void sameSection;
+      } else {
+        nextY += geometry.pageHeight;
+      }
+    }
+
+    // Unmount pages no longer in the layout.
+    for (const [pageNum, mountedPage] of mounted) {
+      if (!seen.has(pageNum)) {
+        mountedPage.element.remove();
+        mounted.delete(pageNum);
+      }
+    }
+
+    layerEl.style.height = `${nextY}px`;
+    lastTotalHeight = nextY;
+    lastGapHeights = gaps;
+  };
+
+  const setFootnotes = (
+    footnotesByPage: ReadonlyMap<number, HTMLElement>,
+  ): void => {
+    for (const [pageNumber, mountedPage] of mounted) {
+      // Drop any existing footnote section, then re-mount the new one.
+      // NOTE: footnotes are read-only DOM today, so a plain `.remove()`
+      // is sufficient. If editable footnotes land in a later phase
+      // (Phase 5+), this needs to destroy any ProseMirror EditorView
+      // inside the removed section before unmounting, or every layout
+      // recompute will leak a PM view.
+      const existing = mountedPage.element.querySelector(
+        ".docx-page-footnotes",
+      );
+      existing?.remove();
+      const content = footnotesByPage.get(pageNumber);
+      if (!content) continue;
+      const wrapper = document.createElement("div");
+      wrapper.className = "docx-page-footnotes";
+      wrapper.appendChild(content);
+      // Insert just before the footer band so footnotes sit above the
+      // section footer at the bottom of the body slot.
+      const footerBand = mountedPage.element.querySelector(
+        ".docx-page-footer-band",
+      );
+      if (footerBand) {
+        mountedPage.element.insertBefore(wrapper, footerBand);
+      } else {
+        mountedPage.element.appendChild(wrapper);
+      }
+    }
+  };
+
+  return {
+    setLayout,
+    setFootnotes,
+    getTotalHeight: () => lastTotalHeight,
+    getGapHeights: () => lastGapHeights,
+    destroy: () => {
+      for (const mountedPage of mounted.values()) {
+        mountedPage.element.remove();
+      }
+      mounted.clear();
+      layerEl.remove();
+    },
+  };
+}
+
+// =========================================================================
+// Internal: per-page mount
+// =========================================================================
+
+type MountedPage = {
+  element: HTMLElement;
+  sectionIndex: number;
+  headerKind: HeaderFooterKind;
+};
+
+function mountPage(args: {
+  page: LayoutResult["pages"][number];
+  geometry: SectionGeometry;
+  section: Section;
+  registry: HeaderFooterRegistry | null;
+  factory: HeaderFooterFactory | undefined;
+  isFirstPage: boolean;
+}): MountedPage {
+  const pageEl = document.createElement("div");
+  pageEl.className = "docx-page";
+  pageEl.setAttribute("data-docx-page", String(args.page.pageNumber));
+  pageEl.setAttribute("data-section-index", String(args.page.sectionIndex));
+  pageEl.style.position = "absolute";
+
+  // Header band.
+  const headerEl = document.createElement("div");
+  headerEl.className = "docx-page-header-band";
+  headerEl.style.height = `${args.geometry.headerBand}px`;
+  pageEl.appendChild(headerEl);
+
+  // Body slot (transparent — editor content shows through).
+  const bodyEl = document.createElement("div");
+  bodyEl.className = "docx-page-body";
+  bodyEl.style.height = `${args.geometry.pageContentHeight}px`;
+  pageEl.appendChild(bodyEl);
+
+  // Footer band.
+  const footerEl = document.createElement("div");
+  footerEl.className = "docx-page-footer-band";
+  footerEl.style.height = `${args.geometry.footerBand}px`;
+  pageEl.appendChild(footerEl);
+
+  // Resolve and mount the header/footer for this page.
+  if (args.registry) {
+    const headerFragment = pickFragmentForKind(
+      args.section.properties.headerRefs,
+      args.page.headerKind,
+      args.registry,
+    );
+    if (headerFragment) {
+      const headerRef = pickRefForKind(
+        args.section.properties.headerRefs,
+        args.page.headerKind,
+      );
+      const mountedHeader =
+        args.factory?.({
+          pageNumber: args.page.pageNumber,
+          kind: "hdr",
+          fragment: headerFragment.fragment,
+          relationshipId: headerRef?.relationshipId ?? null,
+          isFirstPage: args.isFirstPage,
+          isFirstInSection: args.page.isFirstInSection,
+          headerKind: args.page.headerKind,
+        }) ?? renderHeaderFooterFragment(headerFragment.fragment);
+      mountedHeader.setAttribute("data-docx-header", "true");
+      headerEl.appendChild(mountedHeader);
+    }
+
+    const footerFragment = pickFragmentForKind(
+      args.section.properties.footerRefs,
+      args.page.headerKind,
+      args.registry,
+    );
+    if (footerFragment) {
+      const footerRef = pickRefForKind(
+        args.section.properties.footerRefs,
+        args.page.headerKind,
+      );
+      const mountedFooter =
+        args.factory?.({
+          pageNumber: args.page.pageNumber,
+          kind: "ftr",
+          fragment: footerFragment.fragment,
+          relationshipId: footerRef?.relationshipId ?? null,
+          isFirstPage: args.isFirstPage,
+          isFirstInSection: args.page.isFirstInSection,
+          headerKind: args.page.headerKind,
+        }) ?? renderHeaderFooterFragment(footerFragment.fragment);
+      mountedFooter.setAttribute("data-docx-footer", "true");
+      footerEl.appendChild(mountedFooter);
+    }
+  }
+
+  return {
+    element: pageEl,
+    sectionIndex: args.page.sectionIndex,
+    headerKind: args.page.headerKind,
+  };
+}
+
+function pickRefForKind(
+  refs: readonly { type: string; relationshipId: string }[],
+  kind: HeaderFooterKind,
+): { type: string; relationshipId: string } | null {
+  const exact = refs.find((r) => r.type === kind);
+  if (exact) return exact;
+  // Fallback to default when the section doesn't define the requested variant.
+  const fallback = refs.find((r) => r.type === "default");
+  return fallback ?? null;
+}
+
+function pickFragmentForKind(
+  refs: readonly { type: string; relationshipId: string }[],
+  kind: HeaderFooterKind,
+  registry: HeaderFooterRegistry,
+): { fragment: HeaderFooterFragment } | null {
+  const ref = pickRefForKind(refs, kind);
+  if (!ref) return null;
+  const fragment = registry.byRelationshipId.get(ref.relationshipId);
+  if (!fragment) return null;
+  return { fragment };
+}

package/src/render/page_styles.ts

@@ -0,0 +1,234 @@
+import type { FontRegistry, FontResource } from "../fonts/types";
+import type { SectionProperties } from "../model/sections";
+import { dxaToPx } from "./units";
+
+export type PageStyle = {
+  width: number;
+  height: number;
+  paddingTop: number;
+  paddingRight: number;
+  paddingBottom: number;
+  paddingLeft: number;
+};
+
+export function pageStyleFromSection(props: SectionProperties): PageStyle {
+  return {
+    width: dxaToPx(props.pageSize.width),
+    height: dxaToPx(props.pageSize.height),
+    paddingTop: dxaToPx(props.margins.top),
+    paddingRight: dxaToPx(props.margins.right),
+    paddingBottom: dxaToPx(props.margins.bottom),
+    paddingLeft: dxaToPx(props.margins.left),
+  };
+}
+
+function fontFaceRule(resource: FontResource): string {
+  if (resource.source.kind !== "bundled") {
+    return "";
+  }
+  const weight = resource.weight;
+  const style = resource.style;
+  return [
+    "@font-face {",
+    `  font-family: "${resource.family}";`,
+    `  font-weight: ${weight};`,
+    `  font-style: ${style};`,
+    `  font-display: swap;`,
+    `  src: url("${resource.source.assetUrl}") format("woff2");`,
+    "}",
+  ].join("\n");
+}
+
+export function fontFaceStylesheet(registry: FontRegistry): string {
+  const rules: string[] = [];
+  for (const set of registry.listVariantSets()) {
+    for (const variant of [set.regular, set.bold, set.italic, set.boldItalic]) {
+      if (variant === null) continue;
+      const rule = fontFaceRule(variant);
+      if (rule.length > 0) rules.push(rule);
+    }
+  }
+  return rules.join("\n");
+}
+
+export const EDITOR_BASE_CSS = `
+.docx-canvas {
+  background: #f1f3f4;
+  padding: 24px 0 80px;
+  display: flex;
+  justify-content: center;
+  min-height: 100%;
+}
+.docx-canvas-inner {
+  transform-origin: top center;
+  transition: transform 120ms ease-out;
+}
+.docx-page-stack {
+  position: relative;
+}
+.docx-pages-layer {
+  position: relative;
+  width: 100%;
+}
+.docx-page {
+  background: #ffffff;
+  box-shadow: 0 1px 3px rgba(60,64,67,0.15), 0 4px 8px rgba(60,64,67,0.10);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+.docx-page-header-band {
+  flex-shrink: 0;
+  box-sizing: border-box;
+  padding: 0;
+  overflow: hidden;
+}
+.docx-page-body {
+  flex: 1 1 auto;
+}
+.docx-page-footer-band {
+  flex-shrink: 0;
+  box-sizing: border-box;
+  padding: 0;
+  overflow: hidden;
+}
+.docx-page-gap {
+  display: block;
+  width: 100%;
+  pointer-events: none;
+  user-select: none;
+}
+.docx-editor-mount {
+  box-sizing: border-box;
+}
+.docx-editor-content {
+  outline: none;
+  caret-color: #1a73e8;
+  font-feature-settings: "kern", "liga", "calt";
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: transparent;
+}
+.docx-editor-content::selection,
+.docx-editor-content *::selection {
+  background: rgba(166, 206, 255, 0.55);
+}
+.docx-editor-content p { margin: 0; }
+.docx-editor-content table {
+  border-collapse: collapse;
+  /* auto layout matches Word AutoFit: cells expand to content. PM-table
+     conversion passes null colwidth for tblW=auto so this engages. Fixed
+     widths still apply via the PM colwidth attribute / inline col widths. */
+  table-layout: auto;
+  width: auto;
+  margin: 8px 0;
+}
+.docx-editor-content td, .docx-editor-content th {
+  vertical-align: top;
+  position: relative;
+  /* Word's TableGrid default: single 0.5pt black on every cell edge.
+     OOXML tblBorders/tcBorders parse later — for now this guarantees
+     every table renders visible borders rather than appearing as plain
+     text columns. Cell-specific border overrides win via specificity. */
+  border: 1px solid #000000;
+  padding: 4px 8px;
+  min-width: 24px;
+}
+.docx-editor-content .selectedCell {
+  background: rgba(26, 115, 232, 0.12);
+  outline: 1px solid rgba(26, 115, 232, 0.35);
+}
+.docx-editor-content .column-resize-handle {
+  position: absolute;
+  right: -2px;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background: #1a73e8;
+  pointer-events: none;
+  z-index: 20;
+}
+.docx-editor-content.resize-cursor { cursor: ew-resize; cursor: col-resize; }
+.docx-editor-content .ProseMirror-gapcursor { display: none; pointer-events: none; position: absolute; }
+.docx-editor-content .ProseMirror-gapcursor::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: -2px;
+  width: 20px;
+  border-top: 1px solid #1a73e8;
+}
+.docx-editor-content.ProseMirror-focused .ProseMirror-gapcursor { display: block; }
+.docx-editor-content .docx-template-marker { cursor: default; }
+.docx-placeholder-empty::before {
+  content: attr(data-placeholder);
+  color: #9aa0a6;
+  pointer-events: none;
+  position: absolute;
+}
+.ProseMirror-search-match { background-color: rgba(255, 235, 59, 0.45); }
+.ProseMirror-active-search-match { background-color: rgba(255, 152, 0, 0.55); }
+
+.docx-image-inline { position: relative; display: inline-block; }
+.docx-image-inline img { display: block; user-select: none; }
+.docx-image-inline:hover .docx-image-resize-handle,
+.docx-image-inline:focus-within .docx-image-resize-handle {
+  opacity: 1;
+}
+.docx-image-resize-handle {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: #ffffff;
+  border: 1px solid #1a73e8;
+  border-radius: 50%;
+  opacity: 0;
+  transition: opacity 100ms ease-out;
+  z-index: 10;
+}
+.docx-image-resize-handle--nw { top: -5px; left: -5px; cursor: nwse-resize; }
+.docx-image-resize-handle--ne { top: -5px; right: -5px; cursor: nesw-resize; }
+.docx-image-resize-handle--sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
+.docx-image-resize-handle--se { bottom: -5px; right: -5px; cursor: nwse-resize; }
+
+.docx-numbering-marker {
+  display: inline-block;
+  min-width: 1.5em;
+  margin-right: 0.4em;
+  text-align: left;
+  user-select: none;
+}
+.docx-editor-content [data-list-ilvl="0"] { padding-left: 24px; }
+.docx-editor-content [data-list-ilvl="1"] { padding-left: 48px; }
+.docx-editor-content [data-list-ilvl="2"] { padding-left: 72px; }
+.docx-editor-content [data-list-ilvl="3"] { padding-left: 96px; }
+.docx-editor-content [data-list-ilvl="4"] { padding-left: 120px; }
+.docx-editor-content [data-list-ilvl="5"] { padding-left: 144px; }
+.docx-editor-content [data-list-ilvl="6"] { padding-left: 168px; }
+.docx-editor-content [data-list-ilvl="7"] { padding-left: 192px; }
+.docx-editor-content [data-list-ilvl="8"] { padding-left: 216px; }
+
+.docx-page-footnotes {
+  flex-shrink: 0;
+  padding: 0 96px;
+  border-top: 1px solid #dadce0;
+  font-size: 10pt;
+  color: #3c4043;
+  box-sizing: border-box;
+}
+.docx-footnotes__list {
+  margin: 8px 0;
+  padding-left: 24px;
+}
+.docx-footnote {
+  margin-bottom: 4px;
+}
+
+.docx-header-footer { color: #5f6368; padding: 8px 96px; box-sizing: border-box; height: 100%; }
+.docx-header-footer--editable { outline: none; cursor: text; }
+.docx-header-footer--editable:focus { color: #1f1f1f; background: rgba(26,115,232,0.04); }
+.docx-page-stack--body-dimmed .docx-editor-content {
+  opacity: 0.5;
+}
+`;