Init text shared (#2908)

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

@@ -30,6 +30,7 @@
 
 .shared-file-view-head a {
   color: #fff;
+  text-decoration: none;
 }
 
 .shared-file-view-head h2 {
@@ -66,6 +67,34 @@
   overflow: auto;
 }
 
+.shared-file-view-body .txt-view .CodeMirror,
+.shared-file-view-body .txt-view .file-view-tip {
+  height: auto;
+  min-height: 400px;
+  border: 1px solid #ccc;
+  margin: 0 auto;
+  box-shadow: 0 0 6px #ccc;
+  width: 816px;
+  padding: 40px 96px;
+  line-height: 1.5em;
+  background-color: #fff;
+}
+
+.shared-file-view-body .txt-view .file-view-tip {
+  min-height: 100px;
+  text-align: center;
+}
+
+.shared-file-view-body .txt-view .CodeMirror-scroll {
+  min-height: 400px;
+}
+
+.file-enc-cont {
+  width: 950px;
+  margin: -20px auto 6px;
+  text-align: right;
+}
+
 @media (max-width: 991.98px) {
   .shared-file-view-head {
     width: 100%;

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

@@ -0,0 +1,133 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Account from './components/common/account';
+import CodeMirror from 'react-codemirror';
+import { Button } from 'reactstrap';
+import { seafileAPI } from './utils/seafile-api';
+import { Utils } from './utils/utils';
+import watermark from 'watermark-dom';
+import { serviceURL, gettext, siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle } from './utils/constants';
+
+import 'codemirror/lib/codemirror.css';
+import './assets/css/fa-solid.css';
+import './assets/css/fa-regular.css';
+import './assets/css/fontawesome.css';
+import './css/shared-file-view.css';
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/mode/css/css';
+import 'codemirror/mode/clike/clike';
+import 'codemirror/mode/php/php';
+import 'codemirror/mode/sql/sql';
+import 'codemirror/mode/vue/vue';
+import 'codemirror/mode/xml/xml';
+import 'codemirror/mode/go/go';
+import 'codemirror/mode/python/python';
+import 'codemirror/mode/htmlmixed/htmlmixed';
+
+const loginUser = window.app.pageOptions.name;
+const { trafficOverLimit, fileName, fileSize, sharedBy, siteName, enableWatermark, download, encoding, fileContent, sharedToken, fileEncodingList, err, fileext } = window.shared.pageOptions;
+const URL = require('url-parse');
+
+const options={
+  lineNumbers: false,
+  mode: Utils.chooseLanguage(fileext),
+  extraKeys: {'Ctrl': 'autocomplete'},
+  theme: 'default',
+  autoMatchParens: true,
+  textWrapping: true,
+  lineWrapping: true,
+  readOnly: 'nocursor',
+};
+
+class SharedFileViewText extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  changeEncode = (e) => {
+    let url = new URL(serviceURL) + '/f/' + sharedToken + '/?file_enc=' + e.target.value;
+    window.location.href = url.toString();
+  }
+
+  fileEncode = () => {
+    const list = fileEncodingList.substring(1, fileEncodingList.length - 1).replace(/\'*/g,"").replace(/\s*/g,"").split(',');
+    return (
+      <div className="file-enc-cont">
+        <label htmlFor="file-enc">{gettext('Encoding:')}</label>
+        <select id="file-enc" onChange={this.changeEncode} defaultValue={encoding}>
+          { list && list.map((value, index) => {
+              if (value === 'auto') {
+                return (<option value={value} key={index}>{gettext('auto detect')}</option>)
+              } else {
+                return (<option value={value} key={index}>{value}</option>)
+              }
+            })
+          }
+        </select>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div className="shared-file-view-md">
+        <div className="shared-file-view-md-header d-flex">
+          <React.Fragment>
+            <a href={siteRoot}>
+              <img src={mediaUrl + logoPath} height={logoHeight} width={logoWidth} title={siteTitle} alt="logo"/>
+            </a>
+          </React.Fragment>
+          { loginUser && <Account /> }
+        </div>
+        <div className="shared-file-view-md-main">
+          <div className="shared-file-view-head">
+            <div className="float-left">
+              <h2 className="ellipsis" title={fileName}>{fileName}</h2>
+              <p className="share-by ellipsis">{gettext('Shared by:')}{' '}{sharedBy}</p>
+            </div>
+            {download &&
+              <div className="float-right">
+                {(loginUser && loginUser !== sharedBy) &&
+                  <Button color="secondary" id="save" className="shared-file-op-btn"
+                    onClick={this.handleSaveSharedFileDialog}>{gettext('Save as ...')}
+                  </Button>
+                }{' '}
+                {(trafficOverLimit === 'False') &&
+                  <Button color="success" className="shared-file-op-btn">
+                    <a href="?dl=1">{gettext('Download')}({Utils.bytesToSize(fileSize)})</a>
+                  </Button>
+                }
+              </div>
+            }
+          </div>
+          <div className="shared-file-view-body">
+            {this.fileEncode()}
+            <div className="txt-view">
+              { err ? <div className="file-view-tip error">{err}</div> :
+                <CodeMirror ref="editor-sql" value={fileContent} options={options}/>}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+if (enableWatermark) {
+  let watermark_txt;
+  if (loginUser) {
+    watermark_txt = siteName + "  " + loginUser;
+  } else {
+    watermark_txt = gettext("Anonymous User");
+  }
+  watermark.init({
+    watermark_txt: watermark_txt,
+    watermark_alpha: 0.075
+  });
+}
+
+ReactDOM.render (
+  <SharedFileViewText />,
+  document.getElementById('wrapper')
+);

frontend/src/utils/utils.js

@@ -666,4 +666,37 @@ export const Utils = {
     return nodes;
   },
 
+  chooseLanguage: function(suffix) {
+    let mode;
+    switch(suffix) {
+      case 'py':
+        mode = 'python';
+        break;
+      case 'js':
+        mode = 'javascript';
+        break;
+      case 'c':
+        mode = 'text/x-csrc';
+        break;
+      case 'cpp':
+        mode = 'text/x-c++src';
+        break;
+      case 'java':
+        mode = 'text/x-java';
+        break;
+      case 'cs':
+        mode = 'text/x-csharp';
+        break;
+      case 'mdf':
+        mode = 'text/x-sql';
+        break;
+      case 'html':
+        mode = 'htmlmixed';
+        break;
+      default:
+        mode = suffix;
+    }
+    return mode;
+  },
+
 };