webui: Render markdown

2 files changed, 20 insertions, 3 deletions

diff --git a/webui/src/Content.js b/webui/src/Content.js
new file mode 100644
index 00000000..19f57631
--- /dev/null
+++ b/webui/src/Content.js
@@ -0,0 +1,15 @@
+import unified from 'unified';
+import parse from 'remark-parse';
+import html from 'remark-html';
+import remark2react from 'remark-react';
+
+const Content = ({ markdown }) => {
+  const processor = unified()
+    .use(parse)
+    .use(html)
+    .use(remark2react);
+
+  return processor.processSync(markdown).contents;
+};
+
+export default Content;
diff --git a/webui/src/bug/Message.js b/webui/src/bug/Message.js
index ff039444..eea530fc 100644
--- a/webui/src/bug/Message.js
+++ b/webui/src/bug/Message.js
@@ -5,6 +5,7 @@ import React from 'react';
 import Author from '../Author';
 import { Avatar } from '../Author';
 import Date from '../Date';
+import Content from '../Content';
 
 const useStyles = makeStyles(theme => ({
   author: {
@@ -41,8 +42,7 @@ const useStyles = makeStyles(theme => ({
   },
   body: {
     ...theme.typography.body1,
-    padding: '1rem',
-    whiteSpace: 'pre-wrap',
+    padding: '0 1rem',
   },
 }));
 
@@ -60,7 +60,9 @@ function Message({ op }) {
           </div>
           {op.edited && <div className={classes.tag}>Edited</div>}
         </header>
-        <section className={classes.body}>{op.message}</section>
+        <section className={classes.body}>
+          <Content markdown={op.message} />
+        </section>
       </Paper>
     </article>
   );