fix-list-bug

frontend/src/components/review-list-view/review-comment-dialog.js

@@ -3,13 +3,14 @@ import PropTypes from 'prop-types';
 import { Button } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api';
 import { reviewID, gettext } from '../../utils/constants';
+import { processor } from '../../utils/seafile-markdown2html';
 
 import '../../css/review-comment-dialog.css';
 
 const commentDialogPropTypes = {
   onCommentAdded: PropTypes.func.isRequired,
   toggleCommentDialog: PropTypes.func.isRequired,
-  selectedText: PropTypes.string,
+  quote: PropTypes.string,
   newIndex: PropTypes.number,
   oldIndex: PropTypes.number,
 };
@@ -21,6 +22,7 @@ class ReviewCommentDialog extends React.Component {
     this.state = {
       comment: '',
       userName: '',
+      quote: '',
     };
   }
 
@@ -42,9 +44,9 @@ class ReviewCommentDialog extends React.Component {
   submitComment = () => {
     let comment = this.state.comment.trim();
     if (comment.length > 0) {
-      if (this.props.selectedText.length > 0) {
+      if (this.props.quote.length > 0) {
         let detail = {
-          selectedText: this.props.selectedText.slice(0, 10),
+          quote: this.props.quote,
           newIndex: this.props.newIndex,
           oldIndex: this.props.oldIndex
         };
@@ -64,12 +66,15 @@ class ReviewCommentDialog extends React.Component {
     }
   }
 
-  setQuoteText = (text) => {
-    if (text.length > 0) {
-      this.setState({
-        comment: text
-      });
-    }
+  setQuoteText = (mdQuote) => {
+    processor.process(mdQuote).then(
+      (result) => {
+        let quote = String(result);
+        this.setState({
+          quote: quote
+        });
+      }
+    );
   }
 
   componentWillMount() {
@@ -77,12 +82,12 @@ class ReviewCommentDialog extends React.Component {
   }
 
   componentDidMount() {
-    this.setQuoteText(this.props.selectedText);
+    this.setQuoteText(this.props.quote);
   }
 
   componentWillReceiveProps(nextProps) {
-    if (this.props.selectedText !== nextProps.selectedText) {
-      this.setQuoteText(nextProps.selectedText);
+    if (this.props.quote !== nextProps.quote) {
+      this.setQuoteText(nextProps.quote);
     }
   }
 
@@ -90,6 +95,9 @@ class ReviewCommentDialog extends React.Component {
     return (
       <div className="review-comment-dialog">
         <div>{this.state.userName}</div>
+        <blockquote className="review-comment-dialog-quote">
+          <div dangerouslySetInnerHTML={{ __html: this.state.quote}}></div>
+        </blockquote>
         <textarea value={this.state.comment} onChange={this.handleCommentChange}></textarea>
         <div className="button-group">
           <Button size="sm" color="primary" onClick={this.submitComment}>{gettext('Submit')}</Button>

frontend/src/components/review-list-view/review-comments.js

@@ -132,8 +132,8 @@ class ReviewComments extends React.Component {
     });
   };
   
-  scrollToQuote = (newIndex, oldIndex, selectedText) => {
-    this.props.scrollToQuote(newIndex, oldIndex, selectedText);
+  scrollToQuote = (newIndex, oldIndex, quote) => {
+    this.props.scrollToQuote(newIndex, oldIndex, quote);
     this.setState({
       comment: ''
     });
@@ -227,7 +227,8 @@ class CommentItem extends React.Component {
     super(props);
     this.state = {
       dropdownOpen: false,
-      html: '',
+      comment: '',
+      quote: '',
     };
   }
 
@@ -237,66 +238,74 @@ class CommentItem extends React.Component {
     });
   }
 
-  convertComment = (mdFile) => {
-    processor.process(mdFile).then(
+  convertComment = (item) => {
+    processor.process(item.comment).then(
       (result) => {
-        let html = String(result);
+        let comment = String(result);
         this.setState({
-          html: html
+          comment: comment
+        });
+      }
+    );
+    processor.process(item.quote).then(
+      (result) => {
+        let quote = String(result);
+        this.setState({
+          quote: quote
         });
       }
     );
   }
 
   scrollToQuote = () => {
-    this.props.scrollToQuote(this.props.item.newIndex, this.props.item.oldIndex,
-      this.props.item.selectedText);
+    const item = this.props.item;
+    this.props.scrollToQuote(item.newIndex, item.oldIndex, item.quote);
   }
 
   componentWillMount() {
-    this.convertComment(this.props.item.comment);
+    this.convertComment(this.props.item);
   }
 
   componentWillReceiveProps(nextProps) {
-    this.convertComment(nextProps.item.comment);
+    this.convertComment(nextProps.item);
   }
 
   render() {
-    if (this.props.item.resolved && !this.props.showResolvedComment) {
+    const item = this.props.item;
+    if (item.resolved && !this.props.showResolvedComment) {
       return null;
     }
     return (
-      <li className={this.props.item.resolved ? 'seafile-comment-item seafile-comment-item-resolved'
-        : 'seafile-comment-item'} id={this.props.item.id}>
+      <li className={item.resolved ? 'seafile-comment-item seafile-comment-item-resolved'
+        : 'seafile-comment-item'} id={item.id}>
         <div className="seafile-comment-info">
-          <img className="avatar" src={this.props.item.avatarUrl} alt=""/>
+          <img className="avatar" src={item.avatarUrl} alt=""/>
           <div className="reviewer-info">
-            <div className="reviewer-name">{this.props.item.name}</div>
-            <div className="review-time">{this.props.item.time}</div>
+            <div className="reviewer-name">{item.name}</div>
+            <div className="review-time">{item.time}</div>
           </div>
-          { !this.props.item.resolved &&
+          { !item.resolved &&
             <Dropdown isOpen={this.state.dropdownOpen} size="sm"
               className="seafile-comment-dropdown" toggle={this.toggleDropDownMenu}>
               <DropdownToggle className="seafile-comment-dropdown-btn">
                 <i className="fas fa-ellipsis-v"></i>
               </DropdownToggle>
               <DropdownMenu>
-                { (this.props.item.userEmail === this.props.accountInfo.email) &&
+                { (item.userEmail === this.props.accountInfo.email) &&
                   <DropdownItem onClick={this.props.deleteComment}
-                    className="delete-comment" id={this.props.item.id}>{gettext('Delete')}</DropdownItem>}
+                    className="delete-comment" id={item.id}>{gettext('Delete')}</DropdownItem>}
                 <DropdownItem onClick={this.props.resolveComment}
-                  className="seafile-comment-resolved" id={this.props.item.id}>{gettext('Mark as resolved')}</DropdownItem>
+                  className="seafile-comment-resolved" id={item.id}>{gettext('Mark as resolved')}</DropdownItem>
               </DropdownMenu>
             </Dropdown>
           }
         </div>
-        { (this.props.item.newIndex >= -1 && this.props.item.oldIndex >= -1)? 
-          <div className="seafile-comment-content" onClick={this.scrollToQuote}
-            dangerouslySetInnerHTML={{ __html: this.state.html }}></div>
-          :
-          <div className="seafile-comment-content"
-            dangerouslySetInnerHTML={{ __html: this.state.html }}></div>
+        { (item.newIndex >= -1 && item.oldIndex >= -1) &&
+          <blockquote className="seafile-comment-content">
+            <div onClick={this.scrollToQuote} dangerouslySetInnerHTML={{ __html: this.state.quote }}></div>
+          </blockquote>
         }
+        <div className="seafile-comment-content" dangerouslySetInnerHTML={{ __html: this.state.comment }}></div>
       </li>
     );
   }