Rewrite wiki page with react (#2258)

frontend/src/components/markdown-viewer.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import { processor } from '@seafile/seafile-editor/src/lib/seafile-markdown2html';
+import TreeView from './tree-view/tree-view';
+import Prism from 'prismjs';
+
+var URL = require('url-parse');
+
+require('@seafile/seafile-editor/src/lib/code-hight-package');
+
+const contentClass = "wiki-md-viewer-rendered-content";
+
+class MarkdownViewerContent extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidUpdate () {
+    Prism.highlightAll();
+    var links = document.querySelectorAll(`.${contentClass} a`);
+    links.forEach((li) => {li.addEventListener("click", this.onLinkClick); });
+  }
+
+  onLinkClick = (event) => {
+    this.props.onLinkClick(event);
+    event.preventDefault();
+  }
+
+  render() {
+    return (
+      <div>
+        { this.props.renderingContent ? (
+          <div className={contentClass + " article"}>Loading...</div>
+        ) : (
+          <div ref={(mdContent) => {this.mdContentRef = mdContent;} }
+            className={contentClass + " article"}
+            dangerouslySetInnerHTML={{ __html: this.props.html }}/>
+        )}
+      </div>
+      )
+  }
+}
+
+class MarkdownViewer extends React.Component {
+
+  state = {
+    renderingContent: true,
+    renderingOutline: true,
+    html: '',
+    outlineTreeRoot: null
+  }
+
+  scrollToNode(node) {
+    let url = new URL(window.location.href);
+    url.set('hash', 'user-content-' + node.data.id);
+    window.location.href = url.toString();
+  }
+
+  setContent(markdownContent) {
+    let that = this;
+
+    processor.process(markdownContent, function(err, file) {
+      that.setState({
+        html: String(file),
+        renderingContent: false
+      });
+    })
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setContent(nextProps.markdownContent);
+  }
+
+  componentDidMount() {
+    let that = this;
+
+    processor.process(this.props.markdownContent, function(err, file) {
+      that.setState({
+        html: String(file),
+        renderingContent: false
+      });
+
+    });
+  }
+
+
+  render() {
+    return (
+      <MarkdownViewerContent
+        renderingContent={this.state.renderingContent} html={this.state.html}
+        onLinkClick={this.props.onLinkClick}
+      />
+    )
+  }
+}
+
+export default MarkdownViewer;