@beyondwork/docx-react-component 1.0.11 → 1.0.13

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

@@ -1,5 +1,5 @@
 import { Fragment, type Node as PMNode } from "prosemirror-model";
-import { EditorState, type Plugin, TextSelection } from "prosemirror-state";
+import { EditorState, type Plugin, Selection, TextSelection } from "prosemirror-state";
 
 import type {
   EditorSurfaceSnapshot,
@@ -43,12 +43,13 @@ export function createPMStateFromSnapshot(
     positionMap.pmDocSize - 1,
   );
 
-  let pmSelection: TextSelection;
+  let pmSelection: Selection;
   try {
-    pmSelection = TextSelection.create(doc, pmAnchor, pmHead);
+    pmSelection = TextSelection.between(doc.resolve(pmAnchor), doc.resolve(pmHead));
   } catch {
-    // If the position is invalid (e.g., inside an atom), fall back to start
-    pmSelection = TextSelection.create(doc, 1);
+    // 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 state = EditorState.create({
@@ -87,10 +88,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 +113,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 +146,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 }));
       }
@@ -194,6 +259,7 @@ function buildTable(
             rowspan: cell.rowspan,
             gridSpan: cell.gridSpan,
             verticalMerge: cell.verticalMerge,
+            backgroundColor: cell.backgroundColor ?? null,
           },
           Fragment.from(cellContent),
         ),

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

@@ -15,6 +15,8 @@ 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";
+
 // ---------------------------------------------------------------------------
 // Public types
 // ---------------------------------------------------------------------------
@@ -26,12 +28,14 @@ export interface SearchResult {
   index: number;
 }
 
-export interface SearchOptions {
+export interface SearchOptions extends PublicSearchOptions {
   caseSensitive?: boolean;
   regex?: boolean;
   highlightColor?: string;
 }
 
+export const DEFAULT_SEARCH_HIGHLIGHT_COLOR = "#fde68a";
+
 // ---------------------------------------------------------------------------
 // Plugin state
 // ---------------------------------------------------------------------------
@@ -102,21 +106,8 @@ export function performSearch(
   query: string,
   options: SearchOptions = {},
 ): SearchResult[] {
-  if (!query) return [];
-
-  const { caseSensitive = false, regex = false } = options;
-
-  let pattern: RegExp;
-  try {
-    if (regex) {
-      pattern = new RegExp(query, caseSensitive ? "g" : "gi");
-    } else {
-      const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-      pattern = new RegExp(escaped, caseSensitive ? "g" : "gi");
-    }
-  } catch {
-    return [];
-  }
+  const pattern = buildSearchPattern(query, options);
+  if (!pattern) return [];
 
   const results: SearchResult[] = [];
 
@@ -132,12 +123,81 @@ export function performSearch(
         text: match[0],
         index: results.length,
       });
+
+      if (match[0].length === 0) {
+        pattern.lastIndex += 1;
+      }
     }
   });
 
   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)
 // ---------------------------------------------------------------------------

package/src/ui-tailwind/editor-surface/tw-prosemirror-surface.tsx

