update file comment (#3057)

* update file comment

* [update] edit comment

* Add markdown side panel

frontend/src/components/file-view/comment-panel.js

@@ -65,6 +65,12 @@ class CommentPanel extends React.Component {
     });
   }
 
+  editComment = (commentID, newComment) => {
+    seafileAPI.updateComment(repoID, commentID, null, null, newComment).then((res) => {
+      this.listComments();
+    });
+  }
+
   componentDidMount() {
     this.listComments();
   }
@@ -101,6 +107,7 @@ class CommentPanel extends React.Component {
                     item={item} time={time}
                     deleteComment={this.deleteComment}
                     resolveComment={this.resolveComment}
+                    editComment={this.editComment}
                     showResolvedComment={this.state.showResolvedComment}
                   />
                 </React.Fragment>
@@ -111,14 +118,14 @@ class CommentPanel extends React.Component {
             <li className="comment-vacant">{gettext('No comment yet.')}</li>}
         </ul>
         <div className="seafile-comment-footer">
-            <textarea
-              className="add-comment-input" ref="commentTextarea"
-              placeholder={gettext('Add a comment.')}
-              clos="100" rows="3" warp="virtual"></textarea>
-            <Button
-              className="submit-comment" color="success"
-              size="sm" onClick={this.submitComment} >
-              {gettext('Submit')}</Button>
+          <textarea
+            className="add-comment-input" ref="commentTextarea"
+            placeholder={gettext('Add a comment.')}
+            clos="100" rows="3" warp="virtual"></textarea>
+          <Button
+            className="submit-comment" color="success"
+            size="sm" onClick={this.submitComment} >
+            {gettext('Submit')}</Button>
         </div>
       </div>
     );
@@ -134,6 +141,7 @@ const commentItemPropTypes = {
   deleteComment: PropTypes.func.isRequired,
   resolveComment: PropTypes.func.isRequired,
   showResolvedComment: PropTypes.bool.isRequired,
+  editComment: PropTypes.func.isRequired,
 };
 
 class CommentItem extends React.Component {
@@ -143,6 +151,8 @@ class CommentItem extends React.Component {
     this.state = {
       dropdownOpen: false,
       html: '',
+      newComment: this.props.item.comment,
+      editable: false,
     };
   }
 
@@ -163,6 +173,26 @@ class CommentItem extends React.Component {
     );
   }
 
+  toggleEditComment = () => {
+    this.setState({
+      editable: !this.state.editable
+    });
+  }
+
+  updateComment = (event) => {
+    const newComment = this.state.newComment;
+    if (this.props.item.comment !== newComment) {
+      this.props.editComment(event.target.id, newComment);
+    }
+    this.toggleEditComment();
+  }
+
+  handleCommentChange = (event) => {
+    this.setState({
+      newComment: event.target.value,
+    });
+  }
+
   componentWillMount() {
     this.convertComment(this.props.item.comment);
   }
