optimize toolbar code

frontend/src/pages/markdown-editor/header-toolbar/file-info.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import moment from 'moment';
+import { gettext } from '../../../utils/constants';
+import InternalLinkDialog from '../../../components/dialog/internal-link-dialog';
+
+const { repoID, filePath } = window.app.pageOptions;
+
+class FileInfo extends React.PureComponent {
+
+  render() {
+    const { fileInfo, isPro, isLocked, mediaUrl } = this.props;
+    const starTitle = fileInfo.starred ? gettext('unstar') : gettext('star');
+    const starIconClass = `iconfont ${fileInfo.starred ? 'icon-star1 star' : 'icon-star2'}`;
+    const modifyTime = moment(fileInfo.mtime * 1000).format('YYYY-MM-DD HH:mm');
+
+    const lockedText = gettext('locked');
+    return (
+      <div className="file-info-wrapper">
+        <div className="topbar-file-info">
+          <div className="file-title">
+            <span className='file-name'>{fileInfo.name}</span>
+            <span className="file-star" title={starTitle}>
+              <i className={starIconClass} onClick={this.props.toggleStar}/>
+            </span>
+            <InternalLinkDialog path={filePath} repoID={repoID} />
+            {(isPro && isLocked) && (
+              <img 
+                className="file-locked-icon mx-2" 
+                width="16"
+                src={`${mediaUrl}img/file-locked-32.png`}
+                alt={lockedText}
+                title={lockedText}
+                aria-label={lockedText}
+              />
+            )}
+          </div>
+          <div className="file-state">
+            <span className={'file-modifier-name'}>{fileInfo.lastModifier}</span>
+            <span className={'file-modifier-time'}>{modifyTime}</span>
+            {this.props.showDraftSaved && (
+              <span className={'file-modifier-savedraft'}>{gettext('Local draft saved')}</span>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default FileInfo;

frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-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';
+import FileInfo from './file-info';
 
 const { seafileCollabServer } = window.app.config;
 const { canDownloadFile } = window.app.pageOptions;