import markdown viewer from seafile-editor (#2572)

* import markdown viewer from seafile-editor

* refactor code

* page-scroll

frontend/src/components/markdown-viewer.js

@@ -1,191 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { processor, processorGetAST } from '@seafile/seafile-editor/dist/utils/seafile-markdown2html';
-import Prism from 'prismjs';
-import WikiOutline from './wiki-outline';
-
-var URL = require('url-parse');
+import MarkdownViewer from '@seafile/seafile-editor/dist/viewer/markdown-viewer';
 
 const gettext = window.gettext;
 
-require('@seafile/seafile-editor/dist/editor/code-hight-package');
-
-const contentClass = 'wiki-md-viewer-rendered-content';
-
-const contentPropTypes = {
-  html: PropTypes.string,
-  renderingContent: PropTypes.bool.isRequired,
-  onLinkClick: PropTypes.func.isRequired
-};
-
-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>
-    );
-  }
-}
-
-MarkdownViewerContent.propTypes = contentPropTypes;
-
-
 const viewerPropTypes = {
   isFileLoading: PropTypes.bool.isRequired,
   lastModified: PropTypes.string,
   latestContributor: PropTypes.string,
   markdownContent: PropTypes.string,
-  onLinkClick: PropTypes.func.isRequired
+  activeTitleIndex: PropTypes.number
 };
 
-class MarkdownViewer extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      renderingContent: true,
-      renderingOutline: true,
-      html: '',
-      outlineTreeRoot: null,
-      navItems: [],
-      activeId: 0
-    };
-    this.activeIdFromOutLine = null;
-  }
-
-  scrollToNode(node) {
-    let url = new URL(window.location.href);
-    url.set('hash', 'user-content-' + node.data.id);
-    window.location.href = url.toString();
-  }
-
-  scrollHandler = (event) => {
-    var currentId = '';
-    if (!this.activeIdFromOutLine) {
-      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;
-      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;
-        }
-      }
-    } else {
-      currentId = this.activeIdFromOutLine;
-      this.activeIdFromOutLine = null;
-    }
-
-    if (currentId !== this.state.activeId) {
-      this.setState({
-        activeId: currentId
-      });
-    }
-  }
-
-  handleNavItemClick = (activeId) => {
-    this.activeIdFromOutLine = activeId;
-  }
-
-  setContent(markdownContent) {
-    let that = this;
-
-    processor.process(markdownContent, function(err, file) {
-      that.setState({
-        html: String(file),
-        renderingContent: false
-      });
-
-      setTimeout(() => { 
-        // reset the href to jump to the section
-        var url = new URL(window.location.href);
-        if (url.hash) { 
-          window.location.href = window.location.href;
-        }
-      }, 100);
-    });
-  }
-
-  componentDidMount() {
-    let that = this;
-
-    processor.process(this.props.markdownContent, function(err, file) {
-      that.setState({
-        html: String(file),
-        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
-        });
-      }else {
-        _this.setState({
-          navItems: []
-        });
-      }
-    });
-  }
-
-  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;
-  }
+class MarkdownContentViewer extends React.Component {
 
   render() {
     if (this.props.isFileLoading) {
@@ -194,26 +21,14 @@ class MarkdownViewer extends React.Component {
       );
     }
     return (
-      <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}
-          />
+        <div className="markdown-content">
+          <MarkdownViewer markdownContent={this.props.markdownContent} showTOC={true} activeTitleIndex={this.props.activeTitleIndex}/>
           <p id="wiki-page-last-modified">{gettext('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>
     );
   }
 }
 
-MarkdownViewer.propTypes = viewerPropTypes;
+MarkdownContentViewer.propTypes = viewerPropTypes;
 
-export default MarkdownViewer;
+export default MarkdownContentViewer;

frontend/src/css/wiki.css

@@ -59,7 +59,7 @@ img[src=""] {
 
 .wiki-main-panel .cur-view-content {
   display: flex;
-  overflow: hidden;
+  overflow: auto;
 }
 
 .cur-view-content .markdown-container{

frontend/src/pages/repo-wiki-mode/main-panel.js

@@ -10,7 +10,7 @@ import ViewModeToolbar from '../../components/toolbar/view-mode-toolbar';
 import DirOperationToolBar from '../../components/toolbar/dir-operation-toolbar';
 import MutipleDirOperationToolbar from '../../components/toolbar/mutilple-dir-operation-toolbar';
 import CurDirPath from '../../components/cur-dir-path';
-import MarkdownViewer from '../../components/markdown-viewer';
+import MarkdownContentViewer from '../../components/markdown-viewer';
 import DirentListView from '../../components/dirent-list-view/dirent-list-view';
 import DirentDetail from '../../components/dirent-detail/dirent-details';
 import FileUploader from '../../components/file-uploader/file-uploader';
@@ -34,7 +34,6 @@ const propTypes = {
   onSideNavMenuClick: PropTypes.func.isRequired,
   onSearchedClick: PropTypes.func.isRequired,
   onMainNavBarClick: PropTypes.func.isRequired,
-  onLinkClick: PropTypes.func.isRequired,
   onItemClick: PropTypes.func.isRequired,
   onAllDirentSelected: PropTypes.func.isRequired,
   onItemSelected: PropTypes.func.isRequired,
@@ -61,7 +60,10 @@ class MainPanel extends Component {
       direntPath: '',
       currentRepo: null,
       isRepoOwner: false,
+      activeTitleIndex: -1,
     };
+    this.titlesInfo = null;
+    this.pageScroll = false;
   }
 
   componentDidMount() {
@@ -76,6 +78,10 @@ class MainPanel extends Component {
         });
       });
     });
+    let that = this;
+    setTimeout(function() {
+      that.getTitlesInfo();
+    }, 500);
   }
 
   switchViewMode = (mode) => {
@@ -121,6 +127,45 @@ class MainPanel extends Component {
     // todo
   }
 
+  handlePageScroll = (e) => {    
+    if (this.props.pathExist && this.props.isViewFile && !this.pageScroll && this.titlesInfo.length > 0) {
+      this.pageScroll = true;
+      let that = this;
+      setTimeout(function() {
+        that.pageScroll = false;
+      }, 100);
+      const contentScrollTop = this.refs.curViewContent.scrollTop + 180;
+      let activeTitleIndex;
+      if (contentScrollTop <= this.titlesInfo[0]) {
+        activeTitleIndex = 0;
+      }
+      else if (contentScrollTop > this.titlesInfo[this.titlesInfo.length - 1]) {
+        activeTitleIndex = this.titlesInfo.length - 1;
+      }
+      else {
+        for (let i = 0; i < this.titlesInfo.length - 1; i++) {
+          if (contentScrollTop > this.titlesInfo[i] && this.titlesInfo[i + 1] &&
+            contentScrollTop < this.titlesInfo[i + 1]) {
+            activeTitleIndex = i;
+            break;
+          }
+        }
+      }
+      this.setState({
+        activeTitleIndex: activeTitleIndex
+      });
+    }
+  }
+
+  getTitlesInfo = () => {
+    let titlesInfo = [];
+    let headingList = document.querySelectorAll('h2[id^="user-content"], h3[id^="user-content"]');
+    for (let i = 0; i < headingList.length; i++) {
+      titlesInfo.push(headingList[i].offsetTop);
+    }
+    this.titlesInfo = titlesInfo;
+  }
+
   render() {
     const ErrMessage = (<div className="message empty-tip err-message"><h2>{gettext('Folder does not exist.')}</h2></div>);
     
@@ -166,17 +211,17 @@ class MainPanel extends Component {
                 onPathClick={this.onMainNavBarClick}
               />
             </div>
-            <div className="cur-view-content">
+            <div className="cur-view-content" onScroll={this.handlePageScroll} ref="curViewContent">
               {!this.props.pathExist ?
                 ErrMessage :
                 <Fragment>
                   { this.props.isViewFile ?
-                    <MarkdownViewer
+                    <MarkdownContentViewer
                       markdownContent={this.props.content}
                       latestContributor={this.props.latestContributor}
                       lastModified = {this.props.lastModified}
-                      onLinkClick={this.props.onLinkClick}
                       isFileLoading={this.props.isFileLoading}
+                      activeTitleIndex={this.state.activeTitleIndex}
                     /> :
                     <Fragment>
                       <DirentListView

frontend/src/repo-wiki-mode.js

@@ -262,19 +262,6 @@ class Wiki extends Component {
     this.setState({direntList: newDirentList});
   }
 
-  onLinkClick = (event) => {
-    const url = event.target.href;
-    if (this.isInternalMarkdownLink(url)) {
-      let path = this.getPathFromInternalMarkdownLink(url);
-      this.showFile(path);
-    } else if (this.isInternalDirLink(url)) {
-      let path = this.getPathFromInternalDirLink(url);
-      this.showDir(path);
-    } else {
-      window.location.href = url;
-    }
-  }
-
   onpopstate = (event) => {
     if (event.state && event.state.path) {
       let path = event.state.path;
@@ -770,7 +757,6 @@ class Wiki extends Component {
           direntList={this.state.direntList}
           selectedDirentList={this.state.selectedDirentList}
           updateDirent={this.updateDirent}
-          onLinkClick={this.onLinkClick}
           onSideNavMenuClick={this.onSideNavMenuClick}
           onSearchedClick={this.onSearchedClick}
           onMainNavBarClick={this.onMainNavBarClick}