@@ -176,6 +206,24 @@ class CommentItem extends React.Component {
     if (item.resolved && !this.props.showResolvedComment) {
       return null;
     }
+    if (this.state.editable) {
+      return(
+        <li className="seafile-comment-item" id={item.id}>
+          <div className="seafile-comment-info">
+            <img className="avatar" src={item.avatar_url} alt=""/>
+            <div className="reviewer-info">
+              <div className="reviewer-name">{item.user_name}</div>
+              <div className="review-time">{this.props.time}</div>
+            </div>
+          </div>
+          <div className="seafile-edit-comment">
+            <textarea className="edit-comment-input" value={this.state.newComment} onChange={this.handleCommentChange} clos="100" rows="3" warp="virtual"></textarea>
+            <Button className="comment-btn" color="success" size="sm" onClick={this.updateComment} id={item.id}>{gettext('Update')}</Button>{' '}
+            <Button className="comment-btn" color="secondary" size="sm" onClick={this.toggleEditComment}> {gettext('Cancle')}</Button>
+          </div>
+        </li>
+      );
+    }
     return (
       <li className={item.resolved ? 'seafile-comment-item seafile-comment-item-resolved'
         : 'seafile-comment-item'} id={item.id}>
@@ -195,6 +243,11 @@ class CommentItem extends React.Component {
                 (item.user_email === username) &&
                 <DropdownItem onClick={this.props.deleteComment} className="delete-comment"
                   id={item.id}>{gettext('Delete')}</DropdownItem>}
+              {
+                (item.user_email === username) &&
+                  <DropdownItem onClick={this.toggleEditComment}
+                    className="edit-comment" id={item.id}>{gettext('Edit')}</DropdownItem>
+              }
               {
                 !item.resolved &&
                 <DropdownItem onClick={this.props.resolveComment} className="seafile-comment-resolved"

frontend/src/components/markdown-view/comment-dialog.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'reactstrap';
+import { processor } from '@seafile/seafile-editor/dist/utils/seafile-markdown2html';
+import { gettext } from '../../utils/constants';
+import '../../css/markdown-viewer/comment-dialog.css';
+
+const propTypes = {
+  editorUtilities: PropTypes.object.isRequired,
+  quote: PropTypes.string.isRequired,
+  commentPosition: PropTypes.object.isRequired,
+  onCommentAdded: PropTypes.func.isRequired,
+  toggleCommentDialog: PropTypes.func.isRequired,
+};
+
+class CommentDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      comment: '',
+      quote: '',
+    };
+  }
+
+  handleCommentChange = (event) => {
+    let comment = event.target.value;
+    this.setState({
+      comment: comment
+    });
+  }
+
+  submitComment = () => {
+    let comment = this.state.comment.trim();
+    if (comment.length > 0 && this.props.quote.length > 0) {
+      let detail = {
+        quote: this.props.quote,
+        position: this.props.commentPosition,
+      };
+      let detailJSON = JSON.stringify(detail);
+      this.props.editorUtilities.postComment(comment, detailJSON).then((res) => {
+        this.props.onCommentAdded();
+      });
+    }
+  }
+
+  setQuoteText = (mdQuote) => {
+    processor.process(mdQuote).then(
+      (result) => {
+        let quote = String(result);
+        this.setState({
+          quote: quote
+        });
+      }
+    );
+  }
+
+  componentDidMount() {
+    this.setQuoteText(this.props.quote);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.quote !== nextProps.quote) {
+      this.setQuoteText(nextProps.quote);
+    }
+  }
+
+  render() {
+    return (
+      <div className="comment-dialog">
+        <div>{this.props.editorUtilities.name}</div>
+        <blockquote className="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>
+          <Button size="sm" color="secondary" onClick={this.props.toggleCommentDialog}>{gettext('Cancel')}</Button>
+        </div>
+        <span className="comment-dialog-triangle"></span>
+      </div>
+    );
+  }
+}
+
+CommentDialog.propTypes = propTypes;
+
+export default CommentDialog;

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

