@beyondwork/docx-react-component 1.0.18 → 1.0.20

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

@@ -1,5 +1,5 @@
 import { Fragment, type Node as PMNode } from "prosemirror-model";
-import { EditorState, type Plugin, Selection, TextSelection } from "prosemirror-state";
+import { EditorState, NodeSelection, type Plugin, Selection, TextSelection } from "prosemirror-state";
 
 import type {
   EditorSurfaceSnapshot,
@@ -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,30 +33,11 @@ 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);
-
-  // Convert runtime selection to PM selection
-  const pmAnchor = clamp(
-    positionMap.runtimeToPm(selection.anchor),
-    1,
-    positionMap.pmDocSize - 1,
-  );
-  const pmHead = clamp(
-    positionMap.runtimeToPm(selection.head),
-    1,
-    positionMap.pmDocSize - 1,
-  );
-
-  let pmSelection: Selection;
-  try {
-    pmSelection = TextSelection.between(doc.resolve(pmAnchor), doc.resolve(pmHead));
-  } catch {
-    // If the mapped runtime selection is invalid or lands in a non-text block,
-    // let ProseMirror choose the nearest valid starting selection.
-    pmSelection = Selection.atStart(doc);
-  }
+  const pmSelection = createPMSelectionFromSnapshot(doc, positionMap, selection);
 
   const state = EditorState.create({
     doc,
@@ -61,21 +48,70 @@ export function createPMStateFromSnapshot(
   return { state, positionMap };
 }
 
-function buildPMDoc(surface: EditorSurfaceSnapshot): PMNode {
-  const blocks: PMNode[] = [];
+export function createPMSelectionFromSnapshot(
+  doc: PMNode,
+  positionMap: PositionMap,
+  selection: SelectionSnapshot,
+): Selection {
+  const pmAnchor = clamp(positionMap.runtimeToPm(selection.anchor), 1, positionMap.pmDocSize - 1);
+  const pmHead = clamp(positionMap.runtimeToPm(selection.head), 1, positionMap.pmDocSize - 1);
+  try {
+    if (selection.activeRange.kind === "node") {
+      const pmNodePos = clamp(pmAnchor - 1, 0, positionMap.pmDocSize - 2);
+      return NodeSelection.create(doc, pmNodePos);
+    }
 
-  for (const block of surface.blocks) {
-    if (block.kind === "paragraph") {
-      blocks.push(buildParagraph(block));
-    } else if (block.kind === "table") {
-      blocks.push(buildTable(block));
-    } else if (block.kind === "sdt_block") {
-      blocks.push(buildSdtBlock(block));
-    } else {
-      blocks.push(buildOpaqueBlock(block));
+    const forward = selection.head >= selection.anchor;
+    const resolvedAnchor = resolveInlineBoundary(doc, pmAnchor, forward ? 1 : -1);
+    const resolvedHead = resolveInlineBoundary(doc, pmHead, forward ? -1 : 1);
+    if (resolvedAnchor !== null && resolvedHead !== null) {
+      return TextSelection.create(doc, resolvedAnchor, resolvedHead);
     }
+
+    const $anchor = doc.resolve(pmAnchor);
+    const $head = doc.resolve(pmHead);
+    return (
+      Selection.findFrom($anchor, 1, true) ??
+      Selection.findFrom($anchor, -1, true) ??
+      Selection.findFrom($head, 1, true) ??
+      Selection.findFrom($head, -1, true) ??
+      Selection.near($anchor, 1)
+    );
+  } catch {
+    // If the mapped runtime selection is invalid or lands in a non-text block,
+    // let ProseMirror choose the nearest valid starting selection.
+    return Selection.atStart(doc);
+  }
+}
+
+function resolveInlineBoundary(
+  doc: PMNode,
+  pos: number,
+  bias: -1 | 1,
+): number | null {
+  const $pos = doc.resolve(pos);
+  if ($pos.parent.inlineContent) {
+    return pos;
   }
 
+  const candidate =
+    Selection.findFrom($pos, bias, true) ??
+    Selection.findFrom($pos, -bias, true) ??
+    Selection.near($pos, bias);
+
+  if (candidate.$from.parent.inlineContent || candidate.$to.parent.inlineContent) {
+    return bias < 0 ? candidate.to : candidate.from;
+  }
+
+  return null;
+}
+
+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());
@@ -84,8 +120,38 @@ function buildPMDoc(surface: EditorSurfaceSnapshot): PMNode {
   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;
+
+    if (block.kind === "paragraph") {
+      nodes.push(buildParagraph(block, previousParagraph, nextParagraph, mediaPreviews));
+    } else if (block.kind === "table") {
+      nodes.push(buildTable(block, mediaPreviews));
+    } else if (block.kind === "sdt_block") {
+      nodes.push(buildSdtBlock(block, mediaPreviews));
+    } else {
+      nodes.push(buildOpaqueBlock(block));
+    }
+  }
+
+  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 ?? [];
@@ -111,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,
@@ -124,14 +207,22 @@ function buildParagraph(
       numberingPrefix:
         (block as typeof block & { numberingPrefix?: string }).numberingPrefix ??
         null,
+      numberingSuffix:
+        (block as typeof block & { numberingSuffix?: string }).numberingSuffix ??
+        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,
+      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,
@@ -145,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 [];
@@ -213,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,
@@ -220,12 +316,35 @@ 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)];
 
+    case "note_ref": {
+      const text = editorSchema.text(
+        segment.label,
+        [editorSchema.marks.superscript.create()],
+      );
+      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 [];
   }
@@ -233,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());
@@ -262,17 +371,36 @@ function buildTable(
             gridSpan: cell.gridSpan,
             verticalMerge: cell.verticalMerge,
             backgroundColor: cell.backgroundColor ?? null,
+            verticalAlign: cell.verticalAlign ?? null,
+            borderTop: cell.borderTop ?? null,
+            borderRight: cell.borderRight ?? null,
+            borderBottom: cell.borderBottom ?? null,
+            borderLeft: cell.borderLeft ?? null,
           },
           Fragment.from(cellContent),
         ),
       );
     }
