Code Block

1"use client";2​3import * as React from "react";4import { BracketsCurlyIcon, CheckIcon, CopyIcon } from "@phosphor-icons/react/ssr";5​6import { cn } from "@/lib/utils";7​8// The event catalog's code block (Figma 427:2715, Webhooks: Signature headers, Payload example): 8px corners and the9// editor's gray edge, a 40px gray head with the language (yellow braces for JSON) and a purple copy glyph, then the10// off-white body in the system monospace at 14px on 20px lines, line numbers in the editor's teal (the first line's11// darker), and the Light+ colors: red keys, blue values and braces. Long lines scroll, or wrap with `wrap`.12function CodeBlock({ className, ...props }: React.ComponentProps<"figure">) {13  return <figure data-slot="code-block" className={cn("group/code-block m-0 flex w-full min-w-0 flex-col overflow-hidden rounded-control border border-line-code bg-code text-code-text", className)} {...props} />;14}15​16function CodeBlockHeader({ className, ...props }: React.ComponentProps<"div">) {17  return <div data-slot="code-block-header" className={cn("flex h-10 min-w-0 shrink-0 items-center gap-2 border-b border-line-code bg-code-head pr-1.5 pl-3", className)} {...props} />;18}19​20function CodeBlockTitle({ className, children, language, ...props }: React.ComponentProps<"figcaption"> & { language?: string }) {21  return (22    <figcaption data-slot="code-block-title" className={cn("flex min-w-0 items-center gap-2 font-sans text-body leading-tight text-code-head-fg [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className)} {...props}>23      {language === "json" && <BracketsCurlyIcon aria-hidden className="text-code-brace" />}24      <span className="truncate">{children}</span>25    </figcaption>26  );27}28​29function CodeBlockActions({ className, ...props }: React.ComponentProps<"div">) {30  return <div data-slot="code-block-actions" className={cn("ml-auto flex shrink-0 items-center gap-1", className)} {...props} />;31}32​33function CodeBlockCopyButton({ value, className, ...props }: Omit<React.ComponentProps<"button">, "value" | "children"> & { value: string }) {34  const [state, setState] = React.useState<"idle" | "copied" | "failed">("idle");35  React.useEffect(() => {36    if (state === "idle") return;37    const timeout = setTimeout(() => setState("idle"), 2000);38    return () => clearTimeout(timeout);39  }, [state]);40  return (41    <>42      <button43        type="button"44        data-slot="code-block-copy-button"45        data-copied={state === "copied" || undefined}46        aria-label={state === "copied" ? "Copied" : "Copy code"}47        onClick={() => navigator.clipboard.writeText(value).then(() => setState("copied"), () => setState("failed"))}48        className={cn("inline-flex size-8 items-center justify-center rounded-control text-fg-brand outline-none transition-[background-color,scale] duration-150 ease-out hover:bg-surface active:scale-97 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring motion-reduce:transition-none", className)}49        {...props}50      >51        {state === "copied" ? <CheckIcon className="size-4.5" weight="bold" /> : <CopyIcon className="size-4.5" weight="duotone" />}52      </button>53      <span aria-live="polite" className="sr-only">54        {state === "copied" ? "Copied" : state === "failed" ? "Copy failed. Select the code and copy it." : ""}55      </span>56    </>57  );58}59​60type Kind = "key" | "string" | "punct" | "keyword" | "comment" | "number" | "function" | "type" | "tag" | "attr" | "plain";61const COLOR: Record<Kind, string | undefined> = {62  key: "text-code-key",63  string: "text-code-string",64  punct: "text-code-punct",65  keyword: "text-code-keyword",66  comment: "text-code-comment",67  number: "text-code-number",68  function: "text-code-function",69  type: "text-code-type",70  tag: "text-code-tag",71  attr: "text-code-attr",72  plain: undefined,73};74​75const KEYWORDS = /^(?:import|from|export|default|function|return|const|let|var|if|else|for|of|in|new|type|interface|extends|as|async|await|true|false|null|undefined|class|this|throw|try|catch)$/;76​77/** Splits code into colored runs for the Light+ theme. JSON keys are red and values blue; in scripts strings are red. */78function tokenize(code: string, language: string): { kind: Kind; text: string }[] {79  const out: { kind: Kind; text: string }[] = [];80  const push = (kind: Kind, text: string) => (text ? out.push({ kind, text }) : undefined);81  if (language === "json") {82    for (const m of code.matchAll(/("(?:\\.|[^"\\])*")(\s*:)?|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|(true|false|null)|([{}[\]])|([^"{}[\]\d\-tfn]+|[\s\S])/g)) {83      if (m[1]) {84        push(m[2] ? "key" : "string", m[1]);85        push("plain", m[2] ?? "");86      } else if (m[3]) push("number", m[3]);87      else if (m[4]) push("keyword", m[4]);88      else if (m[5]) push("punct", m[5]);89      else push("plain", m[0]);90    }91    return out;92  }93  if (language === "bash" || language === "sh" || language === "shell") {94    for (const line of code.split(/(\n)/)) {95      if (line === "\n") push("plain", line);96      else if (/^\s*#/.test(line)) push("comment", line);97      else98        for (const [i, m] of [...line.matchAll(/("[^"]*"|'[^']*')|(\s--?[\w-]+)|(\S+|\s+)/g)].entries()) {99          if (m[1]) push("string", m[1]);100          else if (m[2]) push("keyword", m[2]);101          else push(i === 0 || (i === 1 && /^\s/.test(line)) ? "function" : "plain", m[0]);102        }103    }104    return out;105  }106  const pattern = /(\/\/[^\n]*|\/\*[\s\S]*?\*\/)|("(?:\\.|[^"\\\n])*"|'(?:\\.|[^'\\\n])*'|`(?:\\.|[^`\\])*`)|(<\/?)([A-Za-z][\w.]*)|([A-Za-z_$][\w-]*)(=)|\b(\d+(?:\.\d+)?)\b|([A-Za-z_$][\w$]*)(?=\s*\()|([A-Z][\w$]*)|([A-Za-z_$][\w$]*)|([\s\S])/g;107  for (const m of code.matchAll(pattern)) {108    if (m[1]) push("comment", m[1]);109    else if (m[2]) push("string", m[2]);110    else if (m[3]) {111      push("punct", m[3]);112      push("tag", m[4]);113    } else if (m[5]) {114      push("attr", m[5]);115      push("plain", m[6]);116    } else if (m[7]) push("number", m[7]);117    else if (m[8]) push(KEYWORDS.test(m[8]) ? "keyword" : "function", m[8]);118    else if (m[9]) push("type", m[9]);119    else if (m[10]) push(KEYWORDS.test(m[10]) ? "keyword" : "plain", m[10]);120    else push("plain", m[11]);121  }122  return out.map((t) => (t.kind === "string" ? { ...t, kind: "key" as Kind } : t));123}124​125/** Draws the editor's indent guides: each two spaces of leading indentation becomes a cell with a hairline in it. */126function withGuides(line: { kind: Kind; text: string }[]): { kind: Kind | "guide"; text: string }[] {127  const first = line[0];128  const indent = first?.kind === "plain" ? (first.text.match(/^ +/)?.[0].length ?? 0) : 0;129  const levels = Math.floor(indent / 2);130  if (!levels) return line;131  const rest = first.text.slice(levels * 2);132  return [...Array.from({ length: levels }, () => ({ kind: "guide" as const, text: "  " })), ...(rest ? [{ kind: "plain" as Kind, text: rest }] : []), ...line.slice(1)];133}134​135/**136 * The code itself. Pass the text as `code` and its `language` (json, tsx, ts, css, bash); line numbers show by default.137 * `wrap` breaks long lines instead of scrolling; `maxHeight` scrolls a long file inside the block.138 */139function CodeBlockContent({ code, language = "tsx", lineNumbers = true, wrap = false, className, ...props }: Omit<React.ComponentProps<"pre">, "children"> & { code: string; language?: string; lineNumbers?: boolean; wrap?: boolean }) {140  const lines = React.useMemo(() => {141    const rows: { kind: Kind; text: string }[][] = [[]];142    for (const token of tokenize(code.replace(/\n$/, ""), language)) {143      const parts = token.text.split("\n");144      parts.forEach((part, i) => {145        if (i > 0) rows.push([]);146        if (part) rows[rows.length - 1].push({ kind: token.kind, text: part });147      });148    }149    return rows;150  }, [code, language]);151  return (152    <pre153      data-slot="code-block-content"154      tabIndex={0}155      className={cn("m-0 overflow-auto bg-code py-3 font-code text-body leading-5 outline-none [scrollbar-width:thin] [tab-size:2] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring", className)}156      {...props}157    >158      <code className={cn("grid", wrap ? "grid-cols-[minmax(0,1fr)]" : "min-w-max")}>159        {lines.map((line, i) => (160          <span key={i} className={cn("grid", lineNumbers ? "grid-cols-[3rem_minmax(0,1fr)]" : "grid-cols-[minmax(0,1fr)] pl-4", wrap && "min-w-0")}>161            {lineNumbers && (162              <span aria-hidden className={cn("pr-4 text-right select-none", i === 0 ? "text-code-line-active" : "text-code-line")}>163                {i + 1}164              </span>165            )}166            <span className={cn("pr-4", wrap ? "whitespace-pre-wrap [overflow-wrap:anywhere]" : "whitespace-pre")}>167              {line.length ? withGuides(line).map((t, j) =>168                t.kind === "guide" ? (169                  <span key={j} className="relative inline-block w-[2ch]">170                    <span aria-hidden className="absolute inset-y-0 left-[1ch] w-px bg-line-code" />171                    {"  "}172                  </span>173                ) : (174                  <span key={j} className={COLOR[t.kind]}>175                    {t.text}176                  </span>177                ),178              ) : "\u200b"}179            </span>180          </span>181        ))}182      </code>183    </pre>184  );185}186​187export { CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockHeader, CodeBlockTitle, tokenize };