fix markdown viewer (#4615)

frontend/src/components/index-viewer.js

@@ -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, this.changeInlineNode);
-    const newNodes = Utils.changeMarkdownNodes(value.document.nodes, 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')) {
+        if (slateNode.children[0] && (slateNode.children[0].type === 'paragraph')) {
-          return this.transParagraph(slateNode.nodes[0]);
+          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 linkNode = paragraphNode.children[1];
-      const textNode = linkNode.nodes[0];
+      const textNode = linkNode.children[0];
-      let name = textNode.leaves[0] ? textNode.leaves[0].text : '';
+      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];
+      const textNode = paragraphNode.children[0];
-      let name = textNode.leaves[0] ? textNode.leaves[0].text : '';
+      let name = textNode.text ? textNode.text : '';
       treeNode = new TreeNode({ name: name, href: '' });
     } else {
       treeNode = new TreeNode({ name: '', href: '' });

frontend/src/components/markdown-view/outline.js

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

frontend/src/shared-file-view-markdown.js

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