1 files changed, 29 insertions, 17 deletions
diff --git a/webui/src/components/Content/index.tsx b/webui/src/components/Content/index.tsx
index e4018809..9bf9ff7a 100644
--- a/webui/src/components/Content/index.tsx
+++ b/webui/src/components/Content/index.tsx
@@ -1,9 +1,11 @@
-import React from 'react';
+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 remark2react from 'remark-react';
-import unified from 'unified';
+import remarkRehype from 'remark-rehype';
+import { unified } from 'unified';
 
 import AnchorTag from './AnchorTag';
 import BlockQuoteTag from './BlockQuoteTag';
@@ -12,21 +14,31 @@ import PreTag from './PreTag';
 
 type Props = { markdown: string };
 const Content: React.FC<Props> = ({ markdown }: Props) => {
-  const content = unified()
-    .use(parse)
-    .use(gemoji)
-    .use(html)
-    .use(remark2react, {
-      remarkReactComponents: {
-        img: ImageTag,
-        pre: PreTag,
-        a: AnchorTag,
-        blockquote: BlockQuoteTag,
-      },
-    })
-    .processSync(markdown).result;
+  const [Content, setContent] = useState(<></>);
 
-  return <>{content}</>;
+  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;