@lotics/docx 0.1.0

package/src/pm/image_registry.test.ts

@@ -0,0 +1,81 @@
+import { describe, it, expect } from "vitest";
+import { createImageRegistry, findImagesNeedingRelationship } from "./image_registry";
+import { docxSchema } from "./schema";
+
+describe("createImageRegistry", () => {
+  it("allocates fresh rIds avoiding existing ones", () => {
+    const reg = createImageRegistry({
+      existingRelationshipIds: new Set(["rIdImage1"]),
+    });
+    const a = reg.registerInsertedImage({
+      bytes: new Uint8Array([1, 2, 3]),
+      mimeType: "image/png",
+      extension: "png",
+    });
+    expect(a.relationshipId).not.toBe("rIdImage1");
+    expect(a.partPath).toContain("word/media/");
+    expect(a.partPath.endsWith(".png")).toBe(true);
+  });
+
+  it("takePending() returns and clears", () => {
+    const reg = createImageRegistry();
+    reg.registerInsertedImage({
+      bytes: new Uint8Array([1]),
+      mimeType: "image/png",
+      extension: "png",
+    });
+    reg.registerInsertedImage({
+      bytes: new Uint8Array([2]),
+      mimeType: "image/jpeg",
+      extension: "jpg",
+    });
+    const taken = reg.takePending();
+    expect(taken).toHaveLength(2);
+    expect(reg.takePending()).toHaveLength(0);
+  });
+
+  it("hasRelationship reflects existing + newly registered ids", () => {
+    const reg = createImageRegistry({
+      existingRelationshipIds: new Set(["rId7"]),
+    });
+    expect(reg.hasRelationship("rId7")).toBe(true);
+    const a = reg.registerInsertedImage({
+      bytes: new Uint8Array([1]),
+      mimeType: "image/png",
+      extension: "png",
+    });
+    expect(reg.hasRelationship(a.relationshipId)).toBe(true);
+    expect(reg.hasRelationship("rId-missing")).toBe(false);
+  });
+
+  it("custom rIdAllocator is honored", () => {
+    let counter = 100;
+    const reg = createImageRegistry({
+      rIdAllocator: () => `custom${counter++}`,
+    });
+    expect(
+      reg.registerInsertedImage({
+        bytes: new Uint8Array([1]),
+        mimeType: "image/png",
+        extension: "png",
+      }).relationshipId,
+    ).toBe("custom100");
+  });
+});
+
+describe("findImagesNeedingRelationship", () => {
+  it("collects image_inline nodes that lack a relationshipId", () => {
+    const { doc, paragraph, image_inline } = docxSchema.nodes;
+    const node = doc.create({}, [
+      paragraph.create({}, [
+        image_inline.create({ relationshipId: null, alt: "fresh" }),
+      ]),
+      paragraph.create({}, [
+        image_inline.create({ relationshipId: "rId7", alt: "existing" }),
+      ]),
+    ]);
+    const found = findImagesNeedingRelationship(node);
+    expect(found).toHaveLength(1);
+    expect(found[0].attrs.alt).toBe("fresh");
+  });
+});

package/src/pm/image_registry.ts

