({
children,
language,
}: {
children?: React.ReactNode;
language?: string;
})
| 64 | } |
| 65 | |
| 66 | export function MarkdownCodeBlock({ |
| 67 | children, |
| 68 | language, |
| 69 | }: { |
| 70 | children?: React.ReactNode; |
| 71 | language?: string; |
| 72 | }) { |
| 73 | const [isCopying, setIsCopying] = React.useState(false); |
| 74 | const codeBlockRef = React.useRef<HTMLPreElement | null>(null); |
| 75 | const code = React.useMemo(() => getCodeBlockText(children), [children]); |
| 76 | useSmoothCorners(codeBlockRef); |
| 77 | |
| 78 | const handleCopy = React.useCallback( |
| 79 | async (event: React.MouseEvent<HTMLButtonElement>) => { |
| 80 | event.preventDefault(); |
| 81 | event.stopPropagation(); |
| 82 | setIsCopying(true); |
| 83 | |
| 84 | try { |
| 85 | await copyCodeBlockToClipboard(code); |
| 86 | toast.success("Copied code to clipboard"); |
| 87 | } catch (error) { |
| 88 | console.error("Failed to copy code block", error); |
| 89 | toast.error("Failed to copy code"); |
| 90 | } finally { |
| 91 | setIsCopying(false); |
| 92 | } |
| 93 | }, |
| 94 | [code], |
| 95 | ); |
| 96 | |
| 97 | return ( |
| 98 | <div className="group relative" data-code-block=""> |
| 99 | <pre |
| 100 | ref={codeBlockRef} |
| 101 | className="max-h-[400px] overflow-x-auto overflow-y-auto rounded-2xl border border-border/70 bg-muted/60 px-3 py-1.5 pr-12 shadow-xs" |
| 102 | style={{ borderRadius: "1rem" }} |
| 103 | > |
| 104 | {language && ( |
| 105 | <div className="mb-1 text-xs text-muted-foreground/70"> |
| 106 | {language} |
| 107 | </div> |
| 108 | )} |
| 109 | {children} |
| 110 | </pre> |
| 111 | <Tooltip> |
| 112 | <TooltipTrigger asChild> |
| 113 | <Button |
| 114 | aria-label="Copy code block" |
| 115 | className="absolute right-2 top-2 h-7 w-7 bg-background/80 text-muted-foreground opacity-0 shadow-xs ring-1 ring-border/60 backdrop-blur-sm transition-opacity hover:bg-background hover:text-foreground hover:opacity-100 focus-visible:opacity-100 group-hover:opacity-100 group-focus-within:opacity-100 disabled:opacity-60" |
| 116 | disabled={isCopying} |
| 117 | onClick={handleCopy} |
| 118 | size="icon" |
| 119 | type="button" |
| 120 | variant="ghost" |
| 121 | > |
| 122 | <Copy className="h-4 w-4" /> |
| 123 | <span className="sr-only">Copy code block</span> |
nothing calls this directly
no test coverage detected