1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-07-09 13:14:14 +00:00
seahub/frontend/src/markdown-editor.js

237 lines
6.2 KiB
JavaScript
Raw Normal View History

2018-05-02 06:09:58 +00:00
import React from 'react';
import SeafileEditor from '@seafile/seafile-editor';
2018-05-02 06:09:58 +00:00
import 'whatwg-fetch';
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 = '/';
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 {
constructor () {
this.repoID = repoID;
this.filePath = filePath;
this.serviceUrl = serviceUrl;
}
2018-05-02 06:09:58 +00:00
saveContent(content) {
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
})
)
}
unStarFile () {
return (
seafileAPI.unStarFile(repoID, this.filePath)
)
2018-05-02 06:09:58 +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) => {
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);
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-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) {
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() {
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
})
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)
)
}
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-09-19 02:47:56 +00:00
getDraftKey() {
return (this.repoID + this.filePath);
}
2018-05-02 06:09:58 +00:00
}
const editorUtilities = new EditorUtilities();
2018-09-21 06:16:15 +00:00
class MarkdownEditor extends React.Component {
2018-05-02 06:09:58 +00:00
constructor(props) {
super(props);
this.state = {
markdownContent: "",
loading: true,
2018-06-07 07:01:41 +00:00
mode: "editor",
fileInfo: {
repoID: repoID,
name: fileName,
path: filePath,
mtime: null,
size: 0,
starred: false,
2018-08-06 10:29:12 +00:00
permission: '',
lastModifier: '',
},
collabServer: seafileCollabServer ? seafileCollabServer : null,
2018-05-02 06:09:58 +00:00
};
}
componentDidMount() {
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
this.setState((prevState, props) => ({
fileInfo: {
...prevState.fileInfo,
mtime,
size,
2018-08-06 10:29:12 +00:00
starred,
permission,
lastModifier
}
}));
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-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
fileInfo={this.state.fileInfo}
2018-05-02 06:09:58 +00:00
markdownContent={this.state.markdownContent}
editorUtilities={editorUtilities}
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
}
}
2018-09-21 06:16:15 +00:00
export default MarkdownEditor;