@beyondwork/docx-react-component 1.0.29 → 1.0.30

package/src/runtime/table-commands.ts

@@ -0,0 +1,173 @@
+/**
+ * ProseMirror table editing commands backed by prosemirror-tables.
+ *
+ * Each command follows the standard ProseMirror command signature:
+ *   (state, dispatch?) => boolean
+ *
+ * The prosemirror-tables commands replace the previous hand-rolled
+ * implementations and support merged cells, colspan/rowspan, and
+ * the full prosemirror-tables table model including table_header nodes.
+ */
+
+import type { Command as PMCommand, EditorState } from "prosemirror-state";
+import {
+  CellSelection,
+  TableMap,
+  addColumnAfter as pmAddColumnAfter,
+  addColumnBefore as pmAddColumnBefore,
+  addRowAfter as pmAddRowAfter,
+  addRowBefore as pmAddRowBefore,
+  deleteColumn as pmDeleteColumn,
+  deleteRow as pmDeleteRow,
+  deleteTable,
+  goToNextCell,
+  mergeCells,
+  selectedRect,
+  selectionCell,
+  splitCell,
+  toggleHeaderCell,
+  toggleHeaderColumn,
+  toggleHeaderRow,
+  findTable,
+} from "prosemirror-tables";
+
+// prosemirror-tables does not export goToPreviousCell; replicate via direction -1.
+const goToPreviousCell: PMCommand = (state, dispatch, view) =>
+  goToNextCell(-1)(state, dispatch, view);
+
+export type { Command as TableCommand } from "prosemirror-state";
+
+export interface TableSelectionDescriptor {
+  tableBlockIndex: number;
+  selectionKind: "text" | "cell";
+  anchorCell: {
+    rowIndex: number;
+    columnIndex: number;
+  };
+  headCell: {
+    rowIndex: number;
+    columnIndex: number;
+  };
+  rect: {
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+  };
+}
+
+function tableAtSelection(state: EditorState) {
+  const { $head } = state.selection;
+  for (let depth = $head.depth; depth > 0; depth -= 1) {
+    const node = $head.node(depth);
+    if (node.type.spec.tableRole === "table") {
+      return node;
+    }
+  }
+  return null;
+}
+
+function withTableGuard(
+  canRun: (state: EditorState) => boolean,
+  command: PMCommand,
+): PMCommand {
+  return (state, dispatch, view) => {
+    try {
+      if (!canRun(state)) {
+        return false;
+      }
+      return command(state, dispatch, view);
+    } catch {
+      return false;
+    }
+  };
+}
+
+export const addRowBefore: PMCommand = (state, dispatch) =>
+  pmAddRowBefore(state, dispatch);
+
+export const addRowAfter: PMCommand = (state, dispatch) =>
+  pmAddRowAfter(state, dispatch);
+
+export const deleteRow: PMCommand = withTableGuard((state) => {
+  const table = tableAtSelection(state);
+  return table !== null && table.childCount > 1;
+}, pmDeleteRow);
+
+export const addColumnBefore: PMCommand = (state, dispatch) =>
+  pmAddColumnBefore(state, dispatch);
+
+export const addColumnAfter: PMCommand = (state, dispatch) =>
+  pmAddColumnAfter(state, dispatch);
+
+export const deleteColumn: PMCommand = withTableGuard((state) => {
+  const table = tableAtSelection(state);
+  return table !== null && TableMap.get(table).width > 1;
+}, pmDeleteColumn);
+
+export {
+  deleteTable,
+  mergeCells,
+  splitCell,
+  toggleHeaderRow,
+  toggleHeaderColumn,
+  toggleHeaderCell,
+  goToNextCell,
+  goToPreviousCell,
+};
+
+export function getTableSelectionDescriptor(
+  state: EditorState,
+): TableSelectionDescriptor | null {
+  const tableInfo = findTable(state.selection.$from);
+  if (!tableInfo) {
+    return null;
+  }
+
+  const tableBlockIndex = resolveTopLevelTableIndex(state, tableInfo.pos);
+  if (tableBlockIndex < 0) {
+    return null;
+  }
+
+  const rect = selectedRect(state);
+  const isCellSelection = state.selection instanceof CellSelection;
+  const anchorCellPos = (
+    isCellSelection ? (state.selection as CellSelection).$anchorCell : selectionCell(state)
+  ).pos - rect.tableStart;
+  const headCellPos = (
+    isCellSelection ? (state.selection as CellSelection).$headCell : selectionCell(state)
+  ).pos - rect.tableStart;
+  const anchorRect = rect.map.findCell(anchorCellPos);
+  const headRect = rect.map.findCell(headCellPos);
+
+  return {
+    tableBlockIndex,
+    selectionKind: isCellSelection ? "cell" : "text",
+    anchorCell: {
+      rowIndex: anchorRect.top,
+      columnIndex: anchorRect.left,
+    },
+    headCell: {
+      rowIndex: headRect.top,
+      columnIndex: headRect.left,
+    },
+    rect: {
+      top: rect.top,
+      left: rect.left,
+      bottom: rect.bottom,
+      right: rect.right,
+    },
+  };
+}
+
+function resolveTopLevelTableIndex(state: EditorState, tablePos: number): number {
+  let index = -1;
+
+  state.doc.forEach((node, offset, currentIndex) => {
+    if (offset === tablePos && node.type.spec.tableRole === "table") {
+      index = currentIndex;
+    }
+  });
+
+  return index;
+}

