diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 496563769a1..d4da444527c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,6 +8,7 @@
       "name": "seahub-frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@codemirror/view": "^6.22.0",
         "@gatsbyjs/reach-router": "1.3.9",
         "@seafile/react-image-lightbox": "2.0.2",
         "@seafile/resumablejs": "1.1.16",
@@ -2791,12 +2792,12 @@
       }
     },
     "node_modules/@codemirror/view": {
-      "version": "6.7.1",
-      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.7.1.tgz",
-      "integrity": "sha512-kYtS+uqYw/q/0ytYxpkqE1JVuK5NsbmBklWYhwLFTKO9gVuTdh/kDEeZPKorbqHcJ+P+ucrhcsS1czVweOpT2g==",
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.22.0.tgz",
+      "integrity": "sha512-6zLj4YIoIpfTGKrDMTbeZRpa8ih4EymMCKmddEDcJWrCdp/N1D46B38YEz4creTb4T177AVS9EyXkLeC/HL2jA==",
       "dependencies": {
         "@codemirror/state": "^6.1.4",
-        "style-mod": "^4.0.0",
+        "style-mod": "^4.1.0",
         "w3c-keyname": "^2.2.4"
       }
     },
@@ -25785,9 +25786,9 @@
       }
     },
     "node_modules/style-mod": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.0.tgz",
-      "integrity": "sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw=="
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.0.tgz",
+      "integrity": "sha512-Ca5ib8HrFn+f+0n4N4ScTIA9iTOQ7MaGS1ylHcoVqW9J7w2w8PzN6g9gKmTYgGEBH8e120+RCmhpje6jC5uGWA=="
     },
     "node_modules/stylehacks": {
       "version": "4.0.3",
@@ -31220,12 +31221,12 @@
       }
     },
     "@codemirror/view": {
-      "version": "6.7.1",
-      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.7.1.tgz",
-      "integrity": "sha512-kYtS+uqYw/q/0ytYxpkqE1JVuK5NsbmBklWYhwLFTKO9gVuTdh/kDEeZPKorbqHcJ+P+ucrhcsS1czVweOpT2g==",
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.22.0.tgz",
+      "integrity": "sha512-6zLj4YIoIpfTGKrDMTbeZRpa8ih4EymMCKmddEDcJWrCdp/N1D46B38YEz4creTb4T177AVS9EyXkLeC/HL2jA==",
       "requires": {
         "@codemirror/state": "^6.1.4",
-        "style-mod": "^4.0.0",
+        "style-mod": "^4.1.0",
         "w3c-keyname": "^2.2.4"
       }
     },
@@ -47523,9 +47524,9 @@
       }
     },
     "style-mod": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.0.tgz",
-      "integrity": "sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw=="
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.0.tgz",
+      "integrity": "sha512-Ca5ib8HrFn+f+0n4N4ScTIA9iTOQ7MaGS1ylHcoVqW9J7w2w8PzN6g9gKmTYgGEBH8e120+RCmhpje6jC5uGWA=="
     },
     "stylehacks": {
       "version": "4.0.3",
diff --git a/frontend/package.json b/frontend/package.json
index d73bff9631e..0a5f8af4c44 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@codemirror/view": "^6.22.0",
     "@gatsbyjs/reach-router": "1.3.9",
     "@seafile/react-image-lightbox": "2.0.2",
     "@seafile/resumablejs": "1.1.16",
diff --git a/frontend/src/components/seafile-codemirror/index.js b/frontend/src/components/seafile-codemirror/index.js
index 066ca99565f..04dd8b98fe8 100644
--- 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 { loadLanguage } from '@uiw/codemirror-extensions-langs';
 import { Utils } from '../../utils/utils';
 
@@ -64,6 +65,7 @@ class SeafileCodeMirror extends React.Component {
           {...options}
           onChange={this.onChange}
           basicSetup={DEFAULT_CODEMIRROR_OPTIONS}
+          extensions={[EditorView.lineWrapping]}
         />
       </div>
     );