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

Shared markdown toc

frontend/package-lock.json

@@ -12,7 +12,7 @@
         "@seafile/react-image-lightbox": "0.0.1",
         "@seafile/resumablejs": "1.1.16",
         "@seafile/seafile-calendar": "0.0.12",
-        "@seafile/seafile-editor": "0.3.102",
+        "@seafile/seafile-editor": "0.3.103",
         "chart.js": "2.9.4",
         "classnames": "^2.2.6",
         "copy-to-clipboard": "^3.0.8",
@@ -5085,9 +5085,9 @@
       }
     },
     "node_modules/@seafile/seafile-editor": {
-      "version": "0.3.102",
+      "version": "0.3.103",
-      "resolved": "https://registry.npmjs.org/@seafile/seafile-editor/-/seafile-editor-0.3.102.tgz",
+      "resolved": "https://registry.npmjs.org/@seafile/seafile-editor/-/seafile-editor-0.3.103.tgz",
-      "integrity": "sha512-9/BOs0yPOORsju11/xuO49t0Z/B6ubXYLl8IamMo3eFe8JBGIfi35rJXmTCrzwjKycr3V0cXBrM6DWzDLkGddA==",
+      "integrity": "sha512-xtXkFzFTBGKKVMRaJ1KXPFuxVtDmi3CO+SYyuead4jbJ4RZeZ4CwYjdXO6Yz+DGL0Xg6JAeHG8kLC4rXLoGn8g==",
       "dependencies": {
         "@seafile/react-image-lightbox": "^0.0.9",
         "@seafile/slate-react": "^0.54.13",
@@ -32025,9 +32025,9 @@
       }
     },
     "@seafile/seafile-editor": {
-      "version": "0.3.102",
+      "version": "0.3.103",
-      "resolved": "https://registry.npmjs.org/@seafile/seafile-editor/-/seafile-editor-0.3.102.tgz",
+      "resolved": "https://registry.npmjs.org/@seafile/seafile-editor/-/seafile-editor-0.3.103.tgz",
-      "integrity": "sha512-9/BOs0yPOORsju11/xuO49t0Z/B6ubXYLl8IamMo3eFe8JBGIfi35rJXmTCrzwjKycr3V0cXBrM6DWzDLkGddA==",
+      "integrity": "sha512-xtXkFzFTBGKKVMRaJ1KXPFuxVtDmi3CO+SYyuead4jbJ4RZeZ4CwYjdXO6Yz+DGL0Xg6JAeHG8kLC4rXLoGn8g==",
       "requires": {
         "@seafile/react-image-lightbox": "^0.0.9",
         "@seafile/slate-react": "^0.54.13",

frontend/package.json

@@ -7,7 +7,7 @@
     "@seafile/react-image-lightbox": "0.0.1",
     "@seafile/resumablejs": "1.1.16",
     "@seafile/seafile-calendar": "0.0.12",
-    "@seafile/seafile-editor": "0.3.102",
+    "@seafile/seafile-editor": "0.3.103",
     "chart.js": "2.9.4",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.0.8",

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 {
+.shared-file-view-body .article {
-  min-height: 400px;
+  min-height: calc(100% - 15px);
-  padding: 70px 75px;
-  border: 1px solid #ccc;
-  margin: 0 auto;
-  box-shadow: 0 0 6px #ccc;
-  width: 950px;
   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')
-);
+);