diff --git a/frontend/src/components/file-view/comment-panel.js b/frontend/src/components/file-view/comment-panel.js
index 40967807e3..7eed2279a8 100644
--- a/frontend/src/components/file-view/comment-panel.js
+++ b/frontend/src/components/file-view/comment-panel.js
@@ -10,7 +10,8 @@ import '../../css/comments-list.css';
 const { username, repoID, filePath } = window.app.pageOptions;
 
 const CommentPanelPropTypes = {
-  toggleCommentPanel: PropTypes.func.isRequired
+  toggleCommentPanel: PropTypes.func.isRequired,
+  commentsNumber: PropTypes.number,
 };
 
 class CommentPanel extends React.Component {
@@ -75,6 +76,12 @@ class CommentPanel extends React.Component {
     this.listComments();
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (this.props.commentsNumber !== nextProps.commentsNumber) {
+      this.listComments();
+    }
+  }
+
   render() {
     return (
       <div className="seafile-comment">
diff --git a/frontend/src/draft.js b/frontend/src/draft.js
index ffec0956df..9e9ca89ae9 100644
--- a/frontend/src/draft.js
+++ b/frontend/src/draft.js
@@ -541,10 +541,10 @@ class Draft extends React.Component {
         let newNativeRange = document.createRange();
         newNativeRange.setStartBefore(startNode);
         newNativeRange.setEndAfter(startNode);
-        this.range =  findRange(newNativeRange, this.refs.diffViewer.value);
+        this.range =  findRange(newNativeRange, this.refs.diffViewer);
       }
       else {
-        this.range = findRange(nativeRange, this.refs.diffViewer.value);
+        this.range = findRange(nativeRange, this.refs.diffViewer);
       }
       if (!this.range) {
         return;
diff --git a/frontend/src/markdown-editor.js b/frontend/src/markdown-editor.js
index 3f70014d1f..ad54b88626 100644
--- a/frontend/src/markdown-editor.js
+++ b/frontend/src/markdown-editor.js
@@ -752,11 +752,13 @@ class MarkdownEditor extends React.Component {
         newNativeRange.setStartBefore(startNode);
         newNativeRange.setEndAfter(startNode);
 
-        this.range =  findRange(newNativeRange, this.state.value);
+        let editor = {value: this.state.value};
+        this.range = findRange(nativeRange, editor);
       }
 
       else {
-        this.range = findRange(nativeRange, this.state.value);
+        let editor = {value: this.state.value};
+        this.range = findRange(nativeRange, editor);
       }
       if (!this.range) return;
       let rect = nativeRange.getBoundingClientRect();
@@ -1011,7 +1013,8 @@ class MarkdownEditor extends React.Component {
                     scrollToNode={this.scrollToNode}
                   />
                 }
-                {this.state.isShowComments && <CommentPanel toggleCommentPanel={this.toggleCommentList}/>}
+                {this.state.isShowComments && 
+                  <CommentPanel toggleCommentPanel={this.toggleCommentList} commentsNumber={this.state.commentsNumber}/>}
               </div>
               <div className="seafile-md-viewer-side-panel">
                 {