@lotics/docx 0.1.0

package/src/pm/table_handles.ts

@@ -0,0 +1,163 @@
+import { Plugin, PluginKey, TextSelection } from "prosemirror-state";
+import {
+  addColumnAfter,
+  addRowAfter,
+  TableMap,
+} from "prosemirror-tables";
+import type { EditorView } from "prosemirror-view";
+import type { Node as PMNode } from "prosemirror-model";
+import { registerGlobalStyle } from "../render/style_registry";
+
+const tableHandlesKey = new PluginKey("docx-table-handles");
+
+const HANDLES_CSS = `
+.docx-table-add-handle {
+  position: absolute;
+  display: none;
+  background: #1a73e8;
+  color: #ffffff;
+  border: none;
+  border-radius: 999px;
+  width: 18px;
+  height: 18px;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  z-index: 30;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+  line-height: 1;
+}
+.docx-table-add-handle[data-visible="true"] { display: inline-flex; }
+.docx-table-add-handle:hover { background: #185abc; }
+`;
+
+function installStyle(): () => void {
+  return registerGlobalStyle("docx-table-handles-style", HANDLES_CSS);
+}
+
+function findTableUnderPoint(
+  view: EditorView,
+  clientX: number,
+  clientY: number,
+): { table: PMNode; pos: number; dom: HTMLElement } | null {
+  const target = document.elementFromPoint(clientX, clientY);
+  if (!(target instanceof HTMLElement)) return null;
+  // closest("table") returns the *innermost* enclosing <table>, which
+  // matches what the user is pointing at when nested tables exist.
+  const tableEl = target.closest("table") as HTMLElement | null;
+  if (!tableEl) return null;
+  if (!view.dom.contains(tableEl)) return null;
+  const posAtDom = view.posAtDOM(tableEl, 0);
+  const $pos = view.state.doc.resolve(posAtDom);
+  // Walk from the *deepest* depth upward and return the first (innermost)
+  // table node — matches the innermost <table> element resolved above.
+  for (let depth = $pos.depth; depth >= 0; depth--) {
+    const node = $pos.node(depth);
+    if (node.type.name === "table") {
+      return { table: node, pos: $pos.before(depth), dom: tableEl };
+    }
+  }
+  return null;
+}
+
+function selectIntoCell(view: EditorView, cellAbsPos: number) {
+  const tr = view.state.tr.setSelection(
+    TextSelection.near(view.state.doc.resolve(cellAbsPos + 2)),
+  );
+  view.dispatch(tr);
+}
+
+export function tableHandlesPlugin(): Plugin {
+  return new Plugin({
+    key: tableHandlesKey,
+    view(view) {
+      const releaseStyle = installStyle();
+
+      const addRowBtn = document.createElement("button");
+      addRowBtn.className = "docx-table-add-handle";
+      addRowBtn.setAttribute("data-docx-add-row", "true");
+      addRowBtn.setAttribute("title", "Add row");
+      addRowBtn.textContent = "+";
+
+      const addColBtn = document.createElement("button");
+      addColBtn.className = "docx-table-add-handle";
+      addColBtn.setAttribute("data-docx-add-col", "true");
+      addColBtn.setAttribute("title", "Add column");
+      addColBtn.textContent = "+";
+
+      document.body.appendChild(addRowBtn);
+      document.body.appendChild(addColBtn);
+
+      let activeTable: { pos: number; dom: HTMLElement } | null = null;
+
+      const hide = () => {
+        addRowBtn.setAttribute("data-visible", "false");
+        addColBtn.setAttribute("data-visible", "false");
+        activeTable = null;
+      };
+
+      const onMove = (e: MouseEvent) => {
+        const found = findTableUnderPoint(view, e.clientX, e.clientY);
+        if (!found) {
+          hide();
+          return;
+        }
+        activeTable = { pos: found.pos, dom: found.dom };
+        const r = found.dom.getBoundingClientRect();
+        addColBtn.style.left = `${r.right + window.scrollX - 9}px`;
+        addColBtn.style.top = `${r.top + window.scrollY + r.height / 2 - 9}px`;
+        addColBtn.setAttribute("data-visible", "true");
+        addRowBtn.style.left = `${r.left + window.scrollX + r.width / 2 - 9}px`;
+        addRowBtn.style.top = `${r.bottom + window.scrollY - 9}px`;
+        addRowBtn.setAttribute("data-visible", "true");
+      };
+
+      const onLeave = (e: MouseEvent) => {
+        const target = e.relatedTarget as HTMLElement | null;
+        if (target === addRowBtn || target === addColBtn) return;
+        if (!target || !view.dom.contains(target)) hide();
+      };
+
+      view.dom.addEventListener("mousemove", onMove);
+      view.dom.addEventListener("mouseleave", onLeave);
+
+      addRowBtn.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+        if (!activeTable) return;
+        const tableNode = view.state.doc.nodeAt(activeTable.pos);
+        if (!tableNode) return;
+        const map = TableMap.get(tableNode);
+        if (map.height === 0) return;
+        const lastCellRel = map.map[map.map.length - 1];
+        selectIntoCell(view, activeTable.pos + 1 + lastCellRel);
+        addRowAfter(view.state, view.dispatch);
+        view.focus();
+      });
+
+      addColBtn.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+        if (!activeTable) return;
+        const tableNode = view.state.doc.nodeAt(activeTable.pos);
+        if (!tableNode) return;
+        const map = TableMap.get(tableNode);
+        if (map.width === 0 || map.height === 0) return;
+        const lastColCellRel = map.map[map.width - 1];
+        selectIntoCell(view, activeTable.pos + 1 + lastColCellRel);
+        addColumnAfter(view.state, view.dispatch);
+        view.focus();
+      });
+
+      return {
+        destroy() {
+          view.dom.removeEventListener("mousemove", onMove);
+          view.dom.removeEventListener("mouseleave", onLeave);
+          addRowBtn.remove();
+          addColBtn.remove();
+          releaseStyle();
+        },
+      };
+    },
+  });
+}

