add file-diff (#2398)

frontend/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@reach/router": "^1.2.0",
-    "@seafile/seafile-editor": "^0.1.20",
+    "@seafile/seafile-editor": "^0.1.24",
     "autoprefixer": "7.1.6",
     "chalk": "1.1.3",
     "css-loader": "0.28.7",

frontend/src/components/history-list-view/history-list-item.js

@@ -39,7 +39,7 @@ class HistoryListItem extends React.Component {
       return;
     }
     this.setState({isShowOperationIcon: false});  //restore to default state
-    this.props.onHistoryItemClick(this.props.item);
+    this.props.onHistoryItemClick(this.props.item, this.props.preCommitID);
   }
 
   onMenuControlClick = (e) => {

frontend/src/components/history-list-view/history-list-view.js

@@ -2,6 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import HisotyListItem from './history-list-item';
 import Loading from '../loading';
+import axios from 'axios';
+import editUtilties from '../../utils/editor-utilties';
+import URLDecorator from '../../utils/url-decorator';
+import { filePath } from '../constants';
 
 const propTypes = {
   hasMore: PropTypes.bool.isRequired,
@@ -27,15 +31,42 @@ class HistoryListView extends React.Component {
     }
   }
 
+  componentDidMount() {
+    let historyList = this.props.historyList;
+    if (historyList.length > 1) {
+      let downLoadURL = URLDecorator.getUrl({type: 'download_historic_file', filePath: filePath, objID: historyList[0].rev_file_id});
+      let downLoadURL1 = URLDecorator.getUrl({type: 'download_historic_file', filePath: filePath, objID: historyList[1].rev_file_id});
+      axios.all([
+        editUtilties.getFileContent(downLoadURL),
+        editUtilties.getFileContent(downLoadURL1)
+      ]).then(axios.spread((res1, res2) => {
+        this.props.setDiffContent(res1.data, res2.data);
+      }));
+    } else {
+      let downLoadURL = URLDecorator.getUrl({type: 'download_historic_file', filePath: filePath, objID: historyList[0].rev_file_id});
+      axios.all([
+        editUtilties.getFileContent(downLoadURL),
+      ]).then(axios.spread((res1) => {
+        this.props.setDiffContent(res1.data, '');
+      }));
+    }
+   
+  }
+
   render() {
     return (
       <ul className="history-list-container" onScroll={this.onScrollHandler}>
-        {this.props.historyList.map((item, index) => {
+        {this.props.historyList.map((item, index, historyList) => {
+          let preItemIndex = index + 1;
+          if (preItemIndex === historyList.length) {
+            preItemIndex = index;
+          }
           return (
             <HisotyListItem
               key={index} 
               item={item}
               isFirstItem={index === 0}
+              preCommitID={historyList[preItemIndex].rev_file_id}
               currentItem={this.props.currentItem}
               isItemFrezeed={this.props.isItemFrezeed}
               onMenuControlClick={this.props.onMenuControlClick}

frontend/src/css/file-history.css

@@ -5,6 +5,7 @@
 
 .history, .markdown-viewer-render-content {
   background-color: #fff;
+  word-break: break-word;
 }
 
 .history-heading {

frontend/src/file-history.js

@@ -6,6 +6,7 @@ import URLDecorator from './utils/url-decorator';
 import { processor } from '@seafile/seafile-editor/src/lib/seafile-markdown2html';
 import SidePanel from './pages/file-history/side-panel';
 import MainPanel from './pages/file-history/main-panel';
+import axios from 'axios';
 import 'seafile-ui';
 import './assets/css/fa-solid.css';
 import './assets/css/fa-regular.css';
@@ -23,39 +24,33 @@ class FileHistory extends React.Component {
       content: '',
       renderingContent: true,
       fileOwner: '',
+      markdownContent: '',
+      markdownContentOld: ''
     };
   }
 
-  componentDidMount() {
-    let _this = this;
-    editUtilties.getFileDownloadLink(filePath).then(res => {
-      const downLoadUrl = res.data;
-      editUtilties.getFileContent(downLoadUrl).then((res) => {
-        let content = res.data;
-        processor.process(content, function(err, file) {
-          _this.setState({
+
+  setDiffContent = (markdownContent, markdownContentOld)=> {
+    this.setState({
       renderingContent: false,
-            content: String(file)
-          });
-        });
-      });
+      markdownContent: markdownContent,
+      markdownContentOld: markdownContentOld
     });
   }
 
-  onHistoryItemClick = (item) => {
+
+  onHistoryItemClick = (item, preCommitID)=> {
     let _this = this;
     let objID = item.rev_file_id;
     let downLoadURL = URLDecorator.getUrl({type: 'download_historic_file', filePath: filePath, objID: objID});
+    let downLoadURL1 = URLDecorator.getUrl({type: 'download_historic_file', filePath: filePath, objID: preCommitID});
     this.setState({renderingContent: true});
-    editUtilties.getFileContent(downLoadURL).then((res) => {
-      let content = res.data;
-      processor.process(content, function(err, file) {
-        _this.setState({
-          renderingContent: false,
-          content: String(file)
-        });
-      });
-    });
+    axios.all([
+      editUtilties.getFileContent(downLoadURL),
+      editUtilties.getFileContent(downLoadURL1)
+    ]).then(axios.spread((res1, res2) => {
+      this.setDiffContent(res1.data, res2.data);
+    }));
   }
 
   render() {
@@ -64,11 +59,14 @@ class FileHistory extends React.Component {
         <SidePanel 
           fileOwner={this.state.fileOwner}
           onHistoryItemClick={this.onHistoryItemClick}
+          setDiffContent={this.setDiffContent}
         />
         <MainPanel 
-          content={this.state.content}
+          markdownContent={this.state.markdownContent}
+          markdownContentOld={this.state.markdownContentOld}
           renderingContent={this.state.renderingContent}
         />
+
       </div>
     );
   }

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

@@ -3,7 +3,9 @@ import PropTypes from 'prop-types';
 import Prism from 'prismjs';
 import Loading from '../../components/loading';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
+import DiffViewer from '@seafile/seafile-editor/dist/diff-viewer/diff-viewer'
 import '../../css/initial-style.css';
+
 require('@seafile/seafile-editor/src/lib/code-hight-package');
 
 const contentClass = 'markdown-viewer-render-content';
@@ -33,10 +35,7 @@ class MainPanel extends React.Component {
             { 
               this.props.renderingContent ? 
                 (<div className={contentClass + ' article'}><Loading /></div>) : 
-                (<div 
-                  className={contentClass + ' article'}
-                  dangerouslySetInnerHTML={{ __html: this.props.content }}
-                />)
+                (<div className={contentClass + ' article'}><DiffViewer markdownContent={this.props.markdownContent} markdownContent1={this.props.markdownContentOld}/></div>)
             }
           </div>
         </div>

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

@@ -124,9 +124,9 @@ class SidePanel extends React.Component {
     this.onHideContextMenu();
   }
 
-  onHistoryItemClick =(item) => {
+  onHistoryItemClick =(item, preCommitID) => {
     this.setState({currentItem: item});
-    this.props.onHistoryItemClick(item);
+    this.props.onHistoryItemClick(item, preCommitID);
   }
 
   render() {
@@ -154,6 +154,7 @@ class SidePanel extends React.Component {
                 reloadMore={this.reloadMore}
                 currentItem={this.state.currentItem}
                 onHistoryItemClick={this.onHistoryItemClick}
+                setDiffContent={this.props.setDiffContent}
               />
             }
             <HistoryListMenu