Code Block

1'use client'
2 
3import { cn } from '@/lib/utils'
4import { Check, Copy } from 'lucide-react'
5import React, { memo, useMemo, useState } from 'react'
6 
7import { tokenize, type TokenizeContext } from '@/components/infsh/code-block/tokenizer'
8import { tokenStyles } from '@/components/infsh/code-block/styles'
9import { normalizeLanguage } from '@/components/infsh/code-block/languages'
10import { getTextContent, splitLines, copyToClipboard } from '@/components/infsh/code-block/utils'
11 
12// Re-export types for consumers
13export type { Token, TokenType, LanguageDefinition } from '@/components/infsh/code-block/types'
14export { getLanguage, normalizeLanguage } from '@/components/infsh/code-block/languages'
15 
16/**
17 * Tokenize all lines with context passing between lines
18 * This handles multiline constructs like template literals
19 */
20function tokenizeLines(lines: string[], language: string) {
21  const tokenizedLines: { tokens: ReturnType<typeof tokenize>['tokens'] }[] = []
22  let context: TokenizeContext = {}
23 
24  for (const line of lines) {
25    const result = tokenize(line, language, context)
26    tokenizedLines.push({ tokens: result.tokens })
27    context = result.context
28  }
29 
30  return tokenizedLines
31}
32 
33/**
34 * Renders a single line with pre-computed tokens
35 */
36const HighlightedLine = memo(function HighlightedLine({
37  tokens,
38}: {
39  tokens: ReturnType<typeof tokenize>['tokens']
40}) {
41  return (
42    <>
43      {tokens.map((token, i) =>
44        token.type ? (
45          <span key={i} className={tokenStyles[token.type]}>
46            {token.content}
47          </span>
48        ) : (
49          <span key={i}>{token.content}</span>
50        )
51      )}
52    </>
53  )
54})
55 
56export interface CodeBlockProps {
57  children: React.ReactNode
58  language?: string
59  className?: string
60  /** Show line numbers (default: true) */
61  showLineNumbers?: boolean
62  /** Show copy button (default: true) */
63  showCopyButton?: boolean
64  /** Show language header (default: true) */
65  showHeader?: boolean
66  /** Enable syntax highlighting (default: true) */
67  enableHighlighting?: boolean
68  /** Custom text size class */
69  textSize?: string
70}
71 
72/**
73 * Full-featured code block with syntax highlighting, line numbers, and copy button
74 */
75export const CodeBlock = memo(function CodeBlock({
76  children,
77  language,
78  className,
79  showLineNumbers = true,
80  showCopyButton = true,
81  showHeader = true,
82  enableHighlighting = true,
83  textSize,
84}: CodeBlockProps) {
85  const [copied, setCopied] = useState(false)
86 
87// … truncated