Skip to content

Commit

Permalink
feat: wiki editor
Browse files Browse the repository at this point in the history
  • Loading branch information
@libra-co
libra-co committed May 17, 2024
1 parent 3f744b1 commit f5be0e3
Show file tree
Hide file tree
Showing 7 changed files with 223 additions and 58 deletions.
65 changes: 36 additions & 29 deletions frontend/src/pages/wiki2/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,9 @@ class Wiki extends Component {
currentPageId: '',
config: new WikiConfig({}),
repoId: '',
can_edit_file: false,
seadoc_access_token: '',
docUuid: '',
};

window.onpopstate = this.onpopstate;
Expand Down Expand Up @@ -153,7 +156,7 @@ class Wiki extends Component {

if (isDir === 'False') {
// this.showFile(initialPath);
this.setState({path: initialPath});
this.setState({ path: initialPath });
return;
}

Expand All @@ -171,9 +174,9 @@ class Wiki extends Component {
}

if (isDir === 'None') {
this.setState({pathExist: false});
this.setState({ pathExist: false });
let fileUrl = siteRoot + this.handlePath() + wikiId + Utils.encodePath(initialPath);
window.history.pushState({url: fileUrl, path: initialPath}, initialPath, fileUrl);
window.history.pushState({ url: fileUrl, path: initialPath }, initialPath, fileUrl);
}
};

Expand All @@ -191,7 +194,7 @@ class Wiki extends Component {
});
});
}).catch(() => {
this.setState({isLoadFailed: true});
this.setState({ isLoadFailed: true });
});
};

Expand All @@ -201,7 +204,7 @@ class Wiki extends Component {

// update location url
let fileUrl = siteRoot + this.handlePath() + wikiId + Utils.encodePath(dirPath);
window.history.pushState({url: fileUrl, path: dirPath}, dirPath, fileUrl);
window.history.pushState({ url: fileUrl, path: dirPath }, dirPath, fileUrl);
};

showFile = (filePath) => {
Expand All @@ -220,6 +223,8 @@ class Wiki extends Component {
permission: data.permission,
lastModified: moment.unix(data.last_modified).fromNow(),
latestContributor: data.latest_contributor,
can_edit_file: data.can_edit_file,
seadoc_access_token: data.seadoc_access_token,
});
}).catch(error => {
let errorMsg = Utils.getErrorMsg(error);
Expand All @@ -229,14 +234,14 @@ class Wiki extends Component {
const hash = window.location.hash;
let fileUrl = `${siteRoot}${this.handlePath()}${wikiId}${Utils.encodePath(filePath)}${hash}`;
if (filePath === '/home.md') {
window.history.replaceState({url: fileUrl, path: filePath}, filePath, fileUrl);
window.history.replaceState({ url: fileUrl, path: filePath }, filePath, fileUrl);
} else {
window.history.pushState({url: fileUrl, path: filePath}, filePath, fileUrl);
window.history.pushState({ url: fileUrl, path: filePath }, filePath, fileUrl);
}
};

loadDirentList = (dirPath) => {
this.setState({isDataLoading: true});
this.setState({ isDataLoading: true });
wikiAPI.listWiki2Dir(wikiId, dirPath).then(res => {
let direntList = res.data.dirent_list.map(item => {
let dirent = new Dirent(item);
Expand All @@ -259,7 +264,7 @@ class Wiki extends Component {
isDataLoading: false,
});
}).catch(() => {
this.setState({isLoadFailed: true});
this.setState({ isLoadFailed: true });
});
};

Expand All @@ -279,7 +284,7 @@ class Wiki extends Component {
} else {
let parentNode = tree.getNodeByPath(node.parentNode.path);
parentNode.isExpanded = true;
this.setState({treeData: tree, currentNode: node}); //tree
this.setState({ treeData: tree, currentNode: node }); //tree
}
};

Expand Down Expand Up @@ -312,12 +317,12 @@ class Wiki extends Component {
treeData: tree
});
}).catch(() => {
this.setState({isLoadFailed: true});
this.setState({ isLoadFailed: true });
});
};

removePythonWrapper = () => {
if (this.pythonWrapper) {
if (this.pythonWrapper) {
document.body.removeChild(this.pythonWrapper);
this.pythonWrapper = null;
}
Expand Down Expand Up @@ -391,7 +396,7 @@ class Wiki extends Component {
let tree = this.state.treeData.clone();
let node = tree.getNodeByPath(item.path);
treeHelper.expandNode(node);
this.setState({treeData: tree});
this.setState({ treeData: tree });
} else {
this.loadNodeAndParentsByPath(path);
}
Expand All @@ -411,14 +416,14 @@ class Wiki extends Component {
};

onMenuClick = () => {
this.setState({closeSideBar: !this.state.closeSideBar});
this.setState({ closeSideBar: !this.state.closeSideBar });
};

onMainNavBarClick = (nodePath) => {
let tree = this.state.treeData.clone();
let node = tree.getNodeByPath(nodePath);
tree.expandNode(node);
this.setState({treeData: tree, currentNode: node});
this.setState({ treeData: tree, currentNode: node });
this.showDir(node.path);
};

Expand All @@ -431,20 +436,20 @@ class Wiki extends Component {
if (Utils.isMarkdownFile(direntPath)) {
this.showFile(direntPath);
} else {
const w=window.open('about:blank');
const w = window.open('about:blank');
const url = siteRoot + 'd/' + sharedToken + '/files/?p=' + Utils.encodePath(direntPath);
w.location.href = url;
}
}
};

onCloseSide = () => {
this.setState({closeSideBar: !this.state.closeSideBar});
this.setState({ closeSideBar: !this.state.closeSideBar });
};

onNodeClick = (node) => {
if (!this.state.pathExist) {
this.setState({pathExist: true});
this.setState({ pathExist: true });
}

if (node.object.isDir()) {
Expand All @@ -454,23 +459,23 @@ class Wiki extends Component {
wikiAPI.listWiki2Dir(wikiId, node.path).then(res => {
this.addResponseListToNode(res.data.dirent_list, node);
tree.collapseNode(node);
this.setState({treeData: tree});
this.setState({ treeData: tree });
});
}
if (node.path === this.state.path) {
if (node.isExpanded) {
let tree = treeHelper.collapseNode(this.state.treeData, node);
this.setState({treeData: tree});
this.setState({ treeData: tree });
} else {
let tree = this.state.treeData.clone();
node = tree.getNodeByPath(node.path);
tree.expandNode(node);
this.setState({treeData: tree});
this.setState({ treeData: tree });
}
}
}

if (node.path === this.state.path ) {
if (node.path === this.state.path) {
return;
}

Expand All @@ -492,7 +497,7 @@ class Wiki extends Component {

onNodeCollapse = (node) => {
let tree = treeHelper.collapseNode(this.state.treeData, node);
this.setState({treeData: tree});
this.setState({ treeData: tree });
};

onNodeExpanded = (node) => {
Expand All @@ -501,11 +506,11 @@ class Wiki extends Component {
if (!node.isLoaded) {
wikiAPI.listWiki2Dir(wikiId, node.path).then(res => {
this.addResponseListToNode(res.data.dirent_list, node);
this.setState({treeData: tree});
this.setState({ treeData: tree });
});
} else {
tree.expandNode(node);
this.setState({treeData: tree});
this.setState({ treeData: tree });
}
};

Expand All @@ -525,7 +530,7 @@ class Wiki extends Component {
direntList = Utils.sortDirents(direntList, 'name', 'asc');

let nodeList = direntList.map(object => {
return new TreeNode({object});
return new TreeNode({ object });
});
node.addChildren(nodeList);
};
Expand All @@ -539,7 +544,7 @@ class Wiki extends Component {
direntList = Utils.sortDirents(direntList, 'name', 'asc');

let nodeList = direntList.map(object => {
return new TreeNode({object});
return new TreeNode({ object });
});
node.addChildren(nodeList);
};
Expand Down Expand Up @@ -598,7 +603,7 @@ class Wiki extends Component {
setCurrentPage={this.setCurrentPage}
currentPageId={this.state.currentPageId}
/>
<MainPanel
{<MainPanel
path={this.state.path}
pathExist={this.state.pathExist}
isViewFile={this.state.isViewFile}
Expand All @@ -611,7 +616,9 @@ class Wiki extends Component {
onMenuClick={this.onMenuClick}
onSearchedClick={this.onSearchedClick}
onMainNavBarClick={this.onMainNavBarClick}
/>
can_edit_file={this.state.can_edit_file}
seadoc_access_token={this.state.seadoc_access_token}
/>}
<MediaQuery query="(max-width: 767.8px)">
<Modal isOpen={!this.state.closeSideBar} toggle={this.onCloseSide} contentClassName="d-none"></Modal>
</MediaQuery>
Expand Down
63 changes: 44 additions & 19 deletions frontend/src/pages/wiki2/main-panel.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import { WikiViewer } from '@seafile/sdoc-editor';
import { gettext, repoID, siteRoot, username, isEditWiki } from '../../utils/constants';
import SeafileMarkdownViewer from '../../components/seafile-markdown-viewer';
import Loading from '../../components/loading';
Expand All @@ -22,10 +23,20 @@ const propTypes = {
onSearchedClick: PropTypes.func.isRequired,
onMainNavBarClick: PropTypes.func.isRequired,
onLinkClick: PropTypes.func.isRequired,
can_edit_file: PropTypes.bool,
seadoc_access_token: PropTypes.string,
};

class MainPanel extends Component {

constructor(props) {
super(props);

this.state = {
docUuid: '',
};
}

onMenuClick = () => {
this.props.onMenuClick();
};
Expand Down Expand Up @@ -73,19 +84,42 @@ class MainPanel extends Component {
return pathElem;
};

static getDerivedStateFromProps(props, state) {
const { can_edit_file, seadoc_access_token } = props;
const config = window.app.config;
const pageOptions = window.app.pageOptions;
const { assetsUrl, seadocServerUrl: sdocServer, } = window.wiki.config;
window.seafile = {
...window.seafile, // need docUuid
...config,
...pageOptions,
sdocServer,
assetsUrl,
can_edit_file,
accessToken: seadoc_access_token,
serviceUrl: config.serviceURL,
};
return { ...props, docUuid: window.seafile.docUuid };
}

render() {
// let { onSearchedClick } = this.props;
const errMessage = (<div className="message err-tip">{gettext('Folder does not exist.')}</div>);
const isViewingFile = this.props.pathExist && !this.props.isDataLoading && this.props.isViewFile;
const { content } = this.props;
const editorContent = content && JSON.parse(content);
return (
<div className="main-panel wiki-main-panel" style={{flex: isEditWiki ? '1 0 76%' : '1 0 80%'}}>
<div className="main-panel wiki-main-panel" style={{ flex: isEditWiki ? '1 0 76%' : '1 0 80%' }}>
<div className="main-panel-hide hide">{this.props.content}</div>
<div className={`main-panel-north panel-top ${this.props.permission === 'rw' ? 'border-left-show' : ''}`}>
{!username &&
<Fragment>
<div className="cur-view-toolbar">
<span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title="Side Nav Menu" onClick={this.onMenuClick}></span>
{this.props.permission == 'rw' && (
Utils.isDesktop() ?
<button className="btn btn-secondary operation-item" title={gettext('Edit')} onClick={this.onEditClick}>{gettext('Edit')}</button> :
<span className="fa fa-pencil-alt mobile-toolbar-icon" title={gettext('Edit')} onClick={this.onEditClick} style={{ 'fontSize': '1.1rem' }}></span>
)}
</div>
<div className="common-toolbar">
{/* {isPro && (
Expand All @@ -98,11 +132,6 @@ class MainPanel extends Component {
<Fragment>
<div className="cur-view-toolbar">
<span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title="Side Nav Menu" onClick={this.onMenuClick}></span>
{this.props.permission == 'rw' && (
Utils.isDesktop() ?
<button className="btn btn-secondary operation-item" title={gettext('Edit')} onClick={this.onEditClick}>{gettext('Edit')}</button> :
<span className="fa fa-pencil-alt mobile-toolbar-icon" title={gettext('Edit')} onClick={this.onEditClick} style={{'fontSize': '1.1rem'}}></span>
)}
</div>
<div className="common-toolbar">
{/* {isPro && (
Expand All @@ -123,23 +152,19 @@ class MainPanel extends Component {
isWiki={true}
path={this.props.path}
repoID={repoID}
markdownContent={this.props.content}
markdownContent={content}
isFileLoading={this.props.isDataLoading}
lastModified = {this.props.lastModified}
lastModified={this.props.lastModified}
latestContributor={this.props.latestContributor}
onLinkClick={this.props.onLinkClick}
/>
)}
{isViewingFile && Utils.isSdocFile(this.props.path) && (
<SdocWikiPageViewer
isWiki={true}
path={this.props.path}
repoID={repoID}
markdownContent={this.props.content}
isFileLoading={this.props.isDataLoading}
lastModified = {this.props.lastModified}
latestContributor={this.props.latestContributor}
onLinkClick={this.props.onLinkClick}
{this.props.seadoc_access_token && this.state.docUuid && isViewingFile && Utils.isSdocFile(this.props.path) && (
<WikiViewer
document={editorContent}
showOutline={false}
showToolbar={false}
docUuid={this.state.docUuid}
/>
)}
</div>
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/pages/wiki2/models/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,7 @@ export default class Page {
this.id = object.id;
this.name = object.name;
this.path = object.path;
this.icon = object.icon;
this.docUuid = object.docUuid;
}
}
Loading

0 comments on commit f5be0e3

Please sign in to comment.