@@ -0,0 +1,100 @@
+import { Plugin, PluginKey } from "prosemirror-state";
+import type { Node as PMNode } from "prosemirror-model";
+
+export type PendingImage = {
+  relationshipId: string;
+  partPath: string;
+  bytes: Uint8Array;
+  mimeType: string;
+};
+
+export type ImageRegistry = {
+  registerInsertedImage(input: {
+    bytes: Uint8Array;
+    mimeType: string;
+    extension: string;
+  }): { relationshipId: string; partPath: string };
+  takePending(): PendingImage[];
+  hasRelationship(relationshipId: string): boolean;
+};
+
+export type ImageRegistryConfig = {
+  existingRelationshipIds?: ReadonlySet<string>;
+  rIdAllocator?: () => string;
+  partPathAllocator?: (extension: string) => string;
+};
+
+export function createImageRegistry(config: ImageRegistryConfig = {}): ImageRegistry {
+  const existing = new Set(config.existingRelationshipIds ?? []);
+  const pending: PendingImage[] = [];
+  const used = new Set<string>(existing);
+
+  let nextSeq = 0;
+  const allocateRelId = (): string => {
+    if (config.rIdAllocator) {
+      const candidate = config.rIdAllocator();
+      if (used.has(candidate)) {
+        throw new Error(`rIdAllocator returned an in-use id: ${candidate}`);
+      }
+      used.add(candidate);
+      return candidate;
+    }
+    let candidate: string;
+    do {
+      nextSeq += 1;
+      candidate = `rIdImage${nextSeq}`;
+    } while (used.has(candidate));
+    used.add(candidate);
+    return candidate;
+  };
+
+  const allocatePartPath = (extension: string): string =>
+    config.partPathAllocator
+      ? config.partPathAllocator(extension)
+      : `word/media/inserted_${used.size}.${extension}`;
+
+  return {
+    registerInsertedImage({ bytes, mimeType, extension }) {
+      const relationshipId = allocateRelId();
+      const partPath = allocatePartPath(extension);
+      pending.push({ relationshipId, partPath, bytes, mimeType });
+      return { relationshipId, partPath };
+    },
+    takePending() {
+      const out = pending.slice();
+      pending.length = 0;
+      return out;
+    },
+    hasRelationship(relationshipId) {
+      return used.has(relationshipId);
+    },
+  };
+}
+
+const imageRegistryPluginKey = new PluginKey<ImageRegistry>(
+  "docx-image-registry",
+);
+
+export function imageRegistryPlugin(registry: ImageRegistry): Plugin<ImageRegistry> {
+  return new Plugin<ImageRegistry>({
+    key: imageRegistryPluginKey,
+    state: {
+      init: () => registry,
+      apply: (_tr, value) => value,
+    },
+  });
+}
+
+export function getImageRegistry(state: import("prosemirror-state").EditorState): ImageRegistry | null {
+  return imageRegistryPluginKey.getState(state) ?? null;
+}
+
+export function findImagesNeedingRelationship(doc: PMNode): PMNode[] {
+  const out: PMNode[] = [];
+  doc.descendants((node) => {
+    if (node.type.name !== "image_inline") return true;
+    if (node.attrs.relationshipId === null) out.push(node);
+    return false;
+  });
+  return out;
+}

package/src/pm/images.test.ts

