@lotics/docx 0.1.0

package/src/pm/drag_handle.ts

@@ -0,0 +1,166 @@
+import { Plugin, PluginKey, NodeSelection } from "prosemirror-state";
+import type { EditorView } from "prosemirror-view";
+import { Slice } from "prosemirror-model";
+import { registerGlobalStyle } from "../render/style_registry";
+
+const dragHandleKey = new PluginKey("docx-drag-handle");
+
+const HANDLE_CSS = `
+.docx-block-drag-handle {
+  position: absolute;
+  display: none;
+  width: 16px;
+  height: 22px;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: #80868b;
+  cursor: grab;
+  border-radius: 4px;
+  z-index: 25;
+  user-select: none;
+}
+.docx-block-drag-handle:active { cursor: grabbing; }
+.docx-block-drag-handle[data-visible="true"] { display: inline-flex; }
+.docx-block-drag-handle:hover { color: #3c4043; background: #f1f3f4; }
+.docx-block-drag-handle svg {
+  width: 14px;
+  height: 14px;
+}
+`;
+
+const HANDLE_SVG = `
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <circle cx="9" cy="6" r="1.5"/>
+  <circle cx="15" cy="6" r="1.5"/>
+  <circle cx="9" cy="12" r="1.5"/>
+  <circle cx="15" cy="12" r="1.5"/>
+  <circle cx="9" cy="18" r="1.5"/>
+  <circle cx="15" cy="18" r="1.5"/>
+</svg>
+`;
+
+function installStyle(): () => void {
+  return registerGlobalStyle("docx-drag-handle-style", HANDLE_CSS);
+}
+
+function findBlockUnderPoint(
+  view: EditorView,
+  clientX: number,
+  clientY: number,
+): { dom: HTMLElement; pos: number } | null {
+  const found = view.posAtCoords({ left: clientX, top: clientY });
+  if (!found) return null;
+  const start = found.inside >= 0 ? found.inside : found.pos;
+  const $pos = view.state.doc.resolve(start);
+  // Walk *up* to the deepest block-level container that supports being
+  // selected as a NodeSelection — paragraph, table, table_row, list_item,
+  // opaque_block. Skip text/leaf/inline nodes. Reach depth 1 if no inner
+  // block-level structure is found, so blocks inside table cells are
+  // draggable (depth >= 2).
+  for (let depth = $pos.depth; depth >= 1; depth--) {
+    const node = $pos.node(depth);
+    if (!node.isBlock || node.isTextblock === false && depth === 0) continue;
+    const pos = $pos.before(depth);
+    const dom = view.nodeDOM(pos);
+    if (dom instanceof HTMLElement) {
+      return { dom, pos };
+    }
+  }
+  return null;
+}
+
+export function dragHandlePlugin(): Plugin {
+  return new Plugin({
+    key: dragHandleKey,
+    view(view) {
+      const releaseStyle = installStyle();
+
+      const handle = document.createElement("button");
+      handle.type = "button";
+      handle.className = "docx-block-drag-handle";
+      handle.setAttribute("data-docx-drag-handle", "true");
+      handle.setAttribute("data-visible", "false");
+      handle.setAttribute("draggable", "true");
+      handle.setAttribute("title", "Drag to move");
+      handle.innerHTML = HANDLE_SVG;
+      document.body.appendChild(handle);
+
+      let active: { pos: number; dom: HTMLElement } | null = null;
+
+      const hide = () => {
+        handle.setAttribute("data-visible", "false");
+        active = null;
+      };
+
+      const onMove = (e: MouseEvent) => {
+        const found = findBlockUnderPoint(view, e.clientX, e.clientY);
+        if (!found) {
+          hide();
+          return;
+        }
+        active = found;
+        const r = found.dom.getBoundingClientRect();
+        handle.style.left = `${r.left + window.scrollX - 22}px`;
+        handle.style.top = `${r.top + window.scrollY + 2}px`;
+        handle.setAttribute("data-visible", "true");
+      };
+
+      const onLeave = (e: MouseEvent) => {
+        const target = e.relatedTarget as HTMLElement | null;
+        if (target === handle) return;
+        if (!target || !view.dom.contains(target)) hide();
+      };
+
+      view.dom.addEventListener("mousemove", onMove);
+      view.dom.addEventListener("mouseleave", onLeave);
+
+      handle.addEventListener("mousedown", (e) => {
+        // Select the whole node so the browser drags it, not random text.
+        if (!active) return;
+        e.preventDefault();
+        const tr = view.state.tr.setSelection(
+          NodeSelection.create(view.state.doc, active.pos),
+        );
+        view.dispatch(tr);
+      });
+
+      handle.addEventListener("dragstart", (e) => {
+        if (!active) return;
+        const node = view.state.doc.nodeAt(active.pos);
+        if (!node) return;
+        // Hand the slice directly to PM via `view.dragging` so the drop
+        // handler reorders nodes (move semantics) instead of falling back
+        // to text/html re-parse, which loses node-level attrs and marks.
+        const slice = view.state.doc.slice(
+          active.pos,
+          active.pos + node.nodeSize,
+        );
+        (view as unknown as { dragging: { slice: Slice; move: boolean } | null }).dragging = {
+          slice,
+          move: true,
+        };
+        if (e.dataTransfer) {
+          e.dataTransfer.effectAllowed = "move";
+          // Provide a non-empty text payload so Chromium starts the drag at
+          // all; PM's drop handler ignores it and consumes view.dragging.
+          e.dataTransfer.setData("text/plain", node.textContent || " ");
+        }
+      });
+
+      handle.addEventListener("dragend", () => {
+        (view as unknown as { dragging: unknown }).dragging = null;
+      });
+
+      return {
+        destroy() {
+          view.dom.removeEventListener("mousemove", onMove);
+          view.dom.removeEventListener("mouseleave", onLeave);
+          handle.remove();
+          releaseStyle();
+        },
+      };
+    },
+  });
+}

