diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 8db5499730..93a9fdbae5 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -19,7 +19,7 @@
         "@seafile/react-image-lightbox": "4.0.2",
         "@seafile/resumablejs": "1.1.16",
         "@seafile/seafile-calendar": "0.1.1",
-        "@seafile/seafile-editor": "2.0.25",
+        "@seafile/seafile-editor": "2.0.31",
         "@seafile/seafile-sdoc-editor": "2.0.61",
         "@seafile/stldraw-editor": "1.0.1",
         "@uiw/codemirror-extensions-langs": "^4.19.4",
@@ -6080,9 +6080,9 @@
       }
     },
     "node_modules/@seafile/seafile-editor": {
-      "version": "2.0.25",
-      "resolved": "https://registry.npmjs.org/@seafile/seafile-editor/-/seafile-editor-2.0.25.tgz",
-      "integrity": "sha512-itdkugQOitbSdJmsWTAEghbJjI2JvPiujXJTq4RdEDsp0Lr4PtyXz71fn7CmlF2f8QjIV3sJW9RaD8sWvxfHBw==",
+      "version": "2.0.31",
+      "resolved": "https://registry.npmjs.org/@seafile/seafile-editor/-/seafile-editor-2.0.31.tgz",
+      "integrity": "sha512-qyhE+q5mEGZwAvNqWddODxBCDPckTnrmxbW+qi4KYYAiRxcywr/3RnG3HMMZN5X2XV1zTMVjxqQFtfv6rXwvog==",
       "license": "Apache-2.0",
       "dependencies": {
         "@seafile/react-image-lightbox": "4.0.2",
diff --git a/frontend/package.json b/frontend/package.json
index 9f469f6c09..de7ab4564b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,7 +14,7 @@
     "@seafile/react-image-lightbox": "4.0.2",
     "@seafile/resumablejs": "1.1.16",
     "@seafile/seafile-calendar": "0.1.1",
-    "@seafile/seafile-editor": "2.0.25",
+    "@seafile/seafile-editor": "2.0.31",
     "@seafile/seafile-sdoc-editor": "2.0.61",
     "@seafile/stldraw-editor": "1.0.1",
     "@uiw/codemirror-extensions-langs": "^4.19.4",
diff --git a/frontend/src/pages/markdown-editor/index.js b/frontend/src/pages/markdown-editor/index.js
index 63a88725eb..a591f877da 100644
--- a/frontend/src/pages/markdown-editor/index.js
+++ b/frontend/src/pages/markdown-editor/index.js
@@ -1,9 +1,8 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import {
   EXTERNAL_EVENTS,
   EventBus,
   MarkdownEditor as SeafileMarkdownEditor,
-  MarkdownViewer as SeafileMarkdownViewer,
 } from '@seafile/seafile-editor';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
@@ -407,27 +406,19 @@ class MarkdownEditor extends React.Component {
           toggleLockFile={this.toggleLockFile}
         />
         <div className={`sf-md-viewer-content ${isLocked ? 'locked' : ''}`}>
-          {(filePerm === 'rw' && !isLocked) ?
-            <SeafileMarkdownEditor
-              ref={this.editorRef}
-              isFetching={loading}
-              initValue={this.getFileName(fileName)}
-              value={markdownContent}
-              editorApi={editorApi}
-              onSave={this.onSaveEditorContent}
-              onContentChanged={this.onContentChanged}
-              mathJaxSource={mediaUrl + 'js/mathjax/tex-svg.js'}
-            >
-              <DetailListView fileInfo={fileInfo} />
-            </SeafileMarkdownEditor>
-            :
-            <SeafileMarkdownViewer
-              isFetching={loading}
-              value={markdownContent}
-              mathJaxSource={mediaUrl + 'js/mathjax/tex-svg.js'}
-              isShowOutline={true}
-            />
-          }
+          <SeafileMarkdownEditor
+            ref={this.editorRef}
+            isFetching={loading}
+            isReadonly={filePerm !== 'rw' || isLocked}
+            initValue={this.getFileName(fileName)}
+            value={markdownContent}
+            editorApi={editorApi}
+            onSave={this.onSaveEditorContent}
+            onContentChanged={this.onContentChanged}
+            mathJaxSource={mediaUrl + 'js/mathjax/tex-svg.js'}
+          >
+            <DetailListView fileInfo={fileInfo} />
+          </SeafileMarkdownEditor>
         </div>
         {this.state.showMarkdownEditorDialog && (
           <>