@@ -0,0 +1,306 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { processor } from '@seafile/seafile-editor/dist/utils/seafile-markdown2html';
+import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+import Loading from '../loading';
+import { gettext } from '../../utils/constants';
+import moment from 'moment';
+import '../../css/markdown-viewer/comments-list.css';
+
+const propTypes = {
+  editorUtilities: PropTypes.object.isRequired,
+  scrollToQuote: PropTypes.func.isRequired,
+  getCommentsNumber: PropTypes.func.isRequired,
+  commentsNumber: PropTypes.number.isRequired,
+};
+
+class CommentsList extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      commentsList: [],
+      showResolvedComment: true,
+    };
+  }
+
+  listComments = () => {
+    this.props.editorUtilities.listComments().then((response) => {
+      this.setState({
+        commentsList: response.data.comments
+      });
+    });
+  }
+
+  handleCommentChange = (event) => {
+    this.setState({
+      comment: event.target.value,
+    });
+  }
+
+  submitComment = () => {
+    let comment = this.refs.commentTextarea.value;
+    if (comment.trim().length > 0) {
+      this.props.editorUtilities.postComment(comment.trim()).then((response) => {
+        this.listComments();
+        this.props.getCommentsNumber();
+      });
+    }
+    this.refs.commentTextarea.value = '';
+  }
+
+  resolveComment = (event) => {
+    this.props.editorUtilities.updateComment(event.target.id, 'true').then((response) => {
+      this.listComments();
+    });
+  }
+
+  deleteComment = (event) => {
+    this.props.editorUtilities.deleteComment(event.target.id).then((response) => {
+      this.props.getCommentsNumber();
+      this.listComments();
+    });
+  }
+
+  editComment = (commentID, newComment) => {
+    this.props.editorUtilities.updateComment(commentID, null, null, newComment).then((res) => {
+      this.props.getCommentsNumber();
+      this.listComments();
+    });
+  }
+
+  setQuoteText = (text) => {
+    if (text.length > 0) {
+      this.refs.commentTextarea.value = '> ' + text;
+    }
+  }
+
+  scrollToQuote = (detail) => {
+    this.props.scrollToQuote(detail);
+    this.refs.commentTextarea.value = '';
+  }
+
+  toggleResolvedComment = () => {
+    this.setState({
+      showResolvedComment: !this.state.showResolvedComment
+    });
+  }
+
+  componentWillMount() {
+    this.listComments();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.commentsNumber !== nextProps.commentsNumber) {
+      this.listComments();
+    }
+  }
+
+  render() {
+    return (
+      <div className="seafile-comment">
+        <div className="seafile-comment-title">
+          <div className="seafile-comment-text">{gettext('Show resolved comments')}</div>
+          <div className="d-flex">
+            <label className="custom-switch" id="toggle-resolved-comments">
+              <input type="checkbox" name="option" className="custom-switch-input"
+                onChange={this.toggleResolvedComment}
+                checked={this.state.showResolvedComment && 'checked'}
+              />
+              <span className="custom-switch-indicator"></span>
+            </label>
+          </div>
+        </div>
+        <ul className={'seafile-comment-list'}>
+          { (this.state.commentsList.length > 0 && this.props.commentsNumber > 0) &&
+            this.state.commentsList.map((item, index = 0, arr) => {
+              let oldTime = (new Date(item.created_at)).getTime();
+              let time = moment(oldTime).format('YYYY-MM-DD HH:mm');
+              return (
+                <CommentItem
+                  item={item} time={time} key={index}
+                  editorUtilities={this.props.editorUtilities}
+                  editComment={this.editComment}
+                  showResolvedComment={this.state.showResolvedComment}
+                  deleteComment={this.deleteComment} resolveComment={this.resolveComment}
+                  commentsList={this.state.commentsList} scrollToQuote={this.scrollToQuote}
+                />
+              );
+            })
+          }
+          {(this.state.commentsList.length == 0 && this.props.commentsNumber > 0) && <Loading/>}
+          { this.props.commentsNumber == 0 &&
+            <li className="comment-vacant">{gettext('No comment yet.')}</li>
+          }
+        </ul>
+        <div className="seafile-comment-footer">
+          <div className="seafile-add-comment">
+            <textarea className="add-comment-input" ref="commentTextarea"
+              placeholder={gettext('Add a comment')}
+              clos="100" rows="3" warp="virtual"></textarea>
+            <Button className="submit-comment" color="success"
+              size="sm" onClick={this.submitComment} >
+              {gettext('Submit')}</Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+CommentsList.propTypes = propTypes;
+
+const CommentItempropTypes = {
+  editorUtilities: PropTypes.object.isRequired,
+  item: PropTypes.object,
+  time: PropTypes.string,
+  key: PropTypes.number,
+  editComment: PropTypes.func,
+  showResolvedComment: PropTypes.bool,
+  deleteComment: PropTypes.func,
+  resolveComment: PropTypes.func,
+  commentsList: PropTypes.array,
+  scrollToQuote: PropTypes.func.isRequired,
+};
+
+class CommentItem extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      dropdownOpen: false,
+      html: '',
+      quote: '',
+      newComment: this.props.item.comment,
+      editable: false,
+    };
+  }
+
+  toggleDropDownMenu = () => {
+    this.setState({
+      dropdownOpen: !this.state.dropdownOpen,
+    });
+  }
+
+  convertComment = (item) => {
+    processor.process(item.comment).then(
+      (result) => {
+        let comment = String(result);
+        this.setState({
+          comment: comment
+        });
+      }
+    );
+    if (item.detail) {
+      const quote = JSON.parse(item.detail).quote;
+      processor.process(quote).then(
+        (result) => {
+          let quote = String(result);
+          this.setState({
+            quote: quote
+          });
+        }
+      );
+    }
+  }
+
+  toggleEditComment = () => {
+    this.setState({
+      editable: !this.state.editable
+    });
+  }
+
+  updateComment = (event) => {
+    const newComment = this.state.newComment;
+    if (this.props.item.comment !== newComment) {
+      this.props.editComment(event.target.id, newComment);
+    }
+    this.toggleEditComment();
+  }
+
+  handleCommentChange = (event) => {
+    this.setState({
+      newComment: event.target.value,
+    });
+  }
+
+  scrollToQuote = () => {
+    const position = JSON.parse(this.props.item.detail).position;
+    this.props.scrollToQuote(position);
+  }
+
+  componentWillMount() {
+    this.convertComment(this.props.item);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.convertComment(nextProps.item);
+  }
+
+  render() {
+    const item = this.props.item;
+    const { id, user_email, avatar_url, user_name, resolved } = item;
+    if (item.resolved && !this.props.showResolvedComment) {
+      return null;
+    }
+    if (this.state.editable) {
+      return(
+        <li className="seafile-comment-item" id={item.id}>
+          <div className="seafile-comment-info">
+            <img className="avatar" src={avatar_url} alt=""/>
+            <div className="reviewer-info">
+              <div className="reviewer-name">{user_name}</div>
+              <div className="review-time">{this.props.time}</div>
+            </div>
+          </div>
+          <div className="seafile-edit-comment">
+            <textarea className="edit-comment-input" value={this.state.newComment} onChange={this.handleCommentChange} clos="100" rows="3" warp="virtual"></textarea>
+            <Button className="comment-btn" color="success" size="sm" onClick={this.updateComment} id={item.id}>{gettext('Update')}</Button>{' '}
+            <Button className="comment-btn" color="secondary" size="sm" onClick={this.toggleEditComment}>{gettext('Cancle')}</Button>
+          </div>
+        </li>
+      );
+    }
+    return (
+      <li className={resolved ? 'seafile-comment-item seafile-comment-item-resolved' : 'seafile-comment-item'} id={id}>
+        <div className="seafile-comment-info">
+          <img className="avatar" src={avatar_url} alt=""/>
+          <div className="reviewer-info">
+            <div className="reviewer-name">{user_name}</div>
+            <div className="review-time">{this.props.time}</div>
+          </div>          
+          <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>
+              {(user_email === this.props.editorUtilities.userName) &&
+                <DropdownItem onClick={this.props.deleteComment}
+                  className="delete-comment" id={item.id}>{gettext('Delete')}</DropdownItem>
+                }
+              {(user_email === this.props.editorUtilities.userName) &&
+                <DropdownItem onClick={this.toggleEditComment}
+                  className="edit-comment" id={item.id}>{gettext('Edit')}</DropdownItem>
+              }
+              {!resolved &&
+                <DropdownItem onClick={this.props.resolveComment} className="seafile-comment-resolved"
+                  id={item.id}>{gettext('Mark as resolved')}</DropdownItem>
+              }
+            </DropdownMenu>
+          </Dropdown>
+        </div>       
+        {item.detail &&
+          <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>
+    );
+  }
+}
+
+CommentsList.propTypes = CommentItempropTypes;
+
+export default CommentsList;

