1import { createElement, Fragment, useEffect, useState } from 'react';
 2import * as React from 'react';
 3import rehypeReact from 'rehype-react';
 4import gemoji from 'remark-gemoji';
 5import html from 'remark-html';
 6import parse from 'remark-parse';
 7import remarkRehype from 'remark-rehype';
 8import { unified } from 'unified';
 9
10import AnchorTag from './AnchorTag';
11import BlockQuoteTag from './BlockQuoteTag';
12import ImageTag from './ImageTag';
13import PreTag from './PreTag';
14
15type Props = { markdown: string };
16const Content: React.FC<Props> = ({ markdown }: Props) => {
17  const [Content, setContent] = useState(<></>);
18
19  useEffect(() => {
20    unified()
21      .use(parse)
22      .use(gemoji)
23      .use(html)
24      .use(remarkRehype)
25      .use(rehypeReact, {
26        createElement,
27        Fragment,
28        components: {
29          img: ImageTag,
30          pre: PreTag,
31          a: AnchorTag,
32          blockquote: BlockQuoteTag,
33        },
34      })
35      .process(markdown)
36      .then((file) => {
37        setContent(file.result);
38      });
39  }, [markdown]);
40
41  return Content;
42};
43
44export default Content;