Merge pull request #452 from weseek/feat/Markdown-editor-for-comment

Feat/markdown editor for comment

resource/js/components/Page/RevisionBody.js

@@ -51,7 +51,7 @@ export default class RevisionBody extends React.Component {
             this.props.inputRef(elm);
           }
         }}
-        className="wiki" dangerouslySetInnerHTML={this.generateInnerHtml(this.props.html)}>
+        className={'wiki ' + this.props.additionalClassName} dangerouslySetInnerHTML={this.generateInnerHtml(this.props.html)}>
       </div>
     );
   }
@@ -63,4 +63,5 @@ RevisionBody.propTypes = {
   isMathJaxEnabled: PropTypes.bool,
   renderMathJaxOnInit: PropTypes.bool,
   renderMathJaxInRealtime: PropTypes.bool,
+  additionalClassName: PropTypes.string,
 };

resource/js/components/PageComment/Comment.js

@@ -76,7 +76,8 @@ export default class Comment extends React.Component {
       <RevisionBody html={this.state.html}
           inputRef={el => this.revisionBodyElement = el}
           isMathJaxEnabled={isMathJaxEnabled}
-          renderMathJaxOnInit={true} />
+          renderMathJaxOnInit={true}
+          additionalClassName="comment" />
     );
   }
 

resource/js/components/PageComment/CommentForm.js

@@ -129,6 +129,7 @@ export default class CommentForm extends React.Component {
     const creatorsPage = `/user/${username}`;
     const comment = this.state.comment;
     const commentPreview = this.state.isMarkdown ? this.getCommentHtml(): ReactUtils.nl2br(comment);
+
     return (
       <div>
         <form className="form page-comment-form" id="page-comment-form" onSubmit={this.postComment}>
@@ -145,18 +146,24 @@ export default class CommentForm extends React.Component {
                     <Tab eventKey={1} title="Write">
                       <textarea className="comment-form-comment form-control" id="comment-form-comment" name="comment" required placeholder="Write comments here..." value={this.state.comment} onChange={this.updateState} >
                       </textarea>
-                      <div className="form-check">
-                        <input type="checkbox" id="comment-form-is-markdown" name="isMarkdown" checked={this.state.isMarkdown} value="1" onChange={this.updateState} /> Markdown<br />
-                      </div>
                     </Tab>
+                    { this.state.isMarkdown == true &&
                     <Tab eventKey={2} title="Preview">
                       <div className="comment-form-preview">
-                      {commentPreview}
+                       {commentPreview}
                       </div>
                     </Tab>
+                    }
                   </Tabs>
                 </div>
                 <div className="comment-submit">
+                  <div className="pull-left">
+                  { this.state.key == 1 &&
+                    <label>
+                      <input type="checkbox" id="comment-form-is-markdown" name="isMarkdown" checked={this.state.isMarkdown} value="1" onChange={this.updateState} /> Markdown
+                    </label>
+                  }
+                  </div>
                   <div className="pull-right">
                     <Button type="submit" value="Submit" bsStyle="primary" className="fcbtn btn btn-sm btn-primary btn-outline btn-rounded btn-1b">
                         Comment

resource/js/components/PageComment/CommentPreview.js

@@ -22,6 +22,7 @@ export default class CommentPreview extends React.Component {
 
         <RevisionBody
           {...this.props}
+          additionalClassName="comment"
         />
       </div>
     );

resource/styles/agile-admin/inverse/colors/_apply-colors.scss

@@ -317,6 +317,13 @@ body.on-edit {
     &:before {
       border-right-color: darken($bodycolor, 4%);
     }
+    .nav.nav-tabs {
+      > li.active > a {
+        background: transparent;
+        border-bottom: solid 1px darken($bodycolor, 4%);
+        border-bottom-color: darken($bodycolor, 4%);
+      }
+    }
   }
 }
 

resource/styles/scss/_comment_growi.scss

@@ -94,6 +94,9 @@
     .comment-write {
       margin-bottom: 0.5em;
     }
+    .tab-content{
+      padding-top: 10px;
+    }
     .comment-form-comment {
       height: 80px;
       &:focus, &:not(:invalid) {

resource/styles/scss/_wiki.scss

@@ -143,6 +143,61 @@ div.body {
       opacity: 1 !important;
     }
   }
+
+  $ratio: 0.95;
+  &.comment {
+    line-height: 1.5em;
+    font-size: 14px;
+
+    h1, h2, h3, h4, h5, h6 {
+      margin-top: 1.6em * $ratio;
+      margin-bottom: .8em * $ratio;
+    }
+
+    h1 {
+      margin-top: 2em * $ratio;
+      padding-bottom: 0.3em * $ratio;
+      font-size: 1.8em * $ratio;
+      line-height: 1.1em * $ratio;
+    }
+    h2 {
+      padding-bottom: 0.5em * $ratio;
+      font-size: 1.4em * $ratio;
+      line-height: 1.225 * $ratio;
+    }
+    h3 {
+      font-size: 1.2em * $ratio;
+    }
+
+    blockquote {
+      font-size: .9em * $ratio;
+    }
+
+    img.emojione {
+      margin-top: -0.3em * $ratio !important;
+    }
+
+    ul, ol {
+      li {
+        line-height: 1.8em * $ratio;
+      }
+    }
+
+    // borrowed from https://www.npmjs.com/package/github-markdown-css
+    .contains-task-list {
+      .task-list-item input {
+        margin: 0 0.2em * $ratio 0.25em * $ratio -1.6em * $ratio;
+      }
+    }
+
+    .revision-head {
+      .revision-head-link,
+      .revision-head-edit-button {
+        margin-left: 0.5em * $ratio;
+        font-size: 0.6em * $ratio;
+      }
+    }
+  }
 }
 
 // mobile