frontend/src/components/markdown-view/history-list.js

@@ -0,0 +1,158 @@
+/* eslint-disable linebreak-style */
+import React from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+import Loading from '../loading';
+import moment from 'moment';
+import '../../css/markdown-viewer/history-viewer.css';
+
+const propTypes = {
+  editorUtilities: PropTypes.object.isRequired,
+  showDiffViewer: PropTypes.func.isRequired,
+  setDiffViewerContent: PropTypes.func.isRequired,
+  reloadDiffContent: PropTypes.func.isRequired,
+};
+
+class HistoryList extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.perPage = 25;
+    this.state = {
+      historyList: [],
+      activeItem: -1,
+      currentPage: 1,
+      totalReversionCount: 0,
+      loading: false
+    };
+  }
+
+  componentDidMount() {
+    this.props.editorUtilities.listFileHistoryRecords(1, this.perPage).then((res) => {
+      this.setState({
+        historyList: res.data.data,
+        totalReversionCount: res.data.total_count
+      });
+      if (res.data.data.length > 1) {
+        axios.all([
+          this.props.editorUtilities.getFileHistoryVersion(res.data.data[0].commit_id, res.data.data[0].path),
+          this.props.editorUtilities.getFileHistoryVersion(res.data.data[1].commit_id, res.data.data[1].path)
+        ]).then(axios.spread((res1, res2) => {
+          axios.all([this.props.editorUtilities.getFileContent(res1.data), this.props.editorUtilities.getFileContent(res2.data)]).then(axios.spread((content1,content2) => {
+            this.props.showDiffViewer();
+            this.props.setDiffViewerContent(content1.data, content2.data);
+          }));
+        }));
+      } else {
+        this.props.editorUtilities.getFileHistoryVersion(res.data.data[0].commit_id, res.data.data[0].path).then((res) => {
+          this.props.editorUtilities.getFileContent(res.data).then((content) => {
+            this.props.showDiffViewer();
+            this.props.setDiffViewerContent(content.data, '');
+          });
+        });
+      }
+    });
+  }
+
+  onClick = (event, key, preItem, currentItem)=> {
+    if (key === this.state.activeItem) return false;
+    this.props.reloadDiffContent();
+    this.setState({
+      activeItem: key,
+    });
+    axios.all([
+      this.props.editorUtilities.getFileHistoryVersion(currentItem.commit_id, currentItem.path),
+      this.props.editorUtilities.getFileHistoryVersion(preItem.commit_id, preItem.path)
+    ]).then(axios.spread((res1, res2) => {
+      axios.all([this.props.editorUtilities.getFileContent(res1.data), this.props.editorUtilities.getFileContent(res2.data)]).then(axios.spread((content1,content2) => {
+        this.props.showDiffViewer();
+        this.props.setDiffViewerContent(content1.data, content2.data);
+      }));
+    }));
+  }
+
+  onScroll = (event) => {
+    const clientHeight = event.target.clientHeight;
+    const scrollHeight = event.target.scrollHeight;
+    const scrollTop    = event.target.scrollTop;
+    const isBottom = (clientHeight + scrollTop + 1 >= scrollHeight);
+    if (isBottom) {
+      if (this.state.totalReversionCount > this.perPage * this.state.currentPage) {
+        let currentPage = this.state.currentPage + 1;
+        this.setState({
+          currentPage: currentPage,
+          loading : true
+        });
+        this.props.editorUtilities.listFileHistoryRecords(currentPage, this.perPage).then((res) => {
+          let currentHistoryList = Object.assign([], this.state.historyList);
+          this.setState({
+            historyList: [...currentHistoryList, ...res.data.data],
+            loading : false
+          });
+        });
+      }
+    }
+  }
+
+  render() {
+    return (
+      <div className="seafile-history-side-panel">
+        <ul onScroll={this.onScroll} className={'history-list-container'}>
+          {this.state.historyList ?
+            this.state.historyList.map((item, index = 0, arr) => {
+              let preItemIndex = index + 1;
+              if (preItemIndex === arr.length) {
+                preItemIndex = index;
+              }
+              return (
+                <HistoryItem
+                  onClick={this.onClick}
+                  ctime={item.ctime}
+                  className={this.state.activeItem === index ? 'item-active': ''}
+                  currentItem={item}
+                  name={item.creator_name}
+                  index={index}
+                  key={index}
+                  preItem={arr[preItemIndex]}
+              />
+              );
+            }) : <Loading/>
+          }
+          {
+            this.state.loading &&
+            <li className={'reloading-reversion'}><Loading style={{width: '0.5rem', margin: '0 auto', color: '#b0b0b0'}}/></li>
+          }
+        </ul>
+      </div>
+    );
+  }
+}
+
+HistoryList.propTypes = propTypes;
+
+
+const HistoryItempropTypes = {
+  ctime: PropTypes.number,
+  onClick: PropTypes.func,
+  index: PropTypes.number,
+  preItem: PropTypes.string,
+  currewntItem: PropTypes.string,
+  name: PropTypes.string,
+};
+
+class HistoryItem extends React.Component {
+  render() {
+    let time = moment.parseZone(this.props.ctime).format('YYYY-MM-DD HH:mm');
+    return (
+      <li onClick={(event) => this.props.onClick(event, this.props.index, this.props.preItem, this.props.currentItem)} className={'history-item-container ' + this.props.className}>
+        <div className="time">{time}</div>
+        <div className="owner"><i className="fa fa-square"/><span>{this.props.name}</span></div>
+      </li>
+    );
+  }
+}
+
+HistoryList.propTypes = HistoryItempropTypes;
+
+
+export default HistoryList;

