add save button (#3270)

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

@@ -24,6 +24,8 @@ const propTypes = {
   toggleCommentList: PropTypes.func.isRequired,
   editorMode: PropTypes.string.isRequired,
   readOnly: PropTypes.bool.isRequired,
+  contentChanged: PropTypes.bool.isRequired,
+  saving: PropTypes.bool.isRequired,
 };
 
 const MoreMenuPropTypes = {
@@ -84,6 +86,7 @@ class MarkdownViewerToolbar extends React.Component {
   }
 
   render() {
+    let { contentChanged, saving } = this.props;
 
     if (this.props.editorMode === 'rich') {
       return (
@@ -122,6 +125,13 @@ class MarkdownViewerToolbar extends React.Component {
                   this.props.showFileHistory && <IconButton id={'historyButton'}
                     text={gettext('File History')} onMouseDown={this.props.toggleHistory} icon={'fa fa-history'}/>
                 }
+                { saving ?
+                  <button type={'button'} className={'btn btn-icon btn-secondary btn-active'}>
+                    <i className={'fa fa-spin fa-spinner'}/></button>
+                  :
+                  <IconButton text={gettext('Save')} id={'saveButton'} icon={'fa fa-save'}  disabled={!contentChanged} 
+                    onMouseDown={window.seafileEditor && window.seafileEditor.onPlainEditorSave} isActive={contentChanged}/>
+                }
               </ButtonGroup>
               <MoreMenu
                 readOnly={this.props.readOnly}
@@ -142,6 +152,14 @@ class MarkdownViewerToolbar extends React.Component {
             <div className="topbar-btn-container">
               {this.props.collabUsers.length > 0 && <CollabUsersButton className={'collab-users-dropdown'}
                 users={this.props.collabUsers} id={'usersButton'} />}
+              <ButtonGroup>
+                { saving ?
+                  <button type={'button'} className={'btn btn-icon btn-secondary btn-active'}>
+                    <i className={'fa fa-spin fa-spinner'}/></button>
+                  :
+                  <IconButton id={'saveButton'} text={gettext('Save')} icon={'fa fa-save'} onMouseDown={window.seafileEditor && window.seafileEditor.onPlainEditorSave} disabled={!contentChanged} isActive={contentChanged} />
+                }
+              </ButtonGroup>
               <MoreMenu
                 readOnly={this.props.readOnly}
                 openDialogs={this.props.openDialogs}

frontend/src/markdown-editor.js

@@ -291,6 +291,8 @@ class MarkdownEditor extends React.Component {
       isShowComments: false,
       isShowHistory: false,
       readOnly: true,
+      contentChanged: false,
+      saving: false,
     };
 
     if (this.state.collabServer) {
@@ -450,6 +452,7 @@ class MarkdownEditor extends React.Component {
     {
       case 'help':
         window.richMarkdownEditor.showHelpDialog();
+        this.setState({ isShowComments: false });
         break;
       case 'share_link':
         this.setState({
@@ -515,7 +518,7 @@ class MarkdownEditor extends React.Component {
             // case1: If file is draft file
             // case2: If mode == 'edit' and the file has no draft
             // case3: The length of markDownContent is 1 when clear all content in editor and the file has no draft
-            readOnly: !(hasPermission && (isDraft || (isEditMode && !hasDraft) || (isBlankFile && !hasDraft))),
+            readOnly: !hasPermission || hasDraft,
             value: value,
           });
         });
@@ -650,6 +653,7 @@ class MarkdownEditor extends React.Component {
 
   toggleCommentList = () => {
     this.setState({ isShowComments: !this.state.isShowComments });
+    window.richMarkdownEditor.handleCommentOpen();
   }
 
   getInsertLink = (repoID, filePath) => {
@@ -668,6 +672,14 @@ class MarkdownEditor extends React.Component {
     });
   }
 
+  onContentChanged = (value) => {
+    this.setState({ contentChanged: value });
+  }
+
+  onSaving = (value) => {
+    this.setState({ saving: value });
+  }
+
   render() {
     let component;
     let sidePanel = this.state.isShowHistory ? true : false;
@@ -700,6 +712,8 @@ class MarkdownEditor extends React.Component {
             readOnly={this.state.readOnly}
             mode={this.state.mode}
             editorMode={this.state.editorMode}
+            contentChanged={this.state.contentChanged}
+            saving={this.state.saving}
           />
           <SeafileEditor
             fileInfo={this.state.fileInfo}
@@ -725,6 +739,10 @@ class MarkdownEditor extends React.Component {
             deleteDraft={this.deleteDraft}
             showDraftSaved={this.state.showDraftSaved}
             readOnly={this.state.readOnly}
+            onContentChanged={this.onContentChanged}
+            onSaving={this.onSaving}
+            contentChanged={this.state.contentChanged}
+            saving={this.state.saving}
           />
           {this.state.isShowComments &&
             <div className="seafile-md-comment">