@beyondwork/docx-react-component 1.0.10 → 1.0.12

package/src/ui/WordReviewEditor.tsx

@@ -34,8 +34,10 @@ import {
   type DocumentRuntime,
 } from "../runtime/document-runtime.ts";
 import { loadDocxEditorSession } from "../io/docx-session.ts";
-import { exportSnapshotToMinimalDocx } from "../io/export/minimal-docx.ts";
-import { DOCX_MIME_TYPE } from "../io/opc/docx-package.ts";
+import {
+  decodePersistedSourcePackageBytes,
+  hasValidPersistedSourcePackageDigest,
+} from "../io/source-package-provenance.ts";
 import { deriveCapabilities } from "../runtime/session-capabilities";
 import { TwProseMirrorSurface } from "../ui-tailwind/editor-surface/tw-prosemirror-surface";
 import { TwReviewWorkspace } from "../ui-tailwind/tw-review-workspace";
@@ -69,6 +71,15 @@ interface WordReviewEditorRuntime extends DocumentRuntime {
   dispose?(): void;
 }
 
+type PackageBackedDocxSession = ReturnType<typeof loadDocxEditorSession>;
+
+interface SnapshotExportBarrier {
+  reason:
+    | "missing_source_package_provenance"
+    | "invalid_source_package_provenance";
+  message: string;
+}
+
 const VISUALLY_HIDDEN_STYLES: React.CSSProperties = {
   position: "absolute",
   width: "1px",
@@ -124,6 +135,16 @@ export function __createWordReviewEditorRefBridge(
         selection: toRuntimeSelectionSnapshot(createSelectionFromAnchor(revision.anchor)),
       });
     },
+    scrollToComment: (commentId: string) => {
+      const comment = runtime.getRenderSnapshot().comments.threads.find(
+        (t) => t.commentId === commentId,
+      );
+      if (!comment || comment.anchor.kind === "detached") return;
+      runtime.dispatch({
+        type: "selection.set",
+        selection: toRuntimeSelectionSnapshot(createSelectionFromAnchor(comment.anchor)),
+      });
+    },
   };
 }
 
@@ -217,6 +238,9 @@ function createRuntime(
         editorBuild: "dev",
       })
     : undefined;
+  const snapshotExportResolution = !args.source.initialDocx
+    ? resolveSnapshotExportSession(args)
+    : undefined;
   const initialSnapshot =
     args.source.initialSnapshot ??
     docxSession?.initialSnapshot ??
@@ -224,23 +248,36 @@ function createRuntime(
       args.documentId,
       args.source.sourceLabel ?? "Generated shell snapshot",
     );
+  const runtimeSnapshot = snapshotExportResolution?.barrier
+    ? applySnapshotExportBarrier(initialSnapshot, snapshotExportResolution.barrier)
+    : initialSnapshot;
 
   return createDocumentRuntime({
     documentId: args.documentId,
-    initialSnapshot,
+    initialSnapshot: runtimeSnapshot,
     sourceKind: args.source.source,
     sourceLabel: args.source.sourceLabel,
     readOnly: args.readOnly || docxSession?.readOnly,
-    editorBuild: initialSnapshot.editorBuild,
+    editorBuild: runtimeSnapshot.editorBuild,
     fatalError: docxSession?.fatalError,
-    exportDocx: async (snapshot, options) =>
-      docxSession
-        ? docxSession.exportDocx(snapshot, options)
-        : {
-            bytes: exportSnapshotToMinimalDocx(snapshot),
-            mimeType: DOCX_MIME_TYPE,
-            fileName: options?.fileName ?? `${args.documentId}.docx`,
-          },
+    exportDocx: async (snapshot, options) => {
+      if (docxSession) {
+        return docxSession.exportDocx(snapshot, options);
+      }
+
+      if (snapshotExportResolution?.session) {
+        return snapshotExportResolution.session.exportDocx(snapshot, options);
+      }
+
+      throw createSnapshotExportBlockedError(
+        args.documentId,
+        snapshotExportResolution?.barrier ?? {
+          reason: "missing_source_package_provenance",
+          message:
+            "DOCX export is blocked because this snapshot does not carry embedded source package provenance.",
+        },
+      );
+    },
     onWarning: handlers.onWarning,
     onError: handlers.onError,
     defaultAuthorId: args.currentUserId,
@@ -520,6 +557,16 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
             selection: toRuntimeSelectionSnapshot(createSelectionFromAnchor(revision.anchor)),
           });
         },
+        scrollToComment: (commentId: string) => {
+          const comment = activeRuntime.getRenderSnapshot().comments.threads.find(
+            (t) => t.commentId === commentId,
+          );
+          if (!comment || comment.anchor.kind === "detached") return;
+          activeRuntime.dispatch({
+            type: "selection.set",
+            selection: toRuntimeSelectionSnapshot(createSelectionFromAnchor(comment.anchor)),
+          });
+        },
       }),
       [activeRuntime, currentUser.userId, documentId, runtime],
     );
@@ -986,6 +1033,7 @@ function guessSourceLabel(
   return (
     externalDocSource?.sourceLabel ??
     initialSourceLabel ??
+    initialSnapshot?.sourcePackage?.sourceLabel ??
     initialSnapshot?.editorBuild ??
     undefined
   );
@@ -1086,7 +1134,23 @@ async function persistAndExport(input: {
     lastSavedRevisionTokenRef: input.lastSavedRevisionTokenRef,
   });
 
-  const result = await input.runtime.exportDocx(input.options);
+  let result: ExportResult;
+  try {
+    result = await input.runtime.exportDocx(input.options);
+  } catch (error) {
+    const normalized = normalizeExportError(error, input.documentId, input.options);
+    input.onError?.(normalized);
+    emitEditorEvent({
+      datastore: input.datastore,
+      onEvent: input.onEvent,
+      event: {
+        type: "error",
+        documentId: input.documentId,
+        error: normalized,
+      },
+    });
+    throw normalized;
+  }
 
   if (!input.datastore) {
     return result;
@@ -1377,7 +1441,7 @@ function createFallbackPersistedSnapshot(
 ): PersistedEditorSnapshot {
   const docId = createCanonicalDocumentId(documentId);
   return {
-    snapshotVersion: "persisted-editor-snapshot/1",
+    snapshotVersion: "persisted-editor-snapshot/2",
     schemaVersion: "cds/1.0.0",
     documentId,
     docId,
@@ -1438,6 +1502,137 @@ function emptyCompatibilityReport(): CompatibilityReport {
   };
 }
 
+function resolveSnapshotExportSession(args: CreateRuntimeArgs): {
+  session?: PackageBackedDocxSession;
+  barrier?: SnapshotExportBarrier;
+} {
+  const sourcePackage = args.source.initialSnapshot?.sourcePackage;
+  if (!sourcePackage) {
+    return {
+      barrier: {
+        reason: "missing_source_package_provenance",
+        message:
+          "DOCX export is blocked because this snapshot was loaded without embedded source package provenance.",
+      },
+    };
+  }
+
+  try {
+    const bytes = decodePersistedSourcePackageBytes(sourcePackage);
+    if (!hasValidPersistedSourcePackageDigest(sourcePackage, bytes)) {
+      return {
+        barrier: {
+          reason: "invalid_source_package_provenance",
+          message:
+            "DOCX export is blocked because the embedded source package provenance failed its integrity check.",
+        },
+      };
+    }
+
+    const session = loadDocxEditorSession({
+      documentId: args.documentId,
+      sourceLabel: sourcePackage.sourceLabel ?? args.source.sourceLabel,
+      bytes,
+      editorBuild: args.source.initialSnapshot?.editorBuild ?? "dev",
+    });
+    if (session.readOnly || session.fatalError) {
+      return {
+        barrier: {
+          reason: "invalid_source_package_provenance",
+          message:
+            "DOCX export is blocked because the embedded source package provenance is no longer loadable as a valid package-backed session.",
+        },
+      };
+    }
+
+    return { session };
+  } catch {
+    return {
+      barrier: {
+        reason: "invalid_source_package_provenance",
+        message:
+          "DOCX export is blocked because the embedded source package provenance could not be decoded into a package-backed session.",
+      },
+    };
+  }
+}
+
+function applySnapshotExportBarrier(
+  snapshot: PersistedEditorSnapshot,
+  barrier: SnapshotExportBarrier,
+): PersistedEditorSnapshot {
+  const featureEntryId = `feature:source-package-provenance:${barrier.reason}`;
+  const featureEntries = snapshot.compatibility.featureEntries.some(
+    (entry) => entry.featureEntryId === featureEntryId,
+  )
+    ? snapshot.compatibility.featureEntries
+    : [
+        ...snapshot.compatibility.featureEntries,
+        {
+          featureEntryId,
+          featureKey: "source-package-provenance",
+          featureClass: "unsupported-fatal" as const,
+          message: barrier.message,
+          details: {
+            reason: barrier.reason,
+          },
+        },
+      ];
+
+  return {
+    ...snapshot,
+    compatibility: {
+      ...snapshot.compatibility,
+      blockExport: true,
+      featureEntries,
+    },
+  };
+}
+
+function createSnapshotExportBlockedError(
+  documentId: string,
+  barrier: SnapshotExportBarrier,
+): EditorError {
+  return {
+    errorId: `${documentId}:export:${barrier.reason}`,
+    code: "export_failed",
+    message: barrier.message,
+    isFatal: false,
+    source: "export",
+    details: {
+      reason: barrier.reason,
+    },
+  };
+}
+
+function normalizeExportError(
+  error: unknown,
+  documentId: string,
+  options?: ExportDocxOptions,
+): EditorError {
+  if (
+    typeof error === "object" &&
+    error !== null &&
+    "errorId" in error &&
+    "code" in error &&
+    "message" in error
+  ) {
+    return error as EditorError;
+  }
+
+  return {
+    errorId: `${documentId}:export:failed`,
+    code: "export_failed",
+    message:
+      error instanceof Error ? error.message : "DOCX export failed for an unknown reason.",
+    isFatal: false,
+    source: "export",
+    details: {
+      requestedOptions: options ?? {},
+    },
+  };
+}
+
 function toRuntimeSelectionSnapshot(selection: PublicSelectionSnapshot) {
   return {
     anchor: selection.anchor,

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

@@ -6,6 +6,25 @@ import {
   tableHeaderCellNodeSpec,
 } from "../../runtime/table-schema.ts";
 
+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"]);
+
+/** 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;
+  return HEX_COLOR_RE.test(raw) ? `#${raw}` : null;
+}
+
+/** Validate a CSS color value (may already include #). Returns the value or null. */
+function safeCssColor(raw: string | null | undefined): string | null {
+  if (!raw) return null;
+  // Allow #hex, named colors (single word), rgb/rgba functions
+  if (/^#[0-9A-Fa-f]{3,8}$/.test(raw)) return raw;
+  if (/^[a-zA-Z]+$/.test(raw)) return raw;
+  return null;
+}
+
 /**
  * ProseMirror schema for the supported live surface slice.
  *
@@ -27,6 +46,20 @@ export const editorSchema = new Schema({
         numberingInstanceId: { default: null },
         numberingLevel: { default: null },
         alignment: { default: null },
+        spacingBefore: { default: null },
+        spacingAfter: { default: null },
+        lineSpacing: { default: null },
+        lineRule: { default: null },
+        indentLeft: { default: null },
+        indentRight: { default: null },
+        indentFirstLine: { default: null },
+        shadingFill: { default: null },
+        borderTop: { default: null },
+        borderBottom: { default: null },
+        borderLeft: { default: null },
+        borderRight: { default: null },
+        bidi: { default: null },
+        pageBreakBefore: { default: null },
       },
       parseDOM: [{ tag: "p" }],
       toDOM(node) {
@@ -39,8 +72,41 @@ export const editorSchema = new Schema({
           else if (lower === "heading3") classes.push("text-lg font-medium");
         }
         const attrs: Record<string, string> = { class: classes.join(" ") };
+        const styles: string[] = [];
         const alignment = node.attrs.alignment as string | null;
-        if (alignment) attrs.style = `text-align: ${alignment}`;
+        const safeAlign = alignment === "both" ? "justify" : alignment;
+        if (safeAlign && SAFE_ALIGNMENT.has(safeAlign)) styles.push(`text-align: ${safeAlign}`);
+        const spacingBefore = node.attrs.spacingBefore as number | null;
+        if (spacingBefore) styles.push(`margin-top: ${spacingBefore / 20}px`);
+        const spacingAfter = node.attrs.spacingAfter as number | null;
+        if (spacingAfter) styles.push(`margin-bottom: ${spacingAfter / 20}px`);
+        const lineSpacing = node.attrs.lineSpacing as number | null;
+        const lineRule = node.attrs.lineRule as string | null;
+        if (lineSpacing && lineRule === "auto") styles.push(`line-height: ${lineSpacing / 240}`);
+        else if (lineSpacing && lineRule === "exact") styles.push(`line-height: ${lineSpacing / 20}px`);
+        else if (lineSpacing && lineRule === "atLeast") styles.push(`min-height: ${lineSpacing / 20}px`);
+        const indentLeft = node.attrs.indentLeft as number | null;
+        if (indentLeft) styles.push(`padding-left: ${indentLeft / 20}px`);
+        const indentRight = node.attrs.indentRight as number | null;
+        if (indentRight) styles.push(`padding-right: ${indentRight / 20}px`);
+        const indentFirstLine = node.attrs.indentFirstLine as number | null;
+        if (indentFirstLine) styles.push(`text-indent: ${indentFirstLine / 20}px`);
+        const shadingColor = safeHexColor(node.attrs.shadingFill as string | null);
+        if (shadingColor) styles.push(`background-color: ${shadingColor}`);
+        for (const [side, attrName] of [["top", "borderTop"], ["bottom", "borderBottom"], ["left", "borderLeft"], ["right", "borderRight"]] as const) {
+          const border = node.attrs[attrName] as { color?: string; sz?: number; val?: string } | null;
+          if (border && border.val && border.val !== "none") {
+            const width = border.sz ? `${border.sz / 8}px` : "1px";
+            const color = safeHexColor(border.color ?? null) ?? "#000000";
+            const bStyle = border.val === "dotted" ? "dotted" : border.val === "dashed" ? "dashed" : "solid";
+            styles.push(`border-${side}: ${width} ${bStyle} ${color}`);
+          }
+        }
+        const pageBreak = node.attrs.pageBreakBefore as boolean | null;
+        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 (styles.length > 0) attrs.style = styles.join("; ");
         return ["p", attrs, 0];
       },
     },
@@ -64,7 +130,14 @@ export const editorSchema = new Schema({
       group: "inline",
       atom: true,
       selectable: false,
-      toDOM() {
+      attrs: {
+        tabWidth: { 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"];
+        }
         return ["span", { class: "inline-block w-8", "data-node-type": "tab" }, "\u00A0"];
       },
     },
@@ -336,6 +409,31 @@ export const editorSchema = new Schema({
         return ["s", 0];
       },
     },
+    doubleStrikethrough: {
+      toDOM() {
+        return ["span", { style: "text-decoration: line-through double" }, 0];
+      },
+    },
+    vanish: {
+      toDOM() {
+        return ["span", { style: "opacity: 0.3; text-decoration: underline dotted; text-decoration-color: rgba(0,0,0,0.3)" }, 0];
+      },
+    },
+    emboss: {
+      toDOM() {
+        return ["span", { style: "text-shadow: 1px -1px 0 rgba(255,255,255,0.6), -1px 1px 0 rgba(0,0,0,0.2)" }, 0];
+      },
+    },
+    imprint: {
+      toDOM() {
+        return ["span", { style: "text-shadow: -1px 1px 0 rgba(255,255,255,0.6), 1px -1px 0 rgba(0,0,0,0.2)" }, 0];
+      },
+    },
+    shadow: {
+      toDOM() {
+        return ["span", { style: "text-shadow: 1px 1px 2px rgba(0,0,0,0.3)" }, 0];
+      },
+    },
     superscript: {
       excludes: "subscript",
       parseDOM: [{ tag: "sup" }],
@@ -372,6 +470,19 @@ export const editorSchema = new Schema({
         return ["span", { style: "text-transform: uppercase" }, 0];
       },
     },
+    char_spacing: {
+      attrs: { value: { default: 0 } },
+      toDOM(mark) {
+        const twips = mark.attrs.value as number;
+        return ["span", { style: `letter-spacing: ${twips / 20}px` }, 0];
+      },
+    },
+    font_kerning: {
+      attrs: { threshold: { default: 0 } },
+      toDOM() {
+        return ["span", { style: "font-kerning: normal" }, 0];
+      },
+    },
     font_family: {
       attrs: { family: { default: null } },
       parseDOM: [
@@ -381,7 +492,9 @@ export const editorSchema = new Schema({
         },
       ],
       toDOM(mark) {
-        return ["span", { style: `font-family: ${mark.attrs.family as string}` }, 0];
+        const family = mark.attrs.family as string;
+        if (!SAFE_FONT_RE.test(family)) return ["span", 0];
+        return ["span", { style: `font-family: ${family}` }, 0];
       },
     },
     font_size: {
@@ -408,7 +521,8 @@ export const editorSchema = new Schema({
         },
       ],
       toDOM(mark) {
-        const color = mark.attrs.color as string;
+        const color = safeCssColor(mark.attrs.color as string);
+        if (!color) return ["span", 0];
         return ["span", { style: `color: ${color}` }, 0];
       },
     },
@@ -421,7 +535,9 @@ export const editorSchema = new Schema({
         },
       ],
       toDOM(mark) {
-        return ["mark", { style: `background-color: ${mark.attrs.color as string}` }, 0];
+        const color = safeCssColor(mark.attrs.color as string);
+        if (!color) return ["mark", 0];
+        return ["mark", { style: `background-color: ${color}` }, 0];
       },
     },
     link: {

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

@@ -87,10 +87,24 @@ function buildParagraph(
   block: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>,
 ): PMNode {
   const content: PMNode[] = [];
+  const tabStops = block.tabStops ?? [];
+  let tabIndex = 0;
 
   for (const segment of block.segments) {
-    const nodes = buildInlineContent(segment);
-    content.push(...nodes);
+    if (segment.kind === "tab" && tabIndex < tabStops.length) {
+      const stop = tabStops[tabIndex];
+      const stopPos = (stop as { pos?: number }).pos ?? (stop as { position?: number }).position ?? 0;
+      const prevStop = tabIndex > 0 ? tabStops[tabIndex - 1] : null;
+      const prevPos = prevStop
+        ? ((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 }));
+      tabIndex++;
+    } else {
+      const nodes = buildInlineContent(segment);
+      content.push(...nodes);
+    }
   }
 
   return editorSchema.nodes.paragraph.create(
@@ -98,6 +112,21 @@ function buildParagraph(
       styleId: block.styleId ?? null,
       numberingInstanceId: block.numbering?.numberingInstanceId ?? null,
       numberingLevel: block.numbering?.level ?? null,
+      alignment: block.alignment ?? null,
+      spacingBefore: block.spacing?.before ?? null,
+      spacingAfter: block.spacing?.after ?? null,
+      lineSpacing: block.spacing?.line ?? null,
+      lineRule: block.spacing?.lineRule ?? null,
+      indentLeft: block.indentation?.left ?? null,
+      indentRight: block.indentation?.right ?? null,
+      indentFirstLine: block.indentation?.firstLine ?? null,
+      shadingFill: block.shading?.fill ?? null,
+      borderTop: (block.borders as Record<string, unknown>)?.top ?? null,
+      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,
+      bidi: block.bidi ?? null,
+      pageBreakBefore: block.pageBreakBefore ?? null,
     },
     content.length > 0 ? Fragment.from(content) : undefined,
   );
@@ -116,12 +145,47 @@ function buildInlineContent(segment: SurfaceInlineSegment): PMNode[] {
       const pmMarks = [];
       if (segment.marks) {
         for (const mark of segment.marks) {
+          // Map surface mark names that differ from PM schema mark names
+          if (mark === "smallCaps") {
+            pmMarks.push(editorSchema.marks.small_caps.create());
+            continue;
+          }
+          if (mark === "allCaps") {
+            pmMarks.push(editorSchema.marks.all_caps.create());
+            continue;
+          }
           const pmMark = editorSchema.marks[mark];
           if (pmMark) {
             pmMarks.push(pmMark.create());
           }
         }
       }
+      if (segment.kind === "text" && segment.markAttrs) {
+        if (segment.markAttrs.backgroundColor) {
+          pmMarks.push(editorSchema.marks.highlight.create({ color: `#${segment.markAttrs.backgroundColor}` }));
+        }
+        if (segment.markAttrs.fontFamily) {
+          pmMarks.push(editorSchema.marks.font_family.create({ family: segment.markAttrs.fontFamily }));
+        }
+        if (segment.markAttrs.fontSize) {
+          pmMarks.push(editorSchema.marks.font_size.create({ size: segment.markAttrs.fontSize / 2 }));
+        }
+        if (segment.markAttrs.textColor) {
+          pmMarks.push(editorSchema.marks.text_color.create({ color: `#${segment.markAttrs.textColor}` }));
+        }
+        if (segment.markAttrs.charSpacing) {
+          pmMarks.push(editorSchema.marks.char_spacing.create({ value: segment.markAttrs.charSpacing }));
+        }
+        if (segment.markAttrs.kerning) {
+          pmMarks.push(editorSchema.marks.font_kerning.create({ threshold: segment.markAttrs.kerning }));
+        }
+        if (segment.markAttrs.textFill && !segment.markAttrs.textColor) {
+          const colorMatch = segment.markAttrs.textFill.match(/\bval="([0-9A-Fa-f]{6})"/);
+          if (colorMatch) {
+            pmMarks.push(editorSchema.marks.text_color.create({ color: `#${colorMatch[1]}` }));
+          }
+        }
+      }
       if (segment.hyperlinkHref) {
         pmMarks.push(editorSchema.marks.link.create({ href: segment.hyperlinkHref }));
       }