frontend/src/components/markdown-view/markdown-viewer-side-panel.js

@@ -0,0 +1,164 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap';
+import HistoryList from './history-list';
+import CommentsList from './comments-list';
+import OutlineView from './outline';
+
+const URL = require('url-parse');
+
+const propTypes = {
+  editorUtilities: PropTypes.object.isRequired,
+  markdownContent: PropTypes.string.isRequired,
+  commentsNumber: PropTypes.number.isRequired,
+  viewer: PropTypes.object.isRequired,
+  value: PropTypes.object.isRequired,
+  activeTab: PropTypes.string.isRequired,
+  showDiffViewer: PropTypes.func.isRequired,
+  setDiffViewerContent: PropTypes.func.isRequired,
+  reloadDiffContent: PropTypes.func.isRequired,
+  tabItemClick: PropTypes.func.isRequired,
+  getCommentsNumber: PropTypes.func.isRequired,
+};
+
+class MarkdownViewerSidePanel extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  tabItemClick = (tab) => {
+    this.props.tabItemClick(tab);
+  }
+
+  showNavItem = (showTab) => {
+    switch(showTab) {
+      case 'outline':
+        return (
+          <NavLink className={classnames({ active: this.props.activeTab === 'outline' })}
+            onClick={() => { this.tabItemClick('outline');}} ><i className="fa fa-list"></i>
+          </NavLink>
+        );
+      case 'comments':
+        return (
+          <NavLink className={classnames({ active: this.props.activeTab === 'comments' })}
+            onClick={() => {this.tabItemClick('comments');}}><i className="fa fa-comments"></i>
+            {this.props.commentsNumber > 0 && <div className='comments-number'>{this.props.commentsNumber}</div>}
+          </NavLink>
+        );
+      case 'history':
+        return (
+          <NavLink className={classnames({ active: this.props.activeTab === 'history' })}
+            onClick={() => { this.tabItemClick('history');}}><i className="fas fa-history"></i>
+          </NavLink>
+        );
+    }
+  } 
+
+  renderNavItems = () => {
+    return (
+      <Nav tabs className="md-side-panel-nav">
+        <NavItem className="nav-item">{this.showNavItem('outline')}</NavItem>
+        <NavItem className="nav-item">{this.showNavItem('comments')}</NavItem>
+        <NavItem className="nav-item">{this.showNavItem('history')}</NavItem>
+      </Nav>
+    );
+  }
+
+  scrollToNode = (node) => {
+    let url = new URL(window.location.href);
+    url.set('hash', 'user-content-' + node.text);
+    window.location.href = url.toString();
+  }
+
+  findScrollContainer = (el, window) => {
+    let parent = el.parentNode;
+    const OVERFLOWS = ['auto', 'overlay', 'scroll'];
+    let scroller;
+    while (!scroller) {
+      if (!parent.parentNode) break;
+      const style = window.getComputedStyle(parent);
+      const { overflowY } = style;
+      if (OVERFLOWS.includes(overflowY)) {
+        scroller = parent;
+        break;
+      }
+      parent = parent.parentNode;
+    }
+    if (!scroller) {
+      return window.document.body;
+    }
+    return scroller;
+  }
+
+  scrollToQuote = (path) => {
+    if (!path) return;
+    const win = window;
+    if (path.length > 2) {
+      // deal with code block or chart
+      path[0] = path[0] > 1 ? path[0] - 1 : path[0] + 1;
+      path = path.slice(0, 1);
+    }
+    let node = this.props.value.document.getNode(path);
+    if (!node) {
+      path = path.slice(0, 1);
+      node = this.props.value.document.getNode(path);
+    }
+    if (node) {
+      let element = win.document.querySelector(`[data-key="${node.key}"]`);
+      while (element.tagName === 'CODE') {
+        element = element.parentNode;
+      }
+      const scroller = this.findScrollContainer(element, win);
+      const isWindow = scroller == win.document.body || scroller == win.document.documentElement;
+      if (isWindow) {
+        win.scrollTo(0, element.offsetTop);
+      } else {
+        scroller.scrollTop = element.offsetTop;
+      }
+    }
+  }
+
+  componentDidMount() {
+    this.tabItemClick('outline');
+  }
+
+  render() {
+    return (
+      <div className="seafile-md-viewer-side-panel">
+        {this.renderNavItems()}
+        <TabContent activeTab={this.props.activeTab}>
+          <TabPane tabId="outline" className="outline">
+            <OutlineView
+              isViewer={true}
+              document={this.props.value.document}
+              editor={this.props.viewer}
+              scrollToNode={this.scrollToNode}
+            />
+          </TabPane>
+          <TabPane tabId="comments" className="comments">
+            <CommentsList
+              editorUtilities={this.props.editorUtilities}
+              scrollToQuote={this.scrollToQuote}
+              getCommentsNumber={this.props.getCommentsNumber}
+              commentsNumber={this.props.commentsNumber}
+            />
+          </TabPane>
+          <TabPane tabId="history" className="history">
+            <HistoryList
+              editorUtilities={this.props.editorUtilities}
+              showDiffViewer={this.props.showDiffViewer}
+              setDiffViewerContent={this.props.setDiffViewerContent}
+              reloadDiffContent={this.props.reloadDiffContent}
+            />
+          </TabPane>
+        </TabContent>
+      </div>
+    );
+  }
+}
+
+MarkdownViewerSidePanel.propTypes = propTypes;
+
+export default MarkdownViewerSidePanel;