package/src/runtime/table-schema.ts

@@ -0,0 +1,309 @@
+/**
+ * ProseMirror table node specifications for first-class table editing.
+ *
+ * These specs define the structure required for tables in the ProseMirror schema,
+ * compatible with prosemirror-tables when used as a dependency, or standalone for
+ * basic cell-content editing.
+ *
+ * All four specs must be included together when merging into a schema because
+ * table_row references both table_cell and table_header_cell in its content model.
+ */
+
+import type { NodeSpec } from "prosemirror-model";
+
+/** Characters that must never appear in CSS values derived from OOXML tokens. */
+const CSS_INJECTION_RE = /[;{}()[\]\\@!]/;
+
+/** Validate a CSS color token — allows #hex (3/6/8 digits) and named colors only. */
+function safeCssColor(raw: string | null | undefined): string | null {
+  if (!raw) return null;
+  if (/^#[0-9A-Fa-f]{3,8}$/.test(raw)) return raw;
+  if (/^[a-zA-Z]+$/.test(raw) && raw !== "expression") return raw;
+  return null;
+}
+
+/** Sanitize a composite CSS border shorthand (e.g. "1px solid #abc"). Rejects injection attempts. */
+function safeCssBorder(raw: string | null | undefined): string | null {
+  if (!raw) return null;
+  if (CSS_INJECTION_RE.test(raw)) return null;
+  if (raw.length > 100) return null;
+  return raw;
+}
+
+type TableCellAttrs = {
+  colspan?: number | null;
+  rowspan?: number | null;
+  colwidth?: number[] | null;
+  gridSpan?: number | null;
+  verticalMerge?: "restart" | "continue" | null;
+  backgroundColor?: string | null;
+  verticalAlign?: "top" | "center" | "bottom" | null;
+  borderTop?: string | null;
+  borderRight?: string | null;
+  borderBottom?: string | null;
+  borderLeft?: string | null;
+};
+
+function resolveRenderedColspan(attrs: {
+  colspan?: number | null;
+  gridSpan?: number | null;
+}): number {
+  if (typeof attrs.colspan === "number" && attrs.colspan > 1) {
+    return attrs.colspan;
+  }
+  if (typeof attrs.gridSpan === "number" && attrs.gridSpan > 1) {
+    return attrs.gridSpan;
+  }
+  return 1;
+}
+
+function resolveRenderedRowspan(attrs: { rowspan?: number | null }): number {
+  return typeof attrs.rowspan === "number" && attrs.rowspan > 1 ? attrs.rowspan : 1;
+}
+
+function parseColwidthAttr(dom: HTMLElement, colspan: number): number[] | null {
+  const widthAttr = dom.getAttribute("data-colwidth");
+  if (!widthAttr || !/^\d+(,\d+)*$/.test(widthAttr)) {
+    return null;
+  }
+
+  const widths = widthAttr.split(",").map((value) => Number.parseInt(value, 10));
+  return widths.length === colspan ? widths : null;
+}
+
+function getCellAttrs(dom: HTMLElement): TableCellAttrs {
+  const colspan = Number(dom.getAttribute("colspan") || 1);
+  const rowspan = Number(dom.getAttribute("rowspan") || 1);
+  const gridSpanAttr = dom.getAttribute("data-grid-span");
+  const verticalMergeAttr = dom.getAttribute("data-vertical-merge");
+  const gridSpan = gridSpanAttr ? Number.parseInt(gridSpanAttr, 10) : colspan;
+  const backgroundColor =
+    dom.getAttribute("data-cell-background") ?? dom.style.backgroundColor ?? null;
+  const verticalAlign = dom.getAttribute("data-vertical-align") as "top" | "center" | "bottom" | null;
+
+  return {
+    colspan,
+    rowspan,
+    colwidth: parseColwidthAttr(dom, colspan),
+    gridSpan: Number.isFinite(gridSpan) && gridSpan > 0 ? gridSpan : colspan,
+    verticalMerge:
+      verticalMergeAttr === "restart" || verticalMergeAttr === "continue"
+        ? verticalMergeAttr
+        : null,
+    backgroundColor,
+    verticalAlign: verticalAlign === "top" || verticalAlign === "center" || verticalAlign === "bottom" ? verticalAlign : null,
+    borderTop: dom.getAttribute("data-border-top"),
+    borderRight: dom.getAttribute("data-border-right"),
+    borderBottom: dom.getAttribute("data-border-bottom"),
+    borderLeft: dom.getAttribute("data-border-left"),
+  };
+}
+
+function setCellDomAttrs(nodeAttrs: TableCellAttrs, className: string): Record<string, string> {
+  const attrs: Record<string, string> = { class: className };
+  const colspan = resolveRenderedColspan(nodeAttrs);
+  const rowspan = resolveRenderedRowspan(nodeAttrs);
+
+  if (colspan > 1) {
+    attrs.colspan = String(colspan);
+  }
+  if (rowspan > 1) {
+    attrs.rowspan = String(rowspan);
+  }
+  if (nodeAttrs.colwidth && nodeAttrs.colwidth.length > 0) {
+    attrs["data-colwidth"] = nodeAttrs.colwidth.join(",");
+  }
+  if (typeof nodeAttrs.gridSpan === "number" && nodeAttrs.gridSpan > 1) {
+    attrs["data-grid-span"] = String(nodeAttrs.gridSpan);
+  }
+  if (nodeAttrs.verticalMerge) {
+    attrs["data-vertical-merge"] = nodeAttrs.verticalMerge;
+  }
+  if (nodeAttrs.backgroundColor) {
+    attrs["data-cell-background"] = nodeAttrs.backgroundColor;
+  }
+  if (nodeAttrs.verticalAlign && nodeAttrs.verticalAlign !== "top") {
+    attrs["data-vertical-align"] = nodeAttrs.verticalAlign;
+  }
+  if (nodeAttrs.borderTop) attrs["data-border-top"] = nodeAttrs.borderTop;
+  if (nodeAttrs.borderRight) attrs["data-border-right"] = nodeAttrs.borderRight;
+  if (nodeAttrs.borderBottom) attrs["data-border-bottom"] = nodeAttrs.borderBottom;
+  if (nodeAttrs.borderLeft) attrs["data-border-left"] = nodeAttrs.borderLeft;
+
+  const styles: string[] = [];
+  const bgColor = safeCssColor(nodeAttrs.backgroundColor);
+  if (bgColor) styles.push(`background-color: ${bgColor}`);
+  if (nodeAttrs.verticalAlign) styles.push(`vertical-align: ${nodeAttrs.verticalAlign === "center" ? "middle" : nodeAttrs.verticalAlign}`);
+  const bTop = safeCssBorder(nodeAttrs.borderTop);
+  if (bTop) styles.push(`border-top: ${bTop}`);
+  const bRight = safeCssBorder(nodeAttrs.borderRight);
+  if (bRight) styles.push(`border-right: ${bRight}`);
+  const bBottom = safeCssBorder(nodeAttrs.borderBottom);
+  if (bBottom) styles.push(`border-bottom: ${bBottom}`);
+  const bLeft = safeCssBorder(nodeAttrs.borderLeft);
+  if (bLeft) styles.push(`border-left: ${bLeft}`);
+  if (styles.length > 0) attrs.style = styles.join("; ");
+
+  return attrs;
+}
+
+function validateColwidth(value: unknown): void {
+  if (value === null) {
+    return;
+  }
+  if (!Array.isArray(value)) {
+    throw new TypeError("colwidth must be null or an array");
+  }
+  for (const item of value) {
+    if (typeof item !== "number") {
+      throw new TypeError("colwidth must be null or an array of numbers");
+    }
+  }
+}
+
+function validateVerticalMerge(value: unknown): void {
+  if (value === null || value === "restart" || value === "continue") {
+    return;
+  }
+  throw new TypeError("verticalMerge must be null, 'restart', or 'continue'");
+}
+
+const tableCellSpecAttrs = {
+  propertiesXml: { default: null },
+  gridSpan: { default: 1, validate: "number" },
+  verticalMerge: { default: null, validate: validateVerticalMerge },
+  colspan: { default: 1, validate: "number" },
+  rowspan: { default: 1, validate: "number" },
+  colwidth: { default: null, validate: validateColwidth },
+  backgroundColor: { default: null },
+  verticalAlign: { default: null },
+  borderTop: { default: null },
+  borderRight: { default: null },
+  borderBottom: { default: null },
+  borderLeft: { default: null },
+} as const;
+
+export const tableNodeSpec: NodeSpec = {
+  content: "table_row+",
+  tableRole: "table",
+  group: "block",
+  isolating: true,
+  attrs: {
+    styleId: { default: null },
+    propertiesXml: { default: null },
+    gridColumns: { default: [] },
+    alignment: { default: null },
+    tblLookFirstRow: { default: false },
+    tblLookLastRow: { default: false },
+    tblLookFirstColumn: { default: false },
+    tblLookLastColumn: { default: false },
+    tblLookNoHBand: { default: false },
+    tblLookNoVBand: { default: false },
+  },
+  parseDOM: [{ tag: "table" }],
+  toDOM(node) {
+    const style = node.attrs.alignment === "center"
+      ? "margin-left: auto; margin-right: auto"
+      : node.attrs.alignment === "right"
+        ? "margin-left: auto"
+        : undefined;
+    return [
+      "table",
+      {
+        class: "border-collapse w-full my-2 text-sm",
+        ...(style ? { style } : {}),
+      },
+      ["tbody", 0],
+    ];
+  },
+};
+
+export const tableRowNodeSpec: NodeSpec = {
+  content: "(table_cell | table_header_cell)+",
+  tableRole: "row",
+  attrs: {
+    propertiesXml: { default: null },
+    gridBefore: { default: 0, validate: "number" },
+    gridAfter: { default: 0, validate: "number" },
+    height: { default: null },
+    heightRule: { default: null },
+    isHeader: { default: false },
+  },
+  parseDOM: [{ tag: "tr" }],
+  toDOM(node) {
+    const style = node.attrs.heightRule === "exact" && node.attrs.height
+      ? `height: ${Math.round((node.attrs.height as number) / 20)}pt`
+      : node.attrs.heightRule === "atLeast" && node.attrs.height
+        ? `min-height: ${Math.round((node.attrs.height as number) / 20)}pt`
+        : undefined;
+    return ["tr", { ...(style ? { style } : {}) }, 0];
+  },
+};
+
+export const tableCellNodeSpec: NodeSpec = {
+  content: "block+",
+  tableRole: "cell",
+  isolating: true,
+  attrs: tableCellSpecAttrs,
+  parseDOM: [
+    {
+      tag: "td",
+      getAttrs(dom) {
+        if (!(dom instanceof HTMLElement)) {
+          return false;
+        }
+        return getCellAttrs(dom);
+      },
+    },
+  ],
+  toDOM(node) {
+    return [
+      "td",
+      setCellDomAttrs(node.attrs as TableCellAttrs, "border border-primary/20 p-2 align-top"),
+      0,
+    ];
+  },
+};
+
+export const tableHeaderCellNodeSpec: NodeSpec = {
+  content: "block+",
+  tableRole: "header_cell",
+  isolating: true,
+  attrs: tableCellSpecAttrs,
+  parseDOM: [
+    {
+      tag: "th",
+      getAttrs(dom) {
+        if (!(dom instanceof HTMLElement)) {
+          return false;
+        }
+        return getCellAttrs(dom);
+      },
+    },
+  ],
+  toDOM(node) {
+    return [
+      "th",
+      setCellDomAttrs(
+        node.attrs as TableCellAttrs,
+        "border border-primary/20 p-2 align-top font-semibold bg-surface-raised",
+      ),
+      0,
+    ];
+  },
+};
+
+/**
+ * Returns a record of all four table node specs to merge into an existing ProseMirror Schema.
+ *
+ * All four must be included together because table_row references both table_cell and
+ * table_header_cell in its content model.
+ */
+export function getTableNodeSpecs(): Record<string, NodeSpec> {
+  return {
+    table: tableNodeSpec,
+    table_row: tableRowNodeSpec,
+    table_cell: tableCellNodeSpec,
+    table_header_cell: tableHeaderCellNodeSpec,
+  };
+}