28 lines
904 B
TypeScript
28 lines
904 B
TypeScript
import { memo, useEffect, useState } from "react"
|
|
import ReactMarkdownPreview from "./react-markdown-preview"
|
|
|
|
type Props = {
|
|
content?: string
|
|
height?: number | string
|
|
// file extensions we can highlight
|
|
type?: string
|
|
}
|
|
|
|
const MarkdownPreview = ({ content = '', height = 500, type = 'markdown' }: Props) => {
|
|
const [contentToRender, setContent] = useState(content)
|
|
useEffect(() => {
|
|
// 'm' so it doesn't flash code when you change the type to md
|
|
const renderAsMarkdown = ['m', 'markdown', 'md', 'mdown', 'mkdn', 'mkd', 'mdwn', 'mdtxt', 'mdtext', 'text', '']
|
|
if (!renderAsMarkdown.includes(type)) {
|
|
setContent(`~~~${type}
|
|
${content}
|
|
~~~
|
|
`)
|
|
} else {
|
|
setContent(content)
|
|
}
|
|
}, [type, content])
|
|
return (<ReactMarkdownPreview height={height} content={contentToRender} />)
|
|
}
|
|
|
|
export default memo(MarkdownPreview)
|