frontend/src/components/markdown-view/outline.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../utils/constants';
+
+const propTypes = {
+  scrollToNode: PropTypes.func.isRequired,
+  isViewer: PropTypes.bool.isRequired,
+  document: PropTypes.object.isRequired,
+  editor: PropTypes.object.isRequired,
+};
+
+class OutlineItem extends React.PureComponent {
+
+  constructor(props) {
+    super(props);
+  }
+
+  onClick = (event) => {
+    this.props.scrollToNode(this.props.node);
+  }
+
+  render() {
+    const node = this.props.node;
+    var c;
+    if (node.type === 'header_two') {
+      c = 'outline-h2';
+    } else if (node.type === 'header_three') {
+      c = 'outline-h3';
+    }
+    c = c + this.props.active;
+
+    return (
+      <div className={c} key={node.key} onClick={this.onClick}>{node.text}</div>
+    );
+  }
+}
+
+class OutlineView extends React.PureComponent {
+
+  render() {
+    const document = this.props.document;
+    var headerList = document.nodes.filter(node => {
+      return (node.type === 'header_two' || node.type === 'header_three');
+    });
+
+    return (
+      <div className="seafile-editor-outline">
+        {headerList.size > 0 ?
+        headerList.map((node, index) => {
+          let active = (index === this.props.activeTitleIndex) ? ' active' : ''; 
+          return (
+            <OutlineItem
+              key={node.key}
+              editor={this.props.editor}
+              value={this.props.value}
+              node={node}
+              active={active}
+              scrollToNode={this.props.scrollToNode}
+            />
+          );
+        }) : <div className={'size-panel-no-content'}>{gettext('No out line.')}</div>}
+      </div>
+    );
+  }
+
+}
+
+OutlineView.propTypes = propTypes;
+
+export default OutlineView;

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

