Spaces:
Runtime error
Runtime error
File size: 3,548 Bytes
077865a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | import { memo } from 'react'
import ReactMarkdown, { type Components } from 'react-markdown'
import remarkGfm from 'remark-gfm'
import { cn } from '@/lib/utils'
const components: Components = {
p: ({ children }) => (
<p className="my-2 first:mt-0 last:mb-0 whitespace-pre-wrap wrap-break-word">
{children}
</p>
),
a: ({ children, href }) => (
<a
href={href}
target="_blank"
rel="noreferrer noopener"
className="underline underline-offset-2 decoration-foreground/40 hover:decoration-foreground wrap-break-word"
>
{children}
</a>
),
h1: ({ children }) => (
<h1 className="mt-4 mb-2 text-base font-semibold tracking-tight first:mt-0">{children}</h1>
),
h2: ({ children }) => (
<h2 className="mt-4 mb-2 text-sm font-semibold tracking-tight first:mt-0">{children}</h2>
),
h3: ({ children }) => (
<h3 className="mt-3 mb-1.5 text-sm font-semibold first:mt-0">{children}</h3>
),
h4: ({ children }) => (
<h4 className="mt-3 mb-1.5 text-sm font-semibold first:mt-0">{children}</h4>
),
ul: ({ children }) => (
<ul className="my-2 ml-5 list-disc space-y-1 [&_ul]:my-1 [&_ol]:my-1 first:mt-0 last:mb-0">
{children}
</ul>
),
ol: ({ children }) => (
<ol className="my-2 ml-5 list-decimal space-y-1 [&_ul]:my-1 [&_ol]:my-1 first:mt-0 last:mb-0">
{children}
</ol>
),
li: ({ children }) => <li className="leading-relaxed">{children}</li>,
blockquote: ({ children }) => (
<blockquote className="my-2 border-l-2 border-foreground/20 pl-3 italic text-foreground/80 first:mt-0 last:mb-0">
{children}
</blockquote>
),
hr: () => <hr className="my-3 border-foreground/15" />,
strong: ({ children }) => <strong className="font-semibold">{children}</strong>,
em: ({ children }) => <em className="italic">{children}</em>,
del: ({ children }) => <del className="opacity-70">{children}</del>,
table: ({ children }) => (
<div className="my-2 overflow-x-auto first:mt-0 last:mb-0">
<table className="w-full border-collapse text-xs">{children}</table>
</div>
),
thead: ({ children }) => <thead className="bg-background/40">{children}</thead>,
th: ({ children, style }) => (
<th
style={style}
className="border border-foreground/15 px-2 py-1 text-left font-semibold"
>
{children}
</th>
),
td: ({ children, style }) => (
<td style={style} className="border border-foreground/15 px-2 py-1 align-top">
{children}
</td>
),
code: ({ className, children, ...props }) => {
const isBlock = /language-/.test(className ?? '')
if (isBlock) {
return (
<code className={cn('font-mono text-[12.5px] leading-relaxed', className)} {...props}>
{children}
</code>
)
}
return (
<code
className="rounded bg-background/60 px-1 py-0.5 font-mono text-[0.85em] wrap-break-word"
{...props}
>
{children}
</code>
)
},
pre: ({ children }) => (
<pre className="my-2 overflow-x-auto rounded-lg border bg-background/60 p-3 first:mt-0 last:mb-0">
{children}
</pre>
),
}
interface MarkdownProps {
children: string
className?: string
}
function MarkdownInner({ children, className }: MarkdownProps) {
return (
<div className={cn('text-sm leading-relaxed', className)}>
<ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
{children}
</ReactMarkdown>
</div>
)
}
export const Markdown = memo(MarkdownInner)
|