diff --git a/frontend/src/pages/markdown-editor/header-toolbar/button-group.js b/frontend/src/pages/markdown-editor/header-toolbar/button-group.js
new file mode 100644
index 0000000000..d88337f6ed
--- /dev/null
+++ b/frontend/src/pages/markdown-editor/header-toolbar/button-group.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+class ButtonGroup extends React.PureComponent {
+  render() {
+    return (
+      <div className={'btn-group ' + this.props.className} role={'group'}>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+export default ButtonGroup;
diff --git a/frontend/src/pages/markdown-editor/header-toolbar/button-item.js b/frontend/src/pages/markdown-editor/header-toolbar/button-item.js
new file mode 100644
index 0000000000..cbe8b5aea5
--- /dev/null
+++ b/frontend/src/pages/markdown-editor/header-toolbar/button-item.js
@@ -0,0 +1,108 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Tooltip } from 'reactstrap';
+
+const propTypes = {
+  id: PropTypes.string.isRequired,
+  isActive: PropTypes.bool,
+  disabled: PropTypes.bool,
+  isRichEditor: PropTypes.bool,
+  className: PropTypes.string,
+  icon: PropTypes.string,
+  text: PropTypes.string,
+};
+
+class ButtonItem extends React.Component {
+
+  static defaultProps = {
+    className: '',
+    isActive: false,
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      tooltipOpen: false,
+      isFreezed: false,
+    };
+  }
+
+  toggle = () => {
+    const { disabled } = this.props;
+    if (disabled) return;
+
+    const { isFreezed, tooltipOpen } = this.state;
+    if (isFreezed && !tooltipOpen) return;
+    this.setState({tooltipOpen: !tooltipOpen, isFreezed: true});
+
+    setTimeout(() => {
+      this.setState({ isFreezed: false });
+    }, 100);
+  }
+
+  shouldComponentUpdate (nextProps, nextState) {
+    const { disabled, isActive } = nextProps;
+    const { disabled: oldDisabled, isActive: oldIsActive } = this.props;
+    if (disabled !== oldDisabled) {
+      this.setState({tooltipOpen: false});
+      return true;
+    }
+    // only render iconButton when the button is active or show show tooltip
+    const { tooltipOpen } = nextState;
+    const { tooltipOpen: oldTooltipOpen } = this.state;
+    if (tooltipOpen === oldTooltipOpen && isActive === oldIsActive) {
+      return false;
+    }
+
+    return true;
+  }
+
+  onClick = (event) => {
+    if (!this.props.disabled) {
+      this.props.onClick && this.props.onClick(event);
+    }
+  }
+  
+  onMouseDown = (event) => {
+    if (!this.props.disabled) {
+      this.props.onMouseDown(event);
+    }
+  }
+
+  getClassName = () => {
+    const { isRichEditor, className, disabled } = this.props;
+    let itemClass = 'btn btn-icon btn-secondary btn-active';
+    if (!isRichEditor) return itemClass + ' ' + className;
+
+    itemClass = `rich-icon-btn ${disabled ? 'rich-icon-btn-disabled' : 'rich-icon-btn-hover'}`;
+    return itemClass + ' ' + className;
+  }
+
+  render() {
+    const { tooltipOpen } = this.state;
+    const { id, isActive, disabled, icon, text } = this.props;
+    const className = this.getClassName();
+    const delay = {show: 0, hide: 0};
+    return (
+      <button 
+        type="button"
+        id={id} 
+        className={className}
+        data-active={isActive }
+        disabled={disabled}
+        onClick ={this.onClick} 
+        onMouseDown={this.onMouseDown}
+      >
+        <i className={icon} />
+        <Tooltip target={id} isOpen={tooltipOpen} delay={delay} placement='bottom' toggle={this.toggle}>
+          {text}
+        </Tooltip>
+      </button>
+    );
+  }
+}
+
+ButtonItem.propTypes = propTypes;
+
+export default ButtonItem;
diff --git a/frontend/src/pages/markdown-editor/header-toolbar/collab-users-button.js b/frontend/src/pages/markdown-editor/header-toolbar/collab-users-button.js
new file mode 100644
index 0000000000..d508ef218d
--- /dev/null
+++ b/frontend/src/pages/markdown-editor/header-toolbar/collab-users-button.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+
+class CollabUsersButton extends React.PureComponent {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      dropdownOpen: false,
+    };
+  }
+
+  dropdownToggle = () => {
+    this.setState({dropdownOpen: !this.state.dropdownOpen});
+  }
+
+  render() {
+    return (
+      <Dropdown className={this.props.className} isOpen={this.state.dropdownOpen} toggle={this.dropdownToggle}>
+        <DropdownToggle id={this.props.id}>
+          <i className="iconfont icon-users"></i> {this.props.users.length}
+        </DropdownToggle>
+        <DropdownMenu className={'drop-list'}>
+          {this.props.users.map((ele, idx) => (
+            <DropdownItem key={idx}>
+              <i className={ele.is_editing ? 'iconfont icon-edit' : 'iconfont icon-user'}></i> {ele.user.name} {ele.myself ? '(you)' : ''}
+            </DropdownItem>
+          ))}
+        </DropdownMenu>
+      </Dropdown>
+    );
+  }
+
+}
+
+export default CollabUsersButton;
diff --git a/frontend/src/components/toolbar/markdown-viewer-toolbar.js b/frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js
similarity index 72%
rename from frontend/src/components/toolbar/markdown-viewer-toolbar.js
rename to frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js
index ac4a17f6a8..e8c2835b8a 100644
--- a/frontend/src/components/toolbar/markdown-viewer-toolbar.js
+++ b/frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js
@@ -1,9 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { gettext, canGenerateShareLink, isPro, mediaUrl, canLockUnlockFile } from '../../utils/constants';
-import { IconButton, ButtonGroup, CollabUsersButton } from '@seafile/seafile-editor/dist/components/topbar-component/editor-toolbar';
-import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Tooltip } from 'reactstrap';
 import FileInfo from '@seafile/seafile-editor/dist/components/topbar-component/file-info';
+import { gettext, canGenerateShareLink, isPro, mediaUrl, canLockUnlockFile } from '../../../utils/constants';
+import ButtonGroup from './button-group';
+import ButtonItem from './button-item';
+import CollabUsersButton from './collab-users-button';
+import MoreMenu from './more-menu';
 
 const { seafileCollabServer } = window.app.config;
 const { canDownloadFile } = window.app.pageOptions;
@@ -33,78 +35,7 @@ const propTypes = {
   toggleLockFile: PropTypes.func.isRequired,
 };
 
-const MoreMenuPropTypes = {
-  readOnly: PropTypes.bool.isRequired,
-  openDialogs: PropTypes.func.isRequired,
-  onEdit: PropTypes.func.isRequired,
-  editorMode: PropTypes.string.isRequired,
-  isSmallScreen: PropTypes.bool,
-  toggleShareLinkDialog: PropTypes.func,
-  openParentDirectory: PropTypes.func,
-  showFileHistory: PropTypes.bool,
-  toggleHistory: PropTypes.func,
-};
-
-class MoreMenu extends React.PureComponent {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      tooltipOpen: false,
-      dropdownOpen:false
-    };
-  }
-
-  tooltipToggle = () => {
-    this.setState({ tooltipOpen: !this.state.tooltipOpen });
-  }
-
-  dropdownToggle = () => {
-    this.setState({ dropdownOpen:!this.state.dropdownOpen });
-  }
-
-  downloadFile = () => {
-    location.href = '?dl=1';
-  }
-
-  render() {
-    const editorMode = this.props.editorMode;
-    const isSmall = this.props.isSmallScreen;
-    return (
-      <Dropdown isOpen={this.state.dropdownOpen} toggle={this.dropdownToggle} direction="down" className="mx-1">
-        <DropdownToggle id="moreButton" aria-label={gettext('More Operations')}>
-          <i className="fa fa-ellipsis-v"/>
-          <Tooltip toggle={this.tooltipToggle} delay={{show: 0, hide: 0}} target="moreButton" placement='bottom' isOpen={this.state.tooltipOpen}>{gettext('More')}
-          </Tooltip>
-        </DropdownToggle>
-        <DropdownMenu className="drop-list" right={true}>
-          {(!this.props.readOnly && editorMode === 'rich') &&
-            <DropdownItem onMouseDown={this.props.onEdit.bind(this, 'plain')}>{gettext('Switch to plain text editor')}</DropdownItem>}
-          {(!this.props.readOnly && editorMode === 'plain') &&
-            <DropdownItem onMouseDown={this.props.onEdit.bind(this, 'rich')}>{gettext('Switch to rich text editor')}</DropdownItem>}
-          {!isSmall && this.props.showFileHistory &&
-            <DropdownItem onMouseDown={this.props.toggleHistory}>{gettext('History')}</DropdownItem>}
-          {(this.props.openDialogs && editorMode === 'rich') &&
-            <DropdownItem onMouseDown={this.props.openDialogs.bind(this, 'help')}>{gettext('Help')}</DropdownItem>
-          }
-          {isSmall && <DropdownItem onMouseDown={this.props.openParentDirectory}>{gettext('Open parent directory')}</DropdownItem>}
-          {isSmall && canGenerateShareLink && <DropdownItem onMouseDown={this.props.toggleShareLinkDialog}>{gettext('Share')}</DropdownItem>}
-          {(isSmall && this.props.showFileHistory) &&
-            <DropdownItem onMouseDown={this.props.toggleHistory}>{gettext('History')}</DropdownItem>
-          }
-          {isSmall && canDownloadFile &&
-            <DropdownItem onClick={this.downloadFile}>{gettext('Download')}</DropdownItem>
-          }
-        </DropdownMenu>
-      </Dropdown>
-    );
-  }
-}
-
-MoreMenu.propTypes = MoreMenuPropTypes;
-
-
-class MarkdownViewerToolbar extends React.Component {
+class HeaderToolbar extends React.Component {
 
   constructor(props) {
     super(props);
@@ -120,6 +51,7 @@ class MarkdownViewerToolbar extends React.Component {
   }
 
   render() {
+    console.log('aaa');
     let { contentChanged, saving, isLocked, lockedByMe } = this.props;
     let canPublishDraft = this.props.fileInfo.permission == 'rw';
     let canCreateDraft = canPublishDraft && (!this.props.hasDraft && !this.props.isDraft && this.props.isDocs);
@@ -167,27 +99,27 @@ class MarkdownViewerToolbar extends React.Component {
                 />
               }
               <ButtonGroup>
-                <IconButton text={gettext('Open parent directory')} id={'parentDirectory'}
+                <ButtonItem text={gettext('Open parent directory')} id={'parentDirectory'}
                   icon={'fa fa-folder-open'} onMouseDown={this.props.openParentDirectory}/>
                 {(canLockUnlockFile && !isLocked) &&
-                  <IconButton id="lock-unlock-file" icon='fa fa-lock' text={gettext('Lock')} onMouseDown={this.props.toggleLockFile}/>
+                  <ButtonItem id="lock-unlock-file" icon='fa fa-lock' text={gettext('Lock')} onMouseDown={this.props.toggleLockFile}/>
                 }
                 {(canLockUnlockFile && lockedByMe) &&
-                  <IconButton id="lock-unlock-file" icon='fa fa-unlock' text={gettext('Unlock')} onMouseDown={this.props.toggleLockFile}/>
+                  <ButtonItem id="lock-unlock-file" icon='fa fa-unlock' text={gettext('Unlock')} onMouseDown={this.props.toggleLockFile}/>
                 }
                 {canGenerateShareLink &&
-                  <IconButton id={'shareBtn'} text={gettext('Share')} icon={'fa fa-share-alt'}
+                  <ButtonItem id={'shareBtn'} text={gettext('Share')} icon={'fa fa-share-alt'}
                     onMouseDown={this.props.toggleShareLinkDialog}/>
                 }
                 {saving ?
                   <button type={'button'} aria-label={gettext('Saving...')} 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}
+                  <ButtonItem text={gettext('Save')} id={'saveButton'} icon={'fa fa-save'} disabled={!contentChanged}
                     onMouseDown={window.seafileEditor && window.seafileEditor.onRichEditorSave} isActive={contentChanged}/>
                 }
                 {canDownloadFile && (
-                  <IconButton
+                  <ButtonItem
                     id="download-file"
                     icon="fa fa-download"
                     text={gettext('Download')}
@@ -195,7 +127,7 @@ class MarkdownViewerToolbar extends React.Component {
                   />
                 )}
                 {this.props.fileInfo.permission == 'rw' &&
-                <IconButton
+                <ButtonItem
                   id="open-via-client"
                   icon="sf3-font sf3-font-desktop"
                   text={gettext('Open via Client')}
@@ -227,7 +159,7 @@ class MarkdownViewerToolbar extends React.Component {
                   <button type={'button'} aria-label={gettext('Saving...')} 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}
+                  <ButtonItem text={gettext('Save')} id={'saveButton'} icon={'fa fa-save'}  disabled={!contentChanged}
                     onMouseDown={window.seafileEditor && window.seafileEditor.onRichEditorSave} isActive={contentChanged}/>
                 }
               </ButtonGroup>
@@ -265,7 +197,7 @@ class MarkdownViewerToolbar extends React.Component {
                   <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} />
+                  <ButtonItem id={'saveButton'} text={gettext('Save')} icon={'fa fa-save'} onMouseDown={window.seafileEditor && window.seafileEditor.onPlainEditorSave} disabled={!contentChanged} isActive={contentChanged} />
                 }
               </ButtonGroup>
               <MoreMenu
@@ -286,7 +218,7 @@ class MarkdownViewerToolbar extends React.Component {
                   <button type={'button'} className={'btn btn-icon btn-secondary btn-active'}>
                     <i className={'fa fa-spin fa-spinner'}/></button>
                   :
-                  <IconButton
+                  <ButtonItem
                     id={'saveButton'}
                     text={gettext('Save')}
                     icon={'fa fa-save'}
@@ -312,6 +244,6 @@ class MarkdownViewerToolbar extends React.Component {
   }
 }
 
-MarkdownViewerToolbar.propTypes = propTypes;
+HeaderToolbar.propTypes = propTypes;
 
-export default MarkdownViewerToolbar;
+export default HeaderToolbar;
diff --git a/frontend/src/pages/markdown-editor/header-toolbar/index.js b/frontend/src/pages/markdown-editor/header-toolbar/index.js
new file mode 100644
index 0000000000..6676c40f8e
--- /dev/null
+++ b/frontend/src/pages/markdown-editor/header-toolbar/index.js
@@ -0,0 +1,3 @@
+import HeaderToolbar from "./header-toolbar";
+
+export default HeaderToolbar;
diff --git a/frontend/src/pages/markdown-editor/header-toolbar/more-menu.js b/frontend/src/pages/markdown-editor/header-toolbar/more-menu.js
new file mode 100644
index 0000000000..1119739cbe
--- /dev/null
+++ b/frontend/src/pages/markdown-editor/header-toolbar/more-menu.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Tooltip } from 'reactstrap';
+import { gettext, canGenerateShareLink } from '../../../utils/constants';
+
+const { canDownloadFile } = window.app.pageOptions;
+
+const MoreMenuPropTypes = {
+  readOnly: PropTypes.bool.isRequired,
+  openDialogs: PropTypes.func.isRequired,
+  onEdit: PropTypes.func.isRequired,
+  editorMode: PropTypes.string.isRequired,
+  isSmallScreen: PropTypes.bool,
+  toggleShareLinkDialog: PropTypes.func,
+  openParentDirectory: PropTypes.func,
+  showFileHistory: PropTypes.bool,
+  toggleHistory: PropTypes.func,
+};
+
+class MoreMenu extends React.PureComponent {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      tooltipOpen: false,
+      dropdownOpen:false
+    };
+  }
+
+  tooltipToggle = () => {
+    this.setState({ tooltipOpen: !this.state.tooltipOpen });
+  }
+
+  dropdownToggle = () => {
+    this.setState({ dropdownOpen:!this.state.dropdownOpen });
+  }
+
+  downloadFile = () => {
+    location.href = '?dl=1';
+  }
+
+  render() {
+    const editorMode = this.props.editorMode;
+    const isSmall = this.props.isSmallScreen;
+    return (
+      <Dropdown isOpen={this.state.dropdownOpen} toggle={this.dropdownToggle} direction="down" className="mx-1">
+        <DropdownToggle id="moreButton" aria-label={gettext('More Operations')}>
+          <i className="fa fa-ellipsis-v"/>
+          <Tooltip toggle={this.tooltipToggle} delay={{show: 0, hide: 0}} target="moreButton" placement='bottom' isOpen={this.state.tooltipOpen}>{gettext('More')}
+          </Tooltip>
+        </DropdownToggle>
+        <DropdownMenu className="drop-list" right={true}>
+          {(!this.props.readOnly && editorMode === 'rich') &&
+            <DropdownItem onMouseDown={this.props.onEdit.bind(this, 'plain')}>{gettext('Switch to plain text editor')}</DropdownItem>}
+          {(!this.props.readOnly && editorMode === 'plain') &&
+            <DropdownItem onMouseDown={this.props.onEdit.bind(this, 'rich')}>{gettext('Switch to rich text editor')}</DropdownItem>}
+          {!isSmall && this.props.showFileHistory &&
+            <DropdownItem onMouseDown={this.props.toggleHistory}>{gettext('History')}</DropdownItem>}
+          {(this.props.openDialogs && editorMode === 'rich') &&
+            <DropdownItem onMouseDown={this.props.openDialogs.bind(this, 'help')}>{gettext('Help')}</DropdownItem>
+          }
+          {isSmall && <DropdownItem onMouseDown={this.props.openParentDirectory}>{gettext('Open parent directory')}</DropdownItem>}
+          {isSmall && canGenerateShareLink && <DropdownItem onMouseDown={this.props.toggleShareLinkDialog}>{gettext('Share')}</DropdownItem>}
+          {(isSmall && this.props.showFileHistory) &&
+            <DropdownItem onMouseDown={this.props.toggleHistory}>{gettext('History')}</DropdownItem>
+          }
+          {isSmall && canDownloadFile &&
+            <DropdownItem onClick={this.downloadFile}>{gettext('Download')}</DropdownItem>
+          }
+        </DropdownMenu>
+      </Dropdown>
+    );
+  }
+}
+
+MoreMenu.propTypes = MoreMenuPropTypes;
+
+export default MoreMenu;
\ No newline at end of file
diff --git a/frontend/src/pages/markdown-editor/index.js b/frontend/src/pages/markdown-editor/index.js
index 903eba46ac..c80f29bdcd 100644
--- a/frontend/src/pages/markdown-editor/index.js
+++ b/frontend/src/pages/markdown-editor/index.js
@@ -14,7 +14,7 @@ import LocalDraftDialog from '../../components/dialog/local-draft-dialog';
 import EditFileTagDialog from '../../components/dialog/edit-filetag-dialog';
 import InsertRepoImageDialog from '../../components/dialog/insert-repo-image-dialog';
 import FileParticipantDialog from '../../components/dialog/file-participant-dialog';
-import MarkdownViewerToolbar from '../../components/toolbar/markdown-viewer-toolbar';
+import HeaderToolbar from './header-toolbar';
 import editorApi from './editor-api';
 
 import '../../css/markdown-viewer/markdown-editor.css';
@@ -509,7 +509,7 @@ class MarkdownEditor extends React.Component {
     } else if (this.state.mode === 'editor') {
       component = (
         <Fragment>
-          <MarkdownViewerToolbar
+          <HeaderToolbar
             isDocs={isDocs}
             hasDraft={hasDraft}
             isDraft={isDraft}