"use client"; import * as React from "react"; import { ThemeIcon } from "@/components/registry/primitives/core/theme-icon"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/registry/primitives/core/tooltip"; import { cn } from "@/lib/registry/cn"; /** Supported when using syntax highlighting (code + language). */ const SHIKI_LANGS = [ "typescript", "javascript", "tsx", "jsx", "json", "css", "html", "bash", "shell", "markdown", "yaml", "xml", ] as const; export interface CodeBlockProps extends Omit, "children"> { /** Raw code string. When provided with `language`, enables syntax highlighting (shiki). */ code?: string; /** Child content when not using `code` + `language`. */ children?: React.ReactNode; /** Language identifier (e.g. "typescript", "bash"). Shown as badge; with `code`, enables highlighting. */ language?: string; /** Optional file path or title shown in the header. */ filename?: string; /** Show line numbers. Default false. */ showLineNumbers?: boolean; /** Show copy button. Default true. */ showCopy?: boolean; /** Called after copy (e.g. analytics). */ onCopy?: () => void | Promise; /** Called when copy fails (clipboard permission denied, iframe * without `allow=clipboard-write`, etc.). The component logs to * `console.error` first; this hook lets consumers surface a toast * or fallback UI. */ onCopyError?: (error: unknown) => void; /** Accessible label for the copy button. */ copyLabel?: string; /** Label shown in tooltip after copy. */ copiedLabel?: string; } async function copyToClipboard(value: string) { await navigator.clipboard.writeText(value); } function addLineNumbersToShikiHtml( html: string, lineNumberClass: string, ): string { if (typeof DOMParser === "undefined") return html; const doc = new DOMParser().parseFromString(html, "text/html"); const pre = doc.querySelector("pre"); const code = pre?.querySelector("code"); if (!pre || !code) return html; const codeClass = code.getAttribute("class")?.trim() || ""; const lineEls = code.querySelectorAll(".line"); const rawLines = lineEls.length > 0 ? Array.from(lineEls).map((line) => line.innerHTML) : code.innerHTML.split("\n"); const lines = rawLines.length ? rawLines : [""]; const numbered = lines .map( (line, i) => `

${i + 1}${line || " "}

`, ) .join(""); return `

${numbered}

`; } function CodeBlock({ className, children, code: codeProp, language, filename, showLineNumbers = false, showCopy = true, onCopy, onCopyError, copyLabel = "Copy code", copiedLabel = "Copied!", ...props }: CodeBlockProps) { const [copied, setCopied] = React.useState(false); const [highlightedHtml, setHighlightedHtml] = React.useState( null, ); const [highlightError, setHighlightError] = React.useState(false); const contentRef = React.useRef(null); const setPreRef = React.useCallback((node: HTMLPreElement | null) => { contentRef.current = node; }, []); const setDivRef = React.useCallback((node: HTMLDivElement | null) => { contentRef.current = node; }, []); const isDarkRef = React.useRef(false); const hasHighlighting = Boolean(codeProp && language); const showHeader = Boolean(filename || language); const copyOverContent = showCopy && !showHeader; React.useEffect(() => { const check = () => { isDarkRef.current = document.documentElement.classList.contains("dark"); }; check(); const observer = new MutationObserver(check); observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"], }); return () => observer.disconnect(); }, []); React.useEffect(() => { if (!hasHighlighting || !codeProp || !language) { setHighlightedHtml(null); setHighlightError(false); return; } let cancelled = false; setHighlightError(false); import("shiki").then(({ createHighlighter }) => { if (cancelled) return; createHighlighter({ themes: ["github-light", "github-dark"], langs: [...SHIKI_LANGS], }) .then((highlighter) => { if (cancelled) return; const theme = isDarkRef.current ? "github-dark" : "github-light"; const html = highlighter.codeToHtml(codeProp, { lang: language, theme, }); const withNumbers = showLineNumbers ? addLineNumbersToShikiHtml(html, "text-muted-foreground") : html; setHighlightedHtml(withNumbers); }) .catch(() => { if (!cancelled) setHighlightError(true); }); }); return () => { cancelled = true; }; }, [codeProp, language, showLineNumbers, hasHighlighting]); const handleCopy = async () => { const toCopy = codeProp ?? (typeof children === "string" ? children : (contentRef.current?.textContent ?? "")); try { await copyToClipboard(toCopy); } catch (err) { // Clipboard can fail when the user denies permission, the page // is in an iframe without the right `allow=clipboard-write`, // or Safari rejects a programmatic write outside a user-gesture // window. Surface the failure so consumers can show a toast // instead of the silent "did the click do anything?" state. console.error("[code-block] Clipboard copy failed:", err); onCopyError?.(err); return; } onCopy?.(); setCopied(true); setTimeout(() => setCopied(false), 2000); }; const renderContent = () => { if (hasHighlighting && highlightedHtml && !highlightError) { return (

); } if (hasHighlighting && (highlightError || !highlightedHtml)) { return (

          
            {codeProp}

); } const textContent = typeof children === "string" ? children : undefined; const lines = textContent != null && showLineNumbers ? textContent.split("\n") : null; if (lines != null && lines.length > 0) { const lineNumClass = "table-cell w-8 shrink-0 select-none pr-4 text-right font-mono text-sm text-muted-foreground"; return (

            
              {lines.map((line, i) => (
                
                  
                    {i + 1}
                  
                  {line || "\u00A0"}
                
              ))}

); } return (

        
          {children}

); }; const copyButton = showCopy ? ( {copied ? copiedLabel : copyLabel} ) : null; return (

{showHeader ? (

{filename}

{language && ( {language} )} {copyButton}

) : ( copyButton && (

{copyButton}

) )} {renderContent()}

); } CodeBlock.displayName = "CodeBlock"; function CodeBlockCode({ className, ...props }: React.ComponentProps<"code">) { return (


  );
}
CodeBlockCode.displayName = "CodeBlockCode";

export { CodeBlock, CodeBlockCode };

Code Block

Showcase

Code Block