@@ -0,0 +1,257 @@
+// @vitest-environment happy-dom
+import { describe, it, expect, beforeEach } from "vitest";
+import { parseXml } from "@lotics/ooxml/xml";
+import { docxToPm } from "./docx_to_pm";
+import { pmToDocx } from "./pm_to_docx";
+import { parseDrawing } from "../parse/drawing";
+import { parseDocumentRelationships } from "../parse/relationships";
+import { buildMediaResolver } from "../render/media_resolver";
+import { createReadOnlyView } from "../render/view";
+import { buildFontRegistry } from "../fonts/registry";
+import { DEFAULT_SECTION_PROPERTIES } from "../model/sections";
+import type { DocxDocument } from "../model/types";
+import type { Section } from "../model/sections";
+
+const NS = `xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" xmlns:wp="http://schemas.openxmlformats.org/drawingml/2006/wordprocessingDrawing" xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" xmlns:pic="http://schemas.openxmlformats.org/drawingml/2006/picture"`;
+
+function inlineDrawingXml(opts: { rId: string; cx: number; cy: number; alt?: string }) {
+  return parseXml(
+    `<w:drawing ${NS}>
+      <wp:inline distT="0" distB="0" distL="0" distR="0">
+        <wp:extent cx="${opts.cx}" cy="${opts.cy}"/>
+        <wp:docPr id="1" name="Picture 1" descr="${opts.alt ?? ""}"/>
+        <a:graphic>
+          <a:graphicData uri="http://schemas.openxmlformats.org/drawingml/2006/picture">
+            <pic:pic>
+              <pic:nvPicPr>
+                <pic:cNvPr id="1" name="${opts.alt ?? "image"}"/>
+                <pic:cNvPicPr/>
+              </pic:nvPicPr>
+              <pic:blipFill>
+                <a:blip r:embed="${opts.rId}"/>
+                <a:stretch><a:fillRect/></a:stretch>
+              </pic:blipFill>
+              <pic:spPr>
+                <a:xfrm><a:off x="0" y="0"/><a:ext cx="${opts.cx}" cy="${opts.cy}"/></a:xfrm>
+                <a:prstGeom prst="rect"><a:avLst/></a:prstGeom>
+              </pic:spPr>
+            </pic:pic>
+          </a:graphicData>
+        </a:graphic>
+      </wp:inline>
+    </w:drawing>`,
+  )[0];
+}
+
+describe("parseDrawing", () => {
+  it("extracts r:embed, extents (EMU), and alt text", () => {
+    const drawing = inlineDrawingXml({
+      rId: "rId7",
+      cx: 1828800,
+      cy: 1371600,
+      alt: "Sample picture",
+    });
+    const info = parseDrawing(drawing);
+    expect(info).toEqual({
+      relationshipId: "rId7",
+      widthEmu: 1828800,
+      heightEmu: 1371600,
+      alt: "Sample picture",
+      inline: true,
+      wrap: null,
+      floatSide: null,
+      behindDoc: false,
+      offsetXEmu: null,
+      offsetYEmu: null,
+    });
+  });
+
+  it("returns null for non-drawing elements", () => {
+    const notADrawing = parseXml(`<w:r ${NS}><w:t>x</w:t></w:r>`)[0];
+    expect(parseDrawing(notADrawing)).toBeNull();
+  });
+});
+
+describe("docxToPm — image_inline", () => {
+  it("converts <w:drawing> inside a run into an image_inline node with typed attrs and originalXml", () => {
+    const drawing = inlineDrawingXml({ rId: "rId7", cx: 914400, cy: 914400, alt: "logo" });
+    const docx: DocxDocument = {
+      parts: new Map(),
+      documentAttrs: {},
+      body: {
+        children: [
+          {
+            kind: "paragraph",
+            properties: null,
+            content: [
+              {
+                kind: "run",
+                properties: null,
+                content: [{ kind: "opaque_run_child", xml: drawing }],
+              },
+            ],
+          },
+        ],
+      },
+    };
+    const pm = docxToPm(docx);
+    const node = pm.firstChild!.firstChild!;
+    expect(node.type.name).toBe("image_inline");
+    expect(node.attrs.relationshipId).toBe("rId7");
+    expect(node.attrs.widthEmu).toBe(914400);
+    expect(node.attrs.heightEmu).toBe(914400);
+    expect(node.attrs.alt).toBe("logo");
+    expect(node.attrs.originalXml).toBeDefined();
+  });
+
+  it("roundtrips the original drawing XML verbatim through pmToDocx", () => {
+    const drawing = inlineDrawingXml({ rId: "rId7", cx: 914400, cy: 914400 });
+    const docx: DocxDocument = {
+      parts: new Map(),
+      documentAttrs: {},
+      body: {
+        children: [
+          {
+            kind: "paragraph",
+            properties: null,
+            content: [
+              {
+                kind: "run",
+                properties: null,
+                content: [{ kind: "opaque_run_child", xml: drawing }],
+              },
+            ],
+          },
+        ],
+      },
+    };
+    const pm = docxToPm(docx);
+    const reconstructed = pmToDocx(pm, {
+      parts: docx.parts,
+      documentAttrs: docx.documentAttrs,
+    });
+    const para = reconstructed.body.children[0];
+    if (para.kind !== "paragraph") throw new Error();
+    const run = para.content[0];
+    if (run?.kind !== "run") throw new Error();
+    const child = run.content[0];
+    expect(child.kind).toBe("opaque_run_child");
+    if (child.kind === "opaque_run_child") {
+      expect(child.xml).toEqual(drawing);
+    }
+  });
+});
+
+describe("media resolver + image rendering", () => {
+  let host: HTMLElement;
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    host = document.createElement("div");
+    document.body.appendChild(host);
+  });
+
+  it("emits an <img> tag with a blob URL when the media part exists", () => {
+    const drawing = inlineDrawingXml({ rId: "rId5", cx: 914400, cy: 914400, alt: "logo" });
+
+    const relsXml = `<?xml version="1.0"?>
+<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">
+  <Relationship Id="rId5" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/image" Target="media/image1.png"/>
+</Relationships>`;
+    const fakePngBytes = new Uint8Array([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);
+
+    const parts = new Map<string, Uint8Array>([
+      ["word/_rels/document.xml.rels", new TextEncoder().encode(relsXml)],
+      ["word/media/image1.png", fakePngBytes],
+    ]);
+
+    const docx: DocxDocument = {
+      parts,
+      documentAttrs: {},
+      body: {
+        children: [
+          {
+            kind: "paragraph",
+            properties: null,
+            content: [
+              {
+                kind: "run",
+                properties: null,
+                content: [{ kind: "opaque_run_child", xml: drawing }],
+              },
+            ],
+          },
+        ],
+      },
+    };
+
+    const pm = docxToPm(docx);
+    const relationships = parseDocumentRelationships(parts);
+    const mediaResolver = buildMediaResolver(parts, relationships);
+
+    const view = createReadOnlyView(host, pm, {
+      fontRegistry: buildFontRegistry({
+        embeddedFonts: [],
+        workspaceFonts: [],
+      }),
+      sections: [
+        {
+          properties: { ...DEFAULT_SECTION_PROPERTIES },
+          blockStartIndex: 0,
+          blockEndIndex: 0,
+        } satisfies Section,
+      ],
+      relationships,
+      mediaResolver,
+    });
+
+    const img = host.querySelector("img");
+    expect(img).not.toBeNull();
+    expect(img!.getAttribute("src")).toMatch(/^blob:/);
+    expect(img!.getAttribute("alt")).toBe("logo");
+    expect(img!.style.width).toBe("96px");
+    expect(img!.style.height).toBe("96px");
+
+    view.destroy();
+    mediaResolver.destroy();
+  });
+
+  it("renders [image] placeholder when no resolver is provided", () => {
+    const drawing = inlineDrawingXml({ rId: "rId5", cx: 914400, cy: 914400, alt: "" });
+    const docx: DocxDocument = {
+      parts: new Map(),
+      documentAttrs: {},
+      body: {
+        children: [
+          {
+            kind: "paragraph",
+            properties: null,
+            content: [
+              {
+                kind: "run",
+                properties: null,
+                content: [{ kind: "opaque_run_child", xml: drawing }],
+              },
+            ],
+          },
+        ],
+      },
+    };
+    const pm = docxToPm(docx);
+    const view = createReadOnlyView(host, pm, {
+      fontRegistry: buildFontRegistry({
+        embeddedFonts: [],
+        workspaceFonts: [],
+      }),
+      sections: [
+        {
+          properties: { ...DEFAULT_SECTION_PROPERTIES },
+          blockStartIndex: 0,
+          blockEndIndex: 0,
+        } satisfies Section,
+      ],
+    });
+    expect(host.querySelector("img")).toBeNull();
+    expect(host.querySelector(".docx-image-inline__placeholder")?.textContent).toBe("[image]");
+    view.destroy();
+  });
+});

