BugFix for comment body (nl2br) and adjust styles

resource/css/_comment.scss

@@ -1,3 +1,16 @@
+.crowi.main-container {
+  .page-comment-delete-modal .modal-content {
+    .modal-body {
+      .comment-body {
+        background-color: #eee;
+        padding: .5em;
+        margin-top: .5em;
+        border-radius: 4px;
+      }
+    }
+  }
+}
+
 .crowi.main-container aside.sidebar .side-content {
 
 .page-comments {
@@ -102,6 +115,4 @@
   }
 }
 
-
-
 } // .crowi.main-container aside.sidebar .side-content

resource/js/components/PageComment/Comment.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import moment from 'moment/src/moment';
 
+import ReactUtils from '../ReactUtils';
 import UserPicture from '../User/UserPicture';
 
 /**
@@ -54,6 +55,7 @@ export default class Comment extends React.Component {
 
     const rootClassName = this.getRootClassName();
     const commentDate = moment(comment.createdAt).format('YYYY/MM/DD HH:mm');
+    const commentBody = ReactUtils.nl2br(comment.comment);
     const revHref = `?revision=${comment.revision}`;
     const revFirst8Letters = comment.revision.substr(0,8);
     const revisionLavelClassName = this.getRevisionLabelClassName();
@@ -63,7 +65,7 @@ export default class Comment extends React.Component {
         <UserPicture user={creator} />
         <div className="page-comment-main">
           <div className="page-comment-creator">{creator.username}</div>
-          <div className="page-comment-body">{comment.comment.replace(/(\r\n|\r|\n)/g, '<br>')}</div>
+          <div className="page-comment-body">{commentBody}</div>
           <div className="page-comment-meta">
             {commentDate}&nbsp;
             <a className={revisionLavelClassName} href={revHref}>{revFirst8Letters}</a>

resource/js/components/PageComment/DeleteCommentModal.js

@@ -2,7 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { Button, Modal } from 'react-bootstrap';
+import moment from 'moment/src/moment';
 
+import ReactUtils from '../ReactUtils';
 import UserPicture from '../User/UserPicture';
 
 export default class DeleteCommentModal extends React.Component {
@@ -19,14 +21,22 @@ export default class DeleteCommentModal extends React.Component {
       return <div></div>
     }
 
+    const comment = this.props.comment;
+    const commentDate = moment(comment.createdAt).format('YYYY/MM/DD HH:mm');
+    let commentBody = comment.comment
+    if (commentBody.length > 200) { // omit
+      commentBody = commentBody.substr(0,200) + '...';
+    }
+    commentBody = ReactUtils.nl2br(commentBody);
+
     return (
-      <Modal show={this.props.isShown} onHide={this.props.cancel}>
+      <Modal show={this.props.isShown} onHide={this.props.cancel} className="page-comment-delete-modal">
         <Modal.Header closeButton>
           <Modal.Title>Delete comment?</Modal.Title>
         </Modal.Header>
         <Modal.Body>
-          <h4>header</h4>
-          <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+          <UserPicture user={comment.creator} size="xs" /> <strong>{comment.creator.username}</strong> wrote on {commentDate}:
+          <p className="comment-body">{commentBody}</p>
         </Modal.Body>
         <Modal.Footer>
           <Button onClick={this.props.cancel}>Cancel</Button>

resource/js/components/ReactUtils.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+export default class ReactUtils {
+
+  /**
+   * show '\n' as '<br>'
+   *
+   * @see http://qiita.com/kouheiszk/items/e7c74ab5eab901f89a7f
+   *
+   * @static
+   * @param {any} text
+   * @returns
+   *
+   * @memberOf ReactUtils
+   */
+  static nl2br(text) {
+    var regex = /(\n)/g
+    return text.split(regex).map(function (line) {
+        if (line.match(regex)) {
+            return React.createElement('br')
+        }
+        else {
+            return line;
+        }
+    });
+  }
+
+}