-    rows.push(editorSchema.nodes.table_row.create(null, Fragment.from(cells)));
+    rows.push(editorSchema.nodes.table_row.create(
+      {
+        height: row.height ?? null,
+        heightRule: row.heightRule ?? null,
+        isHeader: row.isHeader ?? false,
+      },
+      Fragment.from(cells),
+    ));
   }
   return editorSchema.nodes.table.create(
     {
       styleId: block.styleId ?? null,
       gridColumns: block.gridColumns,
+      alignment: block.alignment ?? null,
+      tblLookFirstRow: block.tblLook?.firstRow ?? false,
+      tblLookLastRow: block.tblLook?.lastRow ?? false,
+      tblLookFirstColumn: block.tblLook?.firstColumn ?? false,
+      tblLookLastColumn: block.tblLook?.lastColumn ?? false,
+      tblLookNoHBand: block.tblLook?.noHBand ?? false,
+      tblLookNoVBand: block.tblLook?.noVBand ?? false,
     },
     Fragment.from(rows),
   );
@@ -280,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());
@@ -304,6 +422,11 @@ function buildSdtBlock(
       alias: block.alias ?? null,
       tag: block.tag ?? null,
       lock: block.lock ?? null,
+      checkboxChecked: block.checkboxChecked ?? null,
+      dateValue: block.dateValue ?? null,
+      dropdownItems: block.dropdownItems ?? null,
+      comboBoxItems: block.comboBoxItems ?? null,
+      showingPlcHdr: block.showingPlcHdr ?? false,
     },
     Fragment.from(children),
   );
@@ -320,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,
@@ -345,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,
@@ -360,6 +482,7 @@ function buildOpaqueInlineOrComplexAtom(
     warningId: segment.warningId,
     label,
     detail,
+    presentation: segment.presentation ?? "inline-chip",
   });
 }
 

package/src/ui-tailwind/editor-surface/search-plugin.ts

