@lotics/docx 0.1.0

package/src/render/view.ts

@@ -0,0 +1,607 @@
+import { EditorState, type Plugin } from "prosemirror-state";
+import { EditorView, type NodeView } from "prosemirror-view";
+import type { Node as PMNode } from "prosemirror-model";
+import type { FontRegistry } from "../fonts/types";
+import type { Section } from "../model/sections";
+import type { RelationshipMap } from "../parse/relationships";
+import type { HeaderFooterRegistry } from "../parse/header_footer";
+import type { FootnoteRegistry } from "../parse/footnotes";
+import { renderParagraph } from "./table_dom";
+import { docxSchema } from "../pm/schema";
+import { buildEditorPlugins, buildReadOnlyPlugins } from "../pm/plugins";
+import type { NumberingTable } from "../model/numbering_table";
+import {
+  imageRegistryPlugin,
+  type ImageRegistry,
+} from "../pm/image_registry";
+import { buildLinkMarkView } from "./link_mark_view";
+import {
+  buildImageInlineView,
+  fieldInlineView,
+  opaqueBlockView,
+  opaqueInlineView,
+  sectionBreakView,
+} from "./node_views";
+import { buildParagraphView } from "./paragraph_view";
+import type { ThemeTable } from "../model/theme";
+import {
+  NULL_MEDIA_RESOLVER,
+  type MediaResolver,
+} from "./media_resolver";
+import { buildClipboardHooks } from "./clipboard";
+import {
+  EDITOR_BASE_CSS,
+  fontFaceStylesheet,
+} from "./page_styles";
+import { buildRuler, RULER_CSS } from "./ruler";
+import {
+  createPageChromeManager,
+  DEFAULT_PAGE_GAP_PX,
+  type HeaderFooterFactory,
+  type PageChromeManager,
+} from "./page_chrome";
+import {
+  getPaginationState,
+  paginationPlugin,
+} from "../pm/pagination_plugin";
+import { computeSectionGeometries } from "../layout/page_geometry";
+import type { LayoutResult } from "../layout/types";
+import { dxaToPx } from "./units";
+import { placeholderPlugin } from "../pm/placeholder_plugin";
+import { resolveInternalPartPath } from "../parse/relationships";
+import { headerFooterFragmentToPm } from "../pm/header_footer_doc";
+import { pmDocToHeaderFooterXml } from "../serialize/header_footer_pm";
+import { keymap } from "prosemirror-keymap";
+import { history, redo, undo } from "prosemirror-history";
+import { baseKeymap, toggleMark } from "prosemirror-commands";
+import { dropCursor } from "prosemirror-dropcursor";
+import { gapCursor } from "prosemirror-gapcursor";
+
+export type ViewMode = "read-only" | "editable";
+
+export type DocxViewOptions = {
+  fontRegistry: FontRegistry;
+  sections: readonly Section[];
+  relationships?: RelationshipMap;
+  mediaResolver?: MediaResolver;
+  imageRegistry?: ImageRegistry;
+  numberingTable?: NumberingTable | null;
+  themeTable?: ThemeTable | null;
+  headerFooterRegistry?: HeaderFooterRegistry;
+  footnoteRegistry?: FootnoteRegistry;
+  mode?: ViewMode;
+  onChange?: (doc: PMNode) => void;
+  onPageCountChange?: (pageCount: number) => void;
+  plugins?: readonly Plugin[];
+};
+
+export type ReadOnlyViewOptions = DocxViewOptions;
+
+export type PaginationHandle = {
+  /**
+   * Most recent page count from the layout engine. Returns 1 until the
+   * first layout pass completes (one rAF after mount).
+   */
+  getPageCount(): number;
+  /**
+   * Most recent layout result. Null until the first layout pass completes.
+   */
+  getLayout(): LayoutResult | null;
+};
+
+export type ReadOnlyView = {
+  destroy(): void;
+  editorView: EditorView;
+  canvasElement: HTMLElement;
+  canvasInner: HTMLElement;
+  styleElement: HTMLStyleElement;
+  pagination: PaginationHandle;
+  getDocument(): PMNode;
+  setZoom(zoom: number): void;
+  /**
+   * Apply any in-place header/footer edits made through the editable
+   * header/footer DOMs to a clone of the parts map. Caller owns the
+   * resulting map and writes it through pmToDocx → serializeDocx.
+   */
+  commitHeaderFooterEdits(parts: ReadonlyMap<string, Uint8Array>): Map<string, Uint8Array>;
+};
+
+export function createReadOnlyView(
+  host: HTMLElement,
+  pmDoc: PMNode,
+  options: DocxViewOptions,
+): ReadOnlyView {
+  const styleElement = document.createElement("style");
+  styleElement.setAttribute("data-docx-editor-styles", "true");
+  styleElement.textContent =
+    EDITOR_BASE_CSS +
+    "\n" +
+    RULER_CSS +
+    "\n" +
+    fontFaceStylesheet(options.fontRegistry);
+  host.appendChild(styleElement);
+
+  const firstSection = options.sections[0]?.properties;
+  if (!firstSection) {
+    throw new Error("createReadOnlyView requires at least one section");
+  }
+  const sectionGeometries = computeSectionGeometries(options.sections);
+  const firstGeometry = sectionGeometries[0];
+
+  const canvasElement = document.createElement("div");
+  canvasElement.className = "docx-canvas";
+  canvasElement.setAttribute("data-docx-canvas", "true");
+  host.appendChild(canvasElement);
+
+  const canvasInner = document.createElement("div");
+  canvasInner.className = "docx-canvas-inner";
+  canvasInner.style.position = "relative";
+  canvasInner.style.width = `${firstGeometry.pageWidth}px`;
+  canvasElement.appendChild(canvasInner);
+
+  const ruler = buildRuler(firstSection);
+  canvasInner.appendChild(ruler.element);
+
+  // Each page rectangle in the chrome layer aligns vertically with a region
+  // of the editor's flowing content. We position the editor content
+  // absolutely *over* the layer and use widget decorations between pages
+  // to push subsequent paragraphs into the next page's body slot.
+  const stackRoot = document.createElement("div");
+  stackRoot.className = "docx-page-stack";
+  stackRoot.style.position = "relative";
+  stackRoot.style.width = `${firstGeometry.pageWidth}px`;
+  canvasInner.appendChild(stackRoot);
+
+  // When a header/footer sub-view takes focus, the body editor must yield
+  // both pointer interaction *and* keyboard editability. CSS pointer-events
+  // alone doesn't block keypresses — we toggle this flag and the body's
+  // `editable()` callback reads it.
+  let subViewFocused = false;
+  const setBodyDimmed = (dimmed: boolean) => {
+    stackRoot.classList.toggle("docx-page-stack--body-dimmed", dimmed);
+    subViewFocused = dimmed;
+  };
+  type EditableHeaderFooter = {
+    view: EditorView;
+    kind: "hdr" | "ftr";
+    partPath: string;
+  };
+  // Keyed by partPath, not relationshipId — two relationship ids in the
+  // same section can target the same part (rare but legal). The first
+  // mounted view wins; duplicates are torn down.
+  const editableHeaderFooters = new Map<string, EditableHeaderFooter>();
+  const mode: ViewMode = options.mode ?? "read-only";
+  const isEditable = mode === "editable";
+
+  // Editable header/footer mounter — used only for page 1 in editable mode.
+  // Pages 2..N render the same fragment as read-only DOM via the default
+  // chrome path. This mirrors Word's UX: the user edits "the header," not
+  // "header on page 3."
+  const mountHeaderFooterPm = (
+    fragment: import("../parse/header_footer").HeaderFooterFragment,
+    relationshipId: string | null,
+    kind: "hdr" | "ftr",
+  ): HTMLElement => {
+    const wrapper = document.createElement("div");
+    wrapper.className = "docx-header-footer docx-header-footer--editable";
+    wrapper.setAttribute(`data-docx-${kind === "hdr" ? "header" : "footer"}`, "true");
+    const headerPmDoc = headerFooterFragmentToPm(fragment, {
+      styleTable: null,
+      numberingTable: options.numberingTable ?? null,
+    });
+    const state = EditorState.create({
+      schema: docxSchema,
+      doc: headerPmDoc,
+      plugins: [
+        history(),
+        keymap({ "Mod-z": undo, "Shift-Mod-z": redo, "Mod-y": redo }),
+        keymap({
+          "Mod-b": toggleMark(docxSchema.marks.bold),
+          "Mod-i": toggleMark(docxSchema.marks.italic),
+          "Mod-u": toggleMark(docxSchema.marks.underline),
+        }),
+        keymap(baseKeymap),
+        dropCursor(),
+        gapCursor(),
+      ],
+    });
+    const subView = new EditorView(wrapper, {
+      state,
+      editable: () => true,
+      attributes: {
+        class: "docx-header-footer-content",
+        spellcheck: "true",
+      },
+    });
+    wrapper.addEventListener("focusin", () => setBodyDimmed(true));
+    wrapper.addEventListener("focusout", (e) => {
+      const next = e.relatedTarget as HTMLElement | null;
+      if (!next || !wrapper.contains(next)) setBodyDimmed(false);
+    });
+    if (relationshipId && options.relationships) {
+      const rel = options.relationships.get(relationshipId);
+      if (rel) {
+        const partPath = resolveInternalPartPath(rel.target);
+        if (editableHeaderFooters.has(partPath)) {
+          subView.destroy();
+          wrapper.remove();
+        } else {
+          editableHeaderFooters.set(partPath, {
+            view: subView,
+            kind,
+            partPath,
+          });
+        }
+      }
+    }
+    return wrapper;
+  };
+
+  const headerFooterFactory: HeaderFooterFactory = ({
+    pageNumber,
+    kind,
+    fragment,
+    relationshipId,
+  }) => {
+    // Only the first page gets an editable PM mini-view in editable mode.
+    // Pages 2..N fall through to the chrome manager's default read-only
+    // DOM rendering, which avoids the multi-view selection/coordination
+    // problem.
+    if (!isEditable) return null;
+    if (pageNumber !== 1) return null;
+    return mountHeaderFooterPm(fragment, relationshipId, kind);
+  };
+
+  const pageChrome: PageChromeManager = createPageChromeManager({
+    host: stackRoot,
+    sections: options.sections,
+    sectionGeometries,
+    headerFooterRegistry: options.headerFooterRegistry ?? null,
+    pageGapPx: DEFAULT_PAGE_GAP_PX,
+    renderHeaderFooter: headerFooterFactory,
+  });
+
+  const numberingTable = options.numberingTable ?? null;
+  const basePlugins =
+    options.plugins ??
+    (isEditable
+      ? buildEditorPlugins({ numberingTable })
+      : buildReadOnlyPlugins({ numberingTable }));
+
+  const footnoteRegistry = options.footnoteRegistry ?? null;
+
+  const paginationPluginInstance = paginationPlugin({
+    sections: options.sections,
+    sectionGeometries,
+    pageGapPx: DEFAULT_PAGE_GAP_PX,
+    onLayoutChange: (layout) => {
+      pageChrome.setLayout(layout);
+      if (footnoteRegistry) {
+        const perPage = buildPerPageFootnotes(
+          footnoteRegistry,
+          editorView.state.doc,
+          layout,
+        );
+        pageChrome.setFootnotes(perPage);
+      }
+      options.onPageCountChange?.(layout.totalPages);
+    },
+  });
+
+  const allPlugins = [
+    ...basePlugins,
+    ...(options.imageRegistry ? [imageRegistryPlugin(options.imageRegistry)] : []),
+    ...(isEditable ? [placeholderPlugin("Type / for commands…")] : []),
+    paginationPluginInstance,
+  ];
+
+  const state = EditorState.create({
+    schema: docxSchema,
+    doc: pmDoc,
+    plugins: allPlugins,
+  });
+
+  const relationships = options.relationships ?? new Map();
+  const media = options.mediaResolver ?? NULL_MEDIA_RESOLVER;
+  const imageView = buildImageInlineView(media);
+
+  // Editor content overlays the page chrome stack. Padding-top/bottom
+  // matches the first page's header/footer bands so the first paragraph
+  // lands inside page 1's body slot. Left/right padding matches the page
+  // margins so content sits in the body slot horizontally.
+  const editorMount = document.createElement("div");
+  editorMount.className = "docx-editor-mount";
+  editorMount.style.position = "absolute";
+  editorMount.style.top = "0";
+  editorMount.style.left = "0";
+  editorMount.style.right = "0";
+  // Padding mirrors page 1's geometry — first-section header band on top,
+  // first-section side margins horizontally. Multi-section documents
+  // whose later sections use different left/right margins will misalign
+  // their body content against the chrome layer's body slot. Tracked as
+  // a Phase 5 known gap in docs/docx.md.
+  editorMount.style.paddingTop = `${firstGeometry.headerBand}px`;
+  editorMount.style.paddingLeft = `${(firstGeometry.pageWidth - bodyWidth(firstSection)) / 2}px`;
+  editorMount.style.paddingRight = `${(firstGeometry.pageWidth - bodyWidth(firstSection)) / 2}px`;
+  editorMount.style.pointerEvents = "none";
+
+  // Multi-column body slots. When every section in the document declares
+  // the same column count > 1, apply CSS multi-column to the editor
+  // content. The reader still sees content flowing top-to-bottom; the
+  // browser splits it into N balanced columns. For mixed-section column
+  // counts (e.g., section 1 single-column, section 2 two-column), this
+  // is deferred — multi-section column awareness requires per-section
+  // wrappers, which is a Phase 5 design itself.
+  const columnCounts = new Set(
+    options.sections.map((s) => s.properties.columns.count),
+  );
+  if (columnCounts.size === 1) {
+    const count = options.sections[0]?.properties.columns.count ?? 1;
+    if (count > 1) {
+      editorMount.style.columnCount = String(count);
+      const spaceDxa =
+        options.sections[0]?.properties.columns.space ?? 720;
+      editorMount.style.columnGap = `${dxaToPx(spaceDxa)}px`;
+      editorMount.style.columnFill = "auto";
+    }
+  } else if (columnCounts.size > 1) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "[docx-editor] Document mixes section column counts; multi-column rendering disabled. Sections must share a column count for the Phase 5 multi-column path to apply.",
+    );
+  }
+
+  stackRoot.appendChild(editorMount);
+
+  const onChange = options.onChange;
+  const clipboardHooks = isEditable
+    ? buildClipboardHooks({
+        imageRegistry: options.imageRegistry,
+        mediaResolver: media,
+      })
+    : null;
+  const editorView = new EditorView(editorMount, {
+    state,
+    editable: () => isEditable && !subViewFocused,
+    dispatchTransaction(transaction) {
+      const newState = editorView.state.apply(transaction);
+      editorView.updateState(newState);
+      if (transaction.docChanged && onChange) {
+        onChange(newState.doc);
+      }
+    },
+    transformPastedHTML: clipboardHooks?.transformPastedHTML,
+    handlePaste: clipboardHooks?.handlePaste,
+    handleDrop: clipboardHooks?.handleDrop,
+    nodeViews: {
+      paragraph: buildParagraphView(options.themeTable ?? null),
+      section_break: (node: PMNode): NodeView => sectionBreakView(node),
+      opaque_block: (node: PMNode): NodeView => opaqueBlockView(node),
+      opaque_inline: (): NodeView => opaqueInlineView(),
+      image_inline: (node: PMNode, v, getPos): NodeView => imageView(node, v, getPos),
+      field_inline: (node: PMNode, v, getPos): NodeView =>
+        fieldInlineView(node, v, getPos as () => number | undefined),
+    },
+    markViews: {
+      link: buildLinkMarkView(relationships),
+    },
+    attributes: {
+      class: "docx-editor-content",
+      "data-docx-editor": mode,
+      spellcheck: isEditable ? "true" : "false",
+    },
+  });
+
+  // Re-enable pointer events on the editor's DOM (we disabled them on the
+  // mount wrapper so that clicks in gap regions fall through to the chrome
+  // layer if needed, but the content area itself must remain interactive).
+  (editorView.dom as HTMLElement).style.pointerEvents = "auto";
+
+
+  const setZoom = (zoom: number) => {
+    canvasInner.style.transform = `scale(${zoom})`;
+  };
+
+  const pagination: PaginationHandle = {
+    getPageCount: () => {
+      const layout = getPaginationState(editorView.state)?.layout;
+      return layout?.totalPages ?? 1;
+    },
+    getLayout: () => getPaginationState(editorView.state)?.layout ?? null,
+  };
+
+  const commitHeaderFooterEdits = (
+    parts: ReadonlyMap<string, Uint8Array>,
+  ): Map<string, Uint8Array> => {
+    const out = new Map(parts);
+    if (editableHeaderFooters.size === 0) return out;
+    const encoder = new TextEncoder();
+    for (const { view: hfView, kind, partPath } of editableHeaderFooters.values()) {
+      const xml = pmDocToHeaderFooterXml(hfView.state.doc, kind);
+      out.set(partPath, encoder.encode(xml));
+    }
+    return out;
+  };
+
+  return {
+    editorView,
+    canvasElement,
+    canvasInner,
+    styleElement,
+    pagination,
+    getDocument: () => editorView.state.doc,
+    setZoom,
+    commitHeaderFooterEdits,
+    destroy: () => {
+      for (const { view: hfView } of editableHeaderFooters.values()) {
+        hfView.destroy();
+      }
+      pageChrome.destroy();
+      editorView.destroy();
+      ruler.destroy();
+      styleElement.remove();
+      canvasElement.remove();
+    },
+  };
+}
+
+/**
+ * Body width = pageWidth minus left/right margins. Renderer-local helper
+ * because the section properties carry margins in dxa.
+ */
+function bodyWidth(props: import("../model/sections").SectionProperties): number {
+  return (
+    dxaToPx(props.pageSize.width) -
+    dxaToPx(props.margins.left) -
+    dxaToPx(props.margins.right)
+  );
+}
+
+/**
+ * Group the document's footnote references by the page they appear on,
+ * then build per-page footnote DOM fragments. The chrome manager mounts
+ * the fragment above the section footer band of each page.
+ *
+ * A footnote is mounted on the page that contains the first reference to
+ * it. Subsequent references on later pages do not re-mount the body — they
+ * still display the small superscript marker via the footnote_ref NodeView,
+ * pointing at the canonical body on the earlier page. This matches Word's
+ * default "Reference Mark" behavior for repeated references.
+ */
+function buildPerPageFootnotes(
+  registry: import("../parse/footnotes").FootnoteRegistry,
+  doc: import("prosemirror-model").Node,
+  layout: LayoutResult,
+): ReadonlyMap<number, HTMLElement> {
+  // Walk every footnote_ref in the doc and record (id, blockIndex).
+  type Ref = { id: string; blockIndex: number; number: number };
+  const refs: Ref[] = [];
+  const seen = new Set<string>();
+  let blockIndex = -1;
+  doc.descendants((node, _pos, parent) => {
+    if (parent === null) return true;
+    if (parent === doc) {
+      // The `descendants` callback fires for the top-level children too —
+      // for those, advance the block index.
+      blockIndex += 1;
+    }
+    if (node.type.name === "footnote_ref") {
+      const id = node.attrs.footnoteId as string;
+      if (!id || seen.has(id)) return false;
+      seen.add(id);
+      refs.push({
+        id,
+        blockIndex,
+        number: node.attrs.number as number,
+      });
+      return false;
+    }
+    return true;
+  });
+  if (refs.length === 0) return new Map();
+
+  // Map blockIndex → pageNumber via the layout.
+  const pageOfBlock = (idx: number): number => {
+    for (const page of layout.pages) {
+      if (idx >= page.firstBlockIndex && idx <= page.lastBlockIndex) {
+        return page.pageNumber;
+      }
+    }
+    return 1;
+  };
+
+  // Bucket refs by page.
+  const byPage = new Map<number, Ref[]>();
+  for (const ref of refs) {
+    const page = pageOfBlock(ref.blockIndex);
+    const bucket = byPage.get(page) ?? [];
+    bucket.push(ref);
+    byPage.set(page, bucket);
+  }
+
+  // Render each page's footnote DOM.
+  const out = new Map<number, HTMLElement>();
+  for (const [pageNumber, pageRefs] of byPage) {
+    const wrapper = document.createElement("aside");
+    wrapper.className = "docx-footnotes";
+    const ol = document.createElement("ol");
+    ol.className = "docx-footnotes__list";
+    for (const ref of pageRefs) {
+      const entry = registry.byId.get(ref.id);
+      if (!entry) continue;
+      const li = document.createElement("li");
+      li.className = "docx-footnote";
+      li.setAttribute("data-footnote-id", entry.id);
+      li.setAttribute("value", String(ref.number));
+      // Reuse the existing block-rendering helpers via the registry-only
+      // `renderFootnotesSection` builds a complete OL; for per-page we
+      // need the individual entry. The helper isn't exported, so this
+      // duplication is intentional and small.
+      for (const block of entry.blocks) {
+        if (block.kind === "paragraph") {
+          const xml = paragraphBlockForFootnote(block);
+          li.appendChild(
+            renderFootnoteParagraph(xml),
+          );
+        }
+      }
+      ol.appendChild(li);
+    }
+    wrapper.appendChild(ol);
+    out.set(pageNumber, wrapper);
+  }
+  return out;
+}
+
+// TODO(phase-5): Unify with `footnotes_view.ts`. The OOXML→XmlElement
+// conversion is duplicated here so per-page rendering can produce a
+// single <li>, while `footnotes_view.ts` produces the whole <aside><ol>.
+// When editable footnotes land, this duplication should fold into a
+// shared helper exported from `footnotes_view.ts`.
+function paragraphBlockForFootnote(
+  block: Extract<import("../model/types").Block, { kind: "paragraph" }>,
+): import("@lotics/ooxml/xml").XmlElement {
+  const children: import("@lotics/ooxml/xml").XmlElement[] = [];
+  if (block.properties !== null) {
+    children.push({ "w:pPr": [...block.properties] });
+  }
+  for (const inline of block.content) {
+    if (inline.kind === "run") {
+      const runChildren: import("@lotics/ooxml/xml").XmlElement[] = [];
+      if (inline.properties !== null) {
+        runChildren.push({ "w:rPr": [...inline.properties] });
+      }
+      for (const c of inline.content) {
+        if (c.kind === "text") {
+          const t: import("@lotics/ooxml/xml").XmlElement = {
+            "w:t": c.value === "" ? [] : [{ "#text": c.value }],
+          };
+          if (c.preserveSpace) t[":@"] = { "@_xml:space": "preserve" };
+          runChildren.push(t);
+        } else {
+          runChildren.push(c.xml);
+        }
+      }
+      children.push({ "w:r": runChildren });
+    } else {
+      children.push(inline.xml);
+    }
+  }
+  return { "w:p": children };
+}
+
+function renderFootnoteParagraph(
+  xml: import("@lotics/ooxml/xml").XmlElement,
+): HTMLElement {
+  // Delegate to the table_dom paragraph renderer so footnote text is
+  // styled identically to body paragraphs.
+  return renderParagraph(xml);
+}
+
+export function createEditableView(
+  host: HTMLElement,
+  pmDoc: PMNode,
+  options: Omit<DocxViewOptions, "mode">,
+): ReadOnlyView {
+  return createReadOnlyView(host, pmDoc, { ...options, mode: "editable" });
+}