@lotics/docx 0.1.0

package/src/pm/numbering_plugin.ts

@@ -0,0 +1,96 @@
+import { Plugin, PluginKey } from "prosemirror-state";
+import type { EditorState } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+import type { ParagraphProperties } from "../model/properties";
+import type { NumberingTable } from "../model/numbering_table";
+import {
+  computeLabel,
+  createNumberingState,
+} from "../render/numbering_counter";
+
+const numberingPluginKey = new PluginKey<DecorationSet>("docx-numbering-decorations");
+
+function widgetFor(label: string): () => HTMLElement {
+  return () => {
+    const span = document.createElement("span");
+    span.className = "docx-numbering-marker";
+    span.setAttribute("aria-hidden", "true");
+    span.textContent = label;
+    return span;
+  };
+}
+
+function buildDecorations(
+  state: EditorState,
+  numberingTable: NumberingTable | null,
+): DecorationSet {
+  const decorations: Decoration[] = [];
+  const liveState = numberingTable ? createNumberingState() : null;
+
+  state.doc.descendants((node, pos) => {
+    if (node.type.name !== "paragraph") return true;
+
+    let label: string | null = null;
+    let ilvl: number | null = null;
+    if (numberingTable && liveState) {
+      const props = node.attrs.properties as ParagraphProperties | null;
+      const numbering = props?.numbering ?? null;
+      if (numbering) {
+        ilvl = numbering.ilvl;
+        label = computeLabel(
+          liveState,
+          numberingTable,
+          numbering.numId,
+          numbering.ilvl,
+        );
+      }
+    } else {
+      label = node.attrs.numberingLabel as string | null;
+      // No numbering table available; we can't derive ilvl from the label.
+      // The Decoration.node indent below will be skipped.
+    }
+
+    if (label) {
+      decorations.push(
+        Decoration.widget(pos + 1, widgetFor(label), {
+          side: -1,
+          ignoreSelection: true,
+          key: `numbering-${pos}-${label}`,
+        }),
+      );
+      // Outline indent per nesting level. Word renders each indent level
+      // shifted right by ~0.25" so deeper levels are visually nested.
+      // Without this, every level stacks at the same x and the outline
+      // structure is invisible.
+      if (ilvl !== null) {
+        decorations.push(
+          Decoration.node(pos, pos + node.nodeSize, {
+            "data-list-ilvl": String(ilvl),
+          }),
+        );
+      }
+    }
+    return false;
+  });
+  return DecorationSet.create(state.doc, decorations);
+}
+
+export function numberingDecorationPlugin(
+  numberingTable: NumberingTable | null = null,
+): Plugin<DecorationSet> {
+  return new Plugin<DecorationSet>({
+    key: numberingPluginKey,
+    state: {
+      init: (_config, state) => buildDecorations(state, numberingTable),
+      apply: (tr, value, _oldState, newState) => {
+        if (!tr.docChanged) return value.map(tr.mapping, tr.doc);
+        return buildDecorations(newState, numberingTable);
+      },
+    },
+    props: {
+      decorations(state) {
+        return numberingPluginKey.getState(state) ?? null;
+      },
+    },
+  });
+}

package/src/pm/outline.ts

@@ -0,0 +1,41 @@
+import type { Node as PMNode } from "prosemirror-model";
+import type { ParagraphProperties } from "../model/properties";
+
+export type OutlineEntry = {
+  pos: number;
+  level: number;
+  text: string;
+};
+
+const STYLE_LEVELS: Record<string, number> = {
+  Title: 0,
+  Heading1: 1,
+  Heading2: 2,
+  Heading3: 3,
+  Heading4: 4,
+  Heading5: 5,
+  Heading6: 6,
+};
+
+export function buildOutline(doc: PMNode): OutlineEntry[] {
+  const out: OutlineEntry[] = [];
+  doc.descendants((node, pos) => {
+    if (node.type.name !== "paragraph") return true;
+    const resolved = node.attrs.resolvedProperties as ParagraphProperties | null;
+    const direct = node.attrs.properties as ParagraphProperties | null;
+    const levelFromOutline =
+      resolved?.outlineLevel ?? direct?.outlineLevel ?? null;
+    const styleId = resolved?.styleId ?? direct?.styleId ?? null;
+    const levelFromStyle =
+      styleId && Object.prototype.hasOwnProperty.call(STYLE_LEVELS, styleId)
+        ? STYLE_LEVELS[styleId]
+        : null;
+    const level = levelFromStyle ?? levelFromOutline;
+    if (level === null) return false;
+    const text = node.textContent.trim();
+    if (text.length === 0) return false;
+    out.push({ pos, level, text });
+    return false;
+  });
+  return out;
+}

package/src/pm/page_break.test.ts

@@ -0,0 +1,80 @@
+// @vitest-environment happy-dom
+import { describe, it, expect } from "vitest";
+import { type XmlElement } from "@lotics/ooxml/xml";
+import { docxToPm } from "./docx_to_pm";
+import { pmToDocx } from "./pm_to_docx";
+import type { DocxDocument } from "../model/types";
+
+function brOf(type: string | null): XmlElement {
+  return type === null
+    ? { "w:br": [] }
+    : { "w:br": [], ":@": { "@_w:type": type } };
+}
+
+function buildDocxWithBreak(brXml: XmlElement): DocxDocument {
+  return {
+    parts: new Map(),
+    documentAttrs: {},
+    body: {
+      children: [
+        {
+          kind: "paragraph",
+          properties: null,
+          content: [
+            {
+              kind: "run",
+              properties: null,
+              content: [
+                { kind: "text", value: "before", preserveSpace: false },
+                { kind: "opaque_run_child", xml: brXml },
+                { kind: "text", value: "after", preserveSpace: false },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  };
+}
+
+describe("page/column break detection", () => {
+  it("plain <w:br/> becomes hard_break with breakType=line", () => {
+    const pm = docxToPm(buildDocxWithBreak(brOf(null)));
+    const para = pm.firstChild!;
+    expect(para.child(1).type.name).toBe("hard_break");
+    expect(para.child(1).attrs.breakType).toBe("line");
+  });
+
+  it("<w:br w:type=\"page\"/> becomes hard_break with breakType=page", () => {
+    const pm = docxToPm(buildDocxWithBreak(brOf("page")));
+    const br = pm.firstChild!.child(1);
+    expect(br.type.name).toBe("hard_break");
+    expect(br.attrs.breakType).toBe("page");
+  });
+
+  it("<w:br w:type=\"column\"/> becomes hard_break with breakType=column", () => {
+    const pm = docxToPm(buildDocxWithBreak(brOf("column")));
+    expect(pm.firstChild!.child(1).attrs.breakType).toBe("column");
+  });
+
+  it("roundtrip preserves page break type", () => {
+    const original = buildDocxWithBreak(brOf("page"));
+    const pm = docxToPm(original);
+    const reconstructed = pmToDocx(pm, {
+      parts: original.parts,
+      documentAttrs: original.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 br = run.content[1];
+    expect(br.kind).toBe("opaque_run_child");
+    if (br.kind === "opaque_run_child") {
+      expect(br.xml).toEqual({
+        "w:br": [],
+        ":@": { "@_w:type": "page" },
+      });
+    }
+  });
+});

package/src/pm/page_layout.test.ts

@@ -0,0 +1,87 @@
+// @vitest-environment happy-dom
+import { describe, it, expect, beforeEach } from "vitest";
+import {
+  setPageMargins,
+  setPageOrientation,
+  setPageSize,
+} from "./commands";
+import { docxSchema } from "./schema";
+import { createEditableView } 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);
+});
+
+function buildView() {
+  const { doc, paragraph, section_break } = docxSchema.nodes;
+  const node = doc.create({}, [
+    paragraph.create({}, [docxSchema.text("body")]),
+    section_break.create({
+      properties: { ...DEFAULT_SECTION_PROPERTIES },
+      isFinal: true,
+    }),
+  ]);
+  return createEditableView(host, node, {
+    fontRegistry,
+    sections: defaultSections,
+  });
+}
+
+describe("page layout commands", () => {
+  it("setPageSize changes the section_break properties", () => {
+    const view = buildView();
+    const cmd = setPageSize({ width: 11906, height: 16838, orientation: "portrait" });
+    cmd(view.editorView.state, view.editorView.dispatch);
+
+    const section = view.getDocument().lastChild!;
+    expect(section.attrs.properties.pageSize.width).toBe(11906);
+    expect(section.attrs.properties.pageSize.height).toBe(16838);
+    view.destroy();
+  });
+
+  it("setPageMargins updates margins", () => {
+    const view = buildView();
+    const cmd = setPageMargins({
+      top: 720,
+      right: 720,
+      bottom: 720,
+      left: 720,
+      header: 360,
+      footer: 360,
+      gutter: 0,
+    });
+    cmd(view.editorView.state, view.editorView.dispatch);
+    const section = view.getDocument().lastChild!;
+    expect(section.attrs.properties.margins.top).toBe(720);
+    view.destroy();
+  });
+
+  it("setPageOrientation('landscape') swaps width and height", () => {
+    const view = buildView();
+    setPageOrientation("landscape")(view.editorView.state, view.editorView.dispatch);
+    const section = view.getDocument().lastChild!;
+    expect(section.attrs.properties.pageSize.orientation).toBe("landscape");
+    expect(section.attrs.properties.pageSize.width).toBe(15840);
+    expect(section.attrs.properties.pageSize.height).toBe(12240);
+    view.destroy();
+  });
+});

package/src/pm/pagination_plugin.test.ts

@@ -0,0 +1,155 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it } from "vitest";
+import { EditorState } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+import { docxSchema } from "./schema";
+import { DEFAULT_SECTION_PROPERTIES } from "../model/sections";
+import type { Section } from "../model/sections";
+import type { LayoutResult, SectionGeometry } from "../layout/types";
+import {
+  getPaginationState,
+  paginationPlugin,
+  setPaginationLayout,
+} from "./pagination_plugin";
+
+const sections: Section[] = [
+  {
+    properties: { ...DEFAULT_SECTION_PROPERTIES },
+    blockStartIndex: 0,
+    blockEndIndex: 0,
+  },
+];
+
+const geometries: SectionGeometry[] = [
+  {
+    sectionIndex: 0,
+    blockStartIndex: 0,
+    blockEndIndex: 0,
+    pageHeight: 1056,
+    pageWidth: 816,
+    pageContentHeight: 900,
+    headerBand: 78,
+    footerBand: 78,
+    titlePage: false,
+    hasEvenHeader: false,
+  },
+];
+
+function buildDoc(paragraphCount: number) {
+  const { doc, paragraph } = docxSchema.nodes;
+  return doc.create(
+    {},
+    Array.from({ length: paragraphCount }, (_, i) =>
+      paragraph.create({}, [docxSchema.text(`paragraph ${i + 1}`)]),
+    ),
+  );
+}
+
+function buildLayout(pages: number, blocksPerPage: number): LayoutResult {
+  return {
+    totalPages: pages,
+    pages: Array.from({ length: pages }, (_, i) => ({
+      pageNumber: i + 1,
+      sectionIndex: 0,
+      firstBlockIndex: i * blocksPerPage,
+      lastBlockIndex: i * blocksPerPage + blocksPerPage - 1,
+      headerKind: "default" as const,
+      isFirstInSection: i === 0,
+      startsWithContinuation: null,
+      endsWithContinuation: null,
+      gapHeightBefore: i === 0 ? 0 : 200,
+    })),
+  };
+}
+
+let host: HTMLDivElement;
+let view: EditorView;
+
+function mountView(paragraphCount: number) {
+  host = document.createElement("div");
+  document.body.appendChild(host);
+  const state = EditorState.create({
+    schema: docxSchema,
+    doc: buildDoc(paragraphCount),
+    plugins: [
+      paginationPlugin({
+        sections,
+        sectionGeometries: geometries,
+        pageGapPx: 24,
+      }),
+    ],
+  });
+  view = new EditorView(host, { state });
+}
+
+beforeEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("paginationPlugin", () => {
+  it("initializes with empty layout", () => {
+    mountView(5);
+    const ps = getPaginationState(view.state);
+    expect(ps?.layout).toBeNull();
+    expect(ps?.decorations).toBeTruthy();
+  });
+
+  it("accepts a layout via setPaginationLayout and emits gap decorations", () => {
+    mountView(6);
+    const layout = buildLayout(3, 2);
+    view.dispatch(setPaginationLayout(view, layout));
+
+    const ps = getPaginationState(view.state);
+    expect(ps?.layout).toEqual(layout);
+
+    // Two gap widgets (between pages 1-2 and 2-3).
+    const gaps = host.querySelectorAll(".docx-page-gap");
+    expect(gaps).toHaveLength(2);
+    gaps.forEach((g) => {
+      // Each gap takes the per-page gapHeightBefore (200 in buildLayout).
+      expect((g as HTMLElement).style.height).toBe("200px");
+    });
+  });
+
+  it("emits no decorations for a single-page layout", () => {
+    mountView(2);
+    const layout = buildLayout(1, 2);
+    view.dispatch(setPaginationLayout(view, layout));
+    expect(host.querySelectorAll(".docx-page-gap")).toHaveLength(0);
+  });
+
+  it("positions gap widgets immediately before page-starting paragraphs", () => {
+    mountView(6);
+    const layout = buildLayout(3, 2);
+    view.dispatch(setPaginationLayout(view, layout));
+    // Gaps should appear before "paragraph 3" (start of page 2) and
+    // "paragraph 5" (start of page 3) in DOM order.
+    const children = Array.from(host.querySelector(".ProseMirror")?.children ?? []);
+    const texts = children.map((el) => {
+      if (el.classList.contains("docx-page-gap")) return "[GAP]";
+      return el.textContent;
+    });
+    expect(texts).toEqual([
+      "paragraph 1",
+      "paragraph 2",
+      "[GAP]",
+      "paragraph 3",
+      "paragraph 4",
+      "[GAP]",
+      "paragraph 5",
+      "paragraph 6",
+    ]);
+  });
+
+  it("retains the same plugin state when re-applying an equal layout", () => {
+    mountView(4);
+    const layout = buildLayout(2, 2);
+    view.dispatch(setPaginationLayout(view, layout));
+    const stateBefore = getPaginationState(view.state);
+    // Re-dispatch identical layout via setPaginationLayout — this will
+    // create a fresh DecorationSet but the layout shape is the same.
+    view.dispatch(setPaginationLayout(view, layout));
+    const stateAfter = getPaginationState(view.state);
+    expect(stateAfter?.layout).toEqual(stateBefore?.layout);
+  });
+});