@lotics/docx 0.1.0

package/src/render/clipboard.ts

@@ -0,0 +1,200 @@
+import type { EditorView } from "prosemirror-view";
+import { TextSelection } from "prosemirror-state";
+import type { ImageRegistry } from "../pm/image_registry";
+import { docxSchema } from "../pm/schema";
+import { emuToPx } from "./units";
+import type { MediaResolver } from "./media_resolver";
+
+const MSO_CONDITIONAL_RE = /<!--\s*\[if[^\]]*\][\s\S]*?\[endif\]\s*-->/gi;
+const HTML_COMMENT_RE = /<!--[\s\S]*?-->/g;
+const O_P_RE = /<o:p\b[^>]*>[\s\S]*?<\/o:p>|<o:p\b[^>]*\/>/gi;
+const W_NS_TAG_RE = /<\/?(?:w|m|v|o|x):[a-z][\w-]*\b[^>]*>/gi;
+const MSO_STYLE_DECL_RE = /(?:^|;)\s*mso-[^:;]+:[^;"]*(?=;|$)/gi;
+const CLASS_MSO_RE = /\sclass="[^"]*Mso[^"]*"/gi;
+const CLASS_MSO_SQ_RE = /\sclass='[^']*Mso[^']*'/gi;
+const EMPTY_STYLE_RE = /\sstyle=(?:""|'')/g;
+const STYLE_BLOCK_RE = /<style\b[^>]*>[\s\S]*?<\/style>/gi;
+const META_TAG_RE = /<meta\b[^>]*\/?>/gi;
+const XMLNS_ATTR_RE = /\sxmlns(?::\w+)?="[^"]*"/g;
+const LANG_ATTR_RE = /\slang="[^"]*"/g;
+const PROOFREAD_ATTR_RE = /\s(?:onerror|onload|onclick)="[^"]*"/gi;
+const HTML_BODY_WRAPPER_RE = /<\/?(?:html|body|head)\b[^>]*>/gi;
+const FONT_TAG_NO_FACE_RE = /<\/?font\b[^>]*>/gi;
+
+// Heuristic: only run aggressive Word-specific strips when the clipboard
+// HTML looks like Word output. Detecting `mso-`, `<o:p>`, or the Word
+// "ProgId" comment covers the cases we care about. For non-Word HTML
+// (e.g. a styled email, another rich editor), only the security-related
+// strips run — `<style>`, `<meta>`, conditional comments, and on-event
+// handlers — preserving everything else verbatim.
+const MSO_MARKER_RE = /\bmso-|<o:p|class="?[^"\s>]*Mso|ProgId\s*=\s*"Word\.Document"/i;
+
+export function cleanWordHtml(html: string): string {
+  let out = html;
+
+  // Always-safe strips: security and parser hygiene.
+  out = out.replace(MSO_CONDITIONAL_RE, "");
+  out = out.replace(STYLE_BLOCK_RE, "");
+  out = out.replace(META_TAG_RE, "");
+  out = out.replace(HTML_COMMENT_RE, "");
+  out = out.replace(PROOFREAD_ATTR_RE, "");
+
+  if (!MSO_MARKER_RE.test(html)) {
+    // Not Word HTML — preserve as much structure as possible.
+    return out;
+  }
+
+  // Word-specific strips.
+  out = out.replace(O_P_RE, "");
+  out = out.replace(W_NS_TAG_RE, "");
+  out = out.replace(HTML_BODY_WRAPPER_RE, "");
+  out = out.replace(FONT_TAG_NO_FACE_RE, "");
+  out = out.replace(XMLNS_ATTR_RE, "");
+  out = out.replace(LANG_ATTR_RE, "");
+  out = out.replace(/\sstyle="([^"]*)"/g, (_match, body: string) => {
+    const cleaned = body
+      .replace(MSO_STYLE_DECL_RE, "")
+      .replace(/^\s*;\s*/, "")
+      .replace(/;\s*$/, "")
+      .trim();
+    return cleaned.length === 0 ? "" : ` style="${cleaned}"`;
+  });
+  out = out.replace(CLASS_MSO_RE, "");
+  out = out.replace(CLASS_MSO_SQ_RE, "");
+  out = out.replace(EMPTY_STYLE_RE, "");
+  return out;
+}
+
+const IMAGE_MIME = /^image\//;
+
+export function fileExtensionForMime(mime: string): string {
+  switch (mime) {
+    case "image/png":
+      return "png";
+    case "image/jpeg":
+      return "jpg";
+    case "image/gif":
+      return "gif";
+    case "image/webp":
+      return "webp";
+    case "image/bmp":
+      return "bmp";
+    case "image/tiff":
+      return "tiff";
+    case "image/svg+xml":
+      return "svg";
+    default:
+      return "bin";
+  }
+}
+
+async function fileToUint8(file: File): Promise<Uint8Array> {
+  const buf = await file.arrayBuffer();
+  return new Uint8Array(buf);
+}
+
+function insertImageNode(
+  view: EditorView,
+  relationshipId: string,
+  alt: string,
+): void {
+  const node = docxSchema.nodes.image_inline.create({
+    relationshipId,
+    widthEmu: null,
+    heightEmu: null,
+    alt,
+    originalXml: null,
+  });
+  const tr = view.state.tr.replaceSelectionWith(node, false);
+  view.dispatch(tr);
+}
+
+async function handleImageFiles(
+  view: EditorView,
+  files: readonly File[],
+  registry: ImageRegistry,
+  mediaResolver: MediaResolver | null,
+): Promise<boolean> {
+  let anyHandled = false;
+  for (const file of files) {
+    if (!IMAGE_MIME.test(file.type)) continue;
+    const bytes = await fileToUint8(file);
+    const { relationshipId } = registry.registerInsertedImage({
+      bytes,
+      mimeType: file.type,
+      extension: fileExtensionForMime(file.type),
+    });
+    insertImageNode(view, relationshipId, file.name || "");
+    void mediaResolver;
+    anyHandled = true;
+  }
+  return anyHandled;
+}
+
+export type ClipboardHooksOptions = {
+  imageRegistry?: ImageRegistry;
+  mediaResolver?: MediaResolver | null;
+};
+
+export function buildClipboardHooks(options: ClipboardHooksOptions = {}): {
+  transformPastedHTML: (html: string) => string;
+  handlePaste:
+    | ((view: EditorView, event: ClipboardEvent) => boolean)
+    | undefined;
+  handleDrop:
+    | ((view: EditorView, event: DragEvent) => boolean)
+    | undefined;
+} {
+  const imageRegistry = options.imageRegistry;
+  const mediaResolver = options.mediaResolver ?? null;
+
+  const handlePaste = imageRegistry
+    ? (view: EditorView, event: ClipboardEvent) => {
+        const data = event.clipboardData;
+        if (!data) return false;
+        const files: File[] = [];
+        for (let i = 0; i < data.files.length; i++) {
+          const f = data.files[i];
+          if (f) files.push(f);
+        }
+        if (files.length === 0) return false;
+        event.preventDefault();
+        void handleImageFiles(view, files, imageRegistry, mediaResolver);
+        return true;
+      }
+    : undefined;
+
+  const handleDrop = imageRegistry
+    ? (view: EditorView, event: DragEvent) => {
+        const dt = event.dataTransfer;
+        if (!dt) return false;
+        const files: File[] = [];
+        for (let i = 0; i < dt.files.length; i++) {
+          const f = dt.files[i];
+          if (f && IMAGE_MIME.test(f.type)) files.push(f);
+        }
+        if (files.length === 0) return false;
+        event.preventDefault();
+        const coords = view.posAtCoords({
+          left: event.clientX,
+          top: event.clientY,
+        });
+        if (coords) {
+          const tr = view.state.tr.setSelection(
+            TextSelection.near(view.state.doc.resolve(coords.pos)),
+          );
+          view.dispatch(tr);
+        }
+        void handleImageFiles(view, files, imageRegistry, mediaResolver);
+        return true;
+      }
+    : undefined;
+
+  return {
+    transformPastedHTML: cleanWordHtml,
+    handlePaste,
+    handleDrop,
+  };
+}
+
+export const _emuToPxForTests = emuToPx;