@@ -73,6 +73,13 @@ class ReviewComments extends React.Component {
     });
   }
 
+  editComment = (commentID, newComment) => {
+    seafileAPI.updateComment(draftRepoID, commentID, null, null, newComment).then((res) => {
+      this.props.getCommentsNumber();
+      this.listComments();
+    });
+  }
+
   toggleResolvedComment = () => {
     this.setState({
       showResolvedComment: !this.state.showResolvedComment
@@ -173,7 +180,7 @@ class ReviewComments extends React.Component {
                 this.state.commentsList.map((item, index) => {
                   return (
                     <CommentItem item={item} showResolvedComment={this.state.showResolvedComment}
-                      resolveComment={this.resolveComment} key={index}
+                      resolveComment={this.resolveComment} key={index} editComment={this.editComment}
                       scrollToQuote={this.scrollToQuote} deleteComment={this.deleteComment}/>
                   );
                 })
@@ -187,7 +194,7 @@ class ReviewComments extends React.Component {
             <textarea className="add-comment-input" value={this.state.comment}
               placeholder={gettext('Add a comment.')} onChange={this.handleCommentChange}
               clos="100" rows="3" warp="virtual"></textarea>
-            <Button className="submit-comment" color="success"
+            <Button className="comment-btn" color="success"
               size="sm" onClick={this.submitComment}>
               {gettext('Submit')}</Button>
           </div>
@@ -203,6 +210,7 @@ const commentItemPropTypes = {
   item: PropTypes.object.isRequired,
   deleteComment: PropTypes.func.isRequired,
   resolveComment: PropTypes.func.isRequired,
+  editComment: PropTypes.func.isRequired,
   showResolvedComment: PropTypes.bool.isRequired,
   scrollToQuote: PropTypes.func.isRequired
 };
@@ -215,6 +223,8 @@ class CommentItem extends React.Component {
       dropdownOpen: false,
       comment: '',
       quote: '',
+      newComment: this.props.item.comment,
+      editable: false,
     };
   }
 
@@ -248,6 +258,26 @@ class CommentItem extends React.Component {
     this.props.scrollToQuote(item.newIndex, item.oldIndex, item.quote);
   }
 
+  toggleEditComment = () => {
+    this.setState({
+      editable: !this.state.editable
+    });
+  }
+
+  updateComment = (event) => {
+    const newComment = this.state.newComment;
+    if (this.props.item.comment !== newComment) {
+      this.props.editComment(event.target.id, newComment);
+    }
+    this.toggleEditComment();
+  }
+
+  handleCommentChange = (event) => {
+    this.setState({
+      newComment: event.target.value,
+    });
+  }
+
   componentWillMount() {
     this.convertComment(this.props.item);
   }
@@ -261,6 +291,24 @@ class CommentItem extends React.Component {
     if (item.resolved && !this.props.showResolvedComment) {
       return null;
     }
+    if (this.state.editable) {
+      return(
+        <li className="seafile-comment-item" id={item.id}>
+          <div className="seafile-comment-info">
+            <img className="avatar" src={item.avatarUrl} alt=""/>
+            <div className="reviewer-info">
+              <div className="reviewer-name">{item.name}</div>
+              <div className="review-time">{item.time}</div>
+            </div>
+          </div>
+          <div className="seafile-edit-comment">
+            <textarea className="edit-comment-input" value={this.state.newComment} onChange={this.handleCommentChange} clos="100" rows="3" warp="virtual"></textarea>
+            <Button className="comment-btn" color="success" size="sm" onClick={this.updateComment} id={item.id}>{gettext('Update')}</Button>{' '}
+            <Button className="comment-btn" color="secondary" size="sm" onClick={this.toggleEditComment}> {gettext('Cancle')}</Button>
+          </div>
+        </li>
+      );
+    }
     return (
       <li className={item.resolved ? 'seafile-comment-item seafile-comment-item-resolved'
         : 'seafile-comment-item'} id={item.id}>
@@ -280,6 +328,9 @@ class CommentItem extends React.Component {
                 { (item.userEmail === username) &&
                   <DropdownItem onClick={this.props.deleteComment}
                     className="delete-comment" id={item.id}>{gettext('Delete')}</DropdownItem>}
+                { (item.userEmail === username) &&
+                  <DropdownItem onClick={this.toggleEditComment}
+                    className="edit-comment" id={item.id}>{gettext('Edit')}</DropdownItem>}
                 <DropdownItem onClick={this.props.resolveComment}
                   className="seafile-comment-resolved" id={item.id}>{gettext('Mark as resolved')}</DropdownItem>
               </DropdownMenu>

frontend/src/components/toolbar/markdown-viewer-toolbar.js

@@ -7,17 +7,13 @@ import FileInfo from '@seafile/seafile-editor/dist/components/topbarcomponent/fi
 const propTypes = {
   hasDraft: PropTypes.bool.isRequired,
   isDraft: PropTypes.bool.isRequired,
-  showFileHistory: PropTypes.bool.isRequired,
   editorUtilities: PropTypes.object.isRequired,
   collabUsers: PropTypes.array.isRequired,
   fileInfo: PropTypes.object.isRequired,
   fileTagList: PropTypes.array.isRequired,
   relatedFiles: PropTypes.array.isRequired,
-  commentsNumber: PropTypes.number.isRequired,
-  toggleCommentList: PropTypes.func.isRequired,
   toggleShareLinkDialog: PropTypes.func.isRequired,
   onEdit: PropTypes.func.isRequired,
-  toggleHistory: PropTypes.func.isRequired,
   toggleNewDraft: PropTypes.func.isRequired,
   toggleStar: PropTypes.func.isRequired,
   backToParentDirectory: PropTypes.func.isRequired,
@@ -51,29 +47,15 @@ class MarkdownViewerToolbar extends React.Component {
           <ButtonGroup>
             <IconButton id={'shareBtn'} text={gettext('Share')} icon={'fa fa-share-alt'}
               onMouseDown={this.props.toggleShareLinkDialog}/>
-            {
-              this.props.commentsNumber > 0 ?
-                <button className="btn btn-icon btn-secondary btn-active" id="commentsNumber"
-                  type="button" data-active="false" onMouseDown={this.props.toggleCommentList}>
-                  <i className="fa fa-comments"></i>{' '}<span>{this.props.commentsNumber}</span>
-                </button>
-                :
-                <IconButton id={'commentsNumber'} text={gettext('Comments')} icon={'fa fa-comments'}
-                  onMouseDown={this.props.toggleCommentList}/>
-            }
             <IconButton text={gettext('Back to parent directory')} id={'parentDirectory'}
               icon={'fa fa-folder-open'} onMouseDown={this.props.backToParentDirectory}/>
             {
               (!this.props.hasDraft && this.props.fileInfo.permission === 'rw')? <IconButton text={gettext('Edit')}
                 id={'editButton'} icon={'fa fa-edit'} onMouseDown={this.props.onEdit}/>: null
             }
-            {
-              (this.props.showFileHistory) && (!this.props.isShowHistory && <IconButton id={'historyButton'}
-                text={gettext('File history')} onMouseDown={this.props.toggleHistory} icon={'fa fa-history'}/>)
-            }
           </ButtonGroup>
         </div>
-     </div>
+      </div>
     );
   }