@@ -15,7 +15,17 @@ import { Plugin, PluginKey } from "prosemirror-state";
 import type { EditorState, Transaction } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
 
-import type { SearchOptions as PublicSearchOptions } from "../../api/public-types";
+import type {
+  SearchOptions as PublicSearchOptions,
+} from "../../api/public-types";
+import {
+  buildSearchPattern,
+  createSearchExcerpt,
+  findSearchMatches,
+  searchSecondaryStories,
+  type SecondaryStorySearchResult,
+  type SearchTextOptions,
+} from "../../core/search/search-text.ts";
 
 // ---------------------------------------------------------------------------
 // Public types
@@ -28,8 +38,7 @@ export interface SearchResult {
   index: number;
 }
 
-export interface SearchOptions extends PublicSearchOptions {
-  caseSensitive?: boolean;
+export interface SearchOptions extends PublicSearchOptions, SearchTextOptions {
   regex?: boolean;
   highlightColor?: string;
 }
@@ -133,71 +142,6 @@ export function performSearch(
   return results;
 }
 
-export function findSearchMatches(
-  text: string,
-  query: string,
-  options: SearchOptions = {},
-): SearchResult[] {
-  const pattern = buildSearchPattern(query, options);
-  if (!pattern) return [];
-
-  const results: SearchResult[] = [];
-  let match: RegExpExecArray | null;
-  pattern.lastIndex = 0;
-  while ((match = pattern.exec(text)) !== null) {
-    results.push({
-      from: match.index,
-      to: match.index + match[0].length,
-      text: match[0],
-      index: results.length,
-    });
-
-    if (match[0].length === 0) {
-      pattern.lastIndex += 1;
-    }
-  }
-
-  return results;
-}
-
-export function createSearchExcerpt(
-  text: string,
-  from: number,
-  to: number,
-  radius = 24,
-): string {
-  const safeFrom = Math.max(0, Math.min(from, text.length));
-  const safeTo = Math.max(safeFrom, Math.min(to, text.length));
-  const start = Math.max(0, safeFrom - radius);
-  const end = Math.min(text.length, safeTo + radius);
-  const prefix = start > 0 ? "…" : "";
-  const suffix = end < text.length ? "…" : "";
-  return `${prefix}${text.slice(start, end)}${suffix}`;
-}
-
-function buildSearchPattern(
-  query: string,
-  options: SearchOptions,
-): RegExp | null {
-  if (!query) {
-    return null;
-  }
-
-  const caseSensitive = options.matchCase ?? options.caseSensitive ?? false;
-  const regex = options.regex ?? false;
-  const wholeWord = options.wholeWord ?? false;
-
-  try {
-    const source = regex
-      ? query
-      : query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-    const wrapped = wholeWord ? `\\b${source}\\b` : source;
-    return new RegExp(wrapped, caseSensitive ? "g" : "gi");
-  } catch {
-    return null;
-  }
-}
-
 // ---------------------------------------------------------------------------
 // Clear helper (ProseMirror Command signature)
 // ---------------------------------------------------------------------------
@@ -215,3 +159,10 @@ export function clearSearch(
   );
   return true;
 }
+
+export {
+  createSearchExcerpt,
+  findSearchMatches,
+  searchSecondaryStories,
+};
+export type { SecondaryStorySearchResult };

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

@@ -0,0 +1,51 @@
+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;
+}): 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,
+  });
+}

package/src/ui-tailwind/editor-surface/tw-inline-token.tsx

@@ -95,6 +95,17 @@ export function TwInlineToken(props: TwInlineTokenProps) {
 
   // opaque_inline
   if (segment.kind === "opaque_inline") {
+    if (segment.presentation === "quiet-marker") {
+      return (
+        <span
+          aria-label={segment.label}
+          title={segment.detail}
+          className="inline-block h-0 w-0 overflow-hidden align-baseline"
+          data-inline-presentation="quiet-marker"
+        />
+      );
+    }
+
     return (
       <button
         type="button"

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>