@beyondwork/docx-react-component 1.0.28 → 1.0.29

package/src/runtime/table-commands.ts

@@ -1,173 +0,0 @@
-/**
- * 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

@@ -1,309 +0,0 @@
-/**
- * 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,
-  };
-}