Wiki module improve (#2901)

frontend/src/components/index-viewer.js

@@ -1,17 +1,114 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import MarkdownViewer from '@seafile/seafile-editor/dist/viewer/markdown-viewer';
+import { repoID, slug, serviceURL, isPublicWiki } from '../utils/constants';
+import { Utils } from '../utils/utils';
 
 const viewerPropTypes = {
   indexContent: PropTypes.string.isRequired,
   onLinkClick: PropTypes.func.isRequired,
 };
 
+const contentClass = 'wiki-page-content';
+
 class IndexContentViewer extends React.Component {
 
+  constructor(props) {
+    super(props);
+    this.links = [];
+  }
+
+  componentDidMount() {
+    // Bind event when first loaded
+    this.links = document.querySelectorAll(`.${contentClass} a`);
+    this.links.forEach(link => {
+      link.addEventListener('click', this.onLinkClick);
+    });
+  }
+
+  componentWillReceiveProps() {
+    // Unbound event when updating
+    this.links.forEach(link => {
+      link.removeEventListener('click', this.onLinkClick);
+    });
+  }
+
+  componentDidUpdate() {
+    // Update completed, rebind event
+    this.links = document.querySelectorAll(`.${contentClass} a`);
+    this.links.forEach(link => {
+      link.addEventListener('click', this.onLinkClick);
+    });
+  }
+
+  componentWillUnmount() {
+    // Rebinding events when the component is destroyed
+    this.links.forEach(link => {
+      link.removeEventListener('click', this.onLinkClick);
+    });
+  }
+
   onLinkClick = (event) => {
-    event.preventDefault();
-    this.props.onLinkClick(event);
+    event.preventDefault(); 
+    event.stopPropagation();
+    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);
+  }
+
+  changeInlineNode = (item) => {
+    if (item.object == 'inline') {
+      let url;
+
+      // change image url
+      if (item.type == 'image' && isPublicWiki) {
+        url = item.data.src;
+        const re = new RegExp(serviceURL + '/lib/' + repoID +'/file.*raw=1');
+        // different repo 
+        if (!re.test(url)) {
+          return;
+        }
+        // get image path
+        let index = url.indexOf('/file');
+        let index2 = url.indexOf('?');
+        const imagePath = url.substring(index + 5, index2);
+        // replace url
+        item.data.src = serviceURL + '/view-image-via-public-wiki/?slug=' + slug + '&path=' + imagePath;
+      } 
+
+      else if (item.type == 'link') {
+        url = item.data.href;
+        // change file url 
+        if (Utils.isInternalMarkdownLink(url, repoID)) {
+          let path = Utils.getPathFromInternalMarkdownLink(url, repoID);
+          // replace url
+          item.data.href = serviceURL + '/wikis/' + slug + path;
+        } 
+        // change dir url 
+        else if (Utils.isInternalDirLink(url, repoID)) {
+          let path = Utils.getPathFromInternalDirLink(url, repoID, slug);
+          // replace url
+          item.data.href = serviceURL + '/wikis/' + slug + path;
+        } 
+      }
+    }
+
+    return item;
+  }
+
+  modifyValueBeforeRender = (value) => {
+    let nodes = value.document.nodes;
+    let newNodes = Utils.changeMarkdownNodes(nodes, this.changeInlineNode);
+    value.document.nodes = newNodes;
+    return value;
   }
 
   onContentRendered = () => {
@@ -20,10 +117,11 @@ class IndexContentViewer extends React.Component {
 
   render() {
     return (
-      <div className="markdown-content">
+      <div className={contentClass}>
         <MarkdownViewer
           markdownContent={this.props.indexContent}
           onContentRendered={this.props.onContentRendered}
+          modifyValueBeforeRender={this.modifyValueBeforeRender}
         />
       </div>
     );