package/src/pm/template_marker.ts

@@ -0,0 +1,47 @@
+// Matches: {{var}}, {{FOR x IN y}}, {{END-FOR y}}, {{IF x}}, {{END-IF x}}, {{$item.field}}
+export const TEMPLATE_MARKER_RE =
+  /\{\{(?:FOR\s+\w+\s+IN\s+|END-FOR\s+|IF\s+|END-IF\s+)?[\w.$ ]+\}\}/g;
+
+export type TemplateMarkerKind =
+  | "variable"
+  | "for"
+  | "end-for"
+  | "if"
+  | "end-if";
+
+export type TemplateMarker = {
+  raw: string;
+  kind: TemplateMarkerKind;
+  varName: string;
+};
+
+export function parseTemplateMarker(raw: string): TemplateMarker {
+  const inner = raw.slice(2, -2).trim();
+  if (inner.startsWith("FOR ")) {
+    const parts = inner.split(/\s+/);
+    return { raw, kind: "for", varName: parts[parts.length - 1] };
+  }
+  if (inner.startsWith("END-FOR ")) {
+    return { raw, kind: "end-for", varName: inner.slice(8).trim() };
+  }
+  if (inner.startsWith("IF ")) {
+    return { raw, kind: "if", varName: inner.slice(3).trim() };
+  }
+  if (inner.startsWith("END-IF ")) {
+    return { raw, kind: "end-if", varName: inner.slice(7).trim() };
+  }
+  return { raw, kind: "variable", varName: inner };
+}
+
+export function findTemplateMarkers(text: string): Array<{
+  index: number;
+  marker: TemplateMarker;
+}> {
+  const out: Array<{ index: number; marker: TemplateMarker }> = [];
+  TEMPLATE_MARKER_RE.lastIndex = 0;
+  let m: RegExpExecArray | null;
+  while ((m = TEMPLATE_MARKER_RE.exec(text)) !== null) {
+    out.push({ index: m.index, marker: parseTemplateMarker(m[0]) });
+  }
+  return out;
+}

package/src/pm/template_plugin.ts

