Code Block

1"use client";
2 
3import {
4  useState,
5  useCallback,
6  useEffect,
7  createContext,
8  use,
9  type ReactNode,
10} from "react";
11import {
12  createHighlighter,
13  createJavaScriptRegexEngine,
14  type Highlighter,
15} from "shiki";
16import { Copy, Check, ChevronDown, ChevronUp } from "lucide-react";
17import pierreDarkTheme from "../shared/pierre-dark-theme.js";
18import pierreLightTheme from "../shared/pierre-light-theme.js";
19import type { CodeBlockLineNumbersMode, CodeBlockProps } from "./schema";
20import { useCopyToClipboard } from "../shared/use-copy-to-clipboard";
21 
22import { Button, cn, Collapsible, CollapsibleTrigger } from "./_adapter";
23 
24const COPY_ID = "codeblock-code";
25const MAX_HTML_CACHE_ENTRIES = 64;
26 
27let highlighterPromise: Promise<Highlighter> | null = null;
28 
29function getHighlighter(): Promise<Highlighter> {
30  if (!highlighterPromise) {
31    highlighterPromise = createHighlighter({
32      themes: [pierreDarkTheme as never, pierreLightTheme as never],
33      langs: [],
34      engine: createJavaScriptRegexEngine(),
35    });
36  }
37  return highlighterPromise;
38}
39 
40const htmlCache = new Map<string, string>();
41 
42function getCacheKey(
43  code: string,
44  language: string,
45  theme: string,
46  lineNumbers: CodeBlockLineNumbersMode,
47  highlightLines?: number[],
48): string {
49  return JSON.stringify({
50    code,
51    language,
52    theme,
53    lineNumbers,
54    highlightLines: highlightLines ?? null,
55  });
56}
57 
58function setCachedHtml(cacheKey: string, html: string): void {
59  if (htmlCache.has(cacheKey)) {
60    htmlCache.set(cacheKey, html);
61    return;
62  }
63 
64  if (htmlCache.size >= MAX_HTML_CACHE_ENTRIES) {
65    const oldestKey = htmlCache.keys().next().value;
66    if (typeof oldestKey === "string") {
67      htmlCache.delete(oldestKey);
68    }
69  }
70 
71  htmlCache.set(cacheKey, html);
72}
73 
74const LANGUAGE_DISPLAY_NAMES: Record<string, string> = {
75  typescript: "TypeScript",
76  javascript: "JavaScript",
77  python: "Python",
78  tsx: "TSX",
79  jsx: "JSX",
80  json: "JSON",
81  bash: "Bash",
82  shell: "Shell",
83  css: "CSS",
84  html: "HTML",
85  markdown: "Markdown",
86  sql: "SQL",
87  yaml: "YAML",
88  go: "Go",
89  rust: "Rust",
90  text: "Plain Text",
91};
92 
93function getLanguageDisplayName(lang: string): string {
94  return LANGUAGE_DISPLAY_NAMES[lang.toLowerCase()] || lang.toUpperCase();
95}
96 
97function getSystemTheme(): "light" | "dark" {
98  if (typeof window === "undefined") return "light";
99  return window.matchMedia?.("(prefers-color-scheme: dark)").matches
100    ? "dark"
101    : "light";
102}
103 
104// … truncated