Function SearchBar

web/components/file-viewer/SearchBar.tsx:13–246

({ content, containerRef, onClose }: SearchBarProps)

}

export function SearchBar({ content, containerRef, onClose }: SearchBarProps) {
  const [query, setQuery] = useState("");
  const [isRegex, setIsRegex] = useState(false);
  const [caseSensitive, setCaseSensitive] = useState(false);
  const [currentMatch, setCurrentMatch] = useState(0);
  const [totalMatches, setTotalMatches] = useState(0);
  const [hasError, setHasError] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  // Compute matches
  useEffect(() => {
    if (!query) {
      setTotalMatches(0);
      setCurrentMatch(0);
      clearHighlights();
      return;
    }

    try {
      const flags = caseSensitive ? "g" : "gi";
      const pattern = isRegex ? new RegExp(query, flags) : new RegExp(escapeRegex(query), flags);
      const matches = Array.from(content.matchAll(pattern));
      setTotalMatches(matches.length);
      setCurrentMatch(matches.length > 0 ? 1 : 0);
      setHasError(false);
    } catch {
      setHasError(true);
      setTotalMatches(0);
      setCurrentMatch(0);
    }
  }, [query, isRegex, caseSensitive, content]);

  // Apply DOM highlights
  useEffect(() => {
    if (!containerRef.current) return;
    clearHighlights();

    if (!query || hasError || totalMatches === 0) return;

    try {
      const flags = caseSensitive ? "g" : "gi";
      const pattern = isRegex ? new RegExp(query, flags) : new RegExp(escapeRegex(query), flags);

      const walker = document.createTreeWalker(
        containerRef.current,
        NodeFilter.SHOW_TEXT,
        {
          acceptNode: (node) => {
            // Skip nodes inside already-marked elements
            if ((node.parentElement as HTMLElement)?.tagName === "MARK") {
              return NodeFilter.FILTER_REJECT;
            }
            return NodeFilter.FILTER_ACCEPT;
          },