haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-05 17:02:47 +00:00
Code Issues Releases Wiki Activity

translate slate nodes to tree nodes in wiki page

Browse Source
This commit is contained in:
Michael An
2019-05-20 17:14:22 +08:00
parent a29aa1fe48
commit cbf2fa715e
2 changed files with 47 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
frontend/src/components/index-viewer.js
View File

@@ -151,22 +151,50 @@ class IndexContentViewer extends React.Component {
}); });
} }
transSlateToTree = (slateNodes, treeRoot) => { // slateNodes is list items of an unordered list or ordered list, translate them to treeNode and add to parentTreeNode
transSlateToTree = (slateNodes, parentTreeNode) => {
let treeNodes = slateNodes.map((slateNode) => { let treeNodes = slateNodes.map((slateNode) => {
const inline = slateNode.nodes[0].nodes[0]; // item has children(unordered list)
if (slateNode.nodes.length === 2 && slateNode.nodes[1].type === 'unordered_list') { if (slateNode.nodes.length === 2 && (slateNode.nodes[1].type === 'unordered_list' || slateNode.nodes[1].type === 'ordered_list')) {
// item has children(unordered list) // slateNode.nodes[0] is paragraph, create TreeNode, set name and href
let treeNode = new TreeNode({ name: inline.nodes[0].leaves[0].text, href: inline.data.href }); const paragraphNode = slateNode.nodes[0];
// nodes[0] is paragraph, create TreeNode, set name and href const treeNode = this.transParagraph(paragraphNode);
// nodes[1] is unordered-list, set it as TreeNode's children // slateNode.nodes[1] is list, set it as TreeNode's children
return this.transSlateToTree(slateNode.nodes[1].nodes, treeNode); const listNode = slateNode.nodes[1];
// Add sub list items to the tree node
return this.transSlateToTree(listNode.nodes, treeNode);
} else { } else {
// item doesn't have children list // item doesn't have children list
return new TreeNode({ name: inline.nodes[0].leaves[0].text, href: inline.data.href }); if (slateNode.nodes[0] && (slateNode.nodes[0].type === 'paragraph')) {
return this.transParagraph(slateNode.nodes[0]);
} else {
// list item contain table/code_block/blockqupta
return new TreeNode({ name: '', href: '' });
}
} }
}); });
treeRoot.addChildren(treeNodes); parentTreeNode.addChildren(treeNodes);
return treeRoot; return parentTreeNode;
}
// translate slate_paragraph_node to treeNode
transParagraph = (paragraphNode) => {
let treeNode;
if (paragraphNode.nodes[0].type === 'link') {
// paragraph node is a link node
const linkNode = paragraphNode.nodes[0];
const textNode = linkNode.nodes[0];
let name = textNode.leaves[0] ? textNode.leaves[0].text : '';
treeNode = new TreeNode({ name: name, href: linkNode.data.href });
} else if (paragraphNode.nodes[0].object === 'text') {
// paragraph first child node is a text node, then get node name
const textNode = paragraphNode.nodes[0];
let name = textNode.leaves[0] ? textNode.leaves[0].text : '';
treeNode = new TreeNode({ name: name, href: '' });
} else {
treeNode = new TreeNode({ name: '', href: '' });
}
return treeNode;
} }
render() { render() {
@@ -201,7 +229,13 @@ class FolderItem extends React.Component {
} }
renderLink = (node) => { renderLink = (node) => {
return <div className="wiki-nav-content"><a href={node.href}>{node.name}</a></div>; if (node.href && node.name) {
return <div className="wiki-nav-content"><a href={node.href}>{node.name}</a></div>;
} else if (node.name) {
return <div className="wiki-nav-content"><span>{node.name}</span></div>;
} else {
return null;
}
} }
render() { render() {

2
frontend/src/css/index-viewer.css
View File

@@ -1,7 +1,7 @@
.wiki-nav-content { .wiki-nav-content {
margin-bottom: 5px; margin-bottom: 5px;
} }
.wiki-nav-content a { .wiki-nav-content a, .wiki-nav-content span {
color: #333; color: #333;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;