Merge pull request #5189 from haiwen/shared-markdown-toc

Shared markdown toc

frontend/src/components/shared-file-view/shared-file-view.js

@@ -12,7 +12,8 @@ import watermark from 'watermark-dom';
 import '../../css/shared-file-view.css';
 
 const propTypes = {
-  content: PropTypes.object.isRequired
+  content: PropTypes.object.isRequired,
+  fileType: PropTypes.string
 };
 
 let loginUser = window.app.pageOptions.name;
@@ -96,6 +97,7 @@ class SharedFileView extends React.Component {
   }
 
   render() {
+    const { fileType } = this.props;
     return (
       <div className="shared-file-view-md">
         <div className="shared-file-view-md-header d-flex">
@@ -107,7 +109,7 @@ class SharedFileView extends React.Component {
           { loginUser && <Account /> }
         </div>
         <div className="shared-file-view-md-main">
-          <div className="shared-file-view-head">
+          <div className={`shared-file-view-head ${fileType == 'md' ? 'w-100 px-4' : ''}`}>
             <div className="float-left">
               <h2 className="ellipsis" title={fileName}>{fileName}</h2>
               {zipped ?

frontend/src/css/shared-file-view.css

@@ -47,15 +47,24 @@
   overflow: auto;
 }
 
-.shared-file-view-body .md-view {
-  min-height: 400px;
-  padding: 70px 75px;
-  border: 1px solid #ccc;
-  margin: 0 auto;
-  box-shadow: 0 0 6px #ccc;
-  width: 950px;
+.shared-file-view-body .article {
+  min-height: calc(100% - 15px);
   background: #fff;
-  overflow: auto;
+  padding: 40px 60px;
+  margin: 0 340px 15px 40px;
+  border: 1px solid #e6e6dd;
+}
+
+.shared-file-view-body .article-no-outline {
+  max-width: 950px;
+  margin: 0 auto 15px;
+}
+
+.shared-file-view-body .seafile-markdown-outline {
+  width: 300px;
+  top: 145px;
+  bottom: 30px;
+  height: auto;
 }
 
 @media (max-width: 991.98px) {

frontend/src/shared-file-view-markdown.js

@@ -13,7 +13,7 @@ const { repoID, sharedToken, rawPath, err } = window.shared.pageOptions;
 
 class SharedFileViewMarkdown extends React.Component {
   render() {
-    return <SharedFileView content={<FileContent />} />;
+    return <SharedFileView content={<FileContent />} fileType="md" />;
   }
 }
 
@@ -65,6 +65,13 @@ class FileContent extends React.Component {
     return Utils.changeMarkdownNodes(value, this.changeImageURL);
   }
 
+  updateForNoOutline = () => {
+    const $outline = document.querySelector('.md-view .seafile-markdown-outline');
+    const $main = document.querySelector('.md-view .article');
+    $outline.className += ' d-none';
+    $main.className += ' article-no-outline';
+  }
+
   render() {
     if (err) {
       return <SharedFileViewTip />;
@@ -76,11 +83,13 @@ class FileContent extends React.Component {
 
     return (
       <div className="shared-file-view-body">
-        <div className="md-view">
+        <div className="md-view h-100">
           <MarkdownViewer
             scriptSource={mediaUrl + 'js/mathjax/tex-svg.js'}
             markdownContent={this.state.markdownContent}
-            showTOC={false}
+            showTOC={true}
+            updateForNoOutline={this.updateForNoOutline}
+            activeTitleIndex={''}
             serviceURL={serviceURL}
             sharedToken={sharedToken}
             repoID={repoID}
@@ -95,4 +104,4 @@ class FileContent extends React.Component {
 ReactDOM.render (
   <SharedFileViewMarkdown />,
   document.getElementById('wrapper')
-);
+);