diff --git a/frontend/src/components/toolbar/markdown-viewer-toolbar.js b/frontend/src/components/toolbar/markdown-viewer-toolbar.js
index f5a18a943a..a3c0cf6b9f 100644
--- a/frontend/src/components/toolbar/markdown-viewer-toolbar.js
+++ b/frontend/src/components/toolbar/markdown-viewer-toolbar.js
@@ -26,6 +26,7 @@ const propTypes = {
   readOnly: PropTypes.bool.isRequired,
   contentChanged: PropTypes.bool.isRequired,
   saving: PropTypes.bool.isRequired,
+  showDraftSaved: PropTypes.bool.isRequired,
 };
 
 const MoreMenuPropTypes = {
@@ -92,8 +93,12 @@ class MarkdownViewerToolbar extends React.Component {
       return (
         <div className="sf-md-viewer-topbar">
           <div className="sf-md-viewer-topbar-first d-flex justify-content-between">
-            <FileInfo toggleStar={this.props.toggleStar} editorUtilities={this.props.editorUtilities}
-              fileInfo={this.props.fileInfo}/>
+            <FileInfo
+              toggleStar={this.props.toggleStar}
+              editorUtilities={this.props.editorUtilities}
+              fileInfo={this.props.fileInfo}
+              showDraftSaved={this.props.showDraftSaved}
+            />
             {(this.props.hasDraft && !this.props.isDraft) &&
               <div className='seafile-btn-view-review'>
                 <div className='tag tag-green'>{gettext('This file is in draft stage.')}
diff --git a/frontend/src/markdown-editor.js b/frontend/src/markdown-editor.js
index a2f3a2c9a6..a5cb73fffd 100644
--- a/frontend/src/markdown-editor.js
+++ b/frontend/src/markdown-editor.js
@@ -430,10 +430,9 @@ class MarkdownEditor extends React.Component {
         localDraftDialog: false,
         loading: false,
       });
-    } else {
-      let draftKey = editorUtilities.getDraftKey();
-      localStorage.removeItem(draftKey);
     }
+    let draftKey = editorUtilities.getDraftKey();
+    localStorage.removeItem(draftKey);
   }
 
   closeDraftDialog = () => {
@@ -714,6 +713,7 @@ class MarkdownEditor extends React.Component {
             editorMode={this.state.editorMode}
             contentChanged={this.state.contentChanged}
             saving={this.state.saving}
+            showDraftSaved={this.state.showDraftSaved}
           />
           <SeafileEditor
             fileInfo={this.state.fileInfo}
@@ -737,7 +737,6 @@ class MarkdownEditor extends React.Component {
             clearTimer={this.clearTimer}
             openDialogs={this.openDialogs}
             deleteDraft={this.deleteDraft}
-            showDraftSaved={this.state.showDraftSaved}
             readOnly={this.state.readOnly}
             onContentChanged={this.onContentChanged}
             onSaving={this.onSaving}