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/components/cur-dir-path/dir-path.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Link } from '@reach/router';
+import { Link } from '@gatsbyjs/reach-router';
 import { UncontrolledTooltip } from 'reactstrap';
 import { siteRoot, gettext } from '../../utils/constants';
 import InternalLinkDialog from '../dialog/internal-link-dialog';

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

@@ -1,45 +1,14 @@
 import React from 'react';
-import { Utils } from '../../utils/utils';
-
-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 SeafileCodeMirror from '../seafile-codemirror';
 import '../../css/text-file-view.css';
 
-const {
-  fileExt, fileContent
-} = window.app.pageOptions;
-
-const options = {
-  lineNumbers: true,
-  mode: Utils.chooseLanguage(fileExt),
-  extraKeys: {'Ctrl': 'autocomplete'},
-  theme: 'default',
-  textWrapping: true,
-  lineWrapping: true,
-  readOnly: true,
-  cursorBlinkRate: -1 // hide the cursor
-};
+const { fileExt, fileContent } = window.app.pageOptions;
 
 class FileContent extends React.Component {
   render() {
     return (
       <div className="file-view-content flex-1 text-file-view">
-        <CodeMirror
-          ref="code-mirror-editor"
-          value={fileContent}
-          options={options}
-        />
+        <SeafileCodeMirror fileExt={fileExt} value={fileContent} />
       </div>
     );
   }

frontend/src/components/main-side-nav.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from '@reach/router';
+import { Link } from '@gatsbyjs/reach-router';
 import { Badge } from 'reactstrap';
 import { gettext, siteRoot, canPublishRepo, canAddRepo, canGenerateShareLink, canGenerateUploadLink, canInvitePeople, dtableWebServer, enableOCM, enableOCMViaWebdav } from '../utils/constants';
 import { seafileAPI } from '../utils/seafile-api';

frontend/src/components/org-admin-group-nav.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from '@reach/router';
+import { Link } from '@gatsbyjs/reach-router';
 import { siteRoot, gettext } from '../utils/constants';
 
 const propTypes = {

frontend/src/components/org-admin-user-nav.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from '@reach/router';
+import { Link } from '@gatsbyjs/reach-router';
 import { siteRoot, gettext } from '../utils/constants';
 
 const propTypes = {

frontend/src/components/paginator.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { navigate } from '@reach/router';
+import { navigate } from '@gatsbyjs/reach-router';
 import { gettext } from '../utils/constants';
 
 import '../css/pagination.css';

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CodeMirror from '@uiw/react-codemirror';
+import { loadLanguage } from '@uiw/codemirror-extensions-langs';
+import { Utils } from '../../utils/utils';
+
+import './style.css';
+
+const DEFAULT_CODEMIRROR_OPTIONS = {
+  lineNumbers: true,
+  highlightActiveLineGutter: false,
+  highlightActiveLine: false,
+};
+
+const propTypes = {
+  fileExt: PropTypes.string,
+  value: PropTypes.string,
+  readOnly: PropTypes.bool,
+  onChange: PropTypes.func,
+};
+
+class SeafileCodeMirror extends React.Component {
+
+  static defaultProps = {
+    readOnly: true,
+  }
+
+  constructor(props) {
+    super(props);
+    this.options = null;
+  }
+
+  getOptions = () => {
+    if (this.options) return this.options;
+
+    const { fileExt, readOnly } = this.props;
+    const mode = Utils.chooseLanguage(fileExt);
+    const extensions = loadLanguage(mode);
+    if (extensions) {
+      return {
+        theme: 'light',
+        readOnly: readOnly,
+        extensions: extensions,
+      };
+    }
+    return {
+      theme: 'light',
+      readOnly: readOnly,
+    };
+  }
+
+  onChange = (value) => {
+    this.props.onChange && this.props.onChange(value);
+  }
+
+  render() {
+    const { value } = this.props;
+    const options = this.getOptions();
+    return (
+      <div className='seafile-code-mirror-container'>
+        <CodeMirror
+          ref="code-mirror-editor"
+          value={value}
+          {...options}
+          onChange={this.onChange}
+          basicSetup={DEFAULT_CODEMIRROR_OPTIONS}
+        />
+      </div>
+    );
+  }
+}
+
+SeafileCodeMirror.propTypes = propTypes;
+
+export default SeafileCodeMirror;

frontend/src/components/seafile-codemirror/style.css

@@ -0,0 +1,20 @@
+.text-file-view .cm-editor {
+  margin: 0 auto;
+  border: 1px solid #ccc;
+  box-shadow: 0 0 6px #ccc;
+}
+
+.text-file-view .cm-editor {
+  height: auto;
+  min-height: 300px;
+  width: calc(100% - 40px);
+  max-width: 950px;
+}
+
+.text-file-view .cm-scroll {
+  min-height: 300px;
+}
+
+.text-file-view .cm-gutter {
+  min-height: 300px;
+}

frontend/src/components/shared-repo-list-view/shared-repo-list-item.js

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
-import { Link, navigate } from '@reach/router';
+import { Link, navigate } from '@gatsbyjs/reach-router';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, isPro, username, folderPermEnabled, isSystemStaff, enableResetEncryptedRepoPassword, isEmailConfigured } from '../../utils/constants';
 import ModalPortal from '../../components/modal-portal';

frontend/src/components/toast/toaster.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createRoot } from 'react-dom/client';
+import ReactDom from 'react-dom';
 import ToastManager from './toastManager';
 
 const isBrowser =
@@ -17,13 +17,13 @@ export default class Toaster {
     container.setAttribute('data-evergreen-toaster-container', '');
     document.body.appendChild(container);
 
-    const root = createRoot(container);
-    root.render(
+    ReactDom.render(
       <ToastManager
         bindNotify={this._bindNotify}
         bindGetToasts={this._bindGetToasts}
         bindCloseAll={this._bindCloseAll}
-      />
+      />,
+      container
     );
   }
 

frontend/src/components/toolbar/repo-view-toobar.js

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Utils } from '../../utils/utils';
-import { Link, navigate } from '@reach/router';
+import { Link, navigate } from '@gatsbyjs/reach-router';
 import { siteRoot, gettext } from '../../utils/constants';
 import ModalPortal from '../modal-portal';
 import CreateRepoDialog from '../dialog/create-repo-dialog';