@beyondwork/docx-react-component 1.0.29 → 1.0.31

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

@@ -0,0 +1,567 @@
+import { Fragment, type Node as PMNode } from "prosemirror-model";
+import { EditorState, NodeSelection, type Plugin, Selection, TextSelection } from "prosemirror-state";
+
+import type {
+  EditorSurfaceSnapshot,
+  SelectionSnapshot,
+  SurfaceBlockSnapshot,
+  SurfaceInlineSegment,
+  SurfaceTableRowSnapshot,
+  SurfaceTableCellSnapshot,
+} from "../../api/public-types";
+import { editorSchema } from "./pm-schema";
+import { buildPositionMap, type PositionMap } from "./pm-position-map";
+
+export interface PMStateResult {
+  state: EditorState;
+  positionMap: PositionMap;
+}
+
+export interface MediaPreviewDescriptor {
+  src: string;
+  widthEmu?: number;
+  heightEmu?: number;
+}
+
+/**
+ * Create a ProseMirror EditorState from a runtime surface snapshot.
+ *
+ * The PM document mirrors the snapshot for rendering and input.
+ * It is NOT the canonical source — the runtime owns that.
+ */
+export function createPMStateFromSnapshot(
+  surface: EditorSurfaceSnapshot,
+  selection: SelectionSnapshot,
+  plugins: Plugin[],
+  mediaPreviews: Record<string, MediaPreviewDescriptor> = {},
+  showUnsupportedObjectPreviews = false,
+): PMStateResult {
+  const doc = buildPMDoc(surface, mediaPreviews, showUnsupportedObjectPreviews);
+  const positionMap = buildPositionMap(surface);
+  const pmSelection = createPMSelectionFromSnapshot(doc, positionMap, selection);
+
+  const state = EditorState.create({
+    doc,
+    selection: pmSelection,
+    plugins,
+  });
+
+  return { state, positionMap };
+}
+
+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);
+    }
+
+    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>,
+  showUnsupportedObjectPreviews: boolean,
+): PMNode {
+  const blocks = buildPMBlocks(surface.blocks, mediaPreviews, showUnsupportedObjectPreviews);
+
+  // 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>,
+  showUnsupportedObjectPreviews: boolean,
+): 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,
+          showUnsupportedObjectPreviews,
+        ),
+      );
+    } else if (block.kind === "table") {
+      nodes.push(buildTable(block, mediaPreviews, showUnsupportedObjectPreviews));
+    } else if (block.kind === "sdt_block") {
+      nodes.push(buildSdtBlock(block, mediaPreviews, showUnsupportedObjectPreviews));
+    } 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>,
+  showUnsupportedObjectPreviews: boolean,
+): PMNode {
+  const content: PMNode[] = [];
+  const paragraphLayout = resolveParagraphLayout(block);
+  const tabStops = paragraphLayout.tabStops;
+  let tabIndex = 0;
+  const textSegments = block.segments.filter(
+    (segment): segment is Extract<SurfaceInlineSegment, { kind: "text" }> => segment.kind === "text",
+  );
+  const fullyVanishedParagraph =
+    textSegments.length > 0 &&
+    textSegments.every((segment) => segment.marks?.includes("vanish")) &&
+    block.segments.every((segment) => segment.kind === "text");
+
+  if (fullyVanishedParagraph) {
+  }
+
+  for (const segment of block.segments) {
+    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);
+      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, mediaPreviews, showUnsupportedObjectPreviews);
+      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,
+      numberingInstanceId: block.numbering?.numberingInstanceId ?? null,
+      numberingLevel: block.numbering?.level ?? null,
+      numberingPrefix:
+        (block as typeof block & { numberingPrefix?: string }).numberingPrefix ??
+        null,
+      numberingSuffix:
+        (block as typeof block & { numberingSuffix?: string }).numberingSuffix ??
+        null,
+      alignment: block.alignment ?? null,
+      spacingBefore: paragraphLayout.spacing?.before ?? null,
+      spacingAfter: paragraphLayout.spacing?.after ?? null,
+      lineSpacing: paragraphLayout.spacing?.line ?? null,
+      lineRule: paragraphLayout.spacing?.lineRule ?? null,
+      contextualSpacing: block.contextualSpacing ?? null,
+      listContinuation: listContinuation || null,
+      contextualSpacingBefore: contextualSpacingBefore || null,
+      contextualSpacingAfter: contextualSpacingAfter || null,
+      indentLeft: paragraphLayout.indentation?.left ?? null,
+      indentRight: paragraphLayout.indentation?.right ?? null,
+      indentFirstLine: paragraphLayout.indentation?.firstLine ?? null,
+      indentHanging: paragraphLayout.indentation?.hanging ?? null,
+      numberingMarkerWidth: paragraphLayout.markerLane?.width ?? null,
+      numberingMarkerJustification: paragraphLayout.markerJustification ?? 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,
+      outlineLevel: block.outlineLevel ?? null,
+      bidi: block.bidi ?? null,
+      pageBreakBefore: block.pageBreakBefore ?? null,
+      hiddenTextOnly: fullyVanishedParagraph || null,
+    },
+    content.length > 0 ? Fragment.from(content) : undefined,
+  );
+}
+
+function resolveParagraphLayout(
+  block: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>,
+): {
+  spacing: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>["spacing"];
+  indentation: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>["indentation"];
+  tabStops: Array<{ pos: number; val?: string; leader?: string }>;
+  markerLane: NonNullable<
+    NonNullable<Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>["resolvedNumbering"]>["geometry"]["markerLane"]
+  > | undefined;
+  markerJustification: NonNullable<
+    NonNullable<Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>["resolvedNumbering"]>["geometry"]["markerJustification"]
+  > | undefined;
+} {
+  return {
+    spacing: block.resolvedNumbering?.geometry.spacing ?? block.spacing,
+    indentation: block.resolvedNumbering?.geometry.indentation ?? block.indentation,
+    tabStops: block.resolvedNumbering?.geometry.tabStops ?? block.tabStops ?? [],
+    markerLane: block.resolvedNumbering?.geometry.markerLane,
+    markerJustification: block.resolvedNumbering?.geometry.markerJustification,
+  };
+}
+
+function buildInlineContent(
+  segment: SurfaceInlineSegment,
+  mediaPreviews: Record<string, MediaPreviewDescriptor>,
+  showUnsupportedObjectPreviews: boolean,
+): PMNode[] {
+  switch (segment.kind) {
+    case "text": {
+      if (!segment.text) return [];
+
+      // Build PM marks from segment marks
+      let marks = editorSchema.marks.bold.isInSet([])
+        ? [] // shouldn't happen, just type safety
+        : [];
+
+      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 }));
+      }
+
+      return [editorSchema.text(segment.text, pmMarks.length > 0 ? pmMarks : undefined)];
+    }
+
+    case "hard_break":
+      return [editorSchema.nodes.hard_break.create()];
+
+    case "tab":
+      return [editorSchema.nodes.tab_char.create()];
+
+    case "image":
+      {
+        const preview = mediaPreviews[segment.mediaId];
+      return [
+        editorSchema.nodes.image_atom.create({
+          mediaId: segment.mediaId,
+          altText: segment.altText ?? null,
+          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, showUnsupportedObjectPreviews)];
+
+    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 [];
+  }
+}
+
+function buildTable(
+  block: Extract<SurfaceBlockSnapshot, { kind: "table" }>,
+  mediaPreviews: Record<string, MediaPreviewDescriptor>,
+  showUnsupportedObjectPreviews: boolean,
+): PMNode {
+  const rows: PMNode[] = [];
+  for (const row of block.rows) {
+    const cells: PMNode[] = [];
+    for (const cell of row.cells) {
+      const cellContent = buildPMBlocks(
+        cell.content,
+        mediaPreviews,
+        showUnsupportedObjectPreviews,
+      );
+      // Ensure at least one paragraph in cell (PM requires non-empty)
+      if (cellContent.length === 0) {
+        cellContent.push(editorSchema.nodes.paragraph.create());
+      }
+      const cellNodeType = row.isHeader
+        ? editorSchema.nodes.table_header_cell
+        : editorSchema.nodes.table_cell;
+      cells.push(
+        cellNodeType.create(
+          {
+            colspan: cell.colspan,
+            rowspan: cell.rowspan,
+            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(
+      {
+        gridBefore: row.gridBefore ?? 0,
+        gridAfter: row.gridAfter ?? 0,
+        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),
+  );
+}
+
+function buildSdtBlock(
+  block: Extract<SurfaceBlockSnapshot, { kind: "sdt_block" }>,
+  mediaPreviews: Record<string, MediaPreviewDescriptor>,
+  showUnsupportedObjectPreviews: boolean,
+): PMNode {
+  const children = buildPMBlocks(
+    block.children,
+    mediaPreviews,
+    showUnsupportedObjectPreviews,
+  );
+
+  if (children.length === 0) {
+    children.push(editorSchema.nodes.paragraph.create());
+  }
+
+  return editorSchema.nodes.sdt_block.create(
+    {
+      sdtType: block.sdtType ?? null,
+      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),
+  );
+}
+
+/**
+ * Map an opaque_inline surface segment to a dedicated complex-rendering PM atom
+ * node when the label identifies a known complex content type, or fall back to
+ * the generic opaque_inline node.
+ */
+function buildOpaqueInlineOrComplexAtom(
+  segment: Extract<import("../../api/public-types").SurfaceInlineSegment, { kind: "opaque_inline" }>,
+  showUnsupportedObjectPreviews: boolean,
+): PMNode {
+  const label = segment.label;
+  const detail = segment.detail;
+
+  if (showUnsupportedObjectPreviews && label === "Embedded chart") {
+    return editorSchema.nodes.chart_atom.create({ detail });
+  }
+  if (showUnsupportedObjectPreviews && label === "SmartArt diagram") {
+    return editorSchema.nodes.smartart_atom.create({ detail });
+  }
+  if (showUnsupportedObjectPreviews && (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,
+      geometry: geometryMatch ? geometryMatch[1] : null,
+      detail,
+    });
+  }
+  if (showUnsupportedObjectPreviews && label === "WordArt") {
+    const textMatch = /Text: "([^"]+)"/.exec(detail);
+    const effectMatch = /Effect: ([^.]+)\./.exec(detail);
+    return editorSchema.nodes.wordart_atom.create({
+      text: textMatch ? textMatch[1] : "",
+      geometry: effectMatch ? effectMatch[1] : null,
+      detail,
+    });
+  }
+  if (showUnsupportedObjectPreviews && 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,
+      shapeType: typeMatch ? typeMatch[1] : null,
+      detail,
+    });
+  }
+
+  return editorSchema.nodes.opaque_inline.create({
+    fragmentId: segment.fragmentId,
+    warningId: segment.warningId,
+    label,
+    detail,
+    presentation: segment.presentation ?? "inline-chip",
+  });
+}
+
+function buildOpaqueBlock(
+  block: Extract<SurfaceBlockSnapshot, { kind: "opaque_block" }>,
+): PMNode {
+  return editorSchema.nodes.opaque_block.create({
+    fragmentId: block.fragmentId,
+    warningId: block.warningId,
+    label: block.label,
+    detail: block.detail,
+  });
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}