Code Block

Install it

Source

1"use client";
2import {
3  useCallback,
4  useImperativeHandle,
5  useMemo,
6  useRef,
7  useState,
8} from "react";
9import { TooltipProvider } from "@/components/ui/tooltip";
10import { cn } from "@/lib/utils";
11import {
12  CodeBlockProvider,
13} from "./hooks/use-code-block-context";
14import { useControllableState } from "./hooks/use-controllable-state";
15import { useCopyToClipboard } from "./hooks/use-copy-to-clipboard";
16import { resolveLang } from "./lib/lang-resolution";
17import { joinTerminalLines } from "./lib/terminal-utils";
18import { CodeBlockBodyEdit } from "./parts/code-block-body-edit";
19import { CodeBlockBodyTerminal } from "./parts/code-block-body-terminal";
20import { CodeBlockBodyView } from "./parts/code-block-body-view";
21import { CodeBlockCopyButton } from "./parts/code-block-copy-button";
22import { CodeBlockDownloadButton } from "./parts/code-block-download-button";
23import { CodeBlockExpandButton } from "./parts/code-block-expand-button";
24import { CodeBlockExpandModal } from "./parts/code-block-expand-modal";
25import { CodeBlockFooter } from "./parts/code-block-footer";
26import { CodeBlockHeader } from "./parts/code-block-header";
27import { CodeBlockTrafficLights } from "./parts/code-block-traffic-lights";
28import { CodeBlockWrapButton } from "./parts/code-block-wrap-button";
29import {
30  DEFAULT_LABELS,
31  type CodeBlockHandle,
32  type CodeBlockProps,
33} from "./types";
34 
35const DEFAULT_THEMES = {
36  light: "github-light",
37  dark: "github-dark-default",
38} as const;
39 
40export function CodeBlock(props: CodeBlockProps) {
41  const {
42    value: valueProp,
43    defaultValue,
44    lines,
45    lang: langProp,
46    filename,
47    filenameToLang,
48    mode = "view",
49    readOnly = false,
50    streaming = false,
51    onChange,
52    onSave,
53    tabSize = 4,
54    editorExtensions,
55    header = true,
56    showLanguage = true,
57    showCopy = true,
58    showExpand = false,
59    showWrap = false,
60    showDownload = false,
61    showTrafficLights = false,
62    actions,
63    renderHeader,
64    renderExpandModal,
65    footer,
66    showLineNumbers,
67    wrap: wrapProp,
68    highlightedLines,
69    annotations,
70    renderAnnotation,
71    maxLines,
72    expanded: expandedProp,
73    defaultExpanded,
74    onExpandedChange,
75    onWrapChange,
76    onLineClick,
77    onCopy,
78    onDownload,
79    themes,
80    maxHeight,
81    emptyMessage,
82    className,
83    style,
84    ariaLabel,
85    labels: labelsProp,
86    ref,
87  } = props;
88 
89  // Resolved values
90  const labels = useMemo(
91    () => ({ ...DEFAULT_LABELS, ...(labelsProp ?? {}) }),
92// … truncated

What it pulls in

npm packages

• shiki@^4.0.2
• @codemirror/state@^6.6.0
• @codemirror/view@^6.41.1
• @codemirror/commands@^6.10.3
• @codemirror/language@^6.12.3
• @codemirror/autocomplete@^6.20.1
• @lezer/highlight@^1.2.3
• @codemirror/lang-javascript@^6.2.5
• @codemirror/lang-json@^6.0.2
• @codemirror/lang-python@^6.2.1
• @codemirror/lang-html@^6.4.11
• @codemirror/lang-css@^6.3.1
• @codemirror/lang-markdown@^6.5.0
• lucide-react@^1.11.0

Other registry items

• button
• dialog
• tooltip

Files it writes

• src/registry/components/code/code-block/code-block.tsx
• src/registry/components/code/code-block/index.ts
• src/registry/components/code/code-block/types.ts
• src/registry/components/code/code-block/parts/code-block-header.tsx
• src/registry/components/code/code-block/parts/code-block-filename.tsx
• src/registry/components/code/code-block/parts/code-block-lang-pill.tsx
• src/registry/components/code/code-block/parts/code-block-copy-button.tsx
• src/registry/components/code/code-block/parts/code-block-expand-button.tsx
• src/registry/components/code/code-block/parts/code-block-wrap-button.tsx
• src/registry/components/code/code-block/parts/code-block-download-button.tsx
• src/registry/components/code/code-block/parts/code-block-traffic-lights.tsx
• src/registry/components/code/code-block/parts/code-block-footer.tsx
• src/registry/components/code/code-block/parts/code-block-empty.tsx
• src/registry/components/code/code-block/parts/code-block-streaming-cursor.tsx
• src/registry/components/code/code-block/parts/code-block-collapse-fade.tsx
• src/registry/components/code/code-block/parts/code-block-annotation-marker.tsx
• src/registry/components/code/code-block/parts/code-block-line-numbers.tsx
• src/registry/components/code/code-block/parts/code-block-body-view.tsx
• src/registry/components/code/code-block/parts/code-block-body-edit.tsx
• src/registry/components/code/code-block/parts/code-block-body-terminal.tsx
• src/registry/components/code/code-block/parts/code-block-expand-modal.tsx
• src/registry/components/code/code-block/hooks/use-code-block-context.tsx
• src/registry/components/code/code-block/hooks/use-controllable-state.ts
• src/registry/components/code/code-block/hooks/use-copy-to-clipboard.ts
• src/registry/components/code/code-block/hooks/use-shiki-highlighter.ts
• src/registry/components/code/code-block/hooks/use-code-mirror.ts
• src/registry/components/code/code-block/hooks/use-resolved-theme.ts
• src/registry/components/code/code-block/lib/lang-resolution.ts
• src/registry/components/code/code-block/lib/line-utils.ts
• src/registry/components/code/code-block/lib/terminal-utils.ts
• src/registry/components/code/code-block/lib/shiki-bundle.ts
• src/registry/components/code/code-block/lib/codemirror-langs.ts
• src/registry/components/code/code-block/lib/codemirror-theme.ts
• src/registry/components/code/code-block/lib/streaming-cache.ts