txt viewer support auto wrap (#7815)

* txt file support wrap line

* external txt file support wrap line

* change more icon

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 />);