haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-11 20:01:10 +00:00
Code Issues Releases Wiki Activity

feat: wiki editor

Browse Source
This commit is contained in:
liuhongbo
2024-05-17 15:09:41 +08:00
parent be0cf3be24
commit 2ea5352edb
7 changed files with 223 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
frontend/src/pages/wiki2/index.js
View File

@@ -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;
@@ -153,7 +156,7 @@ class Wiki extends Component {
if (isDir === 'False') {
// this.showFile(initialPath);
this.setState({path: initialPath});
this.setState({ path: initialPath });
return;
}
@@ -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);
}
};
@@ -191,7 +194,7 @@ class Wiki extends Component {
});
});
}).catch(() => {
this.setState({isLoadFailed: true});
this.setState({ isLoadFailed: true });
});
};
@@ -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) => {
@@ -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);
@@ -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);
@@ -259,7 +264,7 @@ class Wiki extends Component {
isDataLoading: false,
});
}).catch(() => {
this.setState({isLoadFailed: true});
this.setState({ isLoadFailed: true });
});
};
@@ -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
}
};
@@ -312,7 +317,7 @@ class Wiki extends Component {
treeData: tree
});
}).catch(() => {
this.setState({isLoadFailed: true});
this.setState({ isLoadFailed: true });
});
};
@@ -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);
}
@@ -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);
};
@@ -431,7 +436,7 @@ 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;
}
@@ -439,12 +444,12 @@ class Wiki extends Component {
};
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()) {
@@ -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;
}
@@ -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) => {
@@ -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 });
}
};
@@ -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);
};
@@ -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);
};
@@ -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}
@@ -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>

63
frontend/src/pages/wiki2/main-panel.js
View File

@@ -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';
@@ -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();
};
@@ -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 && (
@@ -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 && (
@@ -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>

2
frontend/src/pages/wiki2/models/page.js
View File

@@ -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;
}
}

10
frontend/src/pages/wiki2/side-panel.js
View File

@@ -53,7 +53,7 @@ class SidePanel extends Component {
renderIndexView = () => {
return (
<div className="wiki-pages-container">
<div style={{marginTop: '2px'}}></div>
<div style={{ marginTop: '2px' }}></div>
<IndexMdViewer
indexContent={this.props.indexContent}
onLinkClick={this.props.onLinkClick}
@@ -115,11 +115,11 @@ class SidePanel extends Component {
}
};
onAddNewPage = async ({name, icon, path, successCallback, errorCallback}) => {
onAddNewPage = async ({ name, icon, path, docUuid,successCallback, errorCallback }) => {
const { config } = this.props;
const navigation = config.navigation;
const pageId = generateUniqueId(navigation);
const newPage = new Page({ id: pageId, name, icon, path});
const newPage = new Page({ id: pageId, name, icon, path,docUuid });
this.addPage(newPage, successCallback, errorCallback);
};
@@ -392,12 +392,12 @@ class SidePanel extends Component {
render() {
return (
<div className={`side-panel wiki-side-panel ${this.props.closeSideBar ? '': 'left-zero'}`}>
<div className={`side-panel wiki-side-panel ${this.props.closeSideBar ? '' : 'left-zero'}`}>
<div className="side-panel-top panel-top">
<h4 className="ml-0 mb-0 text-truncate" title={repoName}>{repoName}</h4>
</div>
<div id="side-nav" className="wiki-side-nav" role="navigation">
{this.renderContent() }
{this.renderContent()}
</div>
</div>
);

5
frontend/src/pages/wiki2/view-structure/add-new-page-dialog.js
View File

@@ -95,11 +95,12 @@ class AddNewPageDialog extends React.Component {
createFile = (pageName, filePath) => {
seafileAPI.createFile(repoID, filePath).then(res => {
const { obj_name, parent_dir } = res.data;
const { obj_name, parent_dir,doc_uuid } = res.data;
this.props.onAddNewPage({
name: pageName,
icon: '',
path: parent_dir === '/' ? `/${obj_name}` : `${parent_dir}/${obj_name}`,
docUuid:doc_uuid,
successCallback: this.onSuccess,
errorCallback: this.onError,
});
@@ -135,7 +136,7 @@ class AddNewPageDialog extends React.Component {
<ModalFooter>
<Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
{this.state.isLoading ?
<Button color="primary" disabled><Loading/></Button> :
<Button color="primary" disabled><Loading /></Button> :
<Button color="primary" onClick={this.onSubmit}>{gettext('Submit')}</Button>
}
</ModalFooter>

6
frontend/src/pages/wiki2/view-structure/views/view-item.js
View File

@@ -193,6 +193,10 @@ class ViewItem extends Component {
}
};
setDocUuid = (docUuid) => {
window.seafile['docUuid'] = docUuid;
};
render() {
const {
connectDragSource, connectDragPreview, connectDropTarget, isOver, canDrop, isDragging,
@@ -200,7 +204,7 @@ class ViewItem extends Component {
} = this.props;
const { isShowViewEditor, viewName, viewIcon, isSelected } = this.state;
const isOverView = isOver && canDrop;
if (isSelected) this.setDocUuid(view.docUuid);
const isSpecialInstance = false;
let viewCanDropTop;

128
frontend/src/pages/wiki2/wiki.css
View File

@@ -45,7 +45,7 @@
.wiki-pages-container .tree-view {
margin-left: -10px;
margin-top: 14px;
padding-left:0;
padding-left: 0;
}
img[src=""] {
@@ -86,6 +86,10 @@ img[src=""] {
overflow-y: auto;
}
.main-panel-center .cur-view-content {
padding: 0;
}
.cur-view-content .wiki-page-content {
width: calc(100% - 200px);
padding-right: 30px;
@@ -96,6 +100,7 @@ img[src=""] {
padding: 0 14px;
padding-top: 30px;
}
.cur-view-content .wiki-page-content {
width: 100%;
padding-right: 0;
@@ -141,3 +146,124 @@ img[src=""] {
padding: 0 !important;
}
}
/* wiki editor */
.sdoc-editor-container {
flex: 1;
display: flex;
min-height: 0;
/* background-color: hotpink; */
}
.sdoc-wiki-scroll-container {
display: flex;
overflow: auto;
}
.sdoc-wiki-scroll-container .sdoc-article-container {
padding-left: 10px;
width: 100%;
}
.sdoc-wiki-scroll-container .sdoc-article-container .article .sdoc-header-2 {
border-bottom: 1px solid #ccc;
}
.sdoc-wiki-outline-container {
height: 80%;
overflow-y: auto;
padding-right: 1rem;
position: fixed;
right: 0;
top: 97px;
width: 300px;
}
.wiki-editor {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.wiki-editor .wiki-editor-header {
display: flex;
justify-content: space-between;
padding: 10px 20px;
height: 56px;
border-bottom: 1px solid #e5e5e5;
background-color: #fff;
z-index: 1000;
}
.wiki-editor .wiki-editor-header .doc-ops {
display: flex;
}
.wiki-editor .wiki-viewer-container {
display: flex;
height: 100%;
width: 100%;
overflow: hidden;
}
.wiki-editor .wiki-viewer-container .side-file-bar {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 280px;
border-right: 1px solid #e5e5e5;
}
.wiki-editor .wiki-viewer-container .side-file-bar {
padding: 20px;
}
.wiki-editor .wiki-viewer-container .side-file-bar .wiki-go-lib {}
.wiki-editor .wiki-viewer-container .side-file-bar .file-list .file-item {
padding: 20px;
}
.wiki-editor .wiki-viewer-container .side-file-bar .file-list .file-item.active {
background-color: #e5e5e5;
font-weight: bold;
}
.wiki-editor .sdoc-wiki-outline-container {
width: 280px;
}
/* wiki editor style */
.sdoc-editor-container .article :first-child {
margin-top: 0;
}
.sdoc-editor-container .article {
flex: 1;
min-height: 800px;
padding: 40px 40px 40px 40px;
}
.sdoc-editor-container .article>div {
caret-color: blue;
}
.sdoc-editor-container .article .sdoc-drag-cover::before {
content: ' ';
width: 59px;
display: inline-block;
position: absolute;
left: -60px;
}
.sdoc-editor-container .article .sdoc-draging {
border-bottom: 2px solid rgba(35, 131, 226);
}
.sdoc-editor-container {
display: flex;
/* position: absolute; */
min-width: 1100px;
width: 100%;
}