Update dependency 4 (#5348)

* react react-dom reach-router react-image-lightbox

* update seafile-editor version

* optimize codemirror code

* optimize code

* repair code bug

* optimize code

* optimize code

* optimize seafile-editor version

* update seafile-editor version

* optimize code

* optimize code

frontend/src/view-file-text.js

@@ -1,43 +1,44 @@
 import React from 'react';
-import { createRoot } from 'react-dom/client';
+import ReactDom from 'react-dom';
 import PropTypes from 'prop-types';
 import toaster from './components/toast';
-import { Utils } from './utils/utils';
 import { gettext } from './utils/constants';
 import FileView from './components/file-view/file-view';
+import SeafileCodeMirror from './components/seafile-codemirror';
 import FileViewTip from './components/file-view/file-view-tip';
 import { seafileAPI } from './utils/seafile-api';
 
-import { UnControlled as CodeMirror } from 'react-codemirror2';
-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';
-import 'codemirror/lib/codemirror.css';
-
 import './css/text-file-view.css';
-
 const {
   err, fileExt, fileContent, repoID, filePath, fileName, canEditFile, username
 } = window.app.pageOptions;
 
-const options = {
-  lineNumbers: true,
-  mode: Utils.chooseLanguage(fileExt),
-  extraKeys: {'Ctrl': 'autocomplete'},
-  theme: 'default',
-  textWrapping: true,
-  lineWrapping: true,
-  readOnly: !canEditFile,
-  cursorBlinkRate: canEditFile ? 530 : -1,   // default is 530ms
+const propTypes = {
+  updateContent: PropTypes.func.isRequired,
+  content: PropTypes.string.isRequired,
 };
 
+class FileContent extends React.Component {
+  render() {
+    if (err) {
+      return <FileViewTip />;
+    }
+
+    return (
+      <div className="file-view-content flex-1 text-file-view">
+        <SeafileCodeMirror
+          fileExt={fileExt}
+          value={this.props.content}
+          readOnly={!canEditFile}
+          onChange={this.props.updateContent}
+        />
+      </div>
+    );
+  }
+}
+
+FileContent.propTypes = propTypes;
+
 class ViewFileText extends React.Component {
   constructor(props) {
     super(props);
@@ -52,7 +53,7 @@ class ViewFileText extends React.Component {
   }
 
 
-  updateContent = (editor, data, value) => {
+  updateContent = (value) => {
     this.setState({
       needSave: true,
       content: value,
@@ -136,30 +137,4 @@ class ViewFileText extends React.Component {
   }
 }
 
-const propTypes = {
-  updateContent: PropTypes.func.isRequired,
-  content: PropTypes.string.isRequired,
-};
-
-class FileContent extends React.Component {
-  render() {
-    if (err) {
-      return <FileViewTip />;
-    }
-    return (
-      <div className="file-view-content flex-1 text-file-view">
-        <CodeMirror
-          ref="code-mirror-editor"
-          value={this.props.content}
-          options={options}
-          onChange={this.props.updateContent}
-        />
-      </div>
-    );
-  }
-}
-
-FileContent.propTypes = propTypes;
-
-const root = createRoot(document.getElementById('wrapper'));
-root.render(<ViewFileText />);
+ReactDom.render(<ViewFileText />, document.getElementById('wrapper'));