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