@beyondwork/docx-react-component 1.0.0

package/src/runtime/table-schema.ts

@@ -0,0 +1,125 @@
+/**
+ * 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";
+
+export const tableNodeSpec: NodeSpec = {
+  content: "table_row+",
+  tableRole: "table",
+  group: "block",
+  isolating: true,
+  attrs: {
+    styleId: { default: null },
+    propertiesXml: { default: null },
+    gridColumns: { default: [] },
+  },
+  parseDOM: [{ tag: "table" }],
+  toDOM() {
+    return ["table", { class: "border-collapse w-full my-2 text-sm" }, ["tbody", 0]];
+  },
+};
+
+export const tableRowNodeSpec: NodeSpec = {
+  content: "(table_cell | table_header_cell)+",
+  tableRole: "row",
+  attrs: {
+    propertiesXml: { default: null },
+  },
+  parseDOM: [{ tag: "tr" }],
+  toDOM() {
+    return ["tr", 0];
+  },
+};
+
+export const tableCellNodeSpec: NodeSpec = {
+  content: "paragraph+",
+  tableRole: "cell",
+  isolating: true,
+  attrs: {
+    propertiesXml: { default: null },
+    gridSpan: { default: 1 },
+    verticalMerge: { default: null },
+    colspan: { default: 1 },
+    rowspan: { default: 1 },
+    colwidth: { default: null },
+  },
+  parseDOM: [
+    {
+      tag: "td",
+      getAttrs(dom: HTMLElement) {
+        const colspan = dom.getAttribute("colspan");
+        const rowspan = dom.getAttribute("rowspan");
+        return {
+          colspan: colspan ? Number.parseInt(colspan, 10) : 1,
+          rowspan: rowspan ? Number.parseInt(rowspan, 10) : 1,
+        };
+      },
+    },
+  ],
+  toDOM(node) {
+    const attrs: Record<string, string> = {
+      class: "border border-primary/20 p-2 align-top",
+    };
+    if (node.attrs.colspan > 1) attrs.colspan = String(node.attrs.colspan);
+    if (node.attrs.rowspan > 1) attrs.rowspan = String(node.attrs.rowspan);
+    return ["td", attrs, 0];
+  },
+};
+
+export const tableHeaderCellNodeSpec: NodeSpec = {
+  content: "paragraph+",
+  tableRole: "header_cell",
+  isolating: true,
+  attrs: {
+    propertiesXml: { default: null },
+    gridSpan: { default: 1 },
+    verticalMerge: { default: null },
+    colspan: { default: 1 },
+    rowspan: { default: 1 },
+    colwidth: { default: null },
+  },
+  parseDOM: [
+    {
+      tag: "th",
+      getAttrs(dom: HTMLElement) {
+        const colspan = dom.getAttribute("colspan");
+        const rowspan = dom.getAttribute("rowspan");
+        return {
+          colspan: colspan ? Number.parseInt(colspan, 10) : 1,
+          rowspan: rowspan ? Number.parseInt(rowspan, 10) : 1,
+        };
+      },
+    },
+  ],
+  toDOM(node) {
+    const attrs: Record<string, string> = {
+      class: "border border-primary/20 p-2 align-top font-semibold bg-surface-raised",
+    };
+    if (node.attrs.colspan > 1) attrs.colspan = String(node.attrs.colspan);
+    if (node.attrs.rowspan > 1) attrs.rowspan = String(node.attrs.rowspan);
+    return ["th", attrs, 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,
+  };
+}

package/src/ui/README.md

@@ -0,0 +1,30 @@
+# UI
+
+This directory contains the public entry point and shared headless logic for the editor UI.
+
+## Entry Point
+
+`WordReviewEditor.tsx` is the public component. It bridges the `DocumentRuntime` to the Tailwind rendering layer in `src/ui-tailwind/`.
+
+## Headless Logic
+
+`headless/` contains pure, framework-free utilities shared across implementations:
+
+- `use-editor-keyboard.ts` — Keyboard event handler factory
+- `comment-decoration-model.ts` — Comment anchor → highlight class computation
+- `revision-decoration-model.ts` — Revision anchor → highlight class computation
+- `selection-helpers.ts` — Selection snapshot utilities
+
+## Session Capabilities
+
+`src/runtime/session-capabilities.ts` derives all UI control states from `RuntimeRenderSnapshot`. The `deriveCapabilities(snapshot, reviewMode)` function is called on every render in `WordReviewEditor.tsx` and the result is passed to the workspace components.
+
+## Shared Utilities
+
+`shared/revision-filters.ts` — Shared revision filtering and empty state helpers.
+
+## Rendering
+
+All visual rendering is in `src/ui-tailwind/`. See `docs/reference/word-review-editor-frontend-architecture.md` for the canonical architecture.
+
+Legacy inline-CSSProperties components have been removed.