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;

frontend/src/css/wiki.css

@@ -60,14 +60,21 @@ img[src=""] {
   min-height: 0;
 }
 
-.cur-view-content .markdown-container{
+.cur-view-content {
-  padding: 0 1.5rem;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.cur-view-content .wiki-page-container{
+  margin: -0.625rem -1rem -1.25rem;
+  padding: 0.625rem 1rem 1.25rem;
   display: flex;
   flex: 1;
   overflow: auto;
 }
 
-.cur-view-content .markdown-content {
+.cur-view-content .wiki-page-content {
   width: calc(100% - 160px);
   padding-right: 40px;
 }
@@ -86,10 +93,10 @@ img[src=""] {
 }
 
 @media (max-width: 991.98px) {
-  .cur-view-content .markdown-container {
+  .cur-view-content .wiki-page-container {
     padding-right: 1.5rem;
   }
-  .cur-view-content .markdown-content {
+  .cur-view-content .wiki-page-content {
     width: 100%;
     padding-right: 0;
   }
@@ -176,11 +183,11 @@ img[src=""] {
   margin-top: 0;
 }
 
-.markdown-content a {
+.wiki-page-content a {
     cursor: pointer;
 }
 
-.wiki-side-nav .markdown-content a {
+.wiki-side-nav .wiki-page-content a {
   color: #212529;
   cursor: pointer;
 }
@@ -191,11 +198,11 @@ img[src=""] {
   top: 0.25rem;
 }
 
-.wiki-main-panel .markdown-content .ml-2 {
+.wiki-main-panel .wiki-page-content .ml-2 {
   text-decoration: underline;
 }
 
-.wiki-main-panel .markdown-content .ml-2:hover {
+.wiki-main-panel .wiki-page-content .ml-2:hover {
   text-decoration: underline;
   color:#eb8205;
 }

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 MarkdownContentViewer from '../../components/markdown-viewer';
+import WikiMarkdownViewer from '../../components/wiki-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';
@@ -75,10 +75,7 @@ class MainPanel extends Component {
       direntPath: '',
       currentRepoInfo: null,
       isRepoOwner: false,
-      activeTitleIndex: -1,
     };
-    this.titlesInfo = null;
-    this.pageScroll = false;
   }
 
   componentDidMount() {
@@ -152,40 +149,6 @@ class MainPanel extends Component {
     this.props.onFileUploadSuccess(direntObject);
   }
 
-  handlePageScroll = () => {    
-    if (this.props.pathExist && this.props.isViewFile && !this.pageScroll &&  this.titlesInfo && 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
-      });
-    }
-  }
-
-  onContentRendered = (markdownViewer) => {
-    this.titlesInfo = markdownViewer.titlesInfo;
-  }
-
   render() {
     const ErrMessage = (<div className="message empty-tip err-message"><h2>{gettext('Folder does not exist.')}</h2></div>);
     
@@ -241,21 +204,32 @@ class MainPanel extends Component {
                 ErrMessage :
                 <Fragment>
                   { this.props.isViewFile ?
-                    <MarkdownContentViewer
+                    <WikiMarkdownViewer
+                      isFileLoading={this.props.isFileLoading}
                       markdownContent={this.props.content}
                       latestContributor={this.props.latestContributor}
                       lastModified = {this.props.lastModified}
-                      isFileLoading={this.props.isFileLoading}
-                      activeTitleIndex={this.state.activeTitleIndex}
-                      onContentRendered={this.onContentRendered}
                       onLinkClick={this.props.onLinkClick}
-                      isDraft={this.props.isDraft}
+                    >
-                      hasDraft={this.props.hasDraft}
+                      <Fragment>
-                      reviewID={this.props.reviewID}
+                        {this.props.reviewStatus === 'open' &&
-                      reviewStatus={this.props.reviewStatus}
+                          <div className='seafile-btn-view-review text-center'>
-                      goDraftPage={this.props.goDraftPage}
+                            <div className='tag tag-green'> 
-                      goReviewPage={this.props.goReviewPage}
+                              {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>
+                        }
+                      </Fragment>
+                    </WikiMarkdownViewer> :
                     <Fragment>
                       {this.props.path === '/' && !(this.props.usedRepoTags.length === 0 && this.props.readmeMarkdown === null) && (
                         <RepoInfoBar

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

@@ -2,7 +2,7 @@ import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { gettext, repoID, slug, siteRoot } from '../../utils/constants';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
-import MarkdownViewer from '../../components/markdown-viewer';
+import WikiMarkdownViewer from '../../components/wiki-markdown-viewer';
 import TreeDirView from '../../components/tree-dir-view/tree-dir-view';
 
 let loginUser = window.app.pageOptions.username;
@@ -47,9 +47,6 @@ class MainPanel extends Component {
     this.props.onMainNavBarClick(e.target.dataset.path);
   }
 
-  onContentRendered = (markdownViewer) => {
-    //
-  }
 
   render() {
 
@@ -113,17 +110,16 @@ class MainPanel extends Component {
             </div>
           </div>
           <div className="cur-view-content">
-            { this.props.isViewFileState && 
+            {this.props.isViewFileState && 
-              <MarkdownViewer
+              <WikiMarkdownViewer
                 markdownContent={this.props.content}
-                latestContributor={this.props.latestContributor}
-                lastModified = {this.props.lastModified}
-                onLinkClick={this.props.onLinkClick}
                 isFileLoading={this.props.isFileLoading}
-                onContentRendered={this.onContentRendered}
+                lastModified = {this.props.lastModified}
+                latestContributor={this.props.latestContributor}
+                onLinkClick={this.props.onLinkClick}
               />
             }
-            { !this.props.isViewFileState && 
+            {!this.props.isViewFileState && 
               <TreeDirView node={this.props.changedNode} onMainNodeClick={this.props.onMainNodeClick} />
             }
           </div>