@beyondwork/docx-react-component 1.0.13 → 1.0.15

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 {

package/src/ui-tailwind/tw-review-workspace.tsx

@@ -27,6 +27,7 @@ export interface TwReviewWorkspaceProps {
   activeRevisionId?: string;
   showTrackedChanges: boolean;
   selectionPreview?: string | null;
+  addCommentDisabledReason?: string;
   onViewModeChange: (value: ViewMode) => void;
   onActiveRailTabChange: (value: ReviewRailTab) => void;
   onShowTrackedChangesChange: (show: boolean) => void;
@@ -92,6 +93,8 @@ export function TwReviewWorkspace(props: TwReviewWorkspaceProps) {
                     <TwSelectionToolbar
                       selectionPreview={props.selectionPreview}
                       readOnly={snapshot.readOnly}
+                      canAddComment={props.capabilities?.canAddComment}
+                      disabledReason={props.addCommentDisabledReason}
                       onAddComment={props.onAddComment}
                     />
                   </div>