@lotics/docx 0.1.0

package/src/pm/marks.ts

@@ -0,0 +1,169 @@
+import type { MarkSpec } from "prosemirror-model";
+
+const toggle = (tag: string): MarkSpec => ({
+  parseDOM: [{ tag }],
+  toDOM: () => [tag, 0],
+});
+
+export const markSpecs: Record<string, MarkSpec> = {
+  bold: toggle("strong"),
+  italic: toggle("em"),
+  underline: {
+    parseDOM: [{ tag: "u" }, { style: "text-decoration=underline" }],
+    toDOM: () => ["u", 0],
+  },
+  strike: {
+    parseDOM: [{ tag: "s" }, { tag: "strike" }, { style: "text-decoration=line-through" }],
+    toDOM: () => ["s", 0],
+  },
+  doubleStrike: {
+    attrs: {},
+    parseDOM: [{ tag: "s.double-strike" }],
+    toDOM: () => ["s", { class: "double-strike" }, 0],
+  },
+  caps: {
+    parseDOM: [{ style: "text-transform=uppercase" }],
+    toDOM: () => ["span", { style: "text-transform: uppercase" }, 0],
+  },
+  smallCaps: {
+    parseDOM: [{ style: "font-variant=small-caps" }],
+    toDOM: () => ["span", { style: "font-variant: small-caps" }, 0],
+  },
+  superscript: {
+    excludes: "superscript subscript",
+    parseDOM: [{ tag: "sup" }],
+    toDOM: () => ["sup", 0],
+  },
+  subscript: {
+    excludes: "superscript subscript",
+    parseDOM: [{ tag: "sub" }],
+    toDOM: () => ["sub", 0],
+  },
+  color: {
+    attrs: { value: { default: "" } },
+    parseDOM: [
+      {
+        style: "color",
+        getAttrs: (value) => {
+          if (typeof value !== "string") return false;
+          return { value };
+        },
+      },
+    ],
+    toDOM: (mark) => ["span", { style: `color: ${mark.attrs.value as string}` }, 0],
+  },
+  highlight: {
+    attrs: { value: { default: "" } },
+    parseDOM: [
+      {
+        style: "background-color",
+        getAttrs: (value) => {
+          if (typeof value !== "string") return false;
+          return { value };
+        },
+      },
+    ],
+    toDOM: (mark) => [
+      "span",
+      { style: `background-color: ${mark.attrs.value as string}` },
+      0,
+    ],
+  },
+  font: {
+    attrs: {
+      ascii: { default: null },
+      hAnsi: { default: null },
+      eastAsia: { default: null },
+      complexScript: { default: null },
+    },
+    parseDOM: [
+      {
+        style: "font-family",
+        getAttrs: (value) => {
+          if (typeof value !== "string") return false;
+          return { ascii: value, hAnsi: value, eastAsia: null, complexScript: null };
+        },
+      },
+    ],
+    toDOM: (mark) => {
+      const family = (mark.attrs.ascii as string | null) ?? (mark.attrs.hAnsi as string | null);
+      if (!family) return ["span", 0];
+      return ["span", { style: `font-family: ${family}` }, 0];
+    },
+  },
+  size: {
+    attrs: { halfPoints: { default: 22 } },
+    parseDOM: [
+      {
+        style: "font-size",
+        getAttrs: (value) => {
+          if (typeof value !== "string") return false;
+          const m = /^(\d+(?:\.\d+)?)pt$/.exec(value.trim());
+          if (!m) return false;
+          return { halfPoints: Math.round(Number.parseFloat(m[1]) * 2) };
+        },
+      },
+    ],
+    toDOM: (mark) => {
+      const halfPoints = mark.attrs.halfPoints as number;
+      return ["span", { style: `font-size: ${halfPoints / 2}pt` }, 0];
+    },
+  },
+  styleRef: {
+    attrs: { styleId: { default: "" } },
+    parseDOM: [{ tag: "span[data-style-ref]", getAttrs: (el) => ({ styleId: (el as HTMLElement).getAttribute("data-style-ref") ?? "" }) }],
+    toDOM: (mark) => ["span", { "data-style-ref": mark.attrs.styleId as string }, 0],
+  },
+  link: {
+    attrs: {
+      relationshipId: { default: null },
+      anchor: { default: null },
+    },
+    inclusive: false,
+    parseDOM: [
+      {
+        tag: "a[href]",
+        getAttrs: (el) => {
+          const href = (el as HTMLElement).getAttribute("href") ?? "";
+          if (href.startsWith("#")) {
+            return { relationshipId: null, anchor: href.slice(1) };
+          }
+          return { relationshipId: null, anchor: null };
+        },
+      },
+    ],
+    toDOM: (mark) => {
+      const anchor = mark.attrs.anchor as string | null;
+      const href = anchor ? `#${anchor}` : "#";
+      return ["a", { href }, 0];
+    },
+  },
+  insertion: {
+    attrs: {
+      author: { default: null },
+      date: { default: null },
+      revisionId: { default: null },
+    },
+    inclusive: false,
+    parseDOM: [{ tag: "ins" }],
+    toDOM: () => [
+      "ins",
+      { class: "docx-tracked-insertion" },
+      0,
+    ],
+  },
+  deletion: {
+    attrs: {
+      author: { default: null },
+      date: { default: null },
+      revisionId: { default: null },
+    },
+    inclusive: false,
+    parseDOM: [{ tag: "del" }],
+    toDOM: () => [
+      "del",
+      { class: "docx-tracked-deletion" },
+      0,
+    ],
+  },
+};

package/src/pm/nodes.ts

@@ -0,0 +1,258 @@
+import type { NodeSpec } from "prosemirror-model";
+import type { ParagraphProperties } from "../model/properties";
+import type { SectionProperties } from "../model/sections";
+
+export type ParagraphAttrs = {
+  properties: ParagraphProperties | null;
+  unknownProperties: unknown[];
+};
+
+export type ImageInlineAttrs = {
+  relationshipId: string | null;
+  widthEmu: number | null;
+  heightEmu: number | null;
+  alt: string;
+};
+
+export type OpaqueAttrs = {
+  xml: unknown;
+};
+
+export type SectionBreakAttrs = {
+  properties: SectionProperties;
+  isFinal: boolean;
+};
+
+export type FieldAttrs = {
+  instruction: string;
+  cachedResult: string;
+};
+
+const DEFAULT_PARAGRAPH_ATTRS: ParagraphAttrs = {
+  properties: null,
+  unknownProperties: [],
+};
+
+export const nodeSpecs: Record<string, NodeSpec> = {
+  doc: { content: "block+" },
+
+  paragraph: {
+    content: "inline*",
+    group: "block",
+    attrs: {
+      properties: { default: DEFAULT_PARAGRAPH_ATTRS.properties },
+      unknownProperties: { default: DEFAULT_PARAGRAPH_ATTRS.unknownProperties },
+      resolvedProperties: { default: null },
+      resolvedBaseRun: { default: null },
+      numberingLabel: { default: null },
+    },
+    parseDOM: [{ tag: "p" }],
+    toDOM: () => ["p", 0],
+  },
+
+  section_break: {
+    group: "block",
+    atom: true,
+    selectable: false,
+    attrs: {
+      properties: { default: null },
+      isFinal: { default: false },
+    },
+    parseDOM: [{ tag: "div[data-section-break]" }],
+    toDOM: () => [
+      "div",
+      { "data-section-break": "true", "aria-hidden": "true" },
+    ],
+  },
+
+  opaque_block: {
+    group: "block",
+    atom: true,
+    attrs: { xml: { default: null } },
+    parseDOM: [{ tag: "div[data-opaque-block]" }],
+    toDOM: () => ["div", { "data-opaque-block": "true" }],
+  },
+
+  text: { group: "inline" },
+
+  hard_break: {
+    group: "inline",
+    inline: true,
+    selectable: false,
+    attrs: {
+      breakType: { default: "line" },
+    },
+    parseDOM: [{ tag: "br" }],
+    toDOM: (node) => {
+      const type = node.attrs.breakType as string;
+      if (type === "page" || type === "column") {
+        return ["span", { class: `docx-${type}-break`, "data-break-type": type }];
+      }
+      return ["br"];
+    },
+  },
+
+  image_inline: {
+    group: "inline",
+    inline: true,
+    atom: true,
+    attrs: {
+      relationshipId: { default: null },
+      widthEmu: { default: null },
+      heightEmu: { default: null },
+      alt: { default: "" },
+      originalXml: { default: null },
+      wrap: { default: null },
+      floatSide: { default: null },
+      behindDoc: { default: false },
+      offsetXEmu: { default: null },
+      offsetYEmu: { default: null },
+    },
+    parseDOM: [
+      {
+        tag: "img[data-rid]",
+        getAttrs: (el) => {
+          const node = el as HTMLElement;
+          return {
+            relationshipId: node.getAttribute("data-rid"),
+            widthEmu: Number.parseInt(node.getAttribute("data-width-emu") ?? "", 10) || null,
+            heightEmu: Number.parseInt(node.getAttribute("data-height-emu") ?? "", 10) || null,
+            alt: node.getAttribute("alt") ?? "",
+            originalXml: null,
+          };
+        },
+      },
+    ],
+    toDOM: (node) => [
+      "img",
+      {
+        "data-rid": node.attrs.relationshipId as string | null,
+        "data-width-emu": String(node.attrs.widthEmu ?? ""),
+        "data-height-emu": String(node.attrs.heightEmu ?? ""),
+        alt: node.attrs.alt as string,
+      },
+    ],
+  },
+
+  opaque_inline: {
+    group: "inline",
+    inline: true,
+    atom: true,
+    selectable: false,
+    attrs: { xml: { default: null } },
+    parseDOM: [{ tag: "span[data-opaque-inline]" }],
+    toDOM: () => ["span", { "data-opaque-inline": "true" }],
+  },
+
+  field_inline: {
+    group: "inline",
+    inline: true,
+    atom: true,
+    attrs: {
+      instruction: { default: "" },
+      cachedResult: { default: "" },
+    },
+    parseDOM: [
+      {
+        tag: "span[data-field]",
+        getAttrs: (el) => ({
+          instruction: (el as HTMLElement).getAttribute("data-field") ?? "",
+          cachedResult: (el as HTMLElement).textContent ?? "",
+        }),
+      },
+    ],
+    toDOM: (node) => [
+      "span",
+      { "data-field": node.attrs.instruction as string },
+      node.attrs.cachedResult as string,
+    ],
+  },
+
+  bookmark_start: {
+    group: "inline",
+    inline: true,
+    atom: true,
+    selectable: false,
+    attrs: {
+      bookmarkId: { default: "" },
+      name: { default: "" },
+    },
+    parseDOM: [
+      {
+        tag: "span[data-bookmark-start]",
+        getAttrs: (el) => ({
+          bookmarkId:
+            (el as HTMLElement).getAttribute("data-bookmark-start") ?? "",
+          name: (el as HTMLElement).getAttribute("data-bookmark-name") ?? "",
+        }),
+      },
+    ],
+    toDOM: (node) => [
+      "span",
+      {
+        "data-bookmark-start": node.attrs.bookmarkId as string,
+        "data-bookmark-name": node.attrs.name as string,
+        "aria-hidden": "true",
+      },
+    ],
+  },
+
+  footnote_ref: {
+    group: "inline",
+    inline: true,
+    atom: true,
+    attrs: {
+      footnoteId: { default: "" },
+      number: { default: 1 },
+    },
+    parseDOM: [
+      {
+        tag: "sup[data-footnote]",
+        getAttrs: (el) => ({
+          footnoteId:
+            (el as HTMLElement).getAttribute("data-footnote") ?? "",
+          number:
+            Number.parseInt(
+              (el as HTMLElement).getAttribute("data-footnote-number") ?? "",
+              10,
+            ) || 1,
+        }),
+      },
+    ],
+    toDOM: (node) => [
+      "sup",
+      {
+        "data-footnote": node.attrs.footnoteId as string,
+        "data-footnote-number": String(node.attrs.number),
+        class: "docx-footnote-ref",
+      },
+      String(node.attrs.number as number),
+    ],
+  },
+
+  bookmark_end: {
+    group: "inline",
+    inline: true,
+    atom: true,
+    selectable: false,
+    attrs: {
+      bookmarkId: { default: "" },
+    },
+    parseDOM: [
+      {
+        tag: "span[data-bookmark-end]",
+        getAttrs: (el) => ({
+          bookmarkId:
+            (el as HTMLElement).getAttribute("data-bookmark-end") ?? "",
+        }),
+      },
+    ],
+    toDOM: (node) => [
+      "span",
+      {
+        "data-bookmark-end": node.attrs.bookmarkId as string,
+        "aria-hidden": "true",
+      },
+    ],
+  },
+};

package/src/pm/numbering.test.ts

@@ -0,0 +1,210 @@
+// @vitest-environment happy-dom
+import { describe, it, expect, beforeEach } from "vitest";
+import { parseXml } from "@lotics/ooxml/xml";
+import { parseNumberingTable } from "../parse/numbering";
+import { docxToPm } from "./docx_to_pm";
+import {
+  computeLabel,
+  createNumberingState,
+} from "../render/numbering_counter";
+import { createReadOnlyView } from "../render/view";
+import { buildFontRegistry } from "../fonts/registry";
+import { DEFAULT_SECTION_PROPERTIES } from "../model/sections";
+import { docxSchema as _schema } from "./schema";
+import type { DocxDocument } from "../model/types";
+import type { Section } from "../model/sections";
+
+void _schema;
+
+const NUMBERING_XML = `<?xml version="1.0"?>
+<w:numbering xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main">
+  <w:abstractNum w:abstractNumId="0">
+    <w:lvl w:ilvl="0">
+      <w:start w:val="1"/>
+      <w:numFmt w:val="decimal"/>
+      <w:lvlText w:val="%1."/>
+    </w:lvl>
+    <w:lvl w:ilvl="1">
+      <w:start w:val="1"/>
+      <w:numFmt w:val="lowerLetter"/>
+      <w:lvlText w:val="%2)"/>
+    </w:lvl>
+  </w:abstractNum>
+  <w:abstractNum w:abstractNumId="1">
+    <w:lvl w:ilvl="0">
+      <w:start w:val="1"/>
+      <w:numFmt w:val="bullet"/>
+      <w:lvlText w:val="•"/>
+    </w:lvl>
+  </w:abstractNum>
+  <w:num w:numId="1"><w:abstractNumId w:val="0"/></w:num>
+  <w:num w:numId="2"><w:abstractNumId w:val="1"/></w:num>
+</w:numbering>`;
+
+function numberingParts() {
+  return new Map([
+    ["word/numbering.xml", new TextEncoder().encode(NUMBERING_XML)],
+  ]);
+}
+
+const NS = `xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main"`;
+
+function pPrWithNumbering(numId: number, ilvl: number) {
+  return parseXml(
+    `<w:pPr ${NS}><w:numPr><w:ilvl w:val="${ilvl}"/><w:numId w:val="${numId}"/></w:numPr></w:pPr>`,
+  )[0];
+}
+
+function paraWithNumbering(numId: number, ilvl: number, text: string) {
+  const pPr = pPrWithNumbering(numId, ilvl);
+  return {
+    kind: "paragraph" as const,
+    properties: pPr["w:pPr"] as ReturnType<typeof parseXml>,
+    content: [
+      {
+        kind: "run" as const,
+        properties: null,
+        content: [{ kind: "text" as const, value: text, preserveSpace: false }],
+      },
+    ],
+  };
+}
+
+describe("parseNumberingTable", () => {
+  it("parses abstractNums and nums", () => {
+    const table = parseNumberingTable(numberingParts());
+    expect(table.abstractNums.size).toBe(2);
+    expect(table.nums.size).toBe(2);
+    expect(table.nums.get(1)?.abstractNumId).toBe(0);
+    expect(table.abstractNums.get(0)?.levels.get(0)?.numFmt).toBe("decimal");
+    expect(table.abstractNums.get(0)?.levels.get(0)?.lvlText).toBe("%1.");
+    expect(table.abstractNums.get(1)?.levels.get(0)?.numFmt).toBe("bullet");
+    expect(table.abstractNums.get(1)?.levels.get(0)?.lvlText).toBe("•");
+  });
+
+  it("returns empty for missing numbering.xml", () => {
+    const table = parseNumberingTable(new Map());
+    expect(table.abstractNums.size).toBe(0);
+  });
+});
+
+describe("computeLabel", () => {
+  it("counts decimal level 0", () => {
+    const table = parseNumberingTable(numberingParts());
+    const state = createNumberingState();
+    expect(computeLabel(state, table, 1, 0)).toBe("1.");
+    expect(computeLabel(state, table, 1, 0)).toBe("2.");
+    expect(computeLabel(state, table, 1, 0)).toBe("3.");
+  });
+
+  it("emits bullet glyph for bullet format", () => {
+    const table = parseNumberingTable(numberingParts());
+    const state = createNumberingState();
+    expect(computeLabel(state, table, 2, 0)).toBe("•");
+    expect(computeLabel(state, table, 2, 0)).toBe("•");
+  });
+
+  it("resets deeper levels when outer increments", () => {
+    const table = parseNumberingTable(numberingParts());
+    const state = createNumberingState();
+    expect(computeLabel(state, table, 1, 0)).toBe("1.");
+    expect(computeLabel(state, table, 1, 1)).toBe("a)");
+    expect(computeLabel(state, table, 1, 1)).toBe("b)");
+    expect(computeLabel(state, table, 1, 0)).toBe("2.");
+    expect(computeLabel(state, table, 1, 1)).toBe("a)");
+  });
+});
+
+describe("docxToPm — numbering integration", () => {
+  it("attaches numberingLabel to numbered paragraphs", () => {
+    const docx: DocxDocument = {
+      parts: numberingParts(),
+      documentAttrs: {},
+      body: {
+        children: [
+          paraWithNumbering(1, 0, "first"),
+          paraWithNumbering(1, 0, "second"),
+        ],
+      },
+    };
+    const table = parseNumberingTable(numberingParts());
+    const pm = docxToPm(docx, { numberingTable: table });
+    expect(pm.child(0).attrs.numberingLabel).toBe("1.");
+    expect(pm.child(1).attrs.numberingLabel).toBe("2.");
+  });
+
+  it("does not add labels when numberingTable is not provided", () => {
+    const docx: DocxDocument = {
+      parts: new Map(),
+      documentAttrs: {},
+      body: { children: [paraWithNumbering(1, 0, "x")] },
+    };
+    const pm = docxToPm(docx);
+    expect(pm.child(0).attrs.numberingLabel).toBeNull();
+  });
+
+  it("renders the marker before paragraph content", () => {
+    let host: HTMLElement;
+    document.body.innerHTML = "";
+    host = document.createElement("div");
+    document.body.appendChild(host);
+
+    const docx: DocxDocument = {
+      parts: numberingParts(),
+      documentAttrs: {},
+      body: {
+        children: [
+          paraWithNumbering(1, 0, "first"),
+          paraWithNumbering(1, 0, "second"),
+        ],
+      },
+    };
+    const table = parseNumberingTable(numberingParts());
+    const pm = docxToPm(docx, { numberingTable: table });
+    const view = createReadOnlyView(host, pm, {
+      fontRegistry: buildFontRegistry({ embeddedFonts: [], workspaceFonts: [] }),
+      sections: [
+        {
+          properties: { ...DEFAULT_SECTION_PROPERTIES },
+          blockStartIndex: 0,
+          blockEndIndex: 0,
+        } satisfies Section,
+      ],
+    });
+    const markers = host.querySelectorAll(".docx-numbering-marker");
+    expect(markers).toHaveLength(2);
+    expect(markers[0].textContent).toBe("1.");
+    expect(markers[1].textContent).toBe("2.");
+    view.destroy();
+  });
+});
+
+describe("docxToPm — backwards compat for second arg", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("accepts the old StyleTable-only second argument shape", () => {
+    const docx: DocxDocument = {
+      parts: new Map(),
+      documentAttrs: {},
+      body: {
+        children: [
+          {
+            kind: "paragraph",
+            properties: null,
+            content: [
+              {
+                kind: "run",
+                properties: null,
+                content: [{ kind: "text", value: "hi", preserveSpace: false }],
+              },
+            ],
+          },
+        ],
+      },
+    };
+    const pm = docxToPm(docx);
+    expect(pm.firstChild!.firstChild!.text).toBe("hi");
+  });
+});

package/src/pm/numbering_plugin.test.ts

@@ -0,0 +1,71 @@
+// @vitest-environment happy-dom
+import { describe, it, expect, beforeEach } from "vitest";
+import { docxSchema } from "./schema";
+import { createReadOnlyView } from "../render/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);
+});
+
+describe("numberingDecorationPlugin", () => {
+  it("renders markers as widget decorations, not as paragraph children", () => {
+    const { doc, paragraph } = docxSchema.nodes;
+    const node = doc.create({}, [
+      paragraph.create(
+        { numberingLabel: "1." },
+        [docxSchema.text("first")],
+      ),
+      paragraph.create(
+        { numberingLabel: "2." },
+        [docxSchema.text("second")],
+      ),
+    ]);
+    const view = createReadOnlyView(host, node, {
+      fontRegistry,
+      sections: defaultSections,
+    });
+
+    const markers = host.querySelectorAll(".docx-numbering-marker");
+    expect(markers).toHaveLength(2);
+    expect(markers[0].textContent).toBe("1.");
+    expect(markers[1].textContent).toBe("2.");
+
+    for (const marker of markers) {
+      expect(marker.parentElement?.classList.contains("docx-paragraph")).toBe(true);
+      expect(marker.getAttribute("aria-hidden")).toBe("true");
+    }
+    view.destroy();
+  });
+
+  it("paragraphs without a label render no marker", () => {
+    const { doc, paragraph } = docxSchema.nodes;
+    const node = doc.create({}, [
+      paragraph.create({}, [docxSchema.text("plain")]),
+    ]);
+    const view = createReadOnlyView(host, node, {
+      fontRegistry,
+      sections: defaultSections,
+    });
+    expect(host.querySelectorAll(".docx-numbering-marker")).toHaveLength(0);
+    view.destroy();
+  });
+});