[12.0] txt viewer support set auto wrap line (#8286)

* txt viewer support set auto wrap line

* change default line wrap

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

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { ButtonGroup, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+import Switch from '../common/switch';
 import IconButton from '../icon-button';
 import { gettext, siteRoot } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
@@ -70,13 +71,25 @@ class FileToolbar extends React.Component {
     this.setState({ isShareDialogOpen: !this.state.isShareDialogOpen });
   };
 
-  toggleMoreOpMenu = () => {
+  toggleMoreOpMenu = (event) => {
+    if (this.state.moreDropdownOpen) {
+      const el = document.getElementById('txt-line-wrap-menu');
+      if (el && el.contains(event.target)) {
+        return;
+      }
+    }
     this.setState({
       moreDropdownOpen: !this.state.moreDropdownOpen
     });
   };
 
-  toggle = () => {
+  toggle = (event) => {
+    if (this.state.dropdownOpen) {
+      const el = document.getElementById('mobile-txt-line-wrap-menu');
+      if (el && el.contains(event.target)) {
+        return;
+      }
+    }
     this.setState({
       dropdownOpen: !this.state.dropdownOpen
     });
@@ -118,6 +131,7 @@ class FileToolbar extends React.Component {
     }
 
     const shortcutMain = Utils.isMac() ? '⌘ + ' : 'Ctrl + ';
+    const isTxt = fileExt && fileExt.toLowerCase() === 'txt';
 
     return (
       <Fragment>
@@ -213,7 +227,7 @@ class FileToolbar extends React.Component {
               title={gettext('More operations')}
               tag="div"
             >
-              <Icon symbol="more-vertical" />
+              <Icon symbol="more-level" />
             </DropdownToggle>
             <DropdownMenu right={true}>
               {filePerm == 'rw' && (
@@ -224,6 +238,16 @@ class FileToolbar extends React.Component {
               <a href={`${siteRoot}library/${repoID}/${Utils.encodePath(repoName + parentDir)}`} className="dropdown-item">
                 {gettext('Open parent folder')}
               </a>
+              {isTxt &&
+                <DropdownItem id='txt-line-wrap-menu' className='dropdown-item'>
+                  <Switch
+                    checked={this.props.lineWrapping}
+                    placeholder={gettext('Line wrapping')}
+                    className="txt-line-wrap-menu w-100"
+                    onChange={() => this.props.updateLineWrapping(!this.props.lineWrapping)}
+                  />
+                </DropdownItem>
+              }
             </DropdownMenu>
           </Dropdown>
         </div>
@@ -251,7 +275,7 @@ class FileToolbar extends React.Component {
           </ButtonGroup>
 
           <DropdownToggle className="mx-1" aria-label={gettext('More operations')}>
-            <Icon symbol="more-vertical" />
+            <Icon symbol="more-level" />
           </DropdownToggle>
           <DropdownMenu right={true}>
             <DropdownItem>
@@ -277,6 +301,16 @@ class FileToolbar extends React.Component {
               </DropdownItem>
             )}
             <DropdownItem onClick={this.props.toggleDetailsPanel}>{gettext('Details')}</DropdownItem>
+            {isTxt &&
+              <DropdownItem id='mobile-txt-line-wrap-menu' className='dropdown-item'>
+                <Switch
+                  checked={this.props.lineWrapping}
+                  placeholder={gettext('Line wrapping')}
+                  className="txt-line-wrap-menu w-100"
+                  onChange={() => this.props.updateLineWrapping(!this.props.lineWrapping)}
+                />
+              </DropdownItem>
+            }
           </DropdownMenu>
         </Dropdown>
 

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

@@ -145,6 +145,8 @@ class FileView extends React.Component {
                   toggleDetailsPanel={this.toggleDetailsPanel}
                   setImageScale={this.props.setImageScale}
                   rotateImage={this.props.rotateImage}
+                  lineWrapping={this.props.lineWrapping}
+                  updateLineWrapping={this.props.updateLineWrapping}
                 />
               }
             </div>

frontend/src/components/seafile-codemirror/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import CodeMirror from '@uiw/react-codemirror';
+import { EditorView } from '@codemirror/view';
 import { getLanguageExtensions } from './languages';
 import { myTheme } from './theme';
 
@@ -28,8 +29,11 @@ class SeafileCodeMirror extends React.Component {
   };
 
   render() {
-    const { value, readOnly, fileExt } = this.props;
+    const { value, readOnly = true, fileExt, lineWrapping } = this.props;
-    const extensions = [...getLanguageExtensions(fileExt).filter(item => item !== null)];
+    let extensions = [...getLanguageExtensions(fileExt).filter(item => item !== null)];
+    if (lineWrapping) {
+      extensions.push(EditorView.lineWrapping);
+    }
     return (
       <div className='seafile-code-mirror-container'>
         <CodeMirror

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

@@ -1,13 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import watermark from 'watermark-dom';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import Account from '../common/account';
 import { gettext, siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle } from '../../utils/constants';
-import { Button } from 'reactstrap';
 import { Utils } from '../../utils/utils';
 import SaveSharedFileDialog from '../dialog/save-shared-file-dialog';
 import AddAbuseReportDialog from '../../components/dialog/add-abuse-report-dialog';
 import toaster from '../toast';
-import watermark from 'watermark-dom';
+import Switch from '../common/switch';
+import IconButton from '../icon-button';
 
 import '../../css/shared-file-view.css';
 
@@ -26,6 +28,7 @@ class SharedFileView extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      moreDropdownOpen: false,
       showSaveSharedFileDialog: false,
       isAddAbuseReportDialogOpen: false
     };
@@ -55,6 +58,18 @@ class SharedFileView extends React.Component {
     });
   };
 
+  toggleMoreOpMenu = (event) => {
+    if (this.state.moreDropdownOpen) {
+      const el = document.getElementById('txt-line-wrap-menu');
+      if (el && el.contains(event.target)) {
+        return;
+      }
+    }
+    this.setState({
+      moreDropdownOpen: !this.state.moreDropdownOpen
+    });
+  };
+
   componentDidMount() {
     const fileIcon = Utils.getFileIconUrl(fileName);
     document.getElementById('favicon').href = fileIcon;
@@ -123,20 +138,45 @@ class SharedFileView extends React.Component {
               }
             </div>
             <div className="flex-shrink-0 ml-4">
-              {(canDownload && loginUser && (loginUser !== sharedBy)) &&
+              <Dropdown isOpen={this.state.moreDropdownOpen} toggle={this.toggleMoreOpMenu}>
-                <Button color="secondary" id="save"
+                <DropdownToggle
-                  onClick={this.handleSaveSharedFileDialog}>{gettext('Save as ...')}
+                  className="file-toolbar-btn"
-                </Button>
+                  aria-label={gettext('More operations')}
-              }{' '}
+                  title={gettext('More operations')}
-              {(canDownload && !trafficOverLimit) &&
+                  tag="span"
-
+                >
-                <a href={`${zipped ? '?p=' + encodeURIComponent(filePath) + '&dl=1' : sharedFileDownloadURL}`} className="btn btn-success">{gettext('Download')} ({Utils.bytesToSize(fileSize)})</a>
+                  <IconButton
-              }{' '}
+                    id="shared-file-view-more-level"
-              {(enableShareLinkReportAbuse && (loginUser !== sharedBy)) &&
+                    icon="more-level"
-                <Button
+                    text={gettext('More operations')}
-                  onClick={this.toggleAddAbuseReportDialog}>{gettext('Report Abuse')}
+                  />
-                </Button>
+                </DropdownToggle>
-              }
+                <DropdownMenu>
+                  {(canDownload && loginUser && (loginUser !== sharedBy)) && (
+                    <DropdownItem onClick={this.handleSaveSharedFileDialog}>
+                      {gettext('Save as ...')}
+                    </DropdownItem>
+                  )}
+                  {(canDownload && !trafficOverLimit) &&
+                    <a href={`${zipped ? '?p=' + encodeURIComponent(filePath) + '&dl=1' : sharedFileDownloadURL}`} className="dropdown-item">{gettext('Download')} ({Utils.bytesToSize(fileSize)})</a>
+                  }
+                  {(enableShareLinkReportAbuse && (loginUser !== sharedBy)) && (
+                    <DropdownItem onClick={this.toggleAddAbuseReportDialog}>
+                      {gettext('Report Abuse')}
+                    </DropdownItem>
+                  )}
+                  {this.props.canWrapLine && (
+                    <DropdownItem id='txt-line-wrap-menu' className='dropdown-item'>
+                      <Switch
+                        checked={this.props.lineWrapping}
+                        placeholder={gettext('Line wrapping')}
+                        className="txt-line-wrap-menu w-100"
+                        onChange={() => this.props.updateLineWrapping(!this.props.lineWrapping)}
+                      />
+                    </DropdownItem>
+                  )}
+                </DropdownMenu>
+              </Dropdown>
             </div>
           </div>
           {this.props.content}

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

@@ -20,8 +20,9 @@
 }
 
 .shared-file-view-head {
-  width: 950px;
+  width: 100%;
   height: 60px;
+  padding: 0 1rem;
   background: #fff;
   margin: 0 auto;
   display: flex;
@@ -58,6 +59,29 @@
   top: 145px !important;
 }
 
+.shared-file-view-head .file-toolbar-btn {
+  width: 28px;
+  height: 28px;
+  padding: 0 4px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.shared-file-view-head .file-toolbar-btn .sdocfont {
+  color: #666;
+}
+
+.shared-file-view-head .file-toolbar-btn .seafile-multicolor-icon {
+  fill: #666;
+}
+
+.shared-file-view-head .file-toolbar-btn:hover {
+  background-color: #EFEFEF;
+  border-radius: 3px;
+}
+
 @media (max-width: 991.98px) {
   .shared-file-view-head {
     width: 100%;

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

@@ -1,3 +1,40 @@
 .text-file-view {
   overflow: auto;
 }
+
+.txt-line-wrap-menu .custom-switch {
+  padding-left: 0px;
+  width: 100%;
+  justify-content: space-between;
+  cursor: pointer;
+}
+
+.txt-line-wrap-menu .custom-switch .custom-switch-description {
+  margin-left: 0px;
+  color: unset;
+  transition: none;
+}
+
+.txt-line-wrap-menu .custom-switch .custom-switch-indicator {
+  width: 22px;
+  height: 12px;
+  border-radius: 6px;
+}
+
+.txt-line-wrap-menu .custom-switch .custom-switch-indicator:before {
+  height: 8px;
+  width: 8px;
+}
+
+.txt-line-wrap-menu .custom-switch .custom-switch-input:checked ~ .custom-switch-indicator:before {
+  left: 12px;
+}
+
+.txt-line-wrap-menu .custom-switch .custom-switch-input:checked~.custom-switch-indicator {
+  background: #ff8000;
+}
+
+.txt-line-wrap-menu .custom-switch .custom-switch-input:focus~.custom-switch-indicator {
+  box-shadow: 0 0 0 2px rgba(255, 128, 0, .25);
+  border-color: #ff8000;
+}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import ReactDom from 'react-dom';
 import SharedFileView from './components/shared-file-view/shared-file-view';
 import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
@@ -7,24 +7,32 @@ import './css/text-file-view.css';
 
 const { err, fileExt, fileContent } = window.shared.pageOptions;
 
-class FileContent extends React.Component {
+const FileContent = ({ lineWrapping }) => {
-  render() {
+  if (err) {
-    if (err) {
+    return <SharedFileViewTip />;
-      return <SharedFileViewTip />;
-    }
-
-    return (
-      <div className="shared-file-view-body text-file-view">
-        <SeafileCodeMirror fileExt={fileExt} value={fileContent} />
-      </div>
-    );
   }
-}
+  return (
+    <div className="shared-file-view-body text-file-view">
+      <SeafileCodeMirror fileExt={fileExt} value={fileContent} lineWrapping={lineWrapping} />
+    </div>
+  );
+};
 
-class SharedFileViewText extends React.Component {
+const SharedFileViewText = () => {
-  render() {
+  let [lineWrapping, setLineWrapping] = useState(localStorage.getItem('sf_txt_file_line_wrapping') === 'true' || true);
-    return <SharedFileView content={<FileContent />} />;
+
-  }
+  const updateLineWrapping = (newLineWrapping) => {
-}
+    setLineWrapping(newLineWrapping);
+  };
+
+  return (
+    <SharedFileView
+      content={<FileContent lineWrapping={lineWrapping}/>}
+      updateLineWrapping={updateLineWrapping}
+      lineWrapping={lineWrapping}
+      canWrapLine={true}
+    />
+  );
+};
 
 ReactDom.render(<SharedFileViewText />, document.getElementById('wrapper'));

frontend/src/view-file-text.js

@@ -32,6 +32,7 @@ class FileContent extends React.Component {
           value={this.props.content}
           readOnly={!canEditFile}
           onChange={this.props.updateContent}
+          lineWrapping={this.props.lineWrapping}
         />
       </div>
     );
@@ -48,6 +49,7 @@ class ViewFileText extends React.Component {
       needSave: false,
       isSaving: false,
       participants: [],
+      lineWrapping: localStorage.getItem('sf_txt_file_line_wrapping') === 'true' || true,
     };
     this.onSave = this.onSave.bind(this);
     this.isParticipant = false;
@@ -61,6 +63,13 @@ class ViewFileText extends React.Component {
     });
   };
 
+  updateLineWrapping = (value) => {
+    this.setState({
+      lineWrapping: value,
+    });
+    localStorage.setItem('sf_txt_file_line_wrapping', value);
+  };
+
   onSave() {
     if (!this.isParticipant) {
       this.addParticipant();
@@ -139,6 +148,7 @@ class ViewFileText extends React.Component {
           <FileContent
             content={this.state.content}
             updateContent={this.updateContent}
+            lineWrapping={this.state.lineWrapping}
           />
         }
         isSaving={this.state.isSaving}
@@ -146,6 +156,8 @@ class ViewFileText extends React.Component {
         onSave={this.onSave}
         participants={this.state.participants}
         onParticipantsChange={this.onParticipantsChange}
+        lineWrapping={this.state.lineWrapping}
+        updateLineWrapping={this.updateLineWrapping}
       />
     );
   }