@beyondwork/docx-react-component 1.0.27 → 1.0.29

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

@@ -1,504 +0,0 @@
-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> = {},
-): PMStateResult {
-  const doc = buildPMDoc(surface, mediaPreviews);
-  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>,
-): 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;
-
-    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 ?? [];
-  let tabIndex = 0;
-
-  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);
-      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: 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,
-      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,
-    },
-    content.length > 0 ? Fragment.from(content) : undefined,
-  );
-}
-
-function buildInlineContent(
-  segment: SurfaceInlineSegment,
-  mediaPreviews: Record<string, MediaPreviewDescriptor>,
-): 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)];
-
-    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>,
-): 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);
-      // Ensure at least one paragraph in cell (PM requires non-empty)
-      if (cellContent.length === 0) {
-        cellContent.push(editorSchema.nodes.paragraph.create());
-      }
-      cells.push(
-        editorSchema.nodes.table_cell.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>,
-): PMNode {
-  const children = buildPMBlocks(block.children, mediaPreviews);
-
-  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" }>,
-): PMNode {
-  const label = segment.label;
-  const detail = segment.detail;
-
-  if (label === "Embedded chart") {
-    return editorSchema.nodes.chart_atom.create({ detail });
-  }
-  if (label === "SmartArt diagram") {
-    return editorSchema.nodes.smartart_atom.create({ 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,
-      geometry: geometryMatch ? geometryMatch[1] : null,
-      detail,
-    });
-  }
-  if (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 (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));
-}

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

@@ -1,168 +0,0 @@
-/**
- * ProseMirror search/highlight plugin for the editor surface.
- *
- * Provides in-document search with optional case sensitivity and regex support.
- * Matched ranges are shown as inline decorations with a configurable highlight color.
- *
- * Usage:
- *   1. Include createSearchPlugin() in the editor plugin list.
- *   2. Call performSearch(state, query, options) to compute matches.
- *   3. Dispatch the results into the plugin state via searchPluginKey meta.
- *   4. Call clearSearch(state, dispatch) to remove all highlights.
- */
-
-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 {
-  buildSearchPattern,
-  createSearchExcerpt,
-  findSearchMatches,
-  searchSecondaryStories,
-  type SecondaryStorySearchResult,
-  type SearchTextOptions,
-} from "../../core/search/search-text.ts";
-
-// ---------------------------------------------------------------------------
-// Public types
-// ---------------------------------------------------------------------------
-
-export interface SearchResult {
-  from: number;
-  to: number;
-  text: string;
-  index: number;
-}
-
-export interface SearchOptions extends PublicSearchOptions, SearchTextOptions {
-  regex?: boolean;
-  highlightColor?: string;
-}
-
-export const DEFAULT_SEARCH_HIGHLIGHT_COLOR = "#fde68a";
-
-// ---------------------------------------------------------------------------
-// Plugin state
-// ---------------------------------------------------------------------------
-
-interface SearchPluginState {
-  results: SearchResult[];
-  highlightColor: string | null;
-}
-
-export const searchPluginKey = new PluginKey<SearchPluginState>("search");
-
-// ---------------------------------------------------------------------------
-// Plugin factory
-// ---------------------------------------------------------------------------
-
-export function createSearchPlugin(): Plugin<SearchPluginState> {
-  return new Plugin<SearchPluginState>({
-    key: searchPluginKey,
-
-    state: {
-      init(): SearchPluginState {
-        return { results: [], highlightColor: null };
-      },
-
-      apply(tr: Transaction, pluginState: SearchPluginState): SearchPluginState {
-        const meta = tr.getMeta(searchPluginKey) as SearchPluginState | undefined;
-        if (meta) return meta;
-        return pluginState;
-      },
-    },
-
-    props: {
-      decorations(state: EditorState): DecorationSet {
-        const pluginState = searchPluginKey.getState(state);
-        if (
-          !pluginState ||
-          pluginState.results.length === 0 ||
-          !pluginState.highlightColor
-        ) {
-          return DecorationSet.empty;
-        }
-
-        const decos = pluginState.results.map((r) =>
-          Decoration.inline(r.from, r.to, {
-            style: `background-color: ${pluginState.highlightColor}; border-radius: 2px;`,
-            class: "search-highlight",
-          }),
-        );
-
-        return DecorationSet.create(state.doc, decos);
-      },
-    },
-  });
-}
-
-// ---------------------------------------------------------------------------
-// Search computation
-// ---------------------------------------------------------------------------
-
-/**
- * Scan all text nodes in the document for matches of `query`.
- * Returns an array of match ranges; does not dispatch anything.
- * To apply highlights, set the results on the plugin via:
- *   view.dispatch(view.state.tr.setMeta(searchPluginKey, { results, highlightColor }))
- */
-export function performSearch(
-  state: EditorState,
-  query: string,
-  options: SearchOptions = {},
-): SearchResult[] {
-  const pattern = buildSearchPattern(query, options);
-  if (!pattern) return [];
-
-  const results: SearchResult[] = [];
-
-  state.doc.descendants((node, pos) => {
-    if (!node.isText || !node.text) return;
-
-    let match: RegExpExecArray | null;
-    pattern.lastIndex = 0;
-    while ((match = pattern.exec(node.text)) !== null) {
-      results.push({
-        from: pos + match.index,
-        to: pos + match.index + match[0].length,
-        text: match[0],
-        index: results.length,
-      });
-
-      if (match[0].length === 0) {
-        pattern.lastIndex += 1;
-      }
-    }
-  });
-
-  return results;
-}
-
-// ---------------------------------------------------------------------------
-// Clear helper (ProseMirror Command signature)
-// ---------------------------------------------------------------------------
-
-/**
- * ProseMirror command that clears all search highlights from the plugin state.
- */
-export function clearSearch(
-  state: EditorState,
-  dispatch?: (tr: Transaction) => void,
-): boolean {
-  if (!dispatch) return true;
-  dispatch(
-    state.tr.setMeta(searchPluginKey, { results: [], highlightColor: null }),
-  );
-  return true;
-}
-
-export {
-  createSearchExcerpt,
-  findSearchMatches,
-  searchSecondaryStories,
-};
-export type { SecondaryStorySearchResult };