package/src/render/editable_view.test.ts

@@ -0,0 +1,173 @@
+// @vitest-environment happy-dom
+import { describe, it, expect, beforeEach } from "vitest";
+import { TextSelection } from "prosemirror-state";
+import { toggleMark } from "prosemirror-commands";
+import { undo, redo } from "prosemirror-history";
+import { docxSchema } from "../pm/schema";
+import { createEditableView } from "./view";
+import { buildFontRegistry } from "../fonts/registry";
+import { DEFAULT_SECTION_PROPERTIES } from "../model/sections";
+import type { Section } from "../model/sections";
+
+const fontRegistry = buildFontRegistry({
+  embeddedFonts: [],
+  workspaceFonts: [],
+});
+
+const defaultSections: Section[] = [
+  {
+    properties: { ...DEFAULT_SECTION_PROPERTIES },
+    blockStartIndex: 0,
+    blockEndIndex: 0,
+  },
+];
+
+let host: HTMLElement;
+beforeEach(() => {
+  document.body.innerHTML = "";
+  host = document.createElement("div");
+  document.body.appendChild(host);
+});
+
+function paragraph(text: string) {
+  const { paragraph } = docxSchema.nodes;
+  return paragraph.create({}, [docxSchema.text(text)]);
+}
+
+function emptyDoc() {
+  const { doc, paragraph } = docxSchema.nodes;
+  return doc.create({}, [paragraph.create({}, [])]);
+}
+
+function selectAll(view: ReturnType<typeof createEditableView>): void {
+  const { editorView } = view;
+  const { state } = editorView;
+  const tr = state.tr.setSelection(
+    TextSelection.create(state.doc, 1, state.doc.content.size - 1),
+  );
+  editorView.dispatch(tr);
+}
+
+describe("createEditableView — basic editing", () => {
+  it("mounts an editable view with contenteditable=true", () => {
+    const doc = docxSchema.nodes.doc.create({}, [paragraph("hello")]);
+    const view = createEditableView(host, doc, {
+      fontRegistry,
+      sections: defaultSections,
+    });
+    expect(view.editorView.editable).toBe(true);
+    const editor = host.querySelector(".ProseMirror") as HTMLElement;
+    expect(editor.getAttribute("contenteditable")).toBe("true");
+    expect(host.querySelector("[data-docx-editor]")?.getAttribute("data-docx-editor")).toBe(
+      "editable",
+    );
+    view.destroy();
+  });
+
+  it("inserting text via transaction updates the document", () => {
+    const view = createEditableView(host, emptyDoc(), {
+      fontRegistry,
+      sections: defaultSections,
+    });
+    const { editorView } = view;
+    const tr = editorView.state.tr.insertText("typed", 1);
+    editorView.dispatch(tr);
+
+    expect(view.getDocument().textContent).toBe("typed");
+    view.destroy();
+  });
+
+  it("invokes onChange whenever the document changes", () => {
+    let calls = 0;
+    const view = createEditableView(host, emptyDoc(), {
+      fontRegistry,
+      sections: defaultSections,
+      onChange: () => {
+        calls += 1;
+      },
+    });
+    const { editorView } = view;
+    editorView.dispatch(editorView.state.tr.insertText("a", 1));
+    editorView.dispatch(editorView.state.tr.insertText("b", 2));
+    expect(calls).toBe(2);
+    view.destroy();
+  });
+});
+
+describe("createEditableView — undo/redo via prosemirror-history", () => {
+  it("undo reverts the last insertion, redo re-applies it", () => {
+    const view = createEditableView(host, emptyDoc(), {
+      fontRegistry,
+      sections: defaultSections,
+    });
+    const { editorView } = view;
+
+    editorView.dispatch(editorView.state.tr.insertText("step1", 1));
+    expect(view.getDocument().textContent).toBe("step1");
+
+    undo(editorView.state, editorView.dispatch);
+    expect(view.getDocument().textContent).toBe("");
+
+    redo(editorView.state, editorView.dispatch);
+    expect(view.getDocument().textContent).toBe("step1");
+
+    view.destroy();
+  });
+});
+
+describe("createEditableView — toggleMark for bold/italic/underline", () => {
+  it("toggleMark(bold) wraps the selection with bold mark", () => {
+    const doc = docxSchema.nodes.doc.create({}, [paragraph("hello")]);
+    const view = createEditableView(host, doc, {
+      fontRegistry,
+      sections: defaultSections,
+    });
+
+    selectAll(view);
+    toggleMark(docxSchema.marks.bold)(view.editorView.state, view.editorView.dispatch);
+
+    const text = view.getDocument().firstChild!.firstChild!;
+    expect(text.marks.map((m) => m.type.name)).toContain("bold");
+    view.destroy();
+  });
+
+  it("toggleMark(italic) and toggleMark(underline) compose", () => {
+    const doc = docxSchema.nodes.doc.create({}, [paragraph("hello")]);
+    const view = createEditableView(host, doc, {
+      fontRegistry,
+      sections: defaultSections,
+    });
+
+    selectAll(view);
+    toggleMark(docxSchema.marks.italic)(view.editorView.state, view.editorView.dispatch);
+    toggleMark(docxSchema.marks.underline)(view.editorView.state, view.editorView.dispatch);
+
+    const names = view.getDocument().firstChild!.firstChild!.marks.map(
+      (m) => m.type.name,
+    );
+    expect(names).toContain("italic");
+    expect(names).toContain("underline");
+    view.destroy();
+  });
+});
+
+describe("createEditableView — read-only mode", () => {
+  it("read-only mode does not register history plugin (undo is a no-op)", () => {
+    const doc = docxSchema.nodes.doc.create({}, [paragraph("locked")]);
+    const view = createEditableView(host, doc, {
+      fontRegistry,
+      sections: defaultSections,
+    });
+    view.destroy();
+
+    const readOnlyView = createEditableView(host, doc, {
+      fontRegistry,
+      sections: defaultSections,
+      plugins: [],
+    });
+    expect(undo(readOnlyView.editorView.state, readOnlyView.editorView.dispatch)).toBe(
+      false,
+    );
+    readOnlyView.destroy();
+  });
+});

