12 files changed, 46 insertions, 38 deletions
diff --git a/webui/src/components/BugTitleForm/SetTitle.graphql b/webui/src/components/BugTitleForm/SetTitle.graphql
index b96af155..9dc2d096 100644
--- a/webui/src/components/BugTitleForm/SetTitle.graphql
+++ b/webui/src/components/BugTitleForm/SetTitle.graphql
@@ -1,7 +1,7 @@
 mutation setTitle($input: SetTitleInput!) {
   setTitle(input: $input) {
-      bug {
-        id
-      }
+    bug {
+      id
+    }
   }
-}
-\ No newline at end of file
+}
diff --git a/webui/src/components/CloseBugButton/CloseBug.graphql b/webui/src/components/CloseBugButton/CloseBug.graphql
index e2f4bff2..fc03d1f3 100644
--- a/webui/src/components/CloseBugButton/CloseBug.graphql
+++ b/webui/src/components/CloseBugButton/CloseBug.graphql
@@ -5,4 +5,4 @@ mutation closeBug($input: CloseBugInput!) {
       id
     }
   }
-}
-\ No newline at end of file
+}
diff --git a/webui/src/components/CloseBugWithCommentButton/CloseBugWithComment.graphql b/webui/src/components/CloseBugWithCommentButton/CloseBugWithComment.graphql
index eb736f53..66c84c35 100644
--- a/webui/src/components/CloseBugWithCommentButton/CloseBugWithComment.graphql
+++ b/webui/src/components/CloseBugWithCommentButton/CloseBugWithComment.graphql
@@ -8,4 +8,3 @@ mutation AddCommentAndCloseBug($input: AddCommentAndCloseBugInput!) {
     }
   }
 }
-
diff --git a/webui/src/components/CloseBugWithCommentButton/index.tsx b/webui/src/components/CloseBugWithCommentButton/index.tsx
index a0fefa4a..cbf3f757 100644
--- a/webui/src/components/CloseBugWithCommentButton/index.tsx
+++ b/webui/src/components/CloseBugWithCommentButton/index.tsx
@@ -24,10 +24,8 @@ interface Props {
 }
 
 function CloseBugWithCommentButton({ bug, comment, postClick }: Props) {
-  const [
-    addCommentAndCloseBug,
-    { loading, error },
-  ] = useAddCommentAndCloseBugMutation();
+  const [addCommentAndCloseBug, { loading, error }] =
+    useAddCommentAndCloseBugMutation();
   const classes = useStyles();
 
   function addCommentAndCloseBugAction() {
diff --git a/webui/src/components/Content/AnchorTag.tsx b/webui/src/components/Content/AnchorTag.tsx
index 47d5e2fa..bbd45bc8 100644
--- a/webui/src/components/Content/AnchorTag.tsx
+++ b/webui/src/components/Content/AnchorTag.tsx
@@ -9,7 +9,10 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const AnchorTag = ({ children, href }: React.HTMLProps<HTMLAnchorElement>) => {
+const AnchorTag: React.FC = ({
+  children,
+  href,
+}: React.HTMLProps<HTMLAnchorElement>) => {
   const classes = useStyles();
   const origin = window.location.origin;
   const destination = href === undefined ? '' : href;
diff --git a/webui/src/components/Content/BlockQuoteTag.tsx b/webui/src/components/Content/BlockQuoteTag.tsx
index 18c34d8a..c7c250f5 100644
--- a/webui/src/components/Content/BlockQuoteTag.tsx
+++ b/webui/src/components/Content/BlockQuoteTag.tsx
@@ -13,7 +13,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const BlockQuoteTag = (props: React.HTMLProps<HTMLPreElement>) => {
+const BlockQuoteTag: React.FC<React.HTMLProps<HTMLElement>> = (props) => {
   const classes = useStyles();
   return <blockquote className={classes.tag} {...props} />;
 };
diff --git a/webui/src/components/Content/ImageTag.tsx b/webui/src/components/Content/ImageTag.tsx
index 29b01da3..94004f0e 100644
--- a/webui/src/components/Content/ImageTag.tsx
+++ b/webui/src/components/Content/ImageTag.tsx
@@ -8,10 +8,10 @@ const useStyles = makeStyles({
   },
 });
 
-const ImageTag = ({
+const ImageTag: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = ({
   alt,
   ...props
-}: React.ImgHTMLAttributes<HTMLImageElement>) => {
+}) => {
   const classes = useStyles();
   return (
     <>
diff --git a/webui/src/components/Content/PreTag.tsx b/webui/src/components/Content/PreTag.tsx
index 8e352153..ecb573e0 100644
--- a/webui/src/components/Content/PreTag.tsx
+++ b/webui/src/components/Content/PreTag.tsx
@@ -9,7 +9,7 @@ const useStyles = makeStyles({
   },
 });
 
-const PreTag = (props: React.HTMLProps<HTMLPreElement>) => {
+const PreTag: React.FC<React.HTMLProps<HTMLPreElement>> = (props) => {
   const classes = useStyles();
   return <pre className={classes.tag} {...props} />;
 };
diff --git a/webui/src/components/Content/index.tsx b/webui/src/components/Content/index.tsx
index e4018809..ccb412c1 100644
--- a/webui/src/components/Content/index.tsx
+++ b/webui/src/components/Content/index.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { createElement, Fragment, useEffect, useState } 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 +13,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;
diff --git a/webui/src/components/ReopenBugButton/OpenBug.graphql b/webui/src/components/ReopenBugButton/OpenBug.graphql
index cf9e49e5..12673e65 100644
--- a/webui/src/components/ReopenBugButton/OpenBug.graphql
+++ b/webui/src/components/ReopenBugButton/OpenBug.graphql
@@ -4,4 +4,4 @@ mutation openBug($input: OpenBugInput!) {
       id
     }
   }
-}
-\ No newline at end of file
+}
diff --git a/webui/src/components/ReopenBugWithCommentButton/ReopenBugWithComment.graphql b/webui/src/components/ReopenBugWithCommentButton/ReopenBugWithComment.graphql
index 4c220208..5258a1aa 100644
--- a/webui/src/components/ReopenBugWithCommentButton/ReopenBugWithComment.graphql
+++ b/webui/src/components/ReopenBugWithCommentButton/ReopenBugWithComment.graphql
@@ -8,4 +8,3 @@ mutation AddCommentAndReopenBug($input: AddCommentAndReopenBugInput!) {
     }
   }
 }
-
diff --git a/webui/src/components/ReopenBugWithCommentButton/index.tsx b/webui/src/components/ReopenBugWithCommentButton/index.tsx
index 0a534f27..817054b8 100644
--- a/webui/src/components/ReopenBugWithCommentButton/index.tsx
+++ b/webui/src/components/ReopenBugWithCommentButton/index.tsx
@@ -15,10 +15,8 @@ interface Props {
 }
 
 function ReopenBugWithCommentButton({ bug, comment, postClick }: Props) {
-  const [
-    addCommentAndReopenBug,
-    { loading, error },
-  ] = useAddCommentAndReopenBugMutation();
+  const [addCommentAndReopenBug, { loading, error }] =
+    useAddCommentAndReopenBugMutation();
 
   function addCommentAndReopenBugAction() {
     addCommentAndReopenBug({