36 lines
961 B
TypeScript
36 lines
961 B
TypeScript
import React, { useEffect, useState } from 'react'
|
|
import Markdoc, { type RenderableTreeNode } from '@markdoc/markdoc'
|
|
import { toMarkdocTree } from '../lib/markdoc'
|
|
import { CodeBlock } from './markdoc/CodeBlock.tsx'
|
|
|
|
export const MarkdocContent: React.FC<{
|
|
content: string
|
|
}> = ({ content }) => {
|
|
/* 注意一下这个元件是动态的 */
|
|
const [tree, setTree] = useState<any>(null)
|
|
|
|
useEffect(() => {
|
|
let active = true
|
|
toMarkdocTree(content).then((result) => {
|
|
if (active) setTree(result)
|
|
})
|
|
return () => {
|
|
active = false
|
|
}
|
|
}, [content])
|
|
|
|
if (!tree) return <div className="loading">渲染中... (๑•̀ㅂ•́)و✧</div>
|
|
|
|
return <MarkdocTreeRender tree={tree} />
|
|
}
|
|
|
|
export const MarkdocTreeRender: React.FC<{
|
|
tree: RenderableTreeNode
|
|
}> = ({ tree }) => {
|
|
return (
|
|
<div className="markdoc-container prose">
|
|
{Markdoc.renderers.react(tree, React, { components: { CodeBlock } })}
|
|
</div>
|
|
)
|
|
}
|