add wiki outline (#2263)

frontend/src/components/markdown-viewer.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import { processor } from '@seafile/seafile-editor/src/lib/seafile-markdown2html';
+import { processor, processorGetAST } from '@seafile/seafile-editor/src/lib/seafile-markdown2html';
 import TreeView from './tree-view/tree-view';
 import Prism from 'prismjs';
+import WikiOutline from './wiki-outline';
 
 var URL = require('url-parse');
 
@@ -47,7 +48,10 @@ class MarkdownViewer extends React.Component {
     renderingContent: true,
     renderingOutline: true,
     html: '',
-    outlineTreeRoot: null
+    outlineTreeRoot: null,
+    navItems: [],
+    activeId: 0,
+    isLoading: true
   }
 
   scrollToNode(node) {
@@ -56,6 +60,32 @@ class MarkdownViewer extends React.Component {
     window.location.href = url.toString();
   }
 
+  scrollHandler = (event) => {
+    var target = event.target || event.srcElement;
+    var markdownContainer = this.refs.markdownContainer;
+    var headingList = markdownContainer.querySelectorAll('[id^="user-content"]');
+    var top = target.scrollTop;
+    var defaultOffset = markdownContainer.offsetTop;
+    var currentId = '';
+    for (let i = 0; i < headingList.length; i++) {
+      let heading = headingList[i];
+      if (heading.tagName === 'H1') {
+        continue;
+      }
+      if (top > heading.offsetTop - defaultOffset) {
+        currentId = '#' + heading.getAttribute('id');
+      } else {
+        break;
+      }
+    }
+
+    if (currentId !== this.state.activeId) {
+      this.setState({
+        activeId: currentId
+      })
+    }
+  }
+
   setContent(markdownContent) {
     let that = this;
 
@@ -67,29 +97,82 @@ class MarkdownViewer extends React.Component {
     })
   }
 
-  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
+        renderingContent: false,
       });
+    });
+  }
+
+  componentWillReceiveProps(nextProps) {
+    var _this = this;
+    this.setContent(nextProps.markdownContent);
+    processorGetAST.run(processorGetAST.parse(nextProps.markdownContent)).then((nodeTree) => {
+      if (nodeTree && nodeTree.children && nodeTree.children.length) {
+        var navItems = _this.formatNodeTree(nodeTree);
+        var currentId = navItems.length > 0 ? navItems[0].id : 0;
+        _this.setState({
+          navItems: navItems,
+          activeId: currentId,
+          isLoading: false
+        })
+      } else {
+        _this.setState({
+          isLoading: false
+        })
+      }
 
     });
   }
 
+  formatNodeTree(nodeTree) {
+    var navItems = [];
+    var headingList = nodeTree.children.filter(node => {
+      return (node.type === 'heading' && (node.depth === 2 || node.depth === 3));
+    });
+    for (let i = 0; i < headingList.length; i++) {
+      navItems[i] = {};
+      navItems[i].id = '#user-content-' + headingList[i].data.id
+      navItems[i].key = i;
+      navItems[i].clazz = '';
+      navItems[i].depth = headingList[i].depth;
+      for (let child of headingList[i].children) {
+        if (child.type === "text") {
+          navItems[i].text = child.value;
+          break;
+        }
+      }
+    }
+    return navItems;
+  }
 
   render() {
+    if (this.state.isLoading) {
+      return (
+        <span className="loading-icon loading-tip"></span>
+      )
+    }
     return (
-      <MarkdownViewerContent
-        renderingContent={this.state.renderingContent} html={this.state.html}
-        onLinkClick={this.props.onLinkClick}
-      />
+      <div className="markdown-container" onScroll={this.scrollHandler}>
+        <div className="markdown-content" ref="markdownContainer">
+          <MarkdownViewerContent
+            renderingContent={this.state.renderingContent} html={this.state.html}
+            onLinkClick={this.props.onLinkClick}
+          />
+          <p id="wiki-page-last-modified">Last modified by {this.props.latestContributor}, <span>{this.props.lastModified}</span></p>
+        </div>
+        <div className="markdown-outline">
+            <WikiOutline 
+              navItems={this.state.navItems} 
+              handleNavItemClick={this.handleNavItemClick}
+              activeId={this.state.activeId}
+            />
+        </div>
+      </div>
     )
   }
 }