package/src/render/footnotes_view.ts

@@ -0,0 +1,94 @@
+import type { Node as PMNode } from "prosemirror-model";
+import type {
+  FootnoteEntry,
+  FootnoteRegistry,
+} from "../parse/footnotes";
+import { isTableXml, renderParagraph, renderTable } from "./table_dom";
+import type { Block } from "../model/types";
+import type { XmlElement } from "@lotics/ooxml/xml";
+
+function paragraphBlockToXml(
+  block: Extract<Block, { kind: "paragraph" }>,
+): XmlElement {
+  const children: XmlElement[] = [];
+  if (block.properties !== null) {
+    children.push({ "w:pPr": [...block.properties] });
+  }
+  for (const inline of block.content) {
+    if (inline.kind === "run") {
+      const runChildren: XmlElement[] = [];
+      if (inline.properties !== null) {
+        runChildren.push({ "w:rPr": [...inline.properties] });
+      }
+      for (const c of inline.content) {
+        if (c.kind === "text") {
+          const t: 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 renderFootnoteEntry(entry: FootnoteEntry, number: number): HTMLElement {
+  const li = document.createElement("li");
+  li.className = "docx-footnote";
+  li.setAttribute("data-footnote-id", entry.id);
+  li.setAttribute("value", String(number));
+  for (const block of entry.blocks) {
+    if (block.kind === "paragraph") {
+      li.appendChild(renderParagraph(paragraphBlockToXml(block)));
+    } else if (block.kind === "opaque_block" && isTableXml(block.xml)) {
+      li.appendChild(renderTable(block.xml));
+    }
+  }
+  return li;
+}
+
+export function collectReferencedFootnotes(
+  doc: PMNode,
+): Array<{ id: string; number: number }> {
+  const out: Array<{ id: string; number: number }> = [];
+  const seen = new Set<string>();
+  doc.descendants((node) => {
+    if (node.type.name !== "footnote_ref") return true;
+    const id = node.attrs.footnoteId as string;
+    if (!id || seen.has(id)) return false;
+    seen.add(id);
+    out.push({ id, number: node.attrs.number as number });
+    return false;
+  });
+  return out;
+}
+
+export function renderFootnotesSection(
+  registry: FootnoteRegistry,
+  doc: PMNode,
+): HTMLElement | null {
+  const referenced = collectReferencedFootnotes(doc);
+  if (referenced.length === 0) return null;
+  const wrapper = document.createElement("aside");
+  wrapper.className = "docx-footnotes";
+  wrapper.setAttribute("data-docx-footnotes", "true");
+  const ol = document.createElement("ol");
+  ol.className = "docx-footnotes__list";
+  let appended = 0;
+  for (const ref of referenced) {
+    const entry = registry.byId.get(ref.id);
+    if (!entry) continue;
+    ol.appendChild(renderFootnoteEntry(entry, ref.number));
+    appended += 1;
+  }
+  if (appended === 0) return null;
+  wrapper.appendChild(ol);
+  return wrapper;
+}

package/src/render/header_footer_view.ts

@@ -0,0 +1,95 @@
+import { getTagName } from "@lotics/ooxml/xml";
+import type {
+  HeaderFooterFragment,
+  HeaderFooterRegistry,
+} from "../parse/header_footer";
+import type { Block } from "../model/types";
+import type { SectionProperties } from "../model/sections";
+import { isTableXml, renderParagraph, renderTable } from "./table_dom";
+
+function renderBlock(block: Block): HTMLElement | null {
+  if (block.kind === "paragraph") {
+    return renderParagraph(blockToXml(block));
+  }
+  if (block.kind === "opaque_block") {
+    if (isTableXml(block.xml)) return renderTable(block.xml);
+  }
+  return null;
+}
+
+function blockToXml(
+  block: Extract<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 };
+}
+
+/**
+ * Render a header/footer fragment as read-only DOM. Editable header/footer
+ * editing is handled by `view.ts` via a separate ProseMirror EditorView
+ * mounted per fragment — not by toggling contenteditable on this DOM.
+ */
+export function renderHeaderFooterFragment(
+  fragment: HeaderFooterFragment,
+): HTMLElement {
+  const wrapper = document.createElement("div");
+  wrapper.className = "docx-header-footer";
+  for (const block of fragment.blocks) {
+    const el = renderBlock(block);
+    if (el) wrapper.appendChild(el);
+  }
+  return wrapper;
+}
+
+export function pickHeaderFragment(
+  section: SectionProperties,
+  registry: HeaderFooterRegistry,
+): HeaderFooterFragment | null {
+  return pickByType(section.headerRefs, registry);
+}
+
+export function pickFooterFragment(
+  section: SectionProperties,
+  registry: HeaderFooterRegistry,
+): HeaderFooterFragment | null {
+  return pickByType(section.footerRefs, registry);
+}
+
+function pickByType(
+  refs: SectionProperties["headerRefs"],
+  registry: HeaderFooterRegistry,
+): HeaderFooterFragment | null {
+  const defaultRef = refs.find((r) => r.type === "default") ?? refs[0];
+  if (!defaultRef) return null;
+  return registry.byRelationshipId.get(defaultRef.relationshipId) ?? null;
+}
+
+export function isOpaqueTable(block: Block): boolean {
+  if (block.kind !== "opaque_block") return false;
+  return getTagName(block.xml) === "w:tbl";
+}

package/src/render/link_mark_view.ts

@@ -0,0 +1,26 @@
+import type { Mark } from "prosemirror-model";
+import type { RelationshipMap } from "../parse/relationships";
+import { resolveHyperlinkUrl } from "../parse/relationships";
+
+export function buildLinkMarkView(relationships: RelationshipMap) {
+  return (mark: Mark): { dom: HTMLElement; contentDOM: HTMLElement } => {
+    const dom = document.createElement("a");
+    const relationshipId = mark.attrs.relationshipId as string | null;
+    const anchor = mark.attrs.anchor as string | null;
+    let href = "#";
+    if (relationshipId) {
+      const url = resolveHyperlinkUrl(relationships, relationshipId);
+      if (url) href = url;
+    } else if (anchor) {
+      href = `#${anchor}`;
+    }
+    dom.setAttribute("href", href);
+    if (relationshipId) {
+      dom.setAttribute("data-rel", relationshipId);
+      dom.setAttribute("target", "_blank");
+      dom.setAttribute("rel", "noreferrer noopener");
+    }
+    dom.className = "docx-link";
+    return { dom, contentDOM: dom };
+  };
+}

package/src/render/media_resolver.ts

@@ -0,0 +1,61 @@
+import {
+  resolveImagePartPath,
+  type RelationshipMap,
+} from "../parse/relationships";
+
+export type MediaResolver = {
+  resolveByRelationshipId(relId: string): string | null;
+  destroy(): void;
+};
+
+const MIME_BY_EXT: Record<string, string> = {
+  png: "image/png",
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  gif: "image/gif",
+  bmp: "image/bmp",
+  tiff: "image/tiff",
+  tif: "image/tiff",
+  svg: "image/svg+xml",
+  webp: "image/webp",
+};
+
+function mimeForPath(path: string): string {
+  const ext = path.split(".").pop()?.toLowerCase() ?? "";
+  return MIME_BY_EXT[ext] ?? "application/octet-stream";
+}
+
+export function buildMediaResolver(
+  parts: ReadonlyMap<string, Uint8Array>,
+  relationships: RelationshipMap,
+): MediaResolver {
+  const cache = new Map<string, string>();
+
+  return {
+    resolveByRelationshipId(relId: string): string | null {
+      const cached = cache.get(relId);
+      if (cached) return cached;
+
+      const partPath = resolveImagePartPath(relationships, relId);
+      if (!partPath) return null;
+      const bytes = parts.get(partPath);
+      if (!bytes) return null;
+
+      // Need a fresh ArrayBuffer for Blob (defensive copy keeps the parts map intact).
+      const copy = new Uint8Array(bytes);
+      const blob = new Blob([copy.buffer], { type: mimeForPath(partPath) });
+      const url = URL.createObjectURL(blob);
+      cache.set(relId, url);
+      return url;
+    },
+    destroy() {
+      for (const url of cache.values()) URL.revokeObjectURL(url);
+      cache.clear();
+    },
+  };
+}
+
+export const NULL_MEDIA_RESOLVER: MediaResolver = {
+  resolveByRelationshipId: () => null,
+  destroy: () => {},
+};