feat: draft due to github connect

frontend/src/css/sdoc-revision.css

@@ -0,0 +1,51 @@
+.sdoc-revision .sdoc-revision-container {
+  flex: 1;
+  overflow-x: hidden;
+}
+
+.sdoc-revision .sdoc-revision-header {
+  height: 50px;
+  border-bottom: 1px solid #e5e5e5;
+  background-color: #fff;
+}
+
+.sdoc-revision .sdoc-revision-header .sdoc-revision-header-left {
+  font-size: 1.25rem;
+  flex: 1;
+}
+
+.sdoc-revision .sdoc-revision-header .file-name {
+  flex: 1;
+}
+
+.sdoc-revision .sdoc-revision-header .sdoc-revision-header-right {
+  height: 100%;
+  min-width: 100px;
+}
+
+.sdoc-revision .sdoc-revision-content {
+  flex: 1;
+  min-height: 0;
+  padding: 20px 40px;
+  background-color: #F5F5F5;
+  overflow-y: scroll;
+}
+
+.sdoc-revision .sdoc-revision-content .sdoc-revision-viewer {
+  width: 100%;
+  min-height: 120px;
+  flex: 1;
+  background-color: #fff;
+  word-break: break-word;
+  border: 1px solid #e6e6dd;
+}
+
+.sdoc-revision .sdoc-revision-content .sdoc-editor-content {
+  background-color: #fff;
+}
+
+.sdoc-revision .sdoc-revision-content .article {
+  width: 100%;
+  margin: 0;
+}
+

frontend/src/pages/sdoc-revision/index.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import ReactDom from 'react-dom';
+import classnames from 'classnames';
+import { Button } from 'reactstrap';
+import { DiffViewer } from '@seafile/sdoc-editor';
+import { gettext } from '../../utils/constants';
+import Loading from '../../components/loading';
+import GoBack from '../../components/common/go-back';
+import { Utils } from '../../utils/utils';
+import { seafileAPI } from '../../utils/seafile-api';
+
+import '../../css/layout.css';
+import '../../css/sdoc-revision.css';
+
+const { serviceURL, avatarURL, siteRoot } = window.app.config;
+const { username, name } = window.app.pageOptions;
+const { repoID, fileName, filePath, docUuid, assetsUrl, fileDownloadLink, originFileDownloadLink, isPublished } = window.sdocRevision;
+
+window.seafile = {
+  repoID,
+  docPath: filePath,
+  docName: fileName,
+  docUuid,
+  isOpenSocket: false,
+  serviceUrl: serviceURL,
+  name,
+  username,
+  avatarURL,
+  siteRoot,
+  assetsUrl,
+};
+
+class SdocRevision extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: true,
+      errorMessage: '',
+      revisionContent: '',
+      originContent: '',
+    };
+  }
+
+  componentDidMount() {
+    fetch(fileDownloadLink).then(res => {
+      return res.json();
+    }).then(revisionContent => {
+      fetch(originFileDownloadLink).then(res => {
+        return res.json();
+      }).then(originContent => {
+        this.setState({ revisionContent, originContent, isLoading: false, errorMessage: '' });
+      }).catch(error => {
+        const errorMessage = Utils.getErrorMsg(error, true);
+        this.setState({ isLoading: false, errorMessage });
+      });
+    }).catch(error => {
+      const errorMessage = Utils.getErrorMsg(error, true);
+      this.setState({ isLoading: false, errorMessage });
+    });
+  }
+
+  publishRevision = (event) => {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    seafileAPI.sdocPublishRevision(docUuid).then(res => {
+      console.log(res)
+    }).catch(error => {
+      console.log(error);
+    });
+  }
+
+  renderContent = () => {
+    const { isLoading, errorMessage, revisionContent, originContent } = this.state;
+    if (isLoading) {
+      return (
+        <div className="sdoc-revision-viewer d-flex align-items-center justify-content-center">
+          <Loading />
+        </div>
+      );
+    }
+
+    if (errorMessage) {
+      return (
+        <div className="sdoc-revision-viewer d-flex align-items-center justify-content-center">
+          {gettext(errorMessage)}
+        </div>
+      );
+    }
+
+    return (
+      <DiffViewer
+        currentContent={revisionContent}
+        lastContent={originContent}
+      />
+    );
+  }
+
+  render() {
+    return (
+      <div className="sdoc-revision d-flex h-100 w-100 o-hidden">
+        <div className="sdoc-revision-container d-flex flex-column">
+          <div className="sdoc-revision-header pt-2 pb-2 pl-4 pr-4 d-flex justify-content-between w-100 o-hidden">
+            <div className={classnames('sdoc-revision-header-left d-flex align-items-center o-hidden')}>
+              <GoBack />
+              <div className="file-name text-truncate">{fileName}</div>
+            </div>
+            <div className="sdoc-revision-header-right">
+              <Button color="success"></Button>
+              {!isPublished && (
+                <Button color="success" onClick={this.publishRevision}>{gettext('Publish')}</Button>
+              )}
+            </div>
+          </div>
+          <div className="sdoc-revision-content f-flex">
+            {this.renderContent()}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+ReactDom.render(<SdocRevision />, document.getElementById('wrapper'));

frontend/src/utils/utils.js

@@ -1543,6 +1543,11 @@ export const Utils = {
   generateHistoryURL: function(siteRoot, repoID, path) {
     if (!siteRoot || !repoID || !path) return '';
     return siteRoot + 'repo/file_revisions/' + repoID + '/?p=' + this.encodePath(path);
+  },
+
+  generateRevisionURL: function(siteRoot, repoID, path) {
+    if (!siteRoot || !repoID || !path) return '';
+    return siteRoot + 'repo/sdoc_revision/' + repoID + '/?p=' + this.encodePath(path);
   }
 
 };

frontend/src/view-file-sdoc.js

@@ -10,7 +10,7 @@ const { serviceURL, avatarURL, siteRoot } = window.app.config;
 const { username, name } = window.app.userInfo;
 const {
   repoID, repoName, parentDir, filePerm,
-  docPath, docName, docUuid, seadocAccessToken, seadocServerUrl, assetsUrl
+  docPath, docName, docUuid, seadocAccessToken, seadocServerUrl, assetsUrl,
 } = window.app.pageOptions;
 
 window.seafile = {
@@ -31,7 +31,8 @@ window.seafile = {
   parentFolderURL: `${siteRoot}library/${repoID}/${Utils.encodePath(repoName + parentDir)}`,
   assetsUrl,
   isShowInternalLink: true,
-  isStarIconShown: true // for star/unstar
+  isStarIconShown: true, // for star/unstar
+  revisionURL: Utils.generateRevisionURL(siteRoot, repoID, docPath),
 };
 
 ReactDom.render(