@@ -0,0 +1,65 @@
+import { Plugin, PluginKey } from "prosemirror-state";
+import type { EditorState } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+import {
+  findTemplateMarkers,
+  type TemplateMarkerKind,
+} from "./template_marker";
+
+const templatePluginKey = new PluginKey<DecorationSet>(
+  "docx-template-markers",
+);
+
+const COLOR_BY_KIND: Record<TemplateMarkerKind, { bg: string; border: string }> = {
+  variable: { bg: "rgba(59,130,246,0.15)", border: "#3b82f6" },
+  for: { bg: "rgba(34,197,94,0.15)", border: "#22c55e" },
+  "end-for": { bg: "rgba(34,197,94,0.10)", border: "#22c55e" },
+  if: { bg: "rgba(249,115,22,0.15)", border: "#f97316" },
+  "end-if": { bg: "rgba(249,115,22,0.10)", border: "#f97316" },
+};
+
+function buildDecorations(state: EditorState): DecorationSet {
+  const decorations: Decoration[] = [];
+  state.doc.descendants((node, pos) => {
+    if (!node.isText) return true;
+    const text = node.text ?? "";
+    const matches = findTemplateMarkers(text);
+    for (const m of matches) {
+      const from = pos + m.index;
+      const to = from + m.marker.raw.length;
+      const color = COLOR_BY_KIND[m.marker.kind];
+      decorations.push(
+        Decoration.inline(
+          from,
+          to,
+          {
+            class: "docx-template-marker",
+            style: `background-color: ${color.bg}; border-bottom: 2px solid ${color.border}; border-radius: 2px; padding: 1px 2px;`,
+            "data-template-kind": m.marker.kind,
+            "data-template-name": m.marker.varName,
+          },
+        ),
+      );
+    }
+    return false;
+  });
+  return DecorationSet.create(state.doc, decorations);
+}
+
+export function templateMarkerPlugin(): Plugin<DecorationSet> {
+  return new Plugin<DecorationSet>({
+    key: templatePluginKey,
+    state: {
+      init: (_config, state) => buildDecorations(state),
+      apply: (tr, value, _oldState, newState) => {
+        if (!tr.docChanged) return value.map(tr.mapping, tr.doc);
+        return buildDecorations(newState);
+      },
+    },
+    props: {
+      decorations(state) {
+        return templatePluginKey.getState(state) ?? null;
+      },
+    },
+  });
+}

package/src/pm/templates.test.ts

