@lotics/docx 0.1.0

package/src/pm/phase5.test.ts

@@ -0,0 +1,271 @@
+// @vitest-environment happy-dom
+import { describe, it, expect, beforeEach } from "vitest";
+import { parseXml } from "@lotics/ooxml/xml";
+import { parseDrawing } from "../parse/drawing";
+import { parseFootnoteRegistry } from "../parse/footnotes";
+import { docxToPm } from "./docx_to_pm";
+import {
+  collectReferencedFootnotes,
+  renderFootnotesSection,
+} from "../render/footnotes_view";
+import { createReadOnlyView } from "../render/view";
+import { buildFontRegistry } from "../fonts/registry";
+import { DEFAULT_SECTION_PROPERTIES } from "../model/sections";
+import { docxSchema } from "./schema";
+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"`;
+
+describe("anchored image parsing", () => {
+  it("detects wrapSquare + left float side", () => {
+    const xml = parseXml(`
+      <w:drawing ${NS}>
+        <wp:anchor>
+          <wp:positionH relativeFrom="margin"><wp:align>left</wp:align></wp:positionH>
+          <wp:positionV relativeFrom="paragraph"><wp:posOffset>0</wp:posOffset></wp:positionV>
+          <wp:extent cx="914400" cy="914400"/>
+          <wp:wrapSquare wrapText="bothSides"/>
+          <wp:docPr id="1" name="img"/>
+          <a:graphic><a:graphicData>
+            <pic:pic><pic:blipFill><a:blip r:embed="rId5"/></pic:blipFill></pic:pic>
+          </a:graphicData></a:graphic>
+        </wp:anchor>
+      </w:drawing>`)[0];
+    const info = parseDrawing(xml);
+    expect(info).toMatchObject({
+      relationshipId: "rId5",
+      inline: false,
+      wrap: "square",
+      floatSide: "left",
+    });
+  });
+
+  it("detects wrapTopAndBottom", () => {
+    const xml = parseXml(`
+      <w:drawing ${NS}>
+        <wp:anchor>
+          <wp:extent cx="100" cy="100"/>
+          <wp:wrapTopAndBottom/>
+          <wp:docPr id="1" name="x"/>
+          <a:graphic><a:graphicData>
+            <pic:pic><pic:blipFill><a:blip r:embed="rId9"/></pic:blipFill></pic:pic>
+          </a:graphicData></a:graphic>
+        </wp:anchor>
+      </w:drawing>`)[0];
+    const info = parseDrawing(xml);
+    expect(info?.wrap).toBe("topAndBottom");
+  });
+
+  it("inline drawings remain inline=true with no wrap", () => {
+    const xml = parseXml(`
+      <w:drawing ${NS}>
+        <wp:inline>
+          <wp:extent cx="100" cy="100"/>
+          <wp:docPr id="1" name="x"/>
+          <a:graphic><a:graphicData>
+            <pic:pic><pic:blipFill><a:blip r:embed="rId1"/></pic:blipFill></pic:pic>
+          </a:graphicData></a:graphic>
+        </wp:inline>
+      </w:drawing>`)[0];
+    const info = parseDrawing(xml);
+    expect(info?.inline).toBe(true);
+    expect(info?.wrap).toBeNull();
+    expect(info?.floatSide).toBeNull();
+  });
+});
+
+describe("anchored image rendering", () => {
+  let host: HTMLElement;
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    host = document.createElement("div");
+    document.body.appendChild(host);
+  });
+
+  it("applies float CSS to anchored images with wrap=square", () => {
+    const xml = parseXml(`
+      <w:drawing ${NS}>
+        <wp:anchor>
+          <wp:positionH><wp:align>right</wp:align></wp:positionH>
+          <wp:extent cx="914400" cy="914400"/>
+          <wp:wrapSquare/>
+          <wp:docPr id="1" name="x"/>
+          <a:graphic><a:graphicData>
+            <pic:pic><pic:blipFill><a:blip r:embed="rId5"/></pic:blipFill></pic:pic>
+          </a:graphicData></a:graphic>
+        </wp:anchor>
+      </w:drawing>`)[0];
+
+    const docx: DocxDocument = {
+      parts: new Map(),
+      documentAttrs: {},
+      body: {
+        children: [
+          {
+            kind: "paragraph",
+            properties: null,
+            content: [
+              {
+                kind: "run",
+                properties: null,
+                content: [{ kind: "opaque_run_child", xml }],
+              },
+            ],
+          },
+        ],
+      },
+    };
+    const pm = docxToPm(docx);
+    const view = createReadOnlyView(host, pm, {
+      fontRegistry: buildFontRegistry({
+        embeddedFonts: [],
+        workspaceFonts: [],
+      }),
+      sections: [
+        {
+          properties: { ...DEFAULT_SECTION_PROPERTIES },
+          blockStartIndex: 0,
+          blockEndIndex: 0,
+        } satisfies Section,
+      ],
+    });
+
+    const wrapper = host.querySelector(".docx-image-inline") as HTMLElement;
+    expect(wrapper).not.toBeNull();
+    expect(host.innerHTML).toContain("docx-image-inline");
+    const node = pm.firstChild!.firstChild!;
+    expect(node.attrs.wrap).toBe("square");
+    expect(node.attrs.floatSide).toBe("right");
+    view.destroy();
+  });
+});
+
+const FOOTNOTES_XML = `<?xml version="1.0"?>
+<w:footnotes xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main">
+  <w:footnote w:id="0" w:type="separator"><w:p/></w:footnote>
+  <w:footnote w:id="1"><w:p><w:r><w:t>First note</w:t></w:r></w:p></w:footnote>
+  <w:footnote w:id="2"><w:p><w:r><w:t>Second note</w:t></w:r></w:p></w:footnote>
+</w:footnotes>`;
+
+describe("footnotes parser", () => {
+  it("extracts only normal footnotes by id", () => {
+    const reg = parseFootnoteRegistry(
+      new Map([["word/footnotes.xml", new TextEncoder().encode(FOOTNOTES_XML)]]),
+    );
+    expect(reg.byId.size).toBe(2);
+    expect(reg.byId.get("1")?.blocks).toHaveLength(1);
+    expect(reg.byId.has("0")).toBe(false);
+  });
+
+  it("returns empty when footnotes.xml missing", () => {
+    expect(parseFootnoteRegistry(new Map()).byId.size).toBe(0);
+  });
+});
+
+describe("footnote_ref node + render", () => {
+  it("converts <w:footnoteReference> to a footnote_ref PM node with auto-numbered counter", () => {
+    const docx: DocxDocument = {
+      parts: new Map(),
+      documentAttrs: {},
+      body: {
+        children: [
+          {
+            kind: "paragraph",
+            properties: null,
+            content: [
+              {
+                kind: "run",
+                properties: null,
+                content: [
+                  {
+                    kind: "opaque_run_child",
+                    xml: {
+                      "w:footnoteReference": [],
+                      ":@": { "@_w:id": "1" },
+                    },
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    };
+    const pm = docxToPm(docx);
+    const node = pm.firstChild!.firstChild!;
+    expect(node.type.name).toBe("footnote_ref");
+    expect(node.attrs.footnoteId).toBe("1");
+    expect(node.attrs.number).toBe(1);
+  });
+
+  it("renderFootnotesSection emits an aside with each referenced footnote", () => {
+    const reg = parseFootnoteRegistry(
+      new Map([["word/footnotes.xml", new TextEncoder().encode(FOOTNOTES_XML)]]),
+    );
+    const { doc, paragraph, footnote_ref } = docxSchema.nodes;
+    const pmDoc = doc.create({}, [
+      paragraph.create({}, [
+        docxSchema.text("body"),
+        footnote_ref.create({ footnoteId: "1", number: 1 }),
+      ]),
+    ]);
+    const aside = renderFootnotesSection(reg, pmDoc);
+    expect(aside).not.toBeNull();
+    expect(aside!.querySelector("li[data-footnote-id='1']")?.textContent).toContain(
+      "First note",
+    );
+  });
+
+  it("collectReferencedFootnotes deduplicates by id", () => {
+    const { doc, paragraph, footnote_ref } = docxSchema.nodes;
+    const pmDoc = doc.create({}, [
+      paragraph.create({}, [
+        footnote_ref.create({ footnoteId: "1", number: 1 }),
+        footnote_ref.create({ footnoteId: "1", number: 1 }),
+        footnote_ref.create({ footnoteId: "2", number: 2 }),
+      ]),
+    ]);
+    expect(collectReferencedFootnotes(pmDoc)).toHaveLength(2);
+  });
+});
+
+describe("multi-column section", () => {
+  let host: HTMLElement;
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    host = document.createElement("div");
+    document.body.appendChild(host);
+  });
+
+  it("applies CSS column-count on the editor mount when columns.count > 1", () => {
+    const sections: Section[] = [
+      {
+        properties: {
+          ...DEFAULT_SECTION_PROPERTIES,
+          columns: {
+            count: 2,
+            space: 720,
+            equalWidth: true,
+            separator: false,
+            columns: [],
+          },
+        },
+        blockStartIndex: 0,
+        blockEndIndex: 0,
+      },
+    ];
+    const { doc, paragraph } = docxSchema.nodes;
+    const pmDoc = doc.create({}, [paragraph.create({}, [docxSchema.text("x")])]);
+    const view = createReadOnlyView(host, pmDoc, {
+      fontRegistry: buildFontRegistry({
+        embeddedFonts: [],
+        workspaceFonts: [],
+      }),
+      sections,
+    });
+    const mount = host.querySelector(".docx-editor-mount") as HTMLElement;
+    expect(mount.style.columnCount).toBe("2");
+    view.destroy();
+  });
+});

package/src/pm/phase6.test.ts

@@ -0,0 +1,215 @@
+import { describe, it, expect } from "vitest";
+import { parseXml } from "@lotics/ooxml/xml";
+import { parseBlockXml } from "../parse/parser";
+import { docxToPm } from "./docx_to_pm";
+import { pmToDocx } from "./pm_to_docx";
+import type { Block } from "../model/types";
+import type { DocxDocument } from "../model/types";
+
+const NS = `xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"`;
+
+function paragraphFromXml(...inlineXml: string[]): Block {
+  const wrapped = `<w:p ${NS}>${inlineXml.join("")}</w:p>`;
+  const parsed = parseXml(wrapped);
+  return parseBlockXml(parsed[0]);
+}
+
+describe("bookmark boundary atoms", () => {
+  it("converts <w:bookmarkStart> / <w:bookmarkEnd> to atom inline nodes", () => {
+    const doc: DocxDocument = {
+      parts: new Map(),
+      documentAttrs: {},
+      body: {
+        children: [
+          paragraphFromXml(
+            `<w:bookmarkStart w:id="0" w:name="intro"/>`,
+            `<w:r><w:t>content</w:t></w:r>`,
+            `<w:bookmarkEnd w:id="0"/>`,
+          ),
+        ],
+      },
+    };
+    const pm = docxToPm(doc);
+    const para = pm.firstChild!;
+    expect(para.childCount).toBeGreaterThanOrEqual(3);
+    expect(para.firstChild!.type.name).toBe("bookmark_start");
+    expect(para.firstChild!.attrs.bookmarkId).toBe("0");
+    expect(para.firstChild!.attrs.name).toBe("intro");
+    expect(para.lastChild!.type.name).toBe("bookmark_end");
+  });
+
+  it("roundtrips bookmark atoms back to OOXML", () => {
+    const doc: DocxDocument = {
+      parts: new Map(),
+      documentAttrs: {},
+      body: {
+        children: [
+          paragraphFromXml(
+            `<w:bookmarkStart w:id="2" w:name="ref1"/>`,
+            `<w:r><w:t>x</w:t></w:r>`,
+            `<w:bookmarkEnd w:id="2"/>`,
+          ),
+        ],
+      },
+    };
+    const pm = docxToPm(doc);
+    const round = pmToDocx(pm, { parts: doc.parts, documentAttrs: doc.documentAttrs });
+    const para = round.body.children[0];
+    if (para.kind !== "paragraph") throw new Error();
+    const tags = para.content.map((inline) =>
+      inline.kind === "opaque_inline"
+        ? Object.keys(inline.xml).find((k) => k !== ":@")
+        : inline.kind,
+    );
+    expect(tags).toContain("w:bookmarkStart");
+    expect(tags).toContain("w:bookmarkEnd");
+  });
+});
+
+describe("complex field preprocessing", () => {
+  it("collapses <w:fldChar begin>...<w:instrText>...<w:fldChar separate>...<w:fldChar end> into a single field_inline", () => {
+    const doc: DocxDocument = {
+      parts: new Map(),
+      documentAttrs: {},
+      body: {
+        children: [
+          paragraphFromXml(
+            `<w:r><w:fldChar w:fldCharType="begin"/></w:r>`,
+            `<w:r><w:instrText xml:space="preserve"> PAGEREF _Toc1 \\h </w:instrText></w:r>`,
+            `<w:r><w:fldChar w:fldCharType="separate"/></w:r>`,
+            `<w:r><w:t>Chapter 1</w:t></w:r>`,
+            `<w:r><w:fldChar w:fldCharType="end"/></w:r>`,
+          ),
+        ],
+      },
+    };
+    const pm = docxToPm(doc);
+    const para = pm.firstChild!;
+    expect(para.childCount).toBe(1);
+    expect(para.firstChild!.type.name).toBe("field_inline");
+    expect(para.firstChild!.attrs.instruction).toContain("PAGEREF");
+    expect(para.firstChild!.attrs.cachedResult).toBe("Chapter 1");
+  });
+
+  it("roundtrips field_inline back through fldChar chain", () => {
+    const doc: DocxDocument = {
+      parts: new Map(),
+      documentAttrs: {},
+      body: {
+        children: [
+          paragraphFromXml(
+            `<w:r><w:fldChar w:fldCharType="begin"/></w:r>`,
+            `<w:r><w:instrText xml:space="preserve"> PAGE </w:instrText></w:r>`,
+            `<w:r><w:fldChar w:fldCharType="separate"/></w:r>`,
+            `<w:r><w:t>3</w:t></w:r>`,
+            `<w:r><w:fldChar w:fldCharType="end"/></w:r>`,
+          ),
+        ],
+      },
+    };
+    const pm = docxToPm(doc);
+    const round = pmToDocx(pm, { parts: doc.parts, documentAttrs: doc.documentAttrs });
+    const reparsed = docxToPm(round);
+    expect(reparsed.firstChild!.firstChild!.type.name).toBe("field_inline");
+    expect(reparsed.firstChild!.firstChild!.attrs.instruction).toBe("PAGE");
+    expect(reparsed.firstChild!.firstChild!.attrs.cachedResult).toBe("3");
+  });
+});
+
+describe("tracked changes", () => {
+  it("recognizes <w:ins> wrapping a run; emits insertion mark on its text", () => {
+    const doc: DocxDocument = {
+      parts: new Map(),
+      documentAttrs: {},
+      body: {
+        children: [
+          paragraphFromXml(
+            `<w:ins w:id="1" w:author="Alice" w:date="2024-01-15T10:00:00Z"><w:r><w:t>added</w:t></w:r></w:ins>`,
+          ),
+        ],
+      },
+    };
+    const pm = docxToPm(doc);
+    const para = pm.firstChild!;
+    const text = para.firstChild!;
+    const insertion = text.marks.find((m) => m.type.name === "insertion");
+    expect(insertion).toBeDefined();
+    expect(insertion!.attrs.author).toBe("Alice");
+    expect(insertion!.attrs.date).toBe("2024-01-15T10:00:00Z");
+  });
+
+  it("recognizes <w:del> wrapping a run; emits deletion mark", () => {
+    const doc: DocxDocument = {
+      parts: new Map(),
+      documentAttrs: {},
+      body: {
+        children: [
+          paragraphFromXml(
+            `<w:del w:id="2" w:author="Bob"><w:r><w:t>removed</w:t></w:r></w:del>`,
+          ),
+        ],
+      },
+    };
+    const pm = docxToPm(doc);
+    const text = pm.firstChild!.firstChild!;
+    const deletion = text.marks.find((m) => m.type.name === "deletion");
+    expect(deletion).toBeDefined();
+    expect(deletion!.attrs.author).toBe("Bob");
+  });
+
+  it("roundtrips tracked insertions back to <w:ins> wrapping runs", () => {
+    const doc: DocxDocument = {
+      parts: new Map(),
+      documentAttrs: {},
+      body: {
+        children: [
+          paragraphFromXml(
+            `<w:ins w:id="1" w:author="Alice" w:date="2024-01-15T10:00:00Z"><w:r><w:t>added</w:t></w:r></w:ins>`,
+          ),
+        ],
+      },
+    };
+    const pm = docxToPm(doc);
+    const round = pmToDocx(pm, {
+      parts: doc.parts,
+      documentAttrs: doc.documentAttrs,
+    });
+    const para = round.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") {
+      const tag = Object.keys(inline.xml).find((k) => k !== ":@");
+      expect(tag).toBe("w:ins");
+      const attrs = inline.xml[":@"] as Record<string, string>;
+      expect(attrs["@_w:author"]).toBe("Alice");
+      expect(attrs["@_w:date"]).toBe("2024-01-15T10:00:00Z");
+    }
+  });
+
+  it("roundtrips tracked deletions back to <w:del> wrapping runs", () => {
+    const doc: DocxDocument = {
+      parts: new Map(),
+      documentAttrs: {},
+      body: {
+        children: [
+          paragraphFromXml(
+            `<w:del w:id="2" w:author="Bob"><w:r><w:rPr><w:b/></w:rPr><w:t>gone</w:t></w:r></w:del>`,
+          ),
+        ],
+      },
+    };
+    const pm = docxToPm(doc);
+    const round = pmToDocx(pm, {
+      parts: doc.parts,
+      documentAttrs: doc.documentAttrs,
+    });
+    const para = round.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:del");
+    }
+  });
+});

package/src/pm/placeholder_plugin.ts

@@ -0,0 +1,24 @@
+import { Plugin } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+
+export function placeholderPlugin(text: string): Plugin {
+  return new Plugin({
+    props: {
+      decorations(state) {
+        const { doc, selection } = state;
+        if (doc.childCount !== 1) return null;
+        const first = doc.firstChild;
+        if (!first || first.type.name !== "paragraph" || first.content.size > 0) {
+          return null;
+        }
+        if (!selection.empty || selection.from !== 1) return null;
+        return DecorationSet.create(doc, [
+          Decoration.node(0, first.nodeSize, {
+            class: "docx-placeholder-empty",
+            "data-placeholder": text,
+          }),
+        ]);
+      },
+    },
+  });
+}

package/src/pm/plugins.ts

@@ -0,0 +1,91 @@
+import { history, redo, undo } from "prosemirror-history";
+import { keymap } from "prosemirror-keymap";
+import { baseKeymap, toggleMark } from "prosemirror-commands";
+import { dropCursor } from "prosemirror-dropcursor";
+import { gapCursor } from "prosemirror-gapcursor";
+import {
+  columnResizing,
+  deleteTable,
+  goToNextCell,
+  tableEditing,
+} from "prosemirror-tables";
+import type { Plugin } from "prosemirror-state";
+import { docxSchema } from "./schema";
+import { numberingDecorationPlugin } from "./numbering_plugin";
+import { templateMarkerPlugin } from "./template_plugin";
+import { searchPlugin, searchCommands } from "./search";
+import { listEnter } from "./commands";
+import { bubbleMenuPlugin } from "./bubble_menu";
+import { tableHandlesPlugin } from "./table_handles";
+import { tableDecorationsPlugin } from "./table_decorations";
+import { linkPopoverPlugin } from "./link_popover";
+import { dragHandlePlugin } from "./drag_handle";
+import type { NumberingTable } from "../model/numbering_table";
+
+const markBindings = (): Record<string, ReturnType<typeof toggleMark>> => ({
+  "Mod-b": toggleMark(docxSchema.marks.bold),
+  "Mod-i": toggleMark(docxSchema.marks.italic),
+  "Mod-u": toggleMark(docxSchema.marks.underline),
+});
+
+const historyBindings = {
+  "Mod-z": undo,
+  "Shift-Mod-z": redo,
+  "Mod-y": redo,
+};
+
+const tableBindings = {
+  Tab: goToNextCell(1),
+  "Shift-Tab": goToNextCell(-1),
+  "Mod-Backspace": deleteTable,
+};
+
+const listBindings = {
+  Enter: listEnter(),
+};
+
+export type EditorPluginOptions = {
+  numberingTable?: NumberingTable | null;
+  templateMarkers?: boolean;
+  bubbleMenu?: boolean;
+};
+
+const searchKeymap = {
+  "Mod-g": searchCommands.findNext,
+  "Shift-Mod-g": searchCommands.findPrev,
+  F3: searchCommands.findNext,
+  "Shift-F3": searchCommands.findPrev,
+};
+
+export function buildEditorPlugins(opts: EditorPluginOptions = {}): Plugin[] {
+  const plugins: Plugin[] = [
+    history(),
+    keymap(historyBindings),
+    keymap(markBindings()),
+    keymap(tableBindings),
+    keymap(listBindings),
+    keymap(searchKeymap),
+    keymap(baseKeymap),
+    dropCursor(),
+    gapCursor(),
+    searchPlugin(),
+    numberingDecorationPlugin(opts.numberingTable ?? null),
+  ];
+  if (opts.templateMarkers !== false) plugins.push(templateMarkerPlugin());
+  plugins.push(columnResizing({ handleWidth: 6, cellMinWidth: 32 }));
+  plugins.push(tableEditing());
+  plugins.push(tableDecorationsPlugin());
+  plugins.push(tableHandlesPlugin());
+  plugins.push(linkPopoverPlugin());
+  plugins.push(dragHandlePlugin());
+  if (opts.bubbleMenu !== false) plugins.push(bubbleMenuPlugin());
+  return plugins;
+}
+
+export function buildReadOnlyPlugins(opts: EditorPluginOptions = {}): Plugin[] {
+  const plugins: Plugin[] = [
+    numberingDecorationPlugin(opts.numberingTable ?? null),
+  ];
+  if (opts.templateMarkers !== false) plugins.push(templateMarkerPlugin());
+  return plugins;
+}