Merge pull request #24 from kadirahq/fix-8

Support markdown #8
storybookjs · Oct 11, 2016 · 988b7a3 · 988b7a3
2 parents 62e51ab + 55b5077
commit 988b7a3
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -31,6 +31,8 @@
     "babel-preset-es2015": "^6.14.0",
     "babel-preset-react": "^6.11.1",
     "babel-preset-stage-0": "^6.5.0",
+    "insert-css": "^1.0.0",
+    "marked": "^0.3.6",
     "react": "^15.3.1",
     "react-dom": "^15.3.1",
     "react-render-html": "^0.1.6",

diff --git a/src/manager/components/CommentForm/index.js b/src/manager/components/CommentForm/index.js
@@ -1,7 +1,24 @@
 import React, { Component } from 'react';
 import Textarea from 'react-textarea-autosize';
+import marked from 'marked';
 import style from './style';
 
+const renderer = new marked.Renderer();
+renderer.heading = function (text, level) {
+  return text;
+}
+
+marked.setOptions({
+  renderer: renderer,
+  gfm: true,
+  tables: false,
+  breaks: true,
+  pedantic: false,
+  sanitize: true,
+  smartLists: true,
+  smartypants: false
+});
+
 export default class CommentForm extends Component {
   constructor(props, ...args) {
     super(props, ...args);
@@ -27,10 +44,8 @@ export default class CommentForm extends Component {
       return;
     }
 
-    const processedText = text.replace(/\r?\n/g, '<br />');
-    addComment(processedText);
+    addComment(marked(text));
     this.setState({ text: '' });
-    this.forceUpdate();
   }
 
   render() {

diff --git a/src/manager/components/CommentList/index.js b/src/manager/components/CommentList/index.js
@@ -1,10 +1,64 @@
 import React, { Component } from 'react';
 import moment from 'moment';
 import renderHTML from 'react-render-html';
+import insertCss from 'insert-css';
 import style from './style';
 
-export default class CommentList extends Component {
+const customStyle = `
+  .comment-content p {
+    margin: 0;
+    padding: 0;
+  }
+
+  .comment-content pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    padding: 5px 8px;
+    color: #000;
+    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    font-size: 0.94em;
+    border-radius: 3px;
+    background-color: #F8F8F8;
+    border: 1px solid #f1f1f1;
+  }
+
+  .comment-content pre code {
+    border: 0px !important;
+    background: transparent !important;
+    line-height: 1.3em;
+  }
+
+  .comment-content code {
+    padding: 0 3px 0 3px;
+    color: #000;
+    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    font-size: 0.94em;
+    border-radius: 3px;
+    background-color: #F8F8F8;
+    border: 1px solid #f1f1f1;
+  }
 
+  .comment-content blockquote {
+    color: #666666;
+    margin: 3px 0;
+    padding-left: 12px;
+    border-left: 0.5em #EEE solid;
+  }
+
+  .comment-content ul, .comment-content ol {
+    margin: 1em 0;
+    padding: 0 0 0 2em;
+  }
+
+  .comment-content a {
+    color: #0645ad;
+    text-decoration: none;
+  }
+`;
+
+insertCss(customStyle);
+
+export default class CommentList extends Component {
   componentDidMount() {
     const wrapper = this.refs.wrapper;
     wrapper.scrollTop = wrapper.scrollHeight;
@@ -34,7 +88,7 @@ export default class CommentList extends Component {
         <div style={style.commentAside}>
           <img style={style.commentAvatar} src={comment.user.avatar} />
         </div>
-        <div style={style.commentContent}>
+        <div className="comment-content" style={style.commentContent}>
           <div style={style.commentHead}>
             <span style={style.commentUser}>{comment.user.name}</span>
             <span style={style.commentTime}>{this.formatTime(comment.time)}</span>