@beyondwork/docx-react-component 1.0.12 → 1.0.14

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;
 }

package/src/ui-tailwind/tw-review-workspace.tsx

@@ -27,6 +27,7 @@ export interface TwReviewWorkspaceProps {
   activeRevisionId?: string;
   showTrackedChanges: boolean;
   selectionPreview?: string | null;
+  addCommentDisabledReason?: string;
   onViewModeChange: (value: ViewMode) => void;
   onActiveRailTabChange: (value: ReviewRailTab) => void;
   onShowTrackedChangesChange: (show: boolean) => void;
@@ -92,6 +93,8 @@ export function TwReviewWorkspace(props: TwReviewWorkspaceProps) {
                     <TwSelectionToolbar
                       selectionPreview={props.selectionPreview}
                       readOnly={snapshot.readOnly}
+                      canAddComment={props.capabilities?.canAddComment}
+                      disabledReason={props.addCommentDisabledReason}
                       onAddComment={props.onAddComment}
                     />
                   </div>