@beyondwork/docx-react-component 1.0.15 → 1.0.16

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@beyondwork/docx-react-component",
   "publisher": "beyondwork",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "Embeddable React Word (docx) editor with review, comments, tracked changes, and round-trip OOXML fidelity.",
+  "packageManager": "pnpm@10.30.3",
   "type": "module",
   "sideEffects": [
     "**/*.css"
@@ -53,6 +54,29 @@
     "./package.json": "./package.json"
   },
   "types": "./src/index.ts",
+  "scripts": {
+    "build": "tsup",
+    "test": "bash scripts/run-workspace-tests.sh",
+    "test:repo": "node scripts/run-repo-tests.mjs core",
+    "test:repo:all": "node scripts/run-repo-tests.mjs all",
+    "test:repo:optional": "node scripts/run-repo-tests.mjs optional",
+    "test:wcag-audit": "node scripts/run-repo-tests.mjs wcag-audit",
+    "test:harness": "pnpm --filter @docx-react-component/react-word-editor-harness test",
+    "lint": "pnpm run lint:no-authored-js && pnpm run lint:tsgo && pnpm run lint:tsgo:harness",
+    "lint:no-authored-js": "bash scripts/check-no-authored-js.sh",
+    "lint:tsgo": "tsgo --noEmit -p tsconfig.build.json",
+    "lint:tsgo:harness": "pnpm --filter @docx-react-component/react-word-editor-harness lint:tsgo",
+    "context7:api-check": "bash scripts/context7-export-env.sh run bash scripts/context7-api-check.sh",
+    "wave:doctor": "bash scripts/context7-export-env.sh run pnpm exec wave doctor --json",
+    "wave:dry-run": "bash scripts/context7-export-env.sh run pnpm exec wave launch --lane main --dry-run --no-dashboard",
+    "wave:launch": "bash scripts/context7-export-env.sh run pnpm exec wave launch --lane main",
+    "wave:launch:managed": "bash scripts/wave-launch.sh",
+    "wave:status": "bash scripts/wave-status.sh",
+    "wave:watch": "bash scripts/wave-watch.sh --follow",
+    "wave:dashboard:current": "bash scripts/wave-dashboard-attach.sh current",
+    "wave:dashboard:global": "bash scripts/wave-dashboard-attach.sh global",
+    "harness:dev": "pnpm --filter @docx-react-component/react-word-editor-harness dev"
+  },
   "keywords": [
     "docx",
     "word",
@@ -115,27 +139,14 @@
     "tsup": "^8.3.0",
     "tsx": "^4.21.0"
   },
-  "scripts": {
-    "build": "tsup",
-    "test": "bash scripts/run-workspace-tests.sh",
-    "test:repo": "node scripts/run-repo-tests.mjs core",
-    "test:repo:all": "node scripts/run-repo-tests.mjs all",
-    "test:repo:optional": "node scripts/run-repo-tests.mjs optional",
-    "test:wcag-audit": "node scripts/run-repo-tests.mjs wcag-audit",
-    "test:harness": "pnpm --filter @docx-react-component/react-word-editor-harness test",
-    "lint": "pnpm run lint:no-authored-js && pnpm run lint:tsgo && pnpm run lint:tsgo:harness",
-    "lint:no-authored-js": "bash scripts/check-no-authored-js.sh",
-    "lint:tsgo": "tsgo --noEmit -p tsconfig.build.json",
-    "lint:tsgo:harness": "pnpm --filter @docx-react-component/react-word-editor-harness lint:tsgo",
-    "context7:api-check": "bash scripts/context7-export-env.sh run bash scripts/context7-api-check.sh",
-    "wave:doctor": "bash scripts/context7-export-env.sh run pnpm exec wave doctor --json",
-    "wave:dry-run": "bash scripts/context7-export-env.sh run pnpm exec wave launch --lane main --dry-run --no-dashboard",
-    "wave:launch": "bash scripts/context7-export-env.sh run pnpm exec wave launch --lane main",
-    "wave:launch:managed": "bash scripts/wave-launch.sh",
-    "wave:status": "bash scripts/wave-status.sh",
-    "wave:watch": "bash scripts/wave-watch.sh --follow",
-    "wave:dashboard:current": "bash scripts/wave-dashboard-attach.sh current",
-    "wave:dashboard:global": "bash scripts/wave-dashboard-attach.sh global",
-    "harness:dev": "pnpm --filter @docx-react-component/react-word-editor-harness dev"
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild",
+      "sharp"
+    ],
+    "overrides": {
+      "react": "19.2.4",
+      "react-dom": "19.2.4"
+    }
   }
 }

package/src/api/public-types.ts

@@ -125,6 +125,13 @@ export interface TrackedChangesSnapshot {
 
 export type FormattingAlignment = "left" | "center" | "right" | "justify";
 
+export interface FormattingBreadcrumbItem {
+  kind: "table" | "table_row" | "table_cell" | "paragraph" | "sdt_block" | "opaque_block";
+  label: string;
+  from: number;
+  to: number;
+}
+
 export interface FormattingStateSnapshot {
   bold: boolean;
   italic: boolean;
@@ -137,6 +144,7 @@ export interface FormattingStateSnapshot {
   textColor?: string;
   highlightColor?: string | null;
   alignment?: FormattingAlignment;
+  breadcrumb: FormattingBreadcrumbItem[];
 }
 
 export interface SearchOptions {
@@ -587,6 +595,7 @@ export interface WordReviewEditorRef {
   getTrackedChanges(): TrackedChangesSnapshot;
   isDirty(): boolean;
   getFormattingState(): FormattingStateSnapshot;
+  replaceText(text: string, target?: EditorAnchorProjection): void;
   toggleBold(): void;
   toggleItalic(): void;
   toggleUnderline(): void;

package/src/core/commands/formatting-commands.ts

@@ -21,12 +21,14 @@ import type { Command } from "prosemirror-state";
 import type { MarkType, Schema } from "prosemirror-model";
 
 import type {
+  FormattingBreadcrumbItem,
   FormattingAlignment,
   FormattingStateSnapshot,
   PersistedEditorSnapshot,
   RuntimeRenderSnapshot,
   SurfaceBlockSnapshot,
   SurfaceInlineSegment,
+  SurfaceTableCellSnapshot,
 } from "../../api/public-types";
 import type {
   BlockNode,
@@ -209,6 +211,7 @@ const DEFAULT_FORMATTING_STATE: FormattingStateSnapshot = {
   strikethrough: false,
   superscript: false,
   subscript: false,
+  breadcrumb: [],
 };
 
 const INDENT_STEP_TWIPS = 720;
@@ -268,9 +271,231 @@ export function getFormattingStateFromRenderSnapshot(
     alignment: getConsistentValue(paragraphs, (paragraph) =>
       toPublicAlignment(paragraph.alignment),
     ),
+    breadcrumb: getSelectionBreadcrumb(surface.blocks, snapshot.selection),
   };
 }
 
+function getSelectionBreadcrumb(
+  blocks: SurfaceBlockSnapshot[],
+  selection: RuntimeRenderSnapshot["selection"],
+): FormattingBreadcrumbItem[] {
+  const paths = collectSelectionBreadcrumbPaths(blocks, selection);
+  if (paths.length === 0) {
+    return [];
+  }
+
+  let commonLength = paths[0]?.length ?? 0;
+  for (let pathIndex = 1; pathIndex < paths.length; pathIndex += 1) {
+    const currentPath = paths[pathIndex] ?? [];
+    commonLength = Math.min(commonLength, currentPath.length);
+
+    let compareIndex = 0;
+    while (
+      compareIndex < commonLength &&
+      breadcrumbItemsEqual(paths[0]![compareIndex]!, currentPath[compareIndex]!)
+    ) {
+      compareIndex += 1;
+    }
+    commonLength = compareIndex;
+  }
+
+  return paths[0]!.slice(0, commonLength);
+}
+
+function collectSelectionBreadcrumbPaths(
+  blocks: SurfaceBlockSnapshot[],
+  selection: RuntimeRenderSnapshot["selection"],
+  path: FormattingBreadcrumbItem[] = [],
+  output: FormattingBreadcrumbItem[][] = [],
+): FormattingBreadcrumbItem[][] {
+  for (let blockIndex = 0; blockIndex < blocks.length; blockIndex += 1) {
+    const block = blocks[blockIndex];
+    if (!block) {
+      continue;
+    }
+
+    if (
+      !selectionTouchesRange(
+        selection.anchor,
+        selection.head,
+        block.from,
+        block.to,
+      )
+    ) {
+      continue;
+    }
+
+    if (block.kind === "paragraph") {
+      output.push([
+        ...path,
+        {
+          kind: "paragraph" as const,
+          label: block.styleId ? `Paragraph (${block.styleId})` : "Paragraph",
+          from: block.from,
+          to: block.to,
+        },
+      ]);
+      continue;
+    }
+
+    if (block.kind === "opaque_block") {
+      output.push([
+        ...path,
+        {
+          kind: "opaque_block" as const,
+          label: block.label,
+          from: block.from,
+          to: block.to,
+        },
+      ]);
+      continue;
+    }
+
+    if (block.kind === "sdt_block") {
+      collectSelectionBreadcrumbPaths(
+        block.children,
+        selection,
+        [
+          ...path,
+          {
+            kind: "sdt_block" as const,
+            label: block.alias ?? block.tag ?? block.sdtType ?? "Content control",
+            from: block.from,
+            to: block.to,
+          },
+        ],
+        output,
+      );
+      continue;
+    }
+
+    if (block.kind === "table") {
+      const tablePath = [
+        ...path,
+        {
+          kind: "table" as const,
+          label: block.styleId ? `Table (${block.styleId})` : "Table",
+          from: block.from,
+          to: block.to,
+        },
+      ];
+
+      for (let rowIndex = 0; rowIndex < block.rows.length; rowIndex += 1) {
+        const row = block.rows[rowIndex];
+        if (!row) {
+          continue;
+        }
+        const rowRange = getTableRowRange(block, row);
+        if (
+          !selectionTouchesRange(
+            selection.anchor,
+            selection.head,
+            rowRange.from,
+            rowRange.to,
+          )
+        ) {
+          continue;
+        }
+
+        const rowPath = [
+          ...tablePath,
+          {
+            kind: "table_row" as const,
+            label: `Row ${rowIndex + 1}`,
+            from: rowRange.from,
+            to: rowRange.to,
+          },
+        ];
+
+        for (let cellIndex = 0; cellIndex < row.cells.length; cellIndex += 1) {
+          const cell = row.cells[cellIndex];
+          if (!cell) {
+            continue;
+          }
+          const cellRange = getTableCellRange(block, cell);
+          if (
+            !selectionTouchesRange(
+              selection.anchor,
+              selection.head,
+              cellRange.from,
+              cellRange.to,
+            )
+          ) {
+            continue;
+          }
+
+          collectSelectionBreadcrumbPaths(
+            cell.content,
+            selection,
+            [
+              ...rowPath,
+              {
+                kind: "table_cell",
+                label: `Cell ${cellIndex + 1}`,
+                from: cellRange.from,
+                to: cellRange.to,
+              },
+            ],
+            output,
+          );
+        }
+      }
+    }
+  }
+
+  return output;
+}
+
+function getTableRowRange(
+  table: Extract<SurfaceBlockSnapshot, { kind: "table" }>,
+  row: (typeof table.rows)[number],
+): { from: number; to: number } {
+  let from = Number.POSITIVE_INFINITY;
+  let to = Number.NEGATIVE_INFINITY;
+
+  for (const cell of row.cells) {
+    const range = getTableCellRange(table, cell);
+    from = Math.min(from, range.from);
+    to = Math.max(to, range.to);
+  }
+
+  return Number.isFinite(from) && Number.isFinite(to)
+    ? { from, to }
+    : { from: table.from, to: table.to };
+}
+
+function getTableCellRange(
+  table: Extract<SurfaceBlockSnapshot, { kind: "table" }>,
+  cell: SurfaceTableCellSnapshot,
+): { from: number; to: number } {
+  if (cell.content.length === 0) {
+    return { from: table.from, to: table.to };
+  }
+
+  let from = Number.POSITIVE_INFINITY;
+  let to = Number.NEGATIVE_INFINITY;
+  for (const child of cell.content) {
+    from = Math.min(from, child.from);
+    to = Math.max(to, child.to);
+  }
+
+  return Number.isFinite(from) && Number.isFinite(to)
+    ? { from, to }
+    : { from: table.from, to: table.to };
+}
+
+function breadcrumbItemsEqual(
+  left: FormattingBreadcrumbItem,
+  right: FormattingBreadcrumbItem,
+): boolean {
+  return (
+    left.kind === right.kind &&
+    left.label === right.label &&
+    left.from === right.from &&
+    left.to === right.to
+  );
+}
+
 export function applyFormattingOperationToDocument(
   document: CanonicalDocumentEnvelope,
   snapshot: RuntimeRenderSnapshot,

package/src/runtime/document-runtime.ts

@@ -1,5 +1,6 @@
 import {
   createEditorState,
+  createSelectionSnapshot,
   createPersistedEditorSnapshot,
   deriveDocumentStats,
   type CanonicalDocumentEnvelope,
@@ -35,6 +36,7 @@ import {
   type EditorCommand,
   type EditorTransaction,
 } from "../core/commands/index.ts";
+import { insertText } from "../core/commands/text-commands.ts";
 import {
   createDetachedAnchor,
   createNodeAnchor,
@@ -51,6 +53,7 @@ import {
 import { buildCompatibilityReport } from "../validation/compatibility-engine.ts";
 import { mergeCompatibilityReports } from "../validation/compatibility-report.ts";
 import { createEditorSurfaceSnapshot } from "./surface-projection.ts";
+import { getFormattingStateFromRenderSnapshot } from "../core/commands/formatting-commands.ts";
 
 export type Unsubscribe = () => void;
 
@@ -58,11 +61,13 @@ export interface DocumentRuntime {
   subscribe(listener: () => void): Unsubscribe;
   subscribeToEvents(listener: (event: WordReviewEditorEvent) => void): Unsubscribe;
   getRenderSnapshot(): RuntimeRenderSnapshot;
+  getFormattingState(): import("../api/public-types").FormattingStateSnapshot;
   dispatch(command: EditorCommand): void;
   undo(): void;
   redo(): void;
   focus(): void;
   blur(): void;
+  replaceText(text: string, target?: EditorAnchorProjection): void;
   addComment(params: AddCommentParams): string;
   openComment(commentId: string): void;
   resolveComment(commentId: string): void;
@@ -162,6 +167,9 @@ export function createDocumentRuntime(
     getRenderSnapshot() {
       return cachedRenderSnapshot;
     },
+    getFormattingState() {
+      return getFormattingStateFromRenderSnapshot(cachedRenderSnapshot);
+    },
     dispatch(command) {
       if (command.type === "history.undo") {
         applyHistory("undo");
@@ -208,6 +216,25 @@ export function createDocumentRuntime(
         origin: createOrigin("api", clock()),
       });
     },
+    replaceText(text, target) {
+      try {
+        const timestamp = clock();
+        const selection = target
+          ? createSelectionFromPublicAnchor(target)
+          : state.selection;
+        const result = insertText(state.document, selection, text, { timestamp });
+
+        this.dispatch({
+          type: "document.replace",
+          document: result.document,
+          mapping: result.mapping,
+          selection: result.selection,
+          origin: createOrigin("api", timestamp),
+        });
+      } catch (error) {
+        emitError(toRuntimeError(error));
+      }
+    },
     addComment(params) {
       const commentId = createEntityId("comment", state.document.review.comments, clock());
       const anchor = params.anchor
@@ -694,6 +721,22 @@ function toInternalAnchorProjection(
   }
 }
 
+function createSelectionFromPublicAnchor(
+  anchor: EditorAnchorProjection,
+): import("../core/state/editor-state.ts").SelectionSnapshot {
+  switch (anchor.kind) {
+    case "range":
+      return createSelectionSnapshot(anchor.from, anchor.to);
+    case "node":
+      return createSelectionSnapshot(anchor.at, anchor.at);
+    case "detached":
+      return createSelectionSnapshot(
+        anchor.lastKnownRange.from,
+        anchor.lastKnownRange.to,
+      );
+  }
+}
+
 function toPublicCompatibilityReport(
   report: InternalCompatibilityReport,
 ): CompatibilityReport {

package/src/runtime/surface-projection.ts

@@ -680,7 +680,11 @@ function createPlainText(
     }
 
     if (block.kind === "table") {
-      text.push("\uFFFA"); // placeholder for table in plain text
+      for (const row of block.rows) {
+        for (const cell of row.cells) {
+          text.push(createPlainText(cell.content));
+        }
+      }
       continue;
     }
 

package/src/ui/WordReviewEditor.tsx

@@ -165,6 +165,7 @@ export function __createWordReviewEditorRefBridge(
       clonePublicValue(runtime.getRenderSnapshot().trackedChanges),
     isDirty: () => runtime.getRenderSnapshot().isDirty,
     getFormattingState: () => getFormattingStateFromRenderSnapshot(runtime.getRenderSnapshot()),
+    replaceText: (text, target) => runtime.replaceText(text, target),
     toggleBold: () => {
       applyRuntimeFormattingOperation(runtime, { type: "toggle", mark: "bold" });
     },
@@ -729,6 +730,7 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         isDirty: () => activeRuntime.getRenderSnapshot().isDirty,
         getFormattingState: () =>
           getFormattingStateFromRenderSnapshot(activeRuntime.getRenderSnapshot()),
+        replaceText: (text, target) => activeRuntime.replaceText(text, target),
         toggleBold: () => {
           applyRuntimeFormattingOperation(activeRuntime, {
             type: "toggle",