optimize toolbar code

frontend/src/css/markdown-viewer/markdown-editor.css

@@ -172,3 +172,58 @@
 .seafile-editor-side-panel .seafile-comment {
   width: 100%;
 }
+
+/* toolbar */
+.topbar-file-info {
+  display: inline-block;
+  margin-left: 8px;
+  /*
+    only select file info text
+  */
+  user-select: text;
+}
+.topbar-file-info .file-title {
+  font-size: 1.2rem;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+}
+
+.topbar-file-info .file-title .iconfont {
+  font-size: 0.875rem;
+}
+
+.topbar-file-info .file-title .file-star,
+.topbar-file-info .file-title .file-internal-link {
+  font-size: 0.875rem;
+  cursor: pointer;
+  margin-left: 0.5rem;
+  vertical-align: text-bottom;
+  color: #999;
+}
+
+.topbar-file-info .file-title .file-internal-link {
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.topbar-file-info .file-title .file-internal-link:hover {
+  color: #333;
+}
+
+.topbar-file-info .file-title .file-star .star {
+  color: #999;
+}
+
+.topbar-file-info .file-state {
+  font-size: 0.8125rem;
+}
+
+.topbar-file-info .file-state .file-modifier-name {
+  margin-right: 0.5rem;
+}
+
+.topbar-file-info .file-state .file-modifier-savedraft {
+  margin-left: 0.5rem;
+  color: #888;
+}

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;