update sdoc module (#5437)

frontend/src/components/file-content-view/sdoc.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { SDocViewer } from '@seafile/sdoc-editor';
-import { defaultContentForSDoc } from '../../utils/constants';
 
 import '../../css/sdoc-file-view.css';
 
@@ -9,9 +8,10 @@ const { fileContent } = window.app.pageOptions;
 class FileContent extends React.Component {
 
   render() {
+    const document = fileContent ? JSON.parse(fileContent) : null;
     return (
       <div className="file-view-content flex-1 o-auto sdoc-file-view p-0 d-flex flex-column">
-        <SDocViewer document={fileContent ? JSON.parse(fileContent) : defaultContentForSDoc} config={{}} />
+        <SDocViewer document={document} />
       </div>
     );
   }

frontend/src/components/history-trash-file-view/file-view.js

@@ -26,7 +26,7 @@ class FileView extends React.Component {
 
   render() {
     return (
-      <div className="h-100 d-flex flex-column">
+      <div className="h-100 d-flex flex-column flex-1">
         <div className="file-view-header d-flex justify-content-between align-items-center">
           <div>
             <h2 className="file-title">{fileName}</h2>

frontend/src/shared-file-view-sdoc.js

@@ -1,61 +1,26 @@
 import React from 'react';
 import ReactDom from 'react-dom';
-import { SDocViewer } from '@seafile/sdoc-editor';
-import { seafileAPI } from './utils/seafile-api';
-import { Utils } from './utils/utils';
-import { defaultContentForSDoc } from './utils/constants';
-import SharedFileView from './components/shared-file-view/shared-file-view';
-import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
-import Loading from './components/loading';
-import toaster from './components/toast';
+import { SimpleViewer } from '@seafile/sdoc-editor';
 
-import './css/sdoc-file-view.css';
+const { serviceURL } = window.app.config;
+const { repoID, filePath, fileName } = window.shared.pageOptions;
 
-const { rawPath, err } = window.shared.pageOptions;
+const { rawPath } = window.shared.pageOptions;
+
+window.seafile = {
+  repoID,
+  rawPath: rawPath,
+  docName: fileName,  // required
+  docPath: filePath,
+  serviceUrl: serviceURL,
+};
+
+class ViewFileSdoc extends React.Component {
 
-class SharedFileViewSdoc extends React.Component {
   render() {
-    return <SharedFileView content={<FileContent />} />;
+    return <SimpleViewer />;
   }
 }
 
-class FileContent extends React.Component {
+ReactDom.render(<ViewFileSdoc />, document.getElementById('wrapper'));
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      loading: !err
-    };
-  }
-
-  componentDidMount() {
-    seafileAPI.getFileContent(rawPath).then((res) => {
-      this.setState({
-        content: res.data || defaultContentForSDoc,
-        loading: false
-      });
-    }).catch(error => {
-      let errMessage = Utils.getErrorMsg(error);
-      toaster.danger(errMessage);
-    });
-  }
-
-  render() {
-    const { loading, content } = this.state;
-    if (err) {
-      return <SharedFileViewTip />;
-    }
-
-    if (loading) {
-      return <Loading />;
-    }
-
-    return (
-      <div className="shared-file-view-body d-flex flex-column sdoc-file-view p-0">
-        {content && <SDocViewer document={content} config={{}} />}
-      </div>
-    );
-  }
-}
-
-ReactDom.render(<SharedFileViewSdoc />, document.getElementById('wrapper'));

frontend/src/view-file-sdoc.js

@@ -1,138 +1,27 @@
 import React from 'react';
 import ReactDom from 'react-dom';
-import PropTypes from 'prop-types';
-import Url from 'url-parse';
-import axios from 'axios';
-import { SDocEditor } from '@seafile/sdoc-editor';
-import { Utils } from './utils/utils';
-import { defaultContentForSDoc } from './utils/constants';
-import { seafileAPI } from './utils/seafile-api';
-import FileView from './components/file-view/file-view';
-import FileViewTip from './components/file-view/file-view-tip';
+import { SimpleEditor } from '@seafile/sdoc-editor';
 
-import './css/sdoc-file-view.css';
+const { serviceURL } = window.app.config;
+const { repoID, docPath, docName, docUuid, seadocAccessToken, seadocServerUrl } = window.app.pageOptions;
 
-const {
-  err, repoID, filePath, username,
+window.seafile = {
+  repoID,
   docPath,
   docName,
   docUuid,
-  seadocAccessToken,
-  seadocServerUrl
-} = window.app.pageOptions;
-
-const propTypes = {
-  content: PropTypes.object,
-  errorMsg: PropTypes.string
+  isOpenSocket: true,
+  serviceUrl: serviceURL,
+  accessToken: seadocAccessToken,
+  sdocServer: seadocServerUrl,
 };
 
-const config = {
-  docPath: docPath,
-  docName: docName,
-  docUuid: docUuid,
-  sdocServer: (new Url(seadocServerUrl)).origin,
-  accessToken: seadocAccessToken
-};
-
-class FileContent extends React.Component {
-
-  render() {
-    const { content, errorMsg } = this.props;
-
-    if (err) {
-      return <FileViewTip />;
-    }
-    if (errorMsg) {
-      return <FileViewTip errorMsg={errorMsg} />;
-    }
-
-    return (
-      <div className="file-view-content flex-1 sdoc-file-view p-0 d-flex flex-column">
-        {content && <SDocEditor
-          document={content}
-          config={config}
-          isOpenSocket={true}
-          onValueChanged={() => {}}
-        />}
-      </div>
-    );
-  }
-}
-
-FileContent.propTypes = propTypes;
-
 class ViewFileSdoc extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      participants: []
-    };
-    this.isParticipant = false;
-  }
 
-  getFileContent = () => {
-    const {
-      docPath,
-      docName,
-      docUuid,
-      accessToken
-    } = config;
 
-    const url = `${seadocServerUrl}/api/v1/docs/${docUuid}/?doc_path=${encodeURIComponent(docPath)}&doc_name=${encodeURIComponent(docName)}`;
-    return axios.get(url, {headers: {Authorization: `Token ${accessToken}`}});
-  }
-
-  componentDidMount() {
-    this.getParticipants();
-
-    this.getFileContent().then(res => {
-      const content = res.data || defaultContentForSDoc;
-      this.setState({
-        content: content
-      });
-    }).catch((error) => {
-      this.setState({
-        errorMsg: Utils.getErrorMsg(error, true) // true: show login tip if 403
-      });
-    });
-  }
-
-  addParticipant = () => {
-    seafileAPI.addFileParticipants(repoID, filePath, [username]).then((res) => {
-      this.isParticipant = true;
-      this.getParticipants();
-    });
-  }
-
-  getParticipants = () => {
-    seafileAPI.listFileParticipants(repoID, filePath).then((res) => {
-      const participants = res.data.participant_list;
-      this.setState({ participants: participants });
-      if (participants.length > 0) {
-        this.isParticipant = participants.every((participant) => {
-          return participant.email == username;
-        });
-      }
-    });
-  }
-
-  onParticipantsChange = () => {
-    this.getParticipants();
-  }
 
   render() {
-    return (
-      <FileView
-        content={
-          <FileContent
-            content={this.state.content}
-            errorMsg={this.state.errorMsg}
-          />
-        }
-        participants={this.state.participants}
-        onParticipantsChange={this.onParticipantsChange}
-      />
-    );
+    return (<SimpleEditor />);
   }
 }
 

seahub/templates/shared_file_view_react.html

@@ -33,6 +33,8 @@
     {% render_bundle 'sharedFileViewDocument' 'css' %}
 {% elif filetype == 'SpreadSheet' %}
     {% render_bundle 'sharedFileViewSpreadsheet' 'css' %}
+{% elif filetype == 'SDoc' %}
+    {% render_bundle 'sharedFileViewSdoc' 'css' %}
 {% elif filetype == 'Unknown' %}
     {% render_bundle 'sharedFileViewUnknown' 'css' %}
 {% endif %}