CoastalCommitsPastes/client/components/preview/index.tsx

16 lines
693 B
TypeScript
Raw Normal View History

2022-03-06 19:46:59 -05:00
import { memo } from "react"
import ReactMarkdown from "react-markdown"
import remarkGfm from "remark-gfm"
2022-03-08 16:19:42 -05:00
// @ts-ignore because of no types in remark-a11y-emoji
2022-03-08 05:43:04 -05:00
import a11yEmoji from '@fec/remark-a11y-emoji';
2022-03-06 19:46:59 -05:00
import styles from './preview.module.css'
const MarkdownPreview = ({ content, height }: { content?: string, height?: number | string }) => {
2022-03-08 16:19:42 -05:00
{/* remarkGfm is github flavored markdown support, a11yEmoji wraps emojis in accessible spans for screen readers */ }
2022-03-08 05:43:04 -05:00
return (<div style={{ height }}><ReactMarkdown className={styles.markdownPreview} remarkPlugins={[remarkGfm, a11yEmoji]} >
2022-03-06 19:46:59 -05:00
{content || ""}
</ReactMarkdown></div>)
}
export default memo(MarkdownPreview)