package/src/pm/format_painter.test.ts

@@ -0,0 +1,91 @@
+import { describe, it, expect } from "vitest";
+import { EditorState, TextSelection } from "prosemirror-state";
+import { docxSchema } from "./schema";
+import { applyFormat, captureFormat } from "./format_painter";
+import {
+  EMPTY_PARAGRAPH_PROPERTIES,
+  type ParagraphProperties,
+} from "../model/properties";
+
+function makeState(paragraphs: { text: string; props?: Partial<ParagraphProperties> }[]) {
+  const nodes = paragraphs.map(({ text, props }) =>
+    docxSchema.nodes.paragraph.create(
+      {
+        properties: { ...EMPTY_PARAGRAPH_PROPERTIES, ...props },
+        unknownProperties: [],
+        resolvedProperties: null,
+        resolvedBaseRun: null,
+        numberingLabel: null,
+      },
+      text.length === 0 ? undefined : [docxSchema.text(text)],
+    ),
+  );
+  const doc = docxSchema.nodes.doc.create({}, nodes);
+  return EditorState.create({ doc, schema: docxSchema });
+}
+
+describe("applyFormat", () => {
+  it("paints distinct property objects to each paragraph (no shared references)", () => {
+    const source = makeState([
+      { text: "source", props: { alignment: "center", indent: { left: 720, right: null, firstLine: null, hanging: null } } },
+    ]);
+    const snapshot = captureFormat(
+      source.apply(
+        source.tr.setSelection(TextSelection.create(source.doc, 1, 7)),
+      ),
+    );
+
+    // Two-paragraph target.
+    const target = makeState([
+      { text: "first" },
+      { text: "second" },
+    ]);
+    const selectAll = target.tr.setSelection(
+      TextSelection.create(target.doc, 1, target.doc.content.size - 1),
+    );
+    const painted = target.apply(selectAll);
+    const tr = applyFormat(painted, snapshot);
+    expect(tr).not.toBeNull();
+    const next = painted.apply(tr!);
+
+    const props: ParagraphProperties[] = [];
+    next.doc.forEach((p) => {
+      props.push(p.attrs.properties as ParagraphProperties);
+    });
+    expect(props.length).toBe(2);
+    expect(props[0].alignment).toBe("center");
+    expect(props[1].alignment).toBe("center");
+
+    // Each paragraph must own its own indent object — mutating one should
+    // not affect the other (snapshot's properties also stay isolated).
+    expect(props[0].indent).not.toBe(props[1].indent);
+    expect(props[0].indent).not.toBe(snapshot.paragraph?.indent);
+    expect(props[0]).not.toBe(props[1]);
+  });
+
+  it("does not mutate the source paragraph properties", () => {
+    const sourceProps = {
+      alignment: "right" as const,
+      indent: { left: 360, right: null, firstLine: null, hanging: null },
+    };
+    const source = makeState([{ text: "src", props: sourceProps }]);
+    const snapshot = captureFormat(
+      source.apply(
+        source.tr.setSelection(TextSelection.create(source.doc, 1, 4)),
+      ),
+    );
+
+    // Mutate the snapshot's clone — source must remain unchanged.
+    if (snapshot.paragraph?.indent) {
+      snapshot.paragraph.indent.left = 9999;
+    }
+    const live = source.doc.firstChild?.attrs.properties as ParagraphProperties;
+    expect(live.indent?.left).toBe(360);
+  });
+
+  it("returns null when the selection is collapsed", () => {
+    const state = makeState([{ text: "hello" }]);
+    const tr = applyFormat(state, { marks: [], paragraph: null });
+    expect(tr).toBeNull();
+  });
+});

