@beyondwork/docx-react-component 1.0.14 → 1.0.16

package/src/ui/WordReviewEditor.tsx

@@ -144,17 +144,28 @@ export function __createWordReviewEditorRefBridge(
     reopenComment: (commentId) => runtime.reopenComment(commentId),
     addCommentReply: (commentId, body) => runtime.addCommentReply(commentId, body),
     editCommentBody: (commentId, body) => runtime.editCommentBody(commentId, body),
+    deleteComment: (commentId) => {
+      applyRuntimeDeleteComment(runtime, commentId);
+    },
     acceptChange: (changeId) => runtime.acceptChange(changeId),
     rejectChange: (changeId) => runtime.rejectChange(changeId),
     acceptAllChanges: () => runtime.acceptAllChanges(),
     rejectAllChanges: () => runtime.rejectAllChanges(),
     exportDocx: (options) => runtime.exportDocx(options),
     getSnapshot: () => runtime.getPersistedSnapshot(),
+    getRenderSnapshot: () => clonePublicValue(runtime.getRenderSnapshot()),
     getCompatibilityReport: () => runtime.getCompatibilityReport(),
     getWarnings: () => runtime.getWarnings(),
-    getComments: () => runtime.getRenderSnapshot().comments,
-    getTrackedChanges: () => runtime.getRenderSnapshot().trackedChanges,
+    getCommentSidebarSnapshot: () =>
+      clonePublicValue(runtime.getRenderSnapshot().comments),
+    getTrackedChangesSnapshot: () =>
+      clonePublicValue(runtime.getRenderSnapshot().trackedChanges),
+    getComments: () => clonePublicValue(runtime.getRenderSnapshot().comments),
+    getTrackedChanges: () =>
+      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" });
     },
@@ -275,6 +286,14 @@ export function __createWordReviewEditorRefBridge(
     clearSearch: () => {
       mountedSurface?.clearSearch();
     },
+    setSelection: (selection) => {
+      runtime.dispatch({
+        type: "selection.set",
+        selection: toRuntimeSelectionSnapshot(
+          normalizeRequestedSelection(runtime.getRenderSnapshot(), selection),
+        ),
+      });
+    },
     scrollToRevision: (revisionId: string) => {
       const revision = runtime.getRenderSnapshot().trackedChanges.revisions.find(
         (r) => r.revisionId === revisionId,
@@ -671,6 +690,9 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
           activeRuntime.addCommentReply(commentId, body, currentUser.userId),
         editCommentBody: (commentId, body) =>
           activeRuntime.editCommentBody(commentId, body),
+        deleteComment: (commentId) => {
+          applyRuntimeDeleteComment(activeRuntime, commentId);
+        },
         acceptChange: (changeId) => activeRuntime.acceptChange(changeId),
         rejectChange: (changeId) => activeRuntime.rejectChange(changeId),
         acceptAllChanges: () => activeRuntime.acceptAllChanges(),
@@ -694,12 +716,21 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
                 onEvent: onEventRef.current,
               }),
         getSnapshot: () => activeRuntime.getPersistedSnapshot(),
+        getRenderSnapshot: () => clonePublicValue(activeRuntime.getRenderSnapshot()),
         getCompatibilityReport: () => activeRuntime.getCompatibilityReport(),
         getWarnings: () => activeRuntime.getWarnings(),
-        getComments: () => activeRuntime.getRenderSnapshot().comments,
-        getTrackedChanges: () => activeRuntime.getRenderSnapshot().trackedChanges,
+        getCommentSidebarSnapshot: () =>
+          clonePublicValue(activeRuntime.getRenderSnapshot().comments),
+        getTrackedChangesSnapshot: () =>
+          clonePublicValue(activeRuntime.getRenderSnapshot().trackedChanges),
+        getComments: () =>
+          clonePublicValue(activeRuntime.getRenderSnapshot().comments),
+        getTrackedChanges: () =>
+          clonePublicValue(activeRuntime.getRenderSnapshot().trackedChanges),
+        isDirty: () => activeRuntime.getRenderSnapshot().isDirty,
         getFormattingState: () =>
           getFormattingStateFromRenderSnapshot(activeRuntime.getRenderSnapshot()),
+        replaceText: (text, target) => activeRuntime.replaceText(text, target),
         toggleBold: () => {
           applyRuntimeFormattingOperation(activeRuntime, {
             type: "toggle",
@@ -838,6 +869,14 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         clearSearch: () => {
           surfaceRef.current?.clearSearch();
         },
+        setSelection: (selection) => {
+          activeRuntime.dispatch({
+            type: "selection.set",
+            selection: toRuntimeSelectionSnapshot(
+              normalizeRequestedSelection(activeRuntime.getRenderSnapshot(), selection),
+            ),
+          });
+        },
         scrollToRevision: (revisionId: string) => {
           const revision = activeRuntime.getRenderSnapshot().trackedChanges.revisions.find(
             (r) => r.revisionId === revisionId,
@@ -1354,6 +1393,70 @@ function dispatchRuntimeDocumentMutation(
   });
 }
 
+function applyRuntimeDeleteComment(
+  runtime: WordReviewEditorRuntime,
+  commentId: string,
+): void {
+  const snapshot = runtime.getRenderSnapshot();
+  if (!snapshot.isReady || snapshot.readOnly || snapshot.fatalError) {
+    return;
+  }
+
+  const persistedSnapshot = runtime.getPersistedSnapshot();
+  if (!persistedSnapshot.canonicalDocument.review.comments[commentId]) {
+    return;
+  }
+
+  const nextComments = {
+    ...persistedSnapshot.canonicalDocument.review.comments,
+  };
+  delete nextComments[commentId];
+
+  runtime.dispatch({
+    type: "document.replace",
+    document: {
+      ...persistedSnapshot.canonicalDocument,
+      review: {
+        ...persistedSnapshot.canonicalDocument.review,
+        comments: nextComments,
+      },
+    },
+    selection: toRuntimeSelectionSnapshot(snapshot.selection),
+    origin: {
+      source: "api",
+      timestamp: new Date().toISOString(),
+    },
+  });
+}
+
+function normalizeRequestedSelection(
+  snapshot: RuntimeRenderSnapshot,
+  selection: PublicSelectionSnapshot | null,
+): PublicSelectionSnapshot {
+  return selection ?? createCollapsedPublicSelection(snapshot.selection.head);
+}
+
+function createCollapsedPublicSelection(position: number): PublicSelectionSnapshot {
+  return {
+    anchor: position,
+    head: position,
+    isCollapsed: true,
+    activeRange: {
+      kind: "range",
+      from: position,
+      to: position,
+      assoc: {
+        start: -1,
+        end: 1,
+      },
+    },
+  };
+}
+
+function clonePublicValue<T>(value: T): T {
+  return structuredClone(value);
+}
+
 function searchSnapshotSurface(
   snapshot: RuntimeRenderSnapshot,
   query: string,

package/src/ui-tailwind/editor-surface/pm-schema.ts

@@ -10,6 +10,55 @@ const HEX_COLOR_RE = /^[0-9A-Fa-f]{3,8}$/;
 const SAFE_FONT_RE = /^[A-Za-z0-9 ,\-'"]+$/;
 const SAFE_ALIGNMENT = new Set(["left", "center", "right", "justify", "start", "end"]);
 
+function resolveHeadingLevel(
+  styleId: string | null,
+  outlineLevel: number | null,
+): number | null {
+  if (styleId) {
+    const normalized = styleId.toLowerCase();
+    const headingMatch = /^heading([1-6])$/.exec(normalized);
+    if (headingMatch) {
+      return Number.parseInt(headingMatch[1], 10);
+    }
+    if (normalized === "title") {
+      return 1;
+    }
+    if (normalized === "subtitle") {
+      return 2;
+    }
+  }
+
+  if (
+    typeof outlineLevel === "number" &&
+    Number.isInteger(outlineLevel) &&
+    outlineLevel >= 0 &&
+    outlineLevel <= 5
+  ) {
+    return outlineLevel + 1;
+  }
+
+  return null;
+}
+
+function headingClassList(level: number): string[] {
+  switch (level) {
+    case 1:
+      return ["text-3xl", "font-semibold", "tracking-tight", "leading-tight"];
+    case 2:
+      return ["text-2xl", "font-semibold", "tracking-tight"];
+    case 3:
+      return ["text-xl", "font-medium"];
+    case 4:
+      return ["text-lg", "font-medium"];
+    case 5:
+      return ["text-base", "font-semibold", "uppercase", "tracking-[0.12em]"];
+    case 6:
+      return ["text-sm", "font-semibold", "uppercase", "tracking-[0.16em]"];
+    default:
+      return [];
+  }
+}
+
 /** Validate a raw hex color string from OOXML (no leading #). Returns sanitized `#hex` or null. */
 function safeHexColor(raw: string | null | undefined): string | null {
   if (!raw || raw === "auto") return null;
@@ -45,6 +94,7 @@ export const editorSchema = new Schema({
         styleId: { default: null },
         numberingInstanceId: { default: null },
         numberingLevel: { default: null },
+        numberingPrefix: { default: null },
         alignment: { default: null },
         spacingBefore: { default: null },
         spacingAfter: { default: null },
@@ -58,6 +108,7 @@ export const editorSchema = new Schema({
         borderBottom: { default: null },
         borderLeft: { default: null },
         borderRight: { default: null },
+        outlineLevel: { default: null },
         bidi: { default: null },
         pageBreakBefore: { default: null },
       },
@@ -65,11 +116,10 @@ export const editorSchema = new Schema({
       toDOM(node) {
         const classes: string[] = ["leading-relaxed"];
         const styleId = node.attrs.styleId as string | null;
-        if (styleId) {
-          const lower = styleId.toLowerCase();
-          if (lower === "heading1") classes.push("text-2xl font-medium");
-          else if (lower === "heading2") classes.push("text-xl font-medium");
-          else if (lower === "heading3") classes.push("text-lg font-medium");
+        const outlineLevel = node.attrs.outlineLevel as number | null;
+        const headingLevel = resolveHeadingLevel(styleId, outlineLevel);
+        if (headingLevel) {
+          classes.push(...headingClassList(headingLevel));
         }
         const attrs: Record<string, string> = { class: classes.join(" ") };
         const styles: string[] = [];
@@ -106,8 +156,50 @@ export const editorSchema = new Schema({
         if (pageBreak) styles.push("border-top: 2px dashed rgba(0,0,0,0.1); padding-top: 8px; margin-top: 16px");
         const bidi = node.attrs.bidi as boolean | null;
         if (bidi) attrs.dir = "rtl";
+        if (headingLevel) {
+          attrs["data-heading-level"] = String(headingLevel);
+        }
         if (styles.length > 0) attrs.style = styles.join("; ");
-        return ["p", attrs, 0];
+        const numberingPrefix = node.attrs.numberingPrefix as string | null;
+        const numberingLevel = node.attrs.numberingLevel as number | null;
+        const children: Array<string | number | readonly unknown[]> = [];
+        if (pageBreak) {
+          children.push([
+            "span",
+            {
+              class:
+                "mb-2 inline-flex items-center gap-2 text-[10px] font-medium uppercase tracking-[0.18em] text-tertiary",
+              contenteditable: "false",
+              "data-page-break-before": "true",
+            },
+            "Page break",
+          ]);
+        }
+        if (numberingPrefix) {
+          const minWidth = Math.min(Math.max(numberingPrefix.length + 1, 4), 14);
+          children.push([
+            "span",
+            {
+              class:
+                "inline-flex select-none items-center justify-end text-tertiary font-[family-name:var(--font-legal-sans)]",
+              contenteditable: "false",
+              "data-numbering-prefix": numberingPrefix,
+              ...(typeof numberingLevel === "number"
+                ? { "data-numbering-level": String(numberingLevel) }
+                : {}),
+              style: `min-width: ${minWidth}ch; margin-right: 0.75rem; font-variant-numeric: tabular-nums;`,
+            },
+            numberingPrefix,
+          ]);
+        }
+        children.push([
+          "span",
+          {
+            class: "pm-paragraph-content",
+          },
+          0,
+        ]);
+        return ["p", attrs, ...children];
       },
     },
 
@@ -132,13 +224,42 @@ export const editorSchema = new Schema({
       selectable: false,
       attrs: {
         tabWidth: { default: null },
+        leader: { default: null },
+        align: { default: null },
       },
       toDOM(node) {
         const width = node.attrs.tabWidth as number | null;
-        if (width && width > 0) {
-          return ["span", { style: `display: inline-block; width: ${width}px`, "data-node-type": "tab" }, "\u00A0"];
+        const leader = node.attrs.leader as string | null;
+        const align = node.attrs.align as string | null;
+        const styles = [
+          `display: inline-block`,
+          `width: ${width && width > 0 ? width : 32}px`,
+          `min-width: 8px`,
+        ];
+        if (leader === "dot" || leader === "middleDot") {
+          styles.push(
+            `background-image: radial-gradient(circle, currentColor 1px, transparent 1.25px)`,
+            `background-size: 6px 3px`,
+            `background-repeat: repeat-x`,
+            `background-position: left calc(100% - 2px)`,
+            `opacity: 0.55`,
+          );
+        } else if (leader === "hyphen") {
+          styles.push(`border-bottom: 1px dashed rgba(107,107,107,0.65)`);
+        } else if (leader === "underscore") {
+          styles.push(`border-bottom: 1px solid rgba(107,107,107,0.65)`);
+        } else if (leader === "heavy") {
+          styles.push(`border-bottom: 2px solid rgba(107,107,107,0.75)`);
         }
-        return ["span", { class: "inline-block w-8", "data-node-type": "tab" }, "\u00A0"];
+        return [
+          "span",
+          {
+            style: styles.join("; "),
+            "data-node-type": "tab",
+            title: align ? `Tab stop · ${align}` : "Tab stop",
+          },
+          "\u00A0",
+        ];
       },
     },
 
@@ -366,19 +487,33 @@ export const editorSchema = new Schema({
         detail: { default: "" },
       },
       toDOM(node) {
+        const fragmentId = node.attrs.fragmentId as string;
+        const isPreview = fragmentId.startsWith("preview:");
         return [
           "div",
           {
-            class: "border-l-2 border-dashed border-warning/30 pl-4 py-2 rounded-r bg-warning-soft/20 my-2",
+            class: isPreview
+              ? "my-3 rounded-xl border border-primary/15 bg-surface-raised/50 px-4 py-3"
+              : "border-l-2 border-dashed border-warning/30 pl-4 py-2 rounded-r bg-warning-soft/20 my-2",
             contenteditable: "false",
             "data-node-type": "opaque_block",
           },
           [
             "div",
-            { class: "flex items-center gap-1.5 text-xs text-tertiary mb-1" },
-            "\uD83D\uDD12 " + (node.attrs.label as string),
+            {
+              class: isPreview
+                ? "mb-2 text-[11px] uppercase tracking-[0.18em] text-tertiary"
+                : "flex items-center gap-1.5 text-xs text-tertiary mb-1",
+            },
+            `${isPreview ? "" : "\uD83D\uDD12 "}${node.attrs.label as string}`,
+          ],
+          [
+            "p",
+            {
+              class: isPreview ? "text-sm text-secondary whitespace-pre-wrap leading-relaxed" : "text-sm text-secondary whitespace-pre-wrap",
+            },
+            node.attrs.detail as string,
           ],
-          ["p", { class: "text-sm text-secondary" }, node.attrs.detail as string],
         ];
       },
     },

package/src/ui-tailwind/editor-surface/pm-state-from-snapshot.ts

@@ -100,7 +100,15 @@ function buildParagraph(
         ? ((prevStop as { pos?: number }).pos ?? (prevStop as { position?: number }).position ?? 0)
         : 0;
       const widthPx = Math.round((stopPos - prevPos) / 15);
-      content.push(editorSchema.nodes.tab_char.create({ tabWidth: widthPx > 8 ? widthPx : null }));
+      const leader = (stop as { leader?: string }).leader ?? null;
+      const align = (stop as { val?: string }).val ?? null;
+      content.push(
+        editorSchema.nodes.tab_char.create({
+          tabWidth: widthPx > 8 ? widthPx : null,
+          leader,
+          align,
+        }),
+      );
       tabIndex++;
     } else {
       const nodes = buildInlineContent(segment);
@@ -113,6 +121,9 @@ function buildParagraph(
       styleId: block.styleId ?? null,
       numberingInstanceId: block.numbering?.numberingInstanceId ?? null,
       numberingLevel: block.numbering?.level ?? null,
+      numberingPrefix:
+        (block as typeof block & { numberingPrefix?: string }).numberingPrefix ??
+        null,
       alignment: block.alignment ?? null,
       spacingBefore: block.spacing?.before ?? null,
       spacingAfter: block.spacing?.after ?? null,
@@ -126,6 +137,7 @@ function buildParagraph(
       borderBottom: (block.borders as Record<string, unknown>)?.bottom ?? null,
       borderLeft: (block.borders as Record<string, unknown>)?.left ?? null,
       borderRight: (block.borders as Record<string, unknown>)?.right ?? null,
+      outlineLevel: block.outlineLevel ?? null,
       bidi: block.bidi ?? null,
       pageBreakBefore: block.pageBreakBefore ?? null,
     },
@@ -231,19 +243,9 @@ function buildTable(
         if (child.kind === "paragraph") {
           cellContent.push(buildParagraph(child as Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>));
         } else if (child.kind === "table") {
-          cellContent.push(buildNestedTablePlaceholder(child as Extract<SurfaceBlockSnapshot, { kind: "table" }>));
+          cellContent.push(buildTable(child as Extract<SurfaceBlockSnapshot, { kind: "table" }>));
         } else if (child.kind === "sdt_block") {
-          cellContent.push(buildOpaqueBlock({
-            blockId: child.blockId,
-            kind: "opaque_block",
-            from: child.from,
-            to: child.to,
-            fragmentId: child.blockId,
-            warningId: child.blockId,
-            label: child.alias ?? child.tag ?? "Content control",
-            detail: "Structured content control remains read-only inside table cells.",
-            state: "locked-preserve-only",
-          }));
+          cellContent.push(buildSdtBlock(child as Extract<SurfaceBlockSnapshot, { kind: "sdt_block" }>));
         } else if (child.kind === "opaque_block") {
           cellContent.push(buildOpaqueBlock(child as Extract<SurfaceBlockSnapshot, { kind: "opaque_block" }>));
         }
@@ -276,22 +278,6 @@ function buildTable(
   );
 }
 
-function buildNestedTablePlaceholder(
-  block: Extract<SurfaceBlockSnapshot, { kind: "table" }>,
-): PMNode {
-  return buildOpaqueBlock({
-    blockId: block.blockId,
-    kind: "opaque_block",
-    from: block.from,
-    to: block.to,
-    fragmentId: block.blockId,
-    warningId: block.blockId,
-    label: "Nested table",
-    detail: "Nested table remains read-only in the live ProseMirror cell surface.",
-    state: "locked-preserve-only",
-  });
-}
-
 function buildSdtBlock(
   block: Extract<SurfaceBlockSnapshot, { kind: "sdt_block" }>,
 ): PMNode {