2018-05-02 06:09:58 +00:00
|
|
|
import React from 'react';
|
2018-07-27 03:48:21 +00:00
|
|
|
import SeafileEditor from '@seafile/seafile-editor';
|
2018-05-02 06:09:58 +00:00
|
|
|
import 'whatwg-fetch';
|
2018-07-27 03:48:21 +00:00
|
|
|
import { SeafileAPI } from 'seafile-js';
|
2018-08-06 10:29:12 +00:00
|
|
|
import cookie from 'react-cookies';
|
2018-05-02 06:09:58 +00:00
|
|
|
let repoID = window.app.pageOptions.repoID;
|
|
|
|
let filePath = window.app.pageOptions.filePath;
|
|
|
|
let fileName = window.app.pageOptions.fileName;
|
|
|
|
let siteRoot = window.app.config.siteRoot;
|
|
|
|
let domain = window.app.pageOptions.domain;
|
|
|
|
let protocol = window.app.pageOptions.protocol;
|
2018-08-06 10:29:12 +00:00
|
|
|
let mode = window.app.pageOptions.mode;
|
2018-05-02 06:09:58 +00:00
|
|
|
let dirPath = '/';
|
|
|
|
|
2018-07-27 03:48:21 +00:00
|
|
|
const serviceUrl = window.app.config.serviceUrl;
|
|
|
|
const seafileCollabServer = window.app.config.seafileCollabServer;
|
|
|
|
const userInfo = window.app.userInfo;
|
|
|
|
// init seafileAPI
|
|
|
|
let seafileAPI = new SeafileAPI();
|
2018-09-01 03:42:25 +00:00
|
|
|
let xcsrfHeaders = cookie.load('sfcsrftoken');
|
2018-08-06 10:29:12 +00:00
|
|
|
seafileAPI.initForSeahubUsage({ siteRoot, xcsrfHeaders });
|
2018-05-02 06:09:58 +00:00
|
|
|
|
|
|
|
function getImageFileNameWithTimestamp() {
|
|
|
|
var d = Date.now();
|
|
|
|
return "image-" + d.toString() + ".png";
|
|
|
|
}
|
|
|
|
|
|
|
|
class EditorUtilities {
|
2018-07-27 03:48:21 +00:00
|
|
|
|
|
|
|
constructor () {
|
|
|
|
this.repoID = repoID;
|
|
|
|
this.filePath = filePath;
|
|
|
|
this.serviceUrl = serviceUrl;
|
|
|
|
}
|
|
|
|
|
2018-05-02 06:09:58 +00:00
|
|
|
saveContent(content) {
|
2018-07-27 03:48:21 +00:00
|
|
|
return (
|
|
|
|
seafileAPI.getUpdateLink(repoID, dirPath).then((res) => {
|
|
|
|
const uploadLink = res.data;
|
|
|
|
return seafileAPI.updateFile(uploadLink, filePath, fileName, content)
|
2018-05-02 06:09:58 +00:00
|
|
|
})
|
2018-07-27 03:48:21 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
unStarFile () {
|
|
|
|
return (
|
|
|
|
seafileAPI.unStarFile(repoID, this.filePath)
|
|
|
|
)
|
2018-05-02 06:09:58 +00:00
|
|
|
}
|
|
|
|
|
2018-07-27 03:48:21 +00:00
|
|
|
starFile() {
|
|
|
|
return (
|
|
|
|
seafileAPI.starFile(this.repoID, this.filePath)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
getParentDectionaryUrl() {
|
|
|
|
let parentPath = this.filePath.substring(0, this.filePath.lastIndexOf('/'));
|
|
|
|
return this.serviceUrl + "/#common/lib/" + this.repoID + parentPath;
|
|
|
|
}
|
|
|
|
|
2018-05-02 06:09:58 +00:00
|
|
|
_getImageURL(fileName) {
|
|
|
|
const url = `${protocol}://${domain}${siteRoot}lib/${repoID}/file/images/${fileName}?raw=1`;
|
|
|
|
return url;
|
|
|
|
}
|
|
|
|
|
|
|
|
uploadImage = (imageFile) => {
|
2018-07-27 03:48:21 +00:00
|
|
|
return (
|
|
|
|
seafileAPI.getUploadLink(repoID, dirPath).then((res) => {
|
|
|
|
let uploadLinkComponent = res.data;
|
|
|
|
const uploadLink = uploadLinkComponent + "?ret-json=1";
|
2018-05-02 06:09:58 +00:00
|
|
|
const name = getImageFileNameWithTimestamp();
|
|
|
|
const blob = imageFile.slice(0, -1, 'image/png');
|
|
|
|
const newFile = new File([blob], name, {type: 'image/png'});
|
|
|
|
const formData = new FormData();
|
|
|
|
formData.append("parent_dir", "/");
|
|
|
|
formData.append("relative_path", "images");
|
|
|
|
formData.append("file", newFile);
|
2018-07-27 03:48:21 +00:00
|
|
|
return {uploadLink, formData}
|
|
|
|
}).then(({ uploadLink, formData}) => {
|
|
|
|
return seafileAPI.uploadImage(uploadLink, formData)
|
|
|
|
}).then ((res) => {
|
|
|
|
let resArr = res.data[0];
|
|
|
|
let filename = resArr.name;
|
2018-05-02 06:09:58 +00:00
|
|
|
return this._getImageURL(filename);
|
2018-07-27 03:48:21 +00:00
|
|
|
})
|
|
|
|
)
|
|
|
|
}
|
2018-05-02 06:09:58 +00:00
|
|
|
|
|
|
|
getFileURL(fileNode) {
|
|
|
|
var url;
|
2018-08-28 03:34:03 +00:00
|
|
|
if (fileNode.type === 'file') {
|
|
|
|
if (fileNode.isImage()) {
|
|
|
|
url = serviceUrl + "/lib/" + repoID + "/file" + encodeURIComponent(fileNode.path()) + "?raw=1";
|
|
|
|
} else {
|
|
|
|
url = serviceUrl + "/lib/" + repoID + "/file" + encodeURIComponent(fileNode.path());
|
|
|
|
}
|
2018-05-02 06:09:58 +00:00
|
|
|
} else {
|
2018-09-07 14:25:13 +00:00
|
|
|
url = serviceUrl + "/#common/lib/" + repoID + encodeURIComponent(fileNode.path());
|
2018-05-02 06:09:58 +00:00
|
|
|
}
|
|
|
|
return url;
|
|
|
|
}
|
|
|
|
|
|
|
|
isInternalFileLink(url) {
|
2018-07-27 03:48:21 +00:00
|
|
|
var re = new RegExp(this.serviceUrl + "/lib/[0-9a-f-]{36}/file.*");
|
2018-05-02 06:09:58 +00:00
|
|
|
return re.test(url);
|
|
|
|
}
|
|
|
|
|
2018-08-28 03:34:03 +00:00
|
|
|
|
|
|
|
isInternalDirLink(url) {
|
2018-09-07 14:25:13 +00:00
|
|
|
var re = new RegExp(serviceUrl + "/#[a-z\-]*?/lib/" + "[0-9a-f\-]{36}.*");
|
2018-08-28 03:34:03 +00:00
|
|
|
return re.test(url);
|
|
|
|
}
|
|
|
|
|
2018-05-02 06:09:58 +00:00
|
|
|
getFiles() {
|
2018-07-27 03:48:21 +00:00
|
|
|
return seafileAPI.listDir(repoID, dirPath, { recursive: true} ).then((response) => {
|
|
|
|
var files = response.data.map((item) => {
|
|
|
|
return {
|
|
|
|
name: item.name,
|
|
|
|
type: item.type === 'dir' ? 'dir' : 'file',
|
|
|
|
parent_path: item.parent_dir
|
|
|
|
}
|
2018-05-02 06:09:58 +00:00
|
|
|
})
|
2018-07-27 03:48:21 +00:00
|
|
|
return files;
|
|
|
|
})
|
2018-05-02 06:09:58 +00:00
|
|
|
}
|
2018-08-06 10:29:12 +00:00
|
|
|
|
|
|
|
getFileHistory() {
|
|
|
|
return (
|
|
|
|
seafileAPI.getFileHistory(repoID, filePath)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
getFileInfo() {
|
|
|
|
return (
|
|
|
|
seafileAPI.getFileInfo(repoID, filePath)
|
|
|
|
)
|
|
|
|
}
|
2018-08-22 10:07:32 +00:00
|
|
|
|
|
|
|
getInternalLink() {
|
|
|
|
return seafileAPI.getInternalLink(repoID, filePath)
|
|
|
|
}
|
|
|
|
|
|
|
|
getShareLink() {
|
|
|
|
return seafileAPI.getShareLink(repoID, filePath);
|
|
|
|
}
|
|
|
|
|
|
|
|
createShareLink (repoID, filePath, userPassword, userValidDays) {
|
|
|
|
return seafileAPI.createShareLink(repoID, filePath, userPassword, userValidDays);
|
|
|
|
}
|
|
|
|
|
|
|
|
deleteShareLink(token){
|
|
|
|
return seafileAPI.deleteShareLink(token)
|
|
|
|
}
|
|
|
|
|
2018-05-02 06:09:58 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const editorUtilities = new EditorUtilities();
|
|
|
|
|
|
|
|
class App extends React.Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {
|
|
|
|
markdownContent: "",
|
|
|
|
loading: true,
|
2018-06-07 07:01:41 +00:00
|
|
|
mode: "editor",
|
2018-07-27 03:48:21 +00:00
|
|
|
fileInfo: {
|
|
|
|
repoID: repoID,
|
|
|
|
name: fileName,
|
|
|
|
path: filePath,
|
|
|
|
mtime: null,
|
|
|
|
size: 0,
|
|
|
|
starred: false,
|
2018-08-06 10:29:12 +00:00
|
|
|
permission: '',
|
|
|
|
lastModifier: '',
|
2018-07-27 03:48:21 +00:00
|
|
|
},
|
|
|
|
collabServer: seafileCollabServer ? seafileCollabServer : null,
|
2018-05-02 06:09:58 +00:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
2018-07-27 03:48:21 +00:00
|
|
|
|
|
|
|
seafileAPI.getFileInfo(repoID, filePath).then((res) => {
|
2018-08-06 10:29:12 +00:00
|
|
|
let { mtime, size, starred, permission, last_modifier_name } = res.data;
|
|
|
|
let lastModifier = last_modifier_name
|
|
|
|
|
2018-07-27 03:48:21 +00:00
|
|
|
this.setState((prevState, props) => ({
|
|
|
|
fileInfo: {
|
|
|
|
...prevState.fileInfo,
|
|
|
|
mtime,
|
|
|
|
size,
|
2018-08-06 10:29:12 +00:00
|
|
|
starred,
|
|
|
|
permission,
|
|
|
|
lastModifier
|
2018-07-27 03:48:21 +00:00
|
|
|
}
|
|
|
|
}));
|
|
|
|
|
|
|
|
seafileAPI.getFileDownloadLink(repoID, filePath).then((res) => {
|
|
|
|
const downLoadUrl = res.data;
|
|
|
|
seafileAPI.getFileContent(downLoadUrl).then((res) => {
|
|
|
|
this.setState({
|
|
|
|
markdownContent: res.data,
|
|
|
|
loading: false
|
|
|
|
})
|
2018-05-02 06:09:58 +00:00
|
|
|
})
|
2018-07-27 03:48:21 +00:00
|
|
|
});
|
2018-05-02 06:09:58 +00:00
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
if (this.state.loading) {
|
|
|
|
return (
|
|
|
|
<div className="empty-loading-page">
|
|
|
|
<div className="lds-ripple page-centered"><div></div><div></div></div>
|
|
|
|
</div>
|
|
|
|
)
|
2018-06-07 07:01:41 +00:00
|
|
|
} else if (this.state.mode === "editor") {
|
2018-05-02 06:09:58 +00:00
|
|
|
return (
|
|
|
|
<SeafileEditor
|
2018-07-27 03:48:21 +00:00
|
|
|
fileInfo={this.state.fileInfo}
|
2018-05-02 06:09:58 +00:00
|
|
|
markdownContent={this.state.markdownContent}
|
|
|
|
editorUtilities={editorUtilities}
|
2018-07-27 03:48:21 +00:00
|
|
|
userInfo={this.state.collabServer ? userInfo : null}
|
|
|
|
collabServer={this.state.collabServer}
|
2018-08-06 10:29:12 +00:00
|
|
|
mode={mode}
|
2018-05-02 06:09:58 +00:00
|
|
|
/>
|
|
|
|
);
|
2018-06-07 07:01:41 +00:00
|
|
|
}
|
2018-05-02 06:09:58 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
export default App;
|