@@ -1,11 +1,24 @@
-import React, { type FocusEventHandler, useEffect, useMemo, useRef } from "react";
+import React, {
+  forwardRef,
+  type FocusEventHandler,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from "react";
 import { EditorView } from "prosemirror-view";
 
 import type {
   EditorUser,
   RuntimeRenderSnapshot,
+  SearchOptions,
+  SearchResultSnapshot,
   SelectionSnapshot,
 } from "../../api/public-types";
+import {
+  getTableSelectionDescriptor,
+  type TableSelectionDescriptor,
+} from "../../runtime/table-commands.ts";
 import {
   createCommentDecorationModel,
   type MarkupDisplay,
@@ -18,6 +31,14 @@ import {
 } from "./pm-command-bridge";
 import { buildDecorations } from "./pm-decorations";
 import type { PositionMap } from "./pm-position-map";
+import {
+  clearSearch as clearSearchPlugin,
+  createSearchExcerpt,
+  createSearchPlugin,
+  DEFAULT_SEARCH_HIGHLIGHT_COLOR,
+  performSearch,
+  searchPluginKey,
+} from "./search-plugin";
 import { tableNodeViews } from "./tw-table-node-view";
 
 /**
@@ -43,7 +64,16 @@ export interface TwProseMirrorSurfaceProps {
   onRevisionActivated?: (revisionId: string) => void;
 }
 
-export function TwProseMirrorSurface(props: TwProseMirrorSurfaceProps) {
+export interface TwProseMirrorSurfaceRef {
+  search(query: string, options?: SearchOptions): SearchResultSnapshot[];
+  clearSearch(): void;
+  getTableSelection(): TableSelectionDescriptor | null;
+}
+
+export const TwProseMirrorSurface = forwardRef<
+  TwProseMirrorSurfaceRef,
+  TwProseMirrorSurfaceProps
+>(function TwProseMirrorSurface(props, ref) {
   const {
     currentUser,
     snapshot,
@@ -61,6 +91,7 @@ export function TwProseMirrorSurface(props: TwProseMirrorSurfaceProps) {
   const viewRef = useRef<EditorView | null>(null);
   const positionMapRef = useRef<PositionMap | null>(null);
   const callbacksRef = useRef<CommandBridgeCallbacks | null>(null);
+  const activeSearchRef = useRef<{ query: string; options: SearchOptions } | null>(null);
 
   // Keep callbacks ref up to date (avoids stale closures in PM plugins)
   callbacksRef.current = {
@@ -91,18 +122,21 @@ export function TwProseMirrorSurface(props: TwProseMirrorSurfaceProps) {
 
   // Create PM plugins (stable across renders — callbacks accessed via ref)
   const plugins = useMemo(() => {
-    return createCommandBridgePlugins({
-      onInsertText: (text) => callbacksRef.current?.onInsertText(text),
-      onDeleteBackward: () => callbacksRef.current?.onDeleteBackward(),
-      onDeleteForward: () => callbacksRef.current?.onDeleteForward(),
-      onSplitParagraph: () => callbacksRef.current?.onSplitParagraph(),
-      onInsertHardBreak: () => callbacksRef.current?.onInsertHardBreak(),
-      onInsertTab: () => callbacksRef.current?.onInsertTab(),
-      onUndo: () => callbacksRef.current?.onUndo(),
-      onRedo: () => callbacksRef.current?.onRedo(),
-      onSelectionChange: (sel) => callbacksRef.current?.onSelectionChange(sel),
-      getPositionMap: () => callbacksRef.current?.getPositionMap() ?? null,
-    });
+    return [
+      ...createCommandBridgePlugins({
+        onInsertText: (text) => callbacksRef.current?.onInsertText(text),
+        onDeleteBackward: () => callbacksRef.current?.onDeleteBackward(),
+        onDeleteForward: () => callbacksRef.current?.onDeleteForward(),
+        onSplitParagraph: () => callbacksRef.current?.onSplitParagraph(),
+        onInsertHardBreak: () => callbacksRef.current?.onInsertHardBreak(),
+        onInsertTab: () => callbacksRef.current?.onInsertTab(),
+        onUndo: () => callbacksRef.current?.onUndo(),
+        onRedo: () => callbacksRef.current?.onRedo(),
+        onSelectionChange: (sel) => callbacksRef.current?.onSelectionChange(sel),
+        getPositionMap: () => callbacksRef.current?.getPositionMap() ?? null,
+      }),
+      createSearchPlugin(),
+    ];
   }, []);
 
   // Create or update PM view whenever surface becomes available or changes.
@@ -148,6 +182,13 @@ export function TwProseMirrorSurface(props: TwProseMirrorSurfaceProps) {
       });
       viewRef.current.updateState(state);
     }
+
+    if (activeSearchRef.current) {
+      applySearch(
+        activeSearchRef.current.query,
+        activeSearchRef.current.options,
+      );
+    }
   }, [snapshot.revisionToken, surface, commentModel, revisionModel, markupDisplay, canEdit]);
 
   // Cleanup on unmount
@@ -158,6 +199,90 @@ export function TwProseMirrorSurface(props: TwProseMirrorSurfaceProps) {
     };
   }, []);
 
+  useImperativeHandle(
+    ref,
+    () => ({
+      search: (query, options = {}) => {
+        const normalizedQuery = query.trim();
+        if (!normalizedQuery) {
+          activeSearchRef.current = null;
+          clearLiveSearch();
+          return [];
+        }
+
+        activeSearchRef.current = { query: normalizedQuery, options };
+        return applySearch(normalizedQuery, options);
+      },
+      clearSearch: () => {
+        activeSearchRef.current = null;
+        clearLiveSearch();
+      },
+      getTableSelection: () => {
+        const view = viewRef.current;
+        if (!view) {
+          return null;
+        }
+        return getTableSelectionDescriptor(view.state);
+      },
+    }),
+    [snapshot.selection, snapshot.surface],
+  );
+
+  function applySearch(query: string, options: SearchOptions): SearchResultSnapshot[] {
+    const view = viewRef.current;
+    const positionMap = positionMapRef.current;
+    if (!view || !positionMap) {
+      return [];
+    }
+
+    const rawResults = performSearch(view.state, query, options).slice(
+      0,
+      options.limit ?? Number.POSITIVE_INFINITY,
+    );
+    view.dispatch(
+      view.state.tr.setMeta(searchPluginKey, {
+        results: rawResults,
+        highlightColor: DEFAULT_SEARCH_HIGHLIGHT_COLOR,
+      }),
+    );
+
+    const activeResultIndex = getActiveSearchResultIndex(
+      rawResults,
+      (position) => positionMap.pmToRuntime(position),
+      snapshot.selection,
+    );
+    const plainText = snapshot.surface?.plainText ?? "";
+    return rawResults.map((result, index) => {
+      const runtimeFrom = positionMap.pmToRuntime(result.from);
+      const runtimeTo = positionMap.pmToRuntime(result.to);
+      return {
+        resultId: `search-result-${index}`,
+        anchor: {
+          kind: "range",
+          from: runtimeFrom,
+          to: runtimeTo,
+          assoc: {
+            start: -1,
+            end: 1,
+          },
+        },
+        excerpt: createSearchExcerpt(plainText, runtimeFrom, runtimeTo),
+        isActive: index === activeResultIndex,
+      };
+    });
+  }
+
+  function clearLiveSearch(): void {
+    const view = viewRef.current;
+    if (!view) {
+      return;
+    }
+
+    clearSearchPlugin(view.state, (tr) => {
+      view.dispatch(tr);
+    });
+  }
+
   const fontClass =
     markupDisplay === "clean"
       ? "font-[family-name:var(--font-legal-sans)]"
@@ -212,4 +337,27 @@ export function TwProseMirrorSurface(props: TwProseMirrorSurfaceProps) {
       ) : null}
     </section>
   );
+});
+
+function getActiveSearchResultIndex(
+  results: Array<{ from: number; to: number }>,
+  toRuntimePosition: (position: number) => number,
+  selection: SelectionSnapshot,
+): number {
+  if (results.length === 0) {
+    return -1;
+  }
+
+  const selectionFrom = Math.min(selection.anchor, selection.head);
+  const selectionTo = Math.max(selection.anchor, selection.head);
+  const activeIndex = results.findIndex((result) => {
+    const from = toRuntimePosition(result.from);
+    const to = toRuntimePosition(result.to);
+    if (selectionFrom === selectionTo) {
+      return selectionFrom >= from && selectionFrom <= to;
+    }
+    return selectionFrom < to && selectionTo > from;
+  });
+
+  return activeIndex >= 0 ? activeIndex : 0;
 }