CoastalCommitsPastes/client/components/preview/index.tsx
2022-03-09 15:04:24 -08:00

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)