Code-block

1"use client";
2
3import {
4  useLayoutEffect,
5  useState,
6  useMemo,
7  createContext,
8  useContext,
9} from "react";
10import * as React from "react";
11import { mergeProps } from "@base-ui/react/merge-props";
12import { useRender } from "@base-ui/react/use-render";
13import { highlight } from "@/registry/default/code-block/lib/shiki-shared";
14import { stripDiffMarker } from "@/registry/default/code-block/lib/transformers/utils";
15import { cn } from "@/lib/utils";
16import { solidSurface } from "@/registry/default/lib/elevated";
17import { CopyButton } from "@/registry/default/copy-button/copy-button";
18import {
19  SiTypescript,
20  SiJavascript,
21  SiPython,
22} from "@icons-pack/react-simple-icons";
23import type { BundledLanguage } from "shiki/langs";
24import { Tabs, TabsList, TabsTrigger } from "@/registry/default/tabs/tabs";
25import {
26  ScrollArea,
27  type FadeEdges,
28} from "@/registry/default/scroll-area/scroll-area";
29
30import { HugeiconsIcon } from "@hugeicons/react";
31import { ComputerTerminal01Icon } from "@hugeicons/core-free-icons";
32
33interface CodeBlockContextValue {
34  code: string;
35  language: string;
36  nodes: React.ReactElement | undefined;
37  lines: string[];
38  hasFocus: boolean;
39  showDiff: boolean;
40  floatingCopy: boolean;
41}
42
43const CodeBlockContext = createContext<CodeBlockContextValue | null>(null);
44
45function useCodeBlock() {
46  const context = useContext(CodeBlockContext);
47  if (!context) {
48    throw new Error(
49      "CodeBlock subcomponents must be used within a CodeBlock component",
50    );
51  }
52  return context;
53}
54
55type LanguageIconRenderer = React.ComponentType<{
56  size: number;
57  className: string;
58}>;
59
60function renderHugeicon(
61  icon: typeof ComputerTerminal01Icon,
62): LanguageIconRenderer {
63  function HugeLanguageIcon({
64    size,
65    className,
66  }: {
67    size: number;
68    className: string;
69  }) {
70    return (
71      <HugeiconsIcon
72        icon={icon}
73        size={size}
74        className={className}
75        strokeWidth={2}
76      />
77    );
78  }
79  return HugeLanguageIcon;
80}
81
82const LANGUAGE_ICONS: Record<string, LanguageIconRenderer> = {
83  typescript: SiTypescript,
84  ts: SiTypescript,
85  tsx: SiTypescript,
86  javascript: SiJavascript,
87  js: SiJavascript,
88  jsx: SiJavascript,
89  bash: renderHugeicon(ComputerTerminal01Icon),
90  sh: renderHugeicon(ComputerTerminal01Icon),
91  shell: renderHugeicon(ComputerTerminal01Icon),
92  python: SiPython,
93  py: SiPython,
94};
95
96// … truncated