Function applySearchHighlightingToLine

packages/emcn/src/components/code/code.tsx:761–794

* Applies search highlighting to a single line for virtualized rendering. * * @param html - The syntax-highlighted HTML string * @param searchQuery - The search query to highlight * @param currentMatchIndex - Index of the current match (for distinct highlighting) * @param globalMatchOffset - Cu

(
  html: string,
  searchQuery: string,
  currentMatchIndex: number,
  globalMatchOffset: number
)

 * @returns Object containing highlighted HTML and count of matches in this line
 */
function applySearchHighlightingToLine(
  html: string,
  searchQuery: string,
  currentMatchIndex: number,
  globalMatchOffset: number
): { html: string; matchesInLine: number } {
  if (!searchQuery.trim()) return { html, matchesInLine: 0 }

  const escaped = escapeRegex(searchQuery)
  const regex = new RegExp(`(${escaped})`, 'gi')
  const parts = html.split(/(<[^>]+>)/g)
  let matchesInLine = 0

  const result = parts
    .map((part) => {
      if (part.startsWith('<') && part.endsWith('>')) {
        return part
      }
      return part.replace(regex, (match) => {
        const globalIndex = globalMatchOffset + matchesInLine
        const isCurrentMatch = globalIndex === currentMatchIndex
        matchesInLine++

        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('')

  return { html: result, matchesInLine }
}

/**
 * Props for the Code.Viewer component (readonly code display).