package/src/pm/link_popover.ts

@@ -0,0 +1,159 @@
+import { Plugin, PluginKey, TextSelection } from "prosemirror-state";
+import type { EditorView } from "prosemirror-view";
+import type { Mark } from "prosemirror-model";
+import { docxSchema } from "./schema";
+import { registerGlobalStyle } from "../render/style_registry";
+
+const linkPopoverKey = new PluginKey("docx-link-popover");
+
+const POPOVER_CSS = `
+.docx-link-popover {
+  position: absolute;
+  display: none;
+  background: #ffffff;
+  border: 1px solid #dadce0;
+  box-shadow: 0 2px 8px rgba(60,64,67,0.18);
+  border-radius: 6px;
+  padding: 6px;
+  font: 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  z-index: 1000;
+  align-items: center;
+  gap: 4px;
+}
+.docx-link-popover[data-visible="true"] { display: inline-flex; }
+.docx-link-popover a {
+  color: #1a73e8;
+  text-decoration: underline;
+  max-width: 280px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.docx-link-popover button {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  color: #3c4043;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+.docx-link-popover button:hover { background: #f1f3f4; }
+`;
+
+function installStyle(): () => void {
+  return registerGlobalStyle("docx-link-popover-style", POPOVER_CSS);
+}
+
+function findLinkAtSelection(view: EditorView): {
+  mark: Mark;
+  from: number;
+  to: number;
+} | null {
+  const linkType = docxSchema.marks.link;
+  if (!linkType) return null;
+  const { selection, doc } = view.state;
+  const $pos = doc.resolve(selection.from);
+  const mark = $pos.marks().find((m) => m.type === linkType);
+  if (!mark) return null;
+  // Expand to cover the contiguous link range.
+  let from = selection.from;
+  let to = selection.from;
+  while (from > 0) {
+    const $from = doc.resolve(from - 1);
+    if (!$from.marks().some((m) => m.eq(mark))) break;
+    from -= 1;
+  }
+  const docSize = doc.content.size;
+  while (to < docSize) {
+    const $to = doc.resolve(to);
+    if (!$to.marks().some((m) => m.eq(mark))) break;
+    to += 1;
+  }
+  return { mark, from, to };
+}
+
+function linkHref(mark: Mark): string {
+  const anchor = mark.attrs.anchor as string | null;
+  if (anchor) return `#${anchor}`;
+  const relId = mark.attrs.relationshipId as string | null;
+  return relId ? `[${relId}]` : "#";
+}
+
+export function linkPopoverPlugin(): Plugin {
+  return new Plugin({
+    key: linkPopoverKey,
+    view(view) {
+      const releaseStyle = installStyle();
+
+      const popover = document.createElement("div");
+      popover.className = "docx-link-popover";
+      popover.setAttribute("data-docx-link-popover", "true");
+      popover.setAttribute("data-visible", "false");
+
+      const linkEl = document.createElement("a");
+      linkEl.target = "_blank";
+      linkEl.rel = "noopener noreferrer";
+      const editBtn = document.createElement("button");
+      editBtn.type = "button";
+      editBtn.textContent = "Edit";
+      const unlinkBtn = document.createElement("button");
+      unlinkBtn.type = "button";
+      unlinkBtn.textContent = "Unlink";
+
+      popover.append(linkEl, editBtn, unlinkBtn);
+      document.body.appendChild(popover);
+
+      const update = () => {
+        const found = findLinkAtSelection(view);
+        if (!found || !view.hasFocus()) {
+          popover.setAttribute("data-visible", "false");
+          return;
+        }
+        const coords = view.coordsAtPos(found.from);
+        const href = linkHref(found.mark);
+        linkEl.href = href;
+        linkEl.textContent = href;
+        popover.style.left = `${coords.left + window.scrollX}px`;
+        popover.style.top = `${coords.bottom + window.scrollY + 4}px`;
+        popover.setAttribute("data-visible", "true");
+
+        editBtn.onclick = () => {
+          const initial = href.startsWith("#") ? href.slice(1) : href;
+          const next = prompt("Edit anchor name (#bookmark)", initial);
+          if (next === null) return;
+          const trimmed = next.trim().replace(/^#/, "");
+          if (trimmed.length === 0) return;
+          const linkType = docxSchema.marks.link;
+          const tr = view.state.tr
+            .removeMark(found.from, found.to, linkType)
+            .addMark(
+              found.from,
+              found.to,
+              linkType.create({ relationshipId: null, anchor: trimmed }),
+            );
+          view.dispatch(tr);
+          view.focus();
+        };
+
+        unlinkBtn.onclick = () => {
+          const linkType = docxSchema.marks.link;
+          const tr = view.state.tr.removeMark(found.from, found.to, linkType);
+          // Restore selection to the same range so popover hides.
+          tr.setSelection(TextSelection.create(tr.doc, found.from, found.to));
+          view.dispatch(tr);
+          view.focus();
+        };
+      };
+
+      update();
+      return {
+        update,
+        destroy() {
+          popover.remove();
+          releaseStyle();
+        },
+      };
+    },
+  });
+}

package/src/pm/mark_commands.ts

@@ -0,0 +1,60 @@
+import type { Command } from "prosemirror-state";
+import { docxSchema } from "./schema";
+
+function applyMark(
+  type: "color" | "highlight" | "font" | "size",
+  attrs: Record<string, unknown>,
+): Command {
+  return (state, dispatch) => {
+    const { from, to, empty } = state.selection;
+    const markType = docxSchema.marks[type];
+    if (!markType) return false;
+    const tr = state.tr;
+    if (empty) {
+      const stored = state.storedMarks ?? state.selection.$from.marks();
+      const next = markType.create(attrs).addToSet(stored.filter((m) => m.type !== markType));
+      tr.setStoredMarks(next);
+    } else {
+      tr.removeMark(from, to, markType);
+      tr.addMark(from, to, markType.create(attrs));
+    }
+    if (dispatch) dispatch(tr);
+    return true;
+  };
+}
+
+function clearMark(type: "color" | "highlight" | "font" | "size"): Command {
+  return (state, dispatch) => {
+    const { from, to } = state.selection;
+    const markType = docxSchema.marks[type];
+    if (!markType) return false;
+    const tr = state.tr.removeMark(from, to, markType);
+    if (dispatch) dispatch(tr);
+    return true;
+  };
+}
+
+export function setTextColor(value: string | null): Command {
+  if (!value) return clearMark("color");
+  return applyMark("color", { value });
+}
+
+export function setHighlight(value: string | null): Command {
+  if (!value) return clearMark("highlight");
+  return applyMark("highlight", { value });
+}
+
+export function setFontFamily(family: string | null): Command {
+  if (!family) return clearMark("font");
+  return applyMark("font", {
+    ascii: family,
+    hAnsi: family,
+    eastAsia: null,
+    complexScript: null,
+  });
+}
+
+export function setFontSize(pt: number | null): Command {
+  if (pt === null) return clearMark("size");
+  return applyMark("size", { halfPoints: Math.round(pt * 2) });
+}