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/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;
+}