txt viewer support auto wrap (#7815)

* txt file support wrap line * external txt file support wrap line * change more icon
2025-09-28 08:06:56 +00:00 · 2025-06-17 21:47:01 +08:00
parent ec4918be54
commit 32433e5b1a
8 changed files with 183 additions and 39 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 '../switch';
 import IconButton from '../icon-button';
 import { gettext, siteRoot } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
@@ -71,7 +72,13 @@ 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
    });
@@ -212,7 +219,7 @@ class FileToolbar extends React.Component {
              title={gettext('More operations')}
              tag="span"
            >
-              <Icon symbol="more-vertical" />
+              <Icon symbol="more-level" />
            </DropdownToggle>
            <DropdownMenu>
              {/* {(
@@ -233,6 +240,16 @@ class FileToolbar extends React.Component {
                  {gettext('Open via client')}
                </a>
              )}
+              {fileExt && fileExt.toLowerCase() === 'txt' && (
+                <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>
@@ -259,7 +276,7 @@ class FileToolbar extends React.Component {
                  ))}
          </ButtonGroup>
          <DropdownToggle tag="span" className="mx-1" aria-label={gettext('More operations')}>
-            <Icon symbol="more-vertical" />
+            <Icon symbol="more-level" />
          </DropdownToggle>
          <DropdownMenu>
            <DropdownItem>
--- a/frontend/src/components/file-view/file-view.js
+++ b/frontend/src/components/file-view/file-view.js
@@ -156,6 +156,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';

@@ -24,8 +25,11 @@ class SeafileCodeMirror extends React.Component {
  };

  render() {
-    const { value, readOnly = true, 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 '../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>
-              }{' '}
-              {(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>
-              }
+              <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="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
@@ -59,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 { createRoot } from 'react-dom/client';
 import SharedFileView from './components/shared-file-view/shared-file-view';
 import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
@@ -7,25 +7,34 @@ import './css/text-file-view.css';

 const { err, fileExt, fileContent } = window.shared.pageOptions;

-class FileContent extends React.Component {
-  render() {
-    if (err) {
-      return <SharedFileViewTip />;
-    }
-
-    return (
-      <div className="shared-file-view-body text-file-view">
-        <SeafileCodeMirror fileExt={fileExt} value={fileContent} />
-      </div>
-    );
+const FileContent = ({ lineWrapping }) => {
+  if (err) {
+    return <SharedFileViewTip />;
  }
-}

-class SharedFileViewText extends React.Component {
-  render() {
-    return <SharedFileView content={<FileContent />} />;
-  }
-}
+  return (
+    <div className="shared-file-view-body text-file-view">
+      <SeafileCodeMirror fileExt={fileExt} value={fileContent} lineWrapping={lineWrapping} />
+    </div>
+  );
+};
+
+const SharedFileViewText = () => {
+  let [lineWrapping, setLineWrapping] = useState(localStorage.getItem('sf_txt_file_line_wrapping') === 'true' || false);
+
+  const updatelineWrapping = (newLineWrapping) => {
+    setLineWrapping(newLineWrapping);
+  };
+
+  return (
+    <SharedFileView
+      content={<FileContent lineWrapping={lineWrapping}/>}
+      updatelineWrapping={updatelineWrapping}
+      lineWrapping={lineWrapping}
+      canWrapLine={true}
+    />
+  );
+};

 const root = createRoot(document.getElementById('wrapper'));
 root.render(<SharedFileViewText />);
--- 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' || false,
    };
    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}
      />
    );
  }