Function applySearchHighlighting

packages/emcn/src/components/code/code.tsx:845–880

* Applies search highlighting to already syntax-highlighted HTML. * Wraps matches in spans with appropriate highlighting classes. * * @param html - The syntax-highlighted HTML string * @param searchQuery - The search query to highlight * @param currentMatchIndex - Index of the current match (fo

(
  html: string,
  searchQuery: string,
  currentMatchIndex: number,
  matchCounter: { count: number }
)

 * @returns The HTML with search highlighting applied
 */
function applySearchHighlighting(
  html: string,
  searchQuery: string,
  currentMatchIndex: number,
  matchCounter: { count: number }
): string {
  if (!searchQuery.trim()) return html

  const escaped = escapeRegex(searchQuery)
  const regex = new RegExp(`(${escaped})`, 'gi')

  // We need to be careful not to match inside HTML tags
  // Split by HTML tags and only process text parts
  const parts = html.split(/(<[^>]+>)/g)

  return parts
    .map((part) => {
      // If it's an HTML tag, don't modify it
      if (part.startsWith('<') && part.endsWith('>')) {
        return part
      }

      // Process text content
      return part.replace(regex, (match) => {
        const isCurrentMatch = matchCounter.count === currentMatchIndex
        matchCounter.count++

        const bgClass = isCurrentMatch
          ? 'bg-[var(--highlight-search-active)] text-[var(--text-primary)]'
          : 'bg-[#FCD34D]/40 dark:bg-[#FCD34D]/30'

        return `<mark class="${bgClass} rounded-xs" data-search-match>${match}</mark>`
      })
    })
    .join('')
}

/**
 * Props for inner viewer components (with defaults already applied).