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

* txt viewer support set auto wrap line * change default line wrap
2025-10-22 11:43:33 +00:00 · 2025-10-10 15:24:06 +08:00
parent 1cadba71f3
commit af919ebeb5
8 changed files with 202 additions and 41 deletions
--- a/frontend/src/components/file-view/file-toolbar.js
+++ b/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>

--- a/frontend/src/components/file-view/file-view.js
+++ b/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>
--- a/frontend/src/components/seafile-codemirror/index.js
+++ b/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 extensions = [...getLanguageExtensions(fileExt).filter(item => item !== null)];
+    const { value, readOnly = true, fileExt, lineWrapping } = this.props;
+    let extensions = [...getLanguageExtensions(fileExt).filter(item => item !== null)];
+    if (lineWrapping) {
+      extensions.push(EditorView.lineWrapping);
+    }
    return (
      <div className='seafile-code-mirror-container'>
        <CodeMirror
--- a/frontend/src/components/shared-file-view/shared-file-view.js
+++ b/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)) &&
-                <Button color="secondary" id="save"
-                  onClick={this.handleSaveSharedFileDialog}>{gettext('Save as ...')}
-                </Button>
-              }{' '}
+              <Dropdown isOpen={this.state.moreDropdownOpen} toggle={this.toggleMoreOpMenu}>
+                <DropdownToggle
+                  className="file-toolbar-btn"
+                  aria-label={gettext('More operations')}
+                  title={gettext('More operations')}
+                  tag="span"
+                >
+                  <IconButton
+                    id="shared-file-view-more-level"
+                    icon="more-level"
+                    text={gettext('More operations')}
+                  />
+                </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="btn btn-success">{gettext('Download')} ({Utils.bytesToSize(fileSize)})</a>
-              }{' '}
-              {(enableShareLinkReportAbuse && (loginUser !== sharedBy)) &&
-                <Button
-                  onClick={this.toggleAddAbuseReportDialog}>{gettext('Report Abuse')}
-                </Button>
+                    <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}
--- a/frontend/src/css/shared-file-view.css
+++ b/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%;
--- a/frontend/src/css/text-file-view.css
+++ b/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;
+}
--- a/frontend/src/shared-file-view-text.js
+++ b/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 {
-  render() {
+const FileContent = ({ lineWrapping }) => {
  if (err) {
    return <SharedFileViewTip />;
  }
-
  return (
    <div className="shared-file-view-body text-file-view">
-        <SeafileCodeMirror fileExt={fileExt} value={fileContent} />
+      <SeafileCodeMirror fileExt={fileExt} value={fileContent} lineWrapping={lineWrapping} />
    </div>
  );
-  }
-}
+};

-class SharedFileViewText extends React.Component {
-  render() {
-    return <SharedFileView content={<FileContent />} />;
-  }
-}
+const SharedFileViewText = () => {
+  let [lineWrapping, setLineWrapping] = useState(localStorage.getItem('sf_txt_file_line_wrapping') === 'true' || true);
+
+  const updateLineWrapping = (newLineWrapping) => {
+    setLineWrapping(newLineWrapping);
+  };
+
+  return (
+    <SharedFileView
+      content={<FileContent lineWrapping={lineWrapping}/>}
+      updateLineWrapping={updateLineWrapping}
+      lineWrapping={lineWrapping}
+      canWrapLine={true}
+    />
+  );
+};

 ReactDom.render(<SharedFileViewText />, document.getElementById('wrapper'));
--- a/frontend/src/view-file-text.js
+++ b/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}
      />
    );
  }