aboutsummaryrefslogtreecommitdiffstats
path: root/webui/src
diff options
context:
space:
mode:
Diffstat (limited to 'webui/src')
-rw-r--r--webui/src/Content.js15
-rw-r--r--webui/src/bug/Message.js8
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>
);