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

fix markdown viewer (#4615)

Browse Source
This commit is contained in:
songjiaqi1
2020-07-07 18:27:16 +08:00
committed by GitHub
parent b49cc1fe69
commit 72b1edd832
3 changed files with 17 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -99,7 +99,7 @@ class IndexContentViewer extends React.Component {
}
changeInlineNode = (item) => {
if (item.object == 'inline') {
if (item.type == 'link' || item.type === 'image') {
let url;
// change image url
@@ -149,11 +149,10 @@ class IndexContentViewer extends React.Component {
getRootNode = () => {
let value = deserialize(this.props.indexContent);
value = value.toJSON();
const newNodes = Utils.changeMarkdownNodes(value.document.nodes, this.changeInlineNode);
const newNodes = Utils.changeMarkdownNodes(value, this.changeInlineNode);
newNodes.map((node) => {
if (node.type === 'unordered_list' || node.type === 'ordered_list') {
let treeRoot = this.transSlateToTree(node.nodes, this.treeRoot);
let treeRoot = this.transSlateToTree(node.children, this.treeRoot);
this.setNodePath(treeRoot, '/');
this.treeRoot = treeRoot;
}
@@ -175,18 +174,18 @@ class IndexContentViewer extends React.Component {
transSlateToTree = (slateNodes, parentTreeNode) => {
let treeNodes = slateNodes.map((slateNode) => {
// item has children(unordered list)
if (slateNode.nodes.length === 2 && (slateNode.nodes[1].type === 'unordered_list' || slateNode.nodes[1].type === 'ordered_list')) {
if (slateNode.children.length === 2 && (slateNode.children[1].type === 'unordered_list' || slateNode.children[1].type === 'ordered_list')) {
// slateNode.nodes[0] is paragraph, create TreeNode, set name and href
const paragraphNode = slateNode.nodes[0];
const paragraphNode = slateNode.children[0];
const treeNode = this.transParagraph(paragraphNode);
// slateNode.nodes[1] is list, set it as TreeNode's children
const listNode = slateNode.nodes[1];
const listNode = slateNode.children[1];
// Add sub list items to the tree node
return this.transSlateToTree(listNode.nodes, treeNode);
return this.transSlateToTree(listNode.children, treeNode);
} else {
// item doesn't have children list
if (slateNode.nodes[0] && (slateNode.nodes[0].type === 'paragraph')) {
return this.transParagraph(slateNode.nodes[0]);
if (slateNode.children[0] && (slateNode.children[0].type === 'paragraph')) {
return this.transParagraph(slateNode.children[0]);
} else {
// list item contain table/code_block/blockqupta
return new TreeNode({ name: '', href: '' });
@@ -200,16 +199,16 @@ class IndexContentViewer extends React.Component {
// translate slate_paragraph_node to treeNode
transParagraph = (paragraphNode) => {
let treeNode;
if (paragraphNode.nodes[1] && paragraphNode.nodes[1].type === 'link') {
if (paragraphNode.children[1] && paragraphNode.children[1].type === 'link') {
// paragraph node is a link node
const linkNode = paragraphNode.nodes[1];
const textNode = linkNode.nodes[0];
let name = textNode.leaves[0] ? textNode.leaves[0].text : '';
const linkNode = paragraphNode.children[1];
const textNode = linkNode.children[0];
let name = textNode ? textNode.text : '';
treeNode = new TreeNode({ name: name, href: linkNode.data.href });
} else if (paragraphNode.nodes[0].object === 'text') {
} else if (paragraphNode.children[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 : '';
const textNode = paragraphNode.children[0];
let name = textNode.text ? textNode.text : '';
treeNode = new TreeNode({ name: name, href: '' });
} else {
treeNode = new TreeNode({ name: '', href: '' });

79
frontend/src/components/markdown-view/outline.js
View File

@@ -1,79 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { gettext } from '../../utils/constants';
const OutlineItempropTypes = {
scrollToNode: PropTypes.func.isRequired,
node: PropTypes.object.isRequired,
active: PropTypes.string.isRequired,
};
class OutlineItem extends React.PureComponent {
constructor(props) {
super(props);
}
onClick = (event) => {
this.props.scrollToNode(this.props.node);
}
render() {
const node = this.props.node;
var c;
if (node.type === 'header_two') {
c = 'outline-h2';
} else if (node.type === 'header_three') {
c = 'outline-h3';
}
c = c + this.props.active;
return (
<div className={c} key={node.key} onClick={this.onClick}>{node.text}</div>
);
}
}
OutlineItem.propTypes = OutlineItempropTypes;
const propTypes = {
scrollToNode: PropTypes.func.isRequired,
isViewer: PropTypes.bool.isRequired,
document: PropTypes.object.isRequired,
activeTitleIndex: PropTypes.number,
value: PropTypes.object,
};
class OutlineView extends React.PureComponent {
render() {
const document = this.props.document;
var headerList = document.nodes.filter(node => {
return (node.type === 'header_two' || node.type === 'header_three');
});
return (
<div className="seafile-editor-outline">
<div className="seafile-editor-outline-heading">{gettext('Contents')}</div>
{headerList.size > 0 ?
headerList.map((node, index) => {
let active = (index === this.props.activeTitleIndex) ? ' active' : '';
return (
<OutlineItem
key={node.key}
value={this.props.value}
node={node}
active={active}
scrollToNode={this.props.scrollToNode}
/>
);
}) : <div className={'size-panel-no-content'}>{gettext('No outline')}</div>}
</div>
);
}
}
OutlineView.propTypes = propTypes;
export default OutlineView;

5
frontend/src/shared-file-view-markdown.js
View File

@@ -61,10 +61,7 @@ class FileContent extends React.Component {
}
modifyValueBeforeRender = (value) => {
let nodes = value.document.nodes;
let newNodes = Utils.changeMarkdownNodes(nodes, this.changeImageURL);
value.document.nodes = newNodes;
return value;
return Utils.changeMarkdownNodes(value, this.changeImageURL);
}
render() {