package/src/pm/format_painter.ts

@@ -0,0 +1,109 @@
+import type { EditorState, Transaction } from "prosemirror-state";
+import type { Mark } from "prosemirror-model";
+import type { ParagraphProperties } from "../model/properties";
+import {
+  EMPTY_RUN_PROPERTIES,
+} from "../model/properties";
+import {
+  resolveParagraphProperties,
+  resolveRunProperties,
+} from "../model/style_resolution";
+import type { StyleTable } from "../model/style_table";
+import { getActiveParagraphProperties } from "./commands";
+
+export type FormatSnapshot = {
+  marks: readonly Mark[];
+  paragraph: ParagraphProperties | null;
+};
+
+export function captureFormat(state: EditorState): FormatSnapshot {
+  const { from, to, empty } = state.selection;
+  const marks = empty
+    ? state.storedMarks ?? state.selection.$from.marks()
+    : (() => {
+        const collected: Mark[] = [];
+        state.doc.nodesBetween(from, to, (node) => {
+          if (node.isInline) {
+            for (const m of node.marks) {
+              if (!collected.some((cm) => cm.eq(m))) collected.push(m);
+            }
+          }
+          return true;
+        });
+        return collected;
+      })();
+  return {
+    marks,
+    paragraph: cloneParagraphProperties(getActiveParagraphProperties(state)),
+  };
+}
+
+/**
+ * Apply a captured snapshot over the current selection. Each paragraph in
+ * range receives a *fresh* deep-cloned property object — never the snapshot
+ * reference — so subsequent edits to one paragraph don't ripple through any
+ * other paragraph that received the paint. resolvedProperties /
+ * resolvedBaseRun are recomputed via the style table when one is provided
+ * (read from `ctx.styleTable`).
+ */
+export function applyFormat(
+  state: EditorState,
+  snapshot: FormatSnapshot,
+  ctx: { styleTable?: StyleTable | null } = {},
+): Transaction | null {
+  const { from, to } = state.selection;
+  if (from === to) return null;
+  const tr = state.tr;
+
+  const markTypes = Object.values(state.schema.marks);
+  for (const type of markTypes) {
+    tr.removeMark(from, to, type);
+  }
+  for (const mark of snapshot.marks) {
+    tr.addMark(from, to, mark);
+  }
+
+  if (snapshot.paragraph) {
+    const styleTable = ctx.styleTable ?? null;
+    state.doc.nodesBetween(from, to, (node, pos) => {
+      if (node.type.name !== "paragraph") return true;
+      const next = cloneParagraphProperties(snapshot.paragraph);
+      if (!next) return false;
+      const resolvedProperties = styleTable
+        ? resolveParagraphProperties(styleTable, next)
+        : null;
+      const resolvedBaseRun = styleTable
+        ? resolveRunProperties(styleTable, next.styleId, {
+            ...EMPTY_RUN_PROPERTIES,
+          })
+        : null;
+      tr.setNodeMarkup(pos, undefined, {
+        ...node.attrs,
+        properties: next,
+        resolvedProperties,
+        resolvedBaseRun,
+      });
+      return false;
+    });
+  }
+  return tr;
+}
+
+function cloneParagraphProperties(
+  src: ParagraphProperties | null,
+): ParagraphProperties | null {
+  if (!src) return null;
+  return {
+    styleId: src.styleId,
+    alignment: src.alignment,
+    indent: src.indent ? { ...src.indent } : null,
+    spacing: src.spacing ? { ...src.spacing } : null,
+    numbering: src.numbering ? { ...src.numbering } : null,
+    pageBreakBefore: src.pageBreakBefore,
+    keepLines: src.keepLines,
+    keepNext: src.keepNext,
+    widowControl: src.widowControl,
+    outlineLevel: src.outlineLevel,
+  };
+}
+

package/src/pm/header_footer_doc.ts

@@ -0,0 +1,24 @@
+import type { Node as PMNode } from "prosemirror-model";
+import type { HeaderFooterFragment } from "../parse/header_footer";
+import type { DocxDocument } from "../model/types";
+import type { StyleTable } from "../model/style_table";
+import type { NumberingTable } from "../model/numbering_table";
+import { docxToPm } from "./docx_to_pm";
+
+/**
+ * Convert a parsed header/footer fragment into a PM doc using the same
+ * pipeline as the body. Tables, opaque blocks, and rich runs all flow
+ * through docxToPm — no fidelity loss.
+ */
+export function headerFooterFragmentToPm(
+  fragment: HeaderFooterFragment,
+  context: { styleTable?: StyleTable | null; numberingTable?: NumberingTable | null } = {},
+): PMNode {
+  // The fragment.blocks are the same Block[] shape that DocxDocument.body uses.
+  const synthetic: DocxDocument = {
+    parts: new Map(),
+    documentAttrs: {},
+    body: { children: fragment.blocks as DocxDocument["body"]["children"] },
+  };
+  return docxToPm(synthetic, context);
+}

package/src/pm/hyperlinks.test.ts

@@ -0,0 +1,234 @@
+// @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 {
+  parseDocumentRelationships,
+  resolveHyperlinkUrl,
+} from "../parse/relationships";
+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 fontRegistry = buildFontRegistry({
+  embeddedFonts: [],
+  workspaceFonts: [],
+});
+
+const defaultSections: Section[] = [
+  {
+    properties: { ...DEFAULT_SECTION_PROPERTIES },
+    blockStartIndex: 0,
+    blockEndIndex: 0,
+  },
+];
+
+const NS = `xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"`;
+
+function relsXml(): string {
+  return `<?xml version="1.0"?>
+<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">
+  <Relationship Id="rId4" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/hyperlink" Target="https://example.com" TargetMode="External"/>
+  <Relationship Id="rId5" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/image" Target="media/image1.png"/>
+</Relationships>`;
+}
+
+function relsParts() {
+  return new Map([
+    ["word/_rels/document.xml.rels", new TextEncoder().encode(relsXml())],
+  ]);
+}
+
+describe("relationships parser", () => {
+  it("parses hyperlink and image relationships", () => {
+    const map = parseDocumentRelationships(relsParts());
+    expect(map.get("rId4")?.target).toBe("https://example.com");
+    expect(map.get("rId5")?.target).toBe("media/image1.png");
+  });
+
+  it("resolveHyperlinkUrl returns target only for hyperlink rel type", () => {
+    const map = parseDocumentRelationships(relsParts());
+    expect(resolveHyperlinkUrl(map, "rId4")).toBe("https://example.com");
+    expect(resolveHyperlinkUrl(map, "rId5")).toBeNull();
+    expect(resolveHyperlinkUrl(map, "rId-missing")).toBeNull();
+  });
+});
+
+describe("hyperlink conversion", () => {
+  it("attaches link mark to text inside <w:hyperlink>", () => {
+    const hyperlinkXml = parseXml(
+      `<w:hyperlink ${NS} r:id="rId4"><w:r><w:t>Click me</w:t></w:r></w:hyperlink>`,
+    )[0];
+    const docx: DocxDocument = {
+      parts: new Map(),
+      documentAttrs: {},
+      body: {
+        children: [
+          {
+            kind: "paragraph",
+            properties: null,
+            content: [{ kind: "opaque_inline", xml: hyperlinkXml }],
+          },
+        ],
+      },
+    };
+    const pm = docxToPm(docx);
+    const text = pm.firstChild!.firstChild!;
+    expect(text.text).toBe("Click me");
+    const link = text.marks.find((m) => m.type.name === "link");
+    expect(link).toBeDefined();
+    expect(link!.attrs.relationshipId).toBe("rId4");
+  });
+
+  it("supports internal links via w:anchor", () => {
+    const hyperlinkXml = parseXml(
+      `<w:hyperlink ${NS} w:anchor="bookmark1"><w:r><w:t>Section</w:t></w:r></w:hyperlink>`,
+    )[0];
+    const docx: DocxDocument = {
+      parts: new Map(),
+      documentAttrs: {},
+      body: {
+        children: [
+          {
+            kind: "paragraph",
+            properties: null,
+            content: [{ kind: "opaque_inline", xml: hyperlinkXml }],
+          },
+        ],
+      },
+    };
+    const pm = docxToPm(docx);
+    const text = pm.firstChild!.firstChild!;
+    const link = text.marks.find((m) => m.type.name === "link");
+    expect(link?.attrs.anchor).toBe("bookmark1");
+    expect(link?.attrs.relationshipId).toBeNull();
+  });
+
+  it("preserves run formatting inside the hyperlink", () => {
+    const hyperlinkXml = parseXml(
+      `<w:hyperlink ${NS} r:id="rId4"><w:r><w:rPr><w:b/></w:rPr><w:t>bold link</w:t></w:r></w:hyperlink>`,
+    )[0];
+    const docx: DocxDocument = {
+      parts: new Map(),
+      documentAttrs: {},
+      body: {
+        children: [
+          {
+            kind: "paragraph",
+            properties: null,
+            content: [{ kind: "opaque_inline", xml: hyperlinkXml }],
+          },
+        ],
+      },
+    };
+    const pm = docxToPm(docx);
+    const text = pm.firstChild!.firstChild!;
+    const names = text.marks.map((m) => m.type.name).sort();
+    expect(names).toContain("bold");
+    expect(names).toContain("link");
+  });
+
+  it("roundtrips link mark back into <w:hyperlink>", () => {
+    const hyperlinkXml = parseXml(
+      `<w:hyperlink ${NS} r:id="rId4"><w:r><w:t>Click me</w:t></w:r></w:hyperlink>`,
+    )[0];
+    const docx: DocxDocument = {
+      parts: new Map(),
+      documentAttrs: {},
+      body: {
+        children: [
+          {
+            kind: "paragraph",
+            properties: null,
+            content: [{ kind: "opaque_inline", xml: hyperlinkXml }],
+          },
+        ],
+      },
+    };
+    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 inline = para.content[0];
+    expect(inline.kind).toBe("opaque_inline");
+    if (inline.kind === "opaque_inline") {
+      expect(Object.keys(inline.xml)).toContain("w:hyperlink");
+      const attrs = inline.xml[":@"] as Record<string, string>;
+      expect(attrs["@_r:id"]).toBe("rId4");
+    }
+  });
+});
+
+describe("link mark rendering", () => {
+  let host: HTMLElement;
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    host = document.createElement("div");
+    document.body.appendChild(host);
+  });
+
+  it("renders <a href> with resolved URL when relationships are provided", () => {
+    const hyperlinkXml = parseXml(
+      `<w:hyperlink ${NS} r:id="rId4"><w:r><w:t>Click me</w:t></w:r></w:hyperlink>`,
+    )[0];
+    const docx: DocxDocument = {
+      parts: new Map(),
+      documentAttrs: {},
+      body: {
+        children: [
+          {
+            kind: "paragraph",
+            properties: null,
+            content: [{ kind: "opaque_inline", xml: hyperlinkXml }],
+          },
+        ],
+      },
+    };
+    const pm = docxToPm(docx);
+    const view = createReadOnlyView(host, pm, {
+      fontRegistry,
+      sections: defaultSections,
+      relationships: parseDocumentRelationships(relsParts()),
+    });
+
+    const a = host.querySelector("a") as HTMLAnchorElement;
+    expect(a).not.toBeNull();
+    expect(a.getAttribute("href")).toBe("https://example.com");
+    expect(a.textContent).toBe("Click me");
+    view.destroy();
+  });
+
+  it("renders #anchor href for internal links", () => {
+    const hyperlinkXml = parseXml(
+      `<w:hyperlink ${NS} w:anchor="bookmark1"><w:r><w:t>Section</w:t></w:r></w:hyperlink>`,
+    )[0];
+    const docx: DocxDocument = {
+      parts: new Map(),
+      documentAttrs: {},
+      body: {
+        children: [
+          {
+            kind: "paragraph",
+            properties: null,
+            content: [{ kind: "opaque_inline", xml: hyperlinkXml }],
+          },
+        ],
+      },
+    };
+    const pm = docxToPm(docx);
+    const view = createReadOnlyView(host, pm, {
+      fontRegistry,
+      sections: defaultSections,
+    });
+
+    const a = host.querySelector("a") as HTMLAnchorElement;
+    expect(a.getAttribute("href")).toBe("#bookmark1");
+    view.destroy();
+  });
+});