webui/src/components/Content/index.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

import { createElement, Fragment, useEffect, useState } from 'react';
import * as React from 'react';
import rehypeReact from 'rehype-react';
import gemoji from 'remark-gemoji';
import html from 'remark-html';
import parse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import { unified } from 'unified';

import AnchorTag from './AnchorTag';
import BlockQuoteTag from './BlockQuoteTag';
import ImageTag from './ImageTag';
import PreTag from './PreTag';

type Props = { markdown: string };
const Content: React.FC<Props> = ({ markdown }: Props) => {
  const [Content, setContent] = useState(<></>);

  useEffect(() => {
    unified()
      .use(parse)
      .use(gemoji)
      .use(html)
      .use(remarkRehype)
      .use(rehypeReact, {
        createElement,
        Fragment,
        components: {
          img: ImageTag,
          pre: PreTag,
          a: AnchorTag,
          blockquote: BlockQuoteTag,
        },
      })
      .process(markdown)
      .then((file) => {
        setContent(file.result);
      });
  }, [markdown]);

  return Content;
};

export default Content;