optimize history module

frontend/src/css/file-history.css

@@ -29,20 +29,20 @@
 }
 
 .content-viewer {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+
+.content-viewer .sf-slate-viewer-scroll-container {
   background-color: #fafaf9;
-  border-radius: 10px;
+  padding: 20px 40px;
-  overflow: auto;
+  display: block;
 }
 
-.markdown-viewer-render-content {
+.content-viewer .sf-slate-viewer-article-container .article {
-  background-color: #fff;
+  width: 100%;
-  word-break: break-word;
+  max-width: 100%;
-  margin: 20px 40px;
-  border: 1px solid #e6e6dd;
-}
-
-.markdown-viewer-render-content .diff-view {
-  padding: 40px 60px;
 }
 
 .panel-header {
@@ -124,10 +124,14 @@
   .history-content .main-panel {
     max-width: 100%;
   }
-  .markdown-viewer-render-content {
+  .content-viewer .sf-slate-viewer-scroll-container {
-    margin: 20px;
+    padding: 20px;
   }
-  .markdown-viewer-render-content .diff-view {
+  .content-viewer .sf-slate-viewer-article-container {
+    margin: 0;
+    padding: 0;
+  }
+  .content-viewer .sf-slate-viewer-article-container .article {
     padding: 20px;
   }
 }

frontend/src/file-history.js

@@ -31,27 +31,13 @@ class FileHistory extends React.Component {
 
   onHistoryItemClick = (item, preItem)=> {
     this.setState({renderingContent: true});
-    if (preItem) {
+    seafileAPI.getFileRevision(historyRepoID, item.commit_id, item.path).then((res) => {
       axios.all([
-        seafileAPI.getFileRevision(historyRepoID, item.commit_id, item.path),
+        seafileAPI.getFileContent(res.data),
-        seafileAPI.getFileRevision(historyRepoID, preItem.commit_id, preItem.path)
+      ]).then(axios.spread((content1) => {
-      ]).then(axios.spread((res, res1) => {
+        this.setDiffContent(content1.data, '');
-        axios.all([
-          seafileAPI.getFileContent(res.data),
-          seafileAPI.getFileContent(res1.data)
-        ]).then(axios.spread((content1, content2) => {
-          this.setDiffContent(content1.data, content2.data);
-        }));
       }));
-    } else {
+    });
-      seafileAPI.getFileRevision(historyRepoID, item.commit_id, item.path).then((res) => {
-        axios.all([
-          seafileAPI.getFileContent(res.data),
-        ]).then(axios.spread((content1) => {
-          this.setDiffContent(content1.data, '');
-        }));
-      });
-    }
   };
 
   onBackClick = (event) => {

frontend/src/pages/file-history/main-panel.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Prism from 'prismjs';
-import { DiffViewer } from '@seafile/seafile-editor';
+import { MarkdownViewer } from '@seafile/seafile-editor';
 import Loading from '../../components/loading';
 import { mediaUrl } from '../../utils/constants';
 
-const contentClass = 'markdown-viewer-render-content';
 const propTypes = {
   renderingContent: PropTypes.bool.isRequired,
   content: PropTypes.string,
@@ -24,19 +23,18 @@ class MainPanel extends React.Component {
   };
 
   render() {
+    const { renderingContent, newMarkdownContent } = this.props;
     return (
       <div className="content-viewer flex-fill">
-        <div className={contentClass}>
+        {renderingContent && <Loading />}
-          {this.props.renderingContent ?
+        {!renderingContent && (
-            (<Loading />) :
+          <MarkdownViewer
-            (<div className="diff-view article">
+            isFetching={renderingContent}
-              <DiffViewer
+            value={newMarkdownContent}
-                scriptSource={mediaUrl + 'js/mathjax/tex-svg.js'}
+            isShowOutline={false}
-                newMarkdownContent={this.props.newMarkdownContent}
+            mathJaxSource={mediaUrl + 'js/mathjax/tex-svg.js'}
-                oldMarkdownContent={this.props.oldMarkdownContent}
+          />
-              />
+        )}
-            </div>)}
-        </div>
       </div>
     );
   }