8 files changed, 85 insertions, 18 deletions
diff --git a/webui/src/components/CommentInput/CommentInput.tsx b/webui/src/components/CommentInput/CommentInput.tsx
index c574538e..f12ee8d8 100644
--- a/webui/src/components/CommentInput/CommentInput.tsx
+++ b/webui/src/components/CommentInput/CommentInput.tsx
@@ -5,7 +5,7 @@ import Tabs from '@material-ui/core/Tabs';
 import TextField from '@material-ui/core/TextField';
 import { makeStyles } from '@material-ui/core/styles';
 
-import Content from 'src/components/Content';
+import Content from '../Content';
 
 /**
  * Styles
diff --git a/webui/src/components/Content/AnchorTag.tsx b/webui/src/components/Content/AnchorTag.tsx
new file mode 100644
index 00000000..47d5e2fa
--- /dev/null
+++ b/webui/src/components/Content/AnchorTag.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+  tag: {
+    color: theme.palette.text.secondary,
+  },
+}));
+
+const AnchorTag = ({ children, href }: React.HTMLProps<HTMLAnchorElement>) => {
+  const classes = useStyles();
+  const origin = window.location.origin;
+  const destination = href === undefined ? '' : href;
+  const isInternalLink =
+    destination.startsWith('/') || destination.startsWith(origin);
+  const internalDestination = destination.replace(origin, '');
+  const internalLink = (
+    <Link className={classes.tag} to={internalDestination}>
+      {children}
+    </Link>
+  );
+  const externalLink = (
+    <a
+      className={classes.tag}
+      href={destination}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {children}
+    </a>
+  );
+
+  return isInternalLink ? internalLink : externalLink;
+};
+
+export default AnchorTag;
diff --git a/webui/src/components/Content/BlockQuoteTag.tsx b/webui/src/components/Content/BlockQuoteTag.tsx
new file mode 100644
index 00000000..18c34d8a
--- /dev/null
+++ b/webui/src/components/Content/BlockQuoteTag.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+  tag: {
+    color: theme.palette.text.secondary,
+    borderLeftWidth: '0.5ch',
+    borderLeftStyle: 'solid',
+    borderLeftColor: theme.palette.text.secondary,
+    marginLeft: 0,
+    paddingLeft: '0.5rem',
+  },
+}));
+
+const BlockQuoteTag = (props: React.HTMLProps<HTMLPreElement>) => {
+  const classes = useStyles();
+  return <blockquote className={classes.tag} {...props} />;
+};
+
+export default BlockQuoteTag;
diff --git a/webui/src/components/Content/ImageTag.tsx b/webui/src/components/Content/ImageTag.tsx
index 70ee1bc0..29b01da3 100644
--- a/webui/src/components/Content/ImageTag.tsx
+++ b/webui/src/components/Content/ImageTag.tsx
@@ -14,9 +14,12 @@ const ImageTag = ({
 }: React.ImgHTMLAttributes<HTMLImageElement>) => {
   const classes = useStyles();
   return (
-    <a href={props.src} target="_blank" rel="noopener noreferrer nofollow">
-      <img className={classes.tag} alt={alt} {...props} />
-    </a>
+    <>
+      <a href={props.src} target="_blank" rel="noopener noreferrer nofollow">
+        <img className={classes.tag} alt={alt} {...props} />
+      </a>
+      <br />
+    </>
   );
 };
 
diff --git a/webui/src/components/Content/index.tsx b/webui/src/components/Content/index.tsx
index 56e52e1e..e4018809 100644
--- a/webui/src/components/Content/index.tsx
+++ b/webui/src/components/Content/index.tsx
@@ -1,26 +1,32 @@
 import React from '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 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 processor = unified()
+  const content = unified()
     .use(parse)
+    .use(gemoji)
     .use(html)
     .use(remark2react, {
       remarkReactComponents: {
         img: ImageTag,
         pre: PreTag,
+        a: AnchorTag,
+        blockquote: BlockQuoteTag,
       },
-    });
+    })
+    .processSync(markdown).result;
 
-  const contents: React.ReactNode = processor.processSync(markdown).contents;
-  return <>{contents}</>;
+  return <>{content}</>;
 };
 
 export default Content;
diff --git a/webui/src/pages/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx
index e70348a6..a8ce4319 100644
--- a/webui/src/pages/bug/CommentForm.tsx
+++ b/webui/src/pages/bug/CommentForm.tsx
@@ -17,14 +17,6 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
   container: {
     padding: theme.spacing(0, 2, 2, 2),
   },
-  textarea: {},
-  tabContent: {
-    margin: theme.spacing(2, 0),
-  },
-  preview: {
-    borderBottom: `solid 3px ${theme.palette.grey['200']}`,
-    minHeight: '5rem',
-  },
   actions: {
     display: 'flex',
     gap: '1em',
diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index 2f4cbc59..39b11ccd 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -57,7 +57,8 @@ const useStyles = makeStyles((theme) => ({
   },
   body: {
     ...theme.typography.body2,
-    padding: '0.5rem',
+    paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(1),
   },
   headerActions: {
     color: theme.palette.info.contrastText,
diff --git a/webui/src/pages/bug/MessageHistoryDialog.tsx b/webui/src/pages/bug/MessageHistoryDialog.tsx
index 0ed33642..5879a373 100644
--- a/webui/src/pages/bug/MessageHistoryDialog.tsx
+++ b/webui/src/pages/bug/MessageHistoryDialog.tsx
@@ -22,6 +22,8 @@ import {
 import CloseIcon from '@material-ui/icons/Close';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
+import Content from '../../components/Content';
+
 import { AddCommentFragment } from './MessageCommentFragment.generated';
 import { CreateFragment } from './MessageCreateFragment.generated';
 import { useMessageHistoryQuery } from './MessageHistory.generated';
@@ -108,6 +110,7 @@ const AccordionSummary = withStyles((theme) => ({
 
 const AccordionDetails = withStyles((theme) => ({
   root: {
+    display: 'block',
     padding: theme.spacing(2),
   },
 }))(MuiAccordionDetails);
@@ -214,6 +217,7 @@ function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) {
         {history?.map((edit, index) => (
           <Accordion
             square
+            key={index}
             expanded={expanded === 'panel' + index}
             onChange={handleChange('panel' + index)}
           >
@@ -224,7 +228,9 @@ function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) {
             >
               <Typography>{getSummary(index, edit.date)}</Typography>
             </AccordionSummary>
-            <AccordionDetails>{edit.message}</AccordionDetails>
+            <AccordionDetails>
+              <Content markdown={edit.message} />
+            </AccordionDetails>
           </Accordion>
         ))}
       </DialogContent>