@@ -0,0 +1,162 @@
+// @vitest-environment happy-dom
+import { describe, it, expect, beforeEach } from "vitest";
+import { TextSelection } from "prosemirror-state";
+import {
+  findTemplateMarkers,
+  parseTemplateMarker,
+  TEMPLATE_MARKER_RE,
+} from "./template_marker";
+import {
+  insertVariable,
+  insertLoopVariable,
+  wrapSelectionInLoop,
+  wrapSelectionInConditional,
+} 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(text: string) {
+  const { doc, paragraph } = docxSchema.nodes;
+  const content = text === "" ? [] : [docxSchema.text(text)];
+  const node = doc.create({}, [paragraph.create({}, content)]);
+  return createEditableView(host, node, {
+    fontRegistry,
+    sections: defaultSections,
+  });
+}
+
+function selectAll(view: ReturnType<typeof buildView>) {
+  const { state } = view.editorView;
+  const tr = state.tr.setSelection(
+    TextSelection.create(state.doc, 1, state.doc.content.size - 1),
+  );
+  view.editorView.dispatch(tr);
+}
+
+describe("template marker parser", () => {
+  it("classifies variable / for / end-for / if / end-if", () => {
+    expect(parseTemplateMarker("{{name}}").kind).toBe("variable");
+    expect(parseTemplateMarker("{{FOR row IN rows}}").kind).toBe("for");
+    expect(parseTemplateMarker("{{FOR row IN rows}}").varName).toBe("rows");
+    expect(parseTemplateMarker("{{END-FOR rows}}").kind).toBe("end-for");
+    expect(parseTemplateMarker("{{IF show}}").kind).toBe("if");
+    expect(parseTemplateMarker("{{END-IF show}}").kind).toBe("end-if");
+  });
+
+  it("findTemplateMarkers locates each marker by index", () => {
+    const text = "Hello {{name}} from {{$row.label}} now";
+    const matches = findTemplateMarkers(text);
+    expect(matches).toHaveLength(2);
+    expect(matches[0].marker.varName).toBe("name");
+    expect(matches[1].marker.varName).toBe("$row.label");
+  });
+
+  it("regex resets between calls (lastIndex side effect)", () => {
+    const text = "{{a}} {{b}}";
+    expect(findTemplateMarkers(text)).toHaveLength(2);
+    expect(findTemplateMarkers(text)).toHaveLength(2);
+  });
+
+  it("uses TEMPLATE_MARKER_RE", () => {
+    expect(TEMPLATE_MARKER_RE).toBeInstanceOf(RegExp);
+  });
+});
+
+describe("template highlight decoration plugin", () => {
+  it("renders inline decorations for {{var}}", () => {
+    const view = buildView("Hi {{name}}");
+    const markers = host.querySelectorAll(".docx-template-marker");
+    expect(markers.length).toBeGreaterThanOrEqual(1);
+    expect(markers[0].textContent).toBe("{{name}}");
+    expect(markers[0].getAttribute("data-template-kind")).toBe("variable");
+    view.destroy();
+  });
+
+  it("color-codes loop and conditional markers", () => {
+    const view = buildView("a {{FOR r IN rows}} b {{IF show}} c");
+    const kinds = Array.from(
+      host.querySelectorAll(".docx-template-marker"),
+    ).map((el) => el.getAttribute("data-template-kind"));
+    expect(kinds).toContain("for");
+    expect(kinds).toContain("if");
+    view.destroy();
+  });
+});
+
+describe("template insertion commands", () => {
+  it("insertVariable inserts {{name}} at the cursor", () => {
+    const view = buildView("");
+    insertVariable("company")(view.editorView.state, view.editorView.dispatch);
+    expect(view.getDocument().textContent).toBe("{{company}}");
+    view.destroy();
+  });
+
+  it("insertLoopVariable produces {{$row.field}}", () => {
+    const view = buildView("");
+    insertLoopVariable("row", "name")(
+      view.editorView.state,
+      view.editorView.dispatch,
+    );
+    expect(view.getDocument().textContent).toBe("{{$row.name}}");
+    view.destroy();
+  });
+
+  it("wrapSelectionInLoop brackets the selection with FOR/END-FOR", () => {
+    const view = buildView("inner");
+    selectAll(view);
+    wrapSelectionInLoop("row", "rows")(
+      view.editorView.state,
+      view.editorView.dispatch,
+    );
+    expect(view.getDocument().textContent).toBe(
+      "{{FOR row IN rows}}inner{{END-FOR rows}}",
+    );
+    view.destroy();
+  });
+
+  it("wrapSelectionInConditional brackets with IF/END-IF", () => {
+    const view = buildView("body");
+    selectAll(view);
+    wrapSelectionInConditional("show")(
+      view.editorView.state,
+      view.editorView.dispatch,
+    );
+    expect(view.getDocument().textContent).toBe(
+      "{{IF show}}body{{END-IF show}}",
+    );
+    view.destroy();
+  });
+
+  it("commands are no-ops with empty input", () => {
+    const view = buildView("text");
+    const ok = insertVariable("")(
+      view.editorView.state,
+      view.editorView.dispatch,
+    );
+    expect(ok).toBe(false);
+    view.destroy();
+  });
+});

package/src/render/clipboard.test.ts

@@ -0,0 +1,115 @@
+// @vitest-environment happy-dom
+import { describe, it, expect, beforeEach } from "vitest";
+import { cleanWordHtml, buildClipboardHooks } from "./clipboard";
+import { createImageRegistry } from "../pm/image_registry";
+import { docxSchema } from "../pm/schema";
+import { createEditableView } from "./view";
+import { buildFontRegistry } from "../fonts/registry";
+import { DEFAULT_SECTION_PROPERTIES } from "../model/sections";
+import type { Section } from "../model/sections";
+
+describe("cleanWordHtml", () => {
+  it("strips conditional [if] mso comments", () => {
+    const html = `<p>before<!--[if !supportLists]>•<![endif]-->after</p>`;
+    const cleaned = cleanWordHtml(html);
+    expect(cleaned).not.toContain("[if");
+    expect(cleaned).not.toContain("supportLists");
+    expect(cleaned).toContain("before");
+    expect(cleaned).toContain("after");
+  });
+
+  it("removes <o:p> empty paragraphs", () => {
+    const html = `<p>real</p><o:p></o:p><o:p>&nbsp;</o:p>`;
+    const cleaned = cleanWordHtml(html);
+    expect(cleaned).not.toContain("o:p");
+    expect(cleaned).toContain("real");
+  });
+
+  it("strips namespaced w:/m:/v: tags from Word HTML", () => {
+    // Word-flavoured HTML: contains an mso-* marker, so the aggressive
+    // namespace-tag strip runs.
+    const html = `<p style="mso-list:none;">text<w:sym /><m:eq>x</m:eq><v:rect /></p>`;
+    const cleaned = cleanWordHtml(html);
+    expect(cleaned).not.toContain("<w:");
+    expect(cleaned).not.toContain("<m:");
+    expect(cleaned).not.toContain("<v:");
+    expect(cleaned).toContain("text");
+  });
+
+  it("preserves namespaced tags when the source is not Word HTML", () => {
+    // Non-Word source: no mso-*/o:p/Mso markers. Aggressive Word strips
+    // are skipped so legitimate paste isn't damaged.
+    const html = `<p>text<custom:tag /></p>`;
+    const cleaned = cleanWordHtml(html);
+    expect(cleaned).toContain("<custom:tag");
+    expect(cleaned).toContain("text");
+  });
+
+  it("removes mso-* style declarations from inline styles", () => {
+    const html = `<p style="margin-top:0;mso-list:none;color:red;mso-pagination:widow-orphan">x</p>`;
+    const cleaned = cleanWordHtml(html);
+    expect(cleaned).not.toContain("mso-");
+    expect(cleaned).toContain("margin-top:0");
+    expect(cleaned).toContain("color:red");
+  });
+
+  it("strips class names containing Mso", () => {
+    const html = `<p class="MsoNormal">a</p><span class="MsoListParagraph">b</span>`;
+    const cleaned = cleanWordHtml(html);
+    expect(cleaned).not.toContain("Mso");
+    expect(cleaned).toContain("a");
+  });
+
+  it("removes empty style attributes left behind", () => {
+    const html = `<p style="mso-pagination:widow-orphan">x</p>`;
+    const cleaned = cleanWordHtml(html);
+    expect(cleaned).not.toContain("style=\"\"");
+  });
+
+  it("preserves structural tags untouched", () => {
+    const html = `<table><tr><td><p>cell</p></td></tr></table>`;
+    expect(cleanWordHtml(html)).toBe(html);
+  });
+
+  it("removes generic HTML comments", () => {
+    const html = `<p>x<!-- a note -->y</p>`;
+    expect(cleanWordHtml(html)).toBe(`<p>xy</p>`);
+  });
+});
+
+describe("clipboard hooks integration", () => {
+  let host: HTMLElement;
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    host = document.createElement("div");
+    document.body.appendChild(host);
+  });
+
+  it("buildClipboardHooks() returns transformPastedHTML always; paste/drop only when registry present", () => {
+    expect(buildClipboardHooks().transformPastedHTML("x")).toBe("x");
+    expect(buildClipboardHooks().handlePaste).toBeUndefined();
+    expect(buildClipboardHooks().handleDrop).toBeUndefined();
+
+    const reg = createImageRegistry();
+    const hooks = buildClipboardHooks({ imageRegistry: reg });
+    expect(hooks.handlePaste).toBeDefined();
+    expect(hooks.handleDrop).toBeDefined();
+  });
+
+  it("EditorView wires transformPastedHTML through to PM", () => {
+    const { doc, paragraph } = docxSchema.nodes;
+    const node = doc.create({}, [paragraph.create({}, [])]);
+    const view = createEditableView(host, node, {
+      fontRegistry: buildFontRegistry({ embeddedFonts: [], workspaceFonts: [] }),
+      sections: [
+        {
+          properties: { ...DEFAULT_SECTION_PROPERTIES },
+          blockStartIndex: 0,
+          blockEndIndex: 0,
+        } satisfies Section,
+      ],
+    });
+    expect(view.editorView.editable).toBe(true);
+    view.destroy();
+  });
+});