import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import type { Components } from 'react-markdown'
interface DocContentProps {
content: string
onReferenceClick: (ref: string) => void
}
export const DocContent = ({ content, onReferenceClick }: DocContentProps) => {
if (!content) {
return (
)
}
const components: Components = {
a: ({ href, children }) => {
if (href && (href.startsWith('./') || href.startsWith('../'))) {
return (
)
}
return (
{children}
)
},
code: ({ className, children, ...props }) => {
const match = /language-(\w+)/.exec(className || '')
if (match) {
return (
{children}
)
}
return (
{children}
)
},
pre: ({ children }) => (
{children}
),
table: ({ children }) => (
),
thead: ({ children }) => (
{children}
),
th: ({ children }) => (
{children}
|
),
td: ({ children }) => (
{children}
|
),
tr: ({ children }) => (
{children}
),
h1: ({ children }) => (
{children}
),
h2: ({ children }) => (
{children}
),
h3: ({ children }) => (
{children}
),
h4: ({ children }) => (
{children}
),
p: ({ children }) => (
{children}
),
ul: ({ children }) => (
),
ol: ({ children }) => (
{children}
),
li: ({ children }) => (
{children}
),
blockquote: ({ children }) => (
{children}
),
hr: () => (
),
strong: ({ children }) => (
{children}
),
}
return (
)
}