Markdown viewer improve (#2830)

frontend/src/components/markdown-viewer.js

@@ -1,92 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import MarkdownViewer from '@seafile/seafile-editor/dist/viewer/markdown-viewer';
-
-const gettext = window.gettext;
-
-const viewerPropTypes = {
-  isFileLoading: PropTypes.bool.isRequired,
-  lastModified: PropTypes.string,
-  latestContributor: PropTypes.string,
-  markdownContent: PropTypes.string,
-  onContentRendered: PropTypes.func.isRequired,
-  activeTitleIndex: PropTypes.number,
-  onLinkClick: PropTypes.func,
-  reviewStatus: PropTypes.string,
-  goReviewPage: PropTypes.func,
-  isDraft: PropTypes.bool,
-  hasDraft: PropTypes.bool,
-  goDraftPage: PropTypes.func,
-};
-
-const contentClass = 'markdown-content';
-
-class MarkdownContentViewer extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      showReviewTip: false,
-      showDraftTip: false,
-    };
-  }
-
-  componentDidUpdate () {
-    var links = document.querySelectorAll(`.${contentClass} a`);
-    links.forEach((li) => {li.addEventListener('click', this.onLinkClick); });
-  }
-
-  onLinkClick = (event) => {
-    event.preventDefault(); 
-    let link = '';
-    if (event.target.tagName !== 'A') {
-      let target = event.target.parentNode;
-      while (target.tagName !== 'A') {
-        target = target.parentNode;
-      }
-      link = target.href;
-    } else {
-      link = event.target.href;
-    }
-    this.props.onLinkClick(link);
-  }
-
-  render() {
-    if (this.props.isFileLoading) {
-      return (
-        <span className="loading-icon loading-tip"></span>
-      );
-    }
-    return (
-      <div className="markdown-content">
-        {this.props.reviewStatus === 'open' &&
-          <div className='seafile-btn-view-review text-center'>
-            <div className='tag tag-green'> 
-              {gettext('This file is in review stage')}
-              <a className="ml-2" onMouseDown={this.props.goReviewPage}>{gettext('View Review')}</a>
-            </div>
-          </div>
-        }
-
-        {(!this.props.isDraft && this.props.hasDraft && this.props.reviewStatus !== 'open') &&
-          <div className='seafile-btn-view-review text-center'>
-            <div className='tag tag-green'>
-              {gettext('This file is in draft stage.')}
-              <a className="ml-2" onMouseDown={this.props.goDraftPage}>{gettext('Edit Draft')}</a>
-            </div>
-          </div>
-        }
-
-        <MarkdownViewer markdownContent={this.props.markdownContent} showTOC={true}
-          activeTitleIndex={this.props.activeTitleIndex}
-          onContentRendered={this.props.onContentRendered}
-        />
-        <p id="wiki-page-last-modified">{gettext('Last modified by')} {this.props.latestContributor}, <span>{this.props.lastModified}</span></p>
-      </div>
-    );
-  }
-}
-
-MarkdownContentViewer.propTypes = viewerPropTypes;
-
-export default MarkdownContentViewer;

frontend/src/components/wiki-markdown-viewer.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import MarkdownViewer from '@seafile/seafile-editor/dist/viewer/markdown-viewer';
+import { gettext } from '../utils/constants';
+import Loading from './loading';
+
+const propTypes = {
+  children: PropTypes.object,
+  isFileLoading: PropTypes.bool.isRequired,
+  markdownContent: PropTypes.string.isRequired,
+  latestContributor: PropTypes.string.isRequired,
+  lastModified: PropTypes.string.isRequired,
+  onLinkClick: PropTypes.func.isRequired
+};
+
+const contentClass = 'wiki-page-content';
+
+class WikiMarkdownViewer extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeTitleIndex: 0
+    };
+    this.markdownContainer = React.createRef();
+    this.links = [];
+    this.titlesInfo = [];
+  }
+
+  componentDidUpdate() {
+    if (!this.links.length) {
+      this.links = document.querySelectorAll(`.${contentClass} a`);
+      this.links.forEach(link => {
+        link.addEventListener('click', this.onLinkClick);
+      });
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.links) {
+      this.links.forEach(link => {
+        link.removeEventListener('click', this.onLinkClick);
+      });
+    }
+  }
+
+  onContentRendered = (markdownViewer) => {
+    this.titlesInfo = markdownViewer.titlesInfo;
+  }
+
+  onLinkClick = (event) => {
+    event.preventDefault(); 
+    let link = '';
+    if (event.target.tagName !== 'A') {
+      let target = event.target.parentNode;
+      while (target.tagName !== 'A') {
+        target = target.parentNode;
+      }
+      link = target.href;
+    } else {
+      link = event.target.href;
+    }
+    this.props.onLinkClick(link);
+  }
+
+  onScrollHandler = () => {
+    const contentScrollTop = this.markdownContainer.current.scrollTop + 180;
+    let titlesLength = this.titlesInfo.length;
+    let activeTitleIndex;
+    if (contentScrollTop <= this.titlesInfo[0]) {
+      activeTitleIndex = 0;
+      this.setState({activeTitleIndex: activeTitleIndex});
+      return;
+    }
+    if (contentScrollTop > this.titlesInfo[titlesLength - 1]) {
+      activeTitleIndex = this.titlesInfo.length - 1;
+      this.setState({activeTitleIndex: activeTitleIndex});
+      return;
+    }
+    for (let i = 0; i < titlesLength; i++) {
+      if (contentScrollTop > this.titlesInfo[i]) {
+        continue;
+      } else {
+        activeTitleIndex = i - 1;
+        break;
+      }
+    }
+    this.setState({activeTitleIndex: activeTitleIndex});
+  }
+
+  render() {
+    if (this.props.isFileLoading) {
+      return <Loading />
+    }
+    return (
+      <div ref={this.markdownContainer} className="wiki-page-container" onScroll={this.onScrollHandler.bind(this)}>
+        <div className={contentClass}>
+          {this.props.children}
+          <MarkdownViewer
+            showTOC={true}
+            markdownContent={this.props.markdownContent}
+            activeTitleIndex={this.state.activeTitleIndex}
+            onContentRendered={this.onContentRendered}
+          />
+          <p id="wiki-page-last-modified">{gettext('Last modified by')} {this.props.latestContributor}, <span>{this.props.lastModified}</span></p>
+        </div>
+      </div>
+    );
+  }
+}
+
+WikiMarkdownViewer.propTypes = propTypes;
+
+export default WikiMarkdownViewer;