@beyondwork/docx-react-component 1.0.19 → 1.0.21

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

@@ -17,6 +17,12 @@ export interface PMStateResult {
   positionMap: PositionMap;
 }
 
+export interface MediaPreviewDescriptor {
+  src: string;
+  widthEmu?: number;
+  heightEmu?: number;
+}
+
 /**
  * Create a ProseMirror EditorState from a runtime surface snapshot.
  *
@@ -27,8 +33,9 @@ export function createPMStateFromSnapshot(
   surface: EditorSurfaceSnapshot,
   selection: SelectionSnapshot,
   plugins: Plugin[],
+  mediaPreviews: Record<string, MediaPreviewDescriptor> = {},
 ): PMStateResult {
-  const doc = buildPMDoc(surface);
+  const doc = buildPMDoc(surface, mediaPreviews);
   const positionMap = buildPositionMap(surface);
   const pmSelection = createPMSelectionFromSnapshot(doc, positionMap, selection);
 
@@ -50,7 +57,8 @@ export function createPMSelectionFromSnapshot(
   const pmHead = clamp(positionMap.runtimeToPm(selection.head), 1, positionMap.pmDocSize - 1);
   try {
     if (selection.activeRange.kind === "node") {
-      return NodeSelection.create(doc, pmAnchor);
+      const pmNodePos = clamp(pmAnchor - 1, 0, positionMap.pmDocSize - 2);
+      return NodeSelection.create(doc, pmNodePos);
     }
 
     const forward = selection.head >= selection.anchor;
@@ -98,31 +106,52 @@ function resolveInlineBoundary(
   return null;
 }
 
-function buildPMDoc(surface: EditorSurfaceSnapshot): PMNode {
-  const blocks: PMNode[] = [];
+function buildPMDoc(
+  surface: EditorSurfaceSnapshot,
+  mediaPreviews: Record<string, MediaPreviewDescriptor>,
+): PMNode {
+  const blocks = buildPMBlocks(surface.blocks, mediaPreviews);
+
+  // Ensure at least one block (PM requires non-empty doc)
+  if (blocks.length === 0) {
+    blocks.push(editorSchema.nodes.paragraph.create());
+  }
+
+  return editorSchema.nodes.doc.create(null, Fragment.from(blocks));
+}
+
+function buildPMBlocks(
+  blocks: SurfaceBlockSnapshot[],
+  mediaPreviews: Record<string, MediaPreviewDescriptor>,
+): PMNode[] {
+  const nodes: PMNode[] = [];
+
+  for (let index = 0; index < blocks.length; index += 1) {
+    const block = blocks[index];
+    const previousBlock = index > 0 ? blocks[index - 1] : null;
+    const nextBlock = blocks[index + 1];
+    const previousParagraph = previousBlock?.kind === "paragraph" ? previousBlock : null;
+    const nextParagraph = nextBlock?.kind === "paragraph" ? nextBlock : null;
 
-  for (const block of surface.blocks) {
     if (block.kind === "paragraph") {
-      blocks.push(buildParagraph(block));
+      nodes.push(buildParagraph(block, previousParagraph, nextParagraph, mediaPreviews));
     } else if (block.kind === "table") {
-      blocks.push(buildTable(block));
+      nodes.push(buildTable(block, mediaPreviews));
     } else if (block.kind === "sdt_block") {
-      blocks.push(buildSdtBlock(block));
+      nodes.push(buildSdtBlock(block, mediaPreviews));
     } else {
-      blocks.push(buildOpaqueBlock(block));
+      nodes.push(buildOpaqueBlock(block));
     }
   }
 
-  // Ensure at least one block (PM requires non-empty doc)
-  if (blocks.length === 0) {
-    blocks.push(editorSchema.nodes.paragraph.create());
-  }
-
-  return editorSchema.nodes.doc.create(null, Fragment.from(blocks));
+  return nodes;
 }
 
 function buildParagraph(
   block: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>,
+  previousParagraph: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }> | null,
+  nextParagraph: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }> | null,
+  mediaPreviews: Record<string, MediaPreviewDescriptor>,
 ): PMNode {
   const content: PMNode[] = [];
   const tabStops = block.tabStops ?? [];
@@ -148,11 +177,28 @@ function buildParagraph(
       );
       tabIndex++;
     } else {
-      const nodes = buildInlineContent(segment);
+      const nodes = buildInlineContent(segment, mediaPreviews);
       content.push(...nodes);
     }
   }
 
+  const listContinuation = Boolean(
+    block.numbering &&
+      nextParagraph?.numbering &&
+      nextParagraph.numbering.numberingInstanceId === block.numbering.numberingInstanceId &&
+      nextParagraph.numbering.level === block.numbering.level,
+  );
+  const contextualSpacingAfter = Boolean(
+    block.contextualSpacing &&
+      nextParagraph?.contextualSpacing &&
+      (nextParagraph.styleId ?? "__default__") === (block.styleId ?? "__default__"),
+  );
+  const contextualSpacingBefore = Boolean(
+    block.contextualSpacing &&
+      previousParagraph?.contextualSpacing &&
+      (previousParagraph.styleId ?? "__default__") === (block.styleId ?? "__default__"),
+  );
+
   return editorSchema.nodes.paragraph.create(
     {
       styleId: block.styleId ?? null,
@@ -169,9 +215,14 @@ function buildParagraph(
       spacingAfter: block.spacing?.after ?? null,
       lineSpacing: block.spacing?.line ?? null,
       lineRule: block.spacing?.lineRule ?? null,
+      contextualSpacing: block.contextualSpacing ?? null,
+      listContinuation: listContinuation || null,
+      contextualSpacingBefore: contextualSpacingBefore || null,
+      contextualSpacingAfter: contextualSpacingAfter || null,
       indentLeft: block.indentation?.left ?? null,
       indentRight: block.indentation?.right ?? null,
       indentFirstLine: block.indentation?.firstLine ?? null,
+      indentHanging: block.indentation?.hanging ?? null,
       shadingFill: block.shading?.fill ?? null,
       borderTop: (block.borders as Record<string, unknown>)?.top ?? null,
       borderBottom: (block.borders as Record<string, unknown>)?.bottom ?? null,
@@ -185,7 +236,10 @@ function buildParagraph(
   );
 }
 
-function buildInlineContent(segment: SurfaceInlineSegment): PMNode[] {
+function buildInlineContent(
+  segment: SurfaceInlineSegment,
+  mediaPreviews: Record<string, MediaPreviewDescriptor>,
+): PMNode[] {
   switch (segment.kind) {
     case "text": {
       if (!segment.text) return [];
@@ -253,6 +307,8 @@ function buildInlineContent(segment: SurfaceInlineSegment): PMNode[] {
       return [editorSchema.nodes.tab_char.create()];
 
     case "image":
+      {
+        const preview = mediaPreviews[segment.mediaId];
       return [
         editorSchema.nodes.image_atom.create({
           mediaId: segment.mediaId,
@@ -260,8 +316,12 @@ function buildInlineContent(segment: SurfaceInlineSegment): PMNode[] {
           state: segment.state,
           display: segment.display ?? "inline",
           detail: segment.detail ?? null,
+          src: preview?.src ?? null,
+          widthEmu: preview?.widthEmu ?? null,
+          heightEmu: preview?.heightEmu ?? null,
         }),
       ];
+      }
 
     case "opaque_inline":
       return [buildOpaqueInlineOrComplexAtom(segment)];
@@ -274,6 +334,17 @@ function buildInlineContent(segment: SurfaceInlineSegment): PMNode[] {
       return [text];
     }
 
+    case "field_ref":
+      return [
+        editorSchema.nodes.field_ref_atom.create({
+          fieldFamily: segment.fieldFamily,
+          fieldTarget: segment.fieldTarget ?? null,
+          instruction: segment.instruction,
+          refreshStatus: segment.refreshStatus,
+          label: segment.label,
+        }),
+      ];
+
     default:
       return [];
   }
@@ -281,23 +352,13 @@ function buildInlineContent(segment: SurfaceInlineSegment): PMNode[] {
 
 function buildTable(
   block: Extract<SurfaceBlockSnapshot, { kind: "table" }>,
+  mediaPreviews: Record<string, MediaPreviewDescriptor>,
 ): PMNode {
   const rows: PMNode[] = [];
   for (const row of block.rows) {
     const cells: PMNode[] = [];
     for (const cell of row.cells) {
-      const cellContent: PMNode[] = [];
-      for (const child of cell.content) {
-        if (child.kind === "paragraph") {
-          cellContent.push(buildParagraph(child as Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>));
-        } else if (child.kind === "table") {
-          cellContent.push(buildTable(child as Extract<SurfaceBlockSnapshot, { kind: "table" }>));
-        } else if (child.kind === "sdt_block") {
-          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" }>));
-        }
-      }
+      const cellContent = buildPMBlocks(cell.content, mediaPreviews);
       // Ensure at least one paragraph in cell (PM requires non-empty)
       if (cellContent.length === 0) {
         cellContent.push(editorSchema.nodes.paragraph.create());
@@ -347,19 +408,9 @@ function buildTable(
 
 function buildSdtBlock(
   block: Extract<SurfaceBlockSnapshot, { kind: "sdt_block" }>,
+  mediaPreviews: Record<string, MediaPreviewDescriptor>,
 ): PMNode {
-  const children = block.children.map((child) => {
-    if (child.kind === "paragraph") {
-      return buildParagraph(child);
-    }
-    if (child.kind === "table") {
-      return buildTable(child);
-    }
-    if (child.kind === "sdt_block") {
-      return buildSdtBlock(child);
-    }
-    return buildOpaqueBlock(child);
-  });
+  const children = buildPMBlocks(block.children, mediaPreviews);
 
   if (children.length === 0) {
     children.push(editorSchema.nodes.paragraph.create());
@@ -392,15 +443,14 @@ function buildOpaqueInlineOrComplexAtom(
   const label = segment.label;
   const detail = segment.detail;
 
-  if (label === "Chart") {
+  if (label === "Embedded chart") {
     return editorSchema.nodes.chart_atom.create({ detail });
   }
-  if (label === "SmartArt") {
+  if (label === "SmartArt diagram") {
     return editorSchema.nodes.smartart_atom.create({ detail });
   }
-  if (label === "Shape") {
-    // Extract text hint from detail if present
-    const textMatch = /Text: "([^"]+)"/.exec(detail);
+  if (label === "Drawing shape" || label === "Text box") {
+    const textMatch = /(?:Text content|Content): "([^"]+)"/.exec(detail);
     const geometryMatch = /Geometry: ([^.]+)\./.exec(detail);
     return editorSchema.nodes.shape_atom.create({
       text: textMatch ? textMatch[1] : null,
@@ -417,8 +467,8 @@ function buildOpaqueInlineOrComplexAtom(
       detail,
     });
   }
-  if (label === "VML shape") {
-    const textMatch = /Text: "([^"]+)"/.exec(detail);
+  if (label === "Legacy VML drawing") {
+    const textMatch = /Text content: "([^"]+)"/.exec(detail);
     const typeMatch = /Type: ([^.]+)\./.exec(detail);
     return editorSchema.nodes.vml_atom.create({
       text: textMatch ? textMatch[1] : null,

package/src/ui-tailwind/editor-surface/surface-build-keys.ts

@@ -0,0 +1,55 @@
+import type {
+  EditorStoryTarget,
+  EditorSurfaceSnapshot,
+} from "../../api/public-types.ts";
+
+const surfaceIdentityMap = new WeakMap<EditorSurfaceSnapshot, number>();
+let nextSurfaceIdentity = 0;
+
+function getSurfaceIdentity(surface: EditorSurfaceSnapshot): number {
+  const cached = surfaceIdentityMap.get(surface);
+  if (cached !== undefined) {
+    return cached;
+  }
+  const identity = nextSurfaceIdentity;
+  nextSurfaceIdentity += 1;
+  surfaceIdentityMap.set(surface, identity);
+  return identity;
+}
+
+export function createSurfaceDocumentBuildKey(input: {
+  surface: EditorSurfaceSnapshot | null | undefined;
+  activeStory: EditorStoryTarget;
+  mediaPreviewKey: string;
+}): string {
+  return JSON.stringify({
+    surfaceIdentity:
+      input.surface === undefined || input.surface === null
+        ? "loading"
+        : getSurfaceIdentity(input.surface),
+    activeStory: input.activeStory,
+    mediaPreviewKey: input.mediaPreviewKey,
+  });
+}
+
+export function createSurfaceDecorationKey(input: {
+  markupDisplay: string;
+  showTrackedChanges: boolean;
+  canEdit: boolean;
+  activeCommentId?: string;
+  activeRevisionId?: string;
+  workflowScopeSignature?: string;
+  workflowCandidateSignature?: string;
+  workflowBlockedSignature?: string;
+}): string {
+  return JSON.stringify({
+    markupDisplay: input.markupDisplay,
+    showTrackedChanges: input.showTrackedChanges,
+    canEdit: input.canEdit,
+    activeCommentId: input.activeCommentId ?? null,
+    activeRevisionId: input.activeRevisionId ?? null,
+    workflowScopeSignature: input.workflowScopeSignature ?? null,
+    workflowCandidateSignature: input.workflowCandidateSignature ?? null,
+    workflowBlockedSignature: input.workflowBlockedSignature ?? null,
+  });
+}

package/src/ui-tailwind/editor-surface/tw-opaque-block.tsx

@@ -7,13 +7,14 @@ export interface TwOpaqueBlockProps {
   block: Extract<SurfaceBlockSnapshot, { kind: "opaque_block" }>;
   selection: SelectionSnapshot;
   onSelectionChange?: (selection: SelectionSnapshot) => void;
+  workflowTargeted?: boolean;
 }
 
 const focusRingClass =
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
 
 export function TwOpaqueBlock(props: TwOpaqueBlockProps) {
-  const { block, selection } = props;
+  const { block, selection, workflowTargeted } = props;
   const selected = selectionTouchesRange(selection, block.from, block.to);
 
   return (
@@ -44,6 +45,11 @@ export function TwOpaqueBlock(props: TwOpaqueBlockProps) {
           <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-semibold text-comment bg-warning-soft">
             preserve-only
           </span>
+          {workflowTargeted && (
+            <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-semibold text-amber-700 bg-amber-100">
+              workflow-targeted
+            </span>
+          )}
         </div>
         <p className="text-sm text-secondary">{block.detail}</p>
       </button>