Markdown

1import { cn } from "@/lib/utils"
2import { marked } from "marked"
3import { memo, useId, useMemo } from "react"
4import ReactMarkdown, { Components } from "react-markdown"
5import remarkBreaks from "remark-breaks"
6import remarkGfm from "remark-gfm"
7import { CodeBlock, CodeBlockCode } from "./code-block"
8 
9export type MarkdownProps = {
10  children: string
11  id?: string
12  className?: string
13  components?: Partial<Components>
14}
15 
16function parseMarkdownIntoBlocks(markdown: string): string[] {
17  const tokens = marked.lexer(markdown)
18  return tokens.map((token) => token.raw)
19}
20 
21function extractLanguage(className?: string): string {
22  if (!className) return "plaintext"
23  const match = className.match(/language-(\w+)/)
24  return match ? match[1] : "plaintext"
25}
26 
27const INITIAL_COMPONENTS: Partial<Components> = {
28  code: function CodeComponent({ className, children, ...props }) {
29    const isInline =
30      !props.node?.position?.start.line ||
31      props.node?.position?.start.line === props.node?.position?.end.line
32 
33    if (isInline) {
34      return (
35        <span
36          className={cn(
37            "bg-primary-foreground rounded-sm px-1 font-mono text-sm",
38            className
39          )}
40          {...props}
41        >
42          {children}
43        </span>
44      )
45    }
46 
47    const language = extractLanguage(className)
48 
49    return (
50      <CodeBlock className={className}>
51        <CodeBlockCode code={children as string} language={language} />
52      </CodeBlock>
53    )
54  },
55  pre: function PreComponent({ children }) {
56    return <>{children}</>
57  },
58}
59 
60const MemoizedMarkdownBlock = memo(
61  function MarkdownBlock({
62    content,
63    components = INITIAL_COMPONENTS,
64  }: {
65    content: string
66    components?: Partial<Components>
67  }) {
68    return (
69      <ReactMarkdown
70        remarkPlugins={[remarkGfm, remarkBreaks]}
71        components={components}
72      >
73        {content}
74      </ReactMarkdown>
75    )
76  },
77  function propsAreEqual(prevProps, nextProps) {
78    return prevProps.content === nextProps.content
79  }
80)
81 
82MemoizedMarkdownBlock.displayName = "MemoizedMarkdownBlock"
83 
84function MarkdownComponent({
85  children,
86  id,
87  className,
88  components = INITIAL_COMPONENTS,
89}: MarkdownProps) {
90  const generatedId = useId()
91  const blockId = id ?? generatedId
92  const blocks = useMemo(() => parseMarkdownIntoBlocks(children), [children])
93 
94  return (
95    <div className={className}>
96      {blocks.map((block, index) => (
97        <MemoizedMarkdownBlock
98// … truncated