diff --git a/frontend/src/components/dialog/create-file-dialog.js b/frontend/src/components/dialog/create-file-dialog.js
index 560da08cdc..6eb34293fc 100644
--- a/frontend/src/components/dialog/create-file-dialog.js
+++ b/frontend/src/components/dialog/create-file-dialog.js
@@ -21,7 +21,7 @@ class CreateFile extends React.Component {
       isMarkdownDraft: false,
       isSdocDraft: false,
       errMessage: '',
-      isSubmitBtnActive: false,
+      isSubmitBtnActive: props.fileType.slice(0, -5) ? true : false,
     };
     this.newInput = React.createRef();
   }
diff --git a/frontend/src/pages/sdoc/sdoc-editor/external-operations.js b/frontend/src/pages/sdoc/sdoc-editor/external-operations.js
index 878e6a6add..ae43f68aa3 100644
--- a/frontend/src/pages/sdoc/sdoc-editor/external-operations.js
+++ b/frontend/src/pages/sdoc/sdoc-editor/external-operations.js
@@ -6,6 +6,7 @@ import { Utils } from '../../../utils/utils';
 import toaster from '../../../components/toast';
 import InternalLinkDialog from '../../../components/dialog/internal-link-dialog';
 import ShareDialog from '../../../components/dialog/share-dialog';
+import CreateFile from '../../../components/dialog/create-file-dialog';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
@@ -13,6 +14,8 @@ const propTypes = {
   docName: PropTypes.string.isRequired,
   docPerm: PropTypes.string.isRequired,
   isStarred: PropTypes.bool.isRequired,
+  direntList: PropTypes.array.isRequired,
+  dirPath: PropTypes.string.isRequired,
   toggleStar: PropTypes.func.isRequired,
   unmarkDraft: PropTypes.func.isRequired,
   onNewNotification: PropTypes.func.isRequired
@@ -26,6 +29,8 @@ class ExternalOperations extends React.Component {
       isShowInternalLinkDialog: false,
       isShowShareDialog: false,
       internalLink: '',
+      isShowCreateFileDialog: false,
+      fileType: '.sdoc',
     };
   }
 
@@ -38,6 +43,7 @@ class ExternalOperations extends React.Component {
     this.unsubscribeFreezeDocument = eventBus.subscribe(EXTERNAL_EVENT.FREEZE_DOCUMENT, this.onFreezeDocument);
     this.unsubscribeUnfreeze = eventBus.subscribe(EXTERNAL_EVENT.UNFREEZE, this.unFreeze);
     this.unsubscribeNewNotification = eventBus.subscribe(EXTERNAL_EVENT.NEW_NOTIFICATION, this.onNewNotification);
+    this.unsubscribeCreateSdocFile = eventBus.subscribe(EXTERNAL_EVENT.CREATE_SDOC_FILE, this.onCreateSdocFile);
   }
 
   componentWillUnmount() {
@@ -48,6 +54,7 @@ class ExternalOperations extends React.Component {
     this.unsubscribeFreezeDocument();
     this.unsubscribeUnfreeze();
     this.unsubscribeNewNotification();
+    this.unsubscribeCreateSdocFile();
   }
 
   onInternalLinkToggle = (options) => {
@@ -116,9 +123,37 @@ class ExternalOperations extends React.Component {
     this.props.onNewNotification();
   };
 
+  onCreateSdocFile = (params) => {
+    if (params?.newFileName) {
+      this.setState({fileType: `${params.newFileName}.sdoc`});
+    }
+    this.setState({
+      isShowCreateFileDialog: !this.state.isShowCreateFileDialog
+    });
+  };
+
+  checkDuplicatedName = (newName) => {
+    let direntList = this.props.direntList;
+    let isDuplicated = direntList.some(object => {
+      return object.name === newName;
+    });
+    return isDuplicated;
+  };
+
+  onAddFile = (filePath, isMarkdownDraft) => {
+    let repoID = this.props.repoID;
+    seafileAPI.createFile(repoID, filePath, isMarkdownDraft).then((res) => {
+      const eventBus = EventBus.getInstance();
+      eventBus.dispatch(EXTERNAL_EVENT.INSERT_LINK, {data: res.data});
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  };
+
   render() {
-    const { repoID, docPath, docName, docPerm } = this.props;
-    const { isShowInternalLinkDialog, isShowShareDialog, internalLink } = this.state;
+    const { repoID, docPath, docName, docPerm, dirPath } = this.props;
+    const { isShowInternalLinkDialog, isShowShareDialog, internalLink, isShowCreateFileDialog, fileType } = this.state;
     return (
       <>
         {isShowInternalLinkDialog && (
@@ -139,6 +174,15 @@ class ExternalOperations extends React.Component {
             toggleDialog={this.onShareToggle}
           />
         )}
+        {isShowCreateFileDialog && (
+          <CreateFile
+            parentPath={dirPath}
+            fileType={fileType}
+            onAddFile={this.onAddFile}
+            checkDuplicatedName={this.checkDuplicatedName}
+            toggleDialog={this.onCreateSdocFile}
+          />
+        )}
       </>
     );
   }
diff --git a/frontend/src/pages/sdoc/sdoc-editor/index.js b/frontend/src/pages/sdoc/sdoc-editor/index.js
index 622aabde8b..f95f5bcb30 100644
--- a/frontend/src/pages/sdoc/sdoc-editor/index.js
+++ b/frontend/src/pages/sdoc/sdoc-editor/index.js
@@ -1,6 +1,8 @@
 import React, { Fragment } from 'react';
 import { SimpleEditor } from '@seafile/sdoc-editor';
 import ExternalOperations from './external-operations';
+import { seafileAPI } from '../../../utils/seafile-api';
+import Dirent from '../../../models/dirent';
 import { Utils } from '../../../utils/utils';
 
 export default class SdocEditor extends React.Component {
@@ -10,12 +12,14 @@ export default class SdocEditor extends React.Component {
     const { isStarred, isSdocDraft } = window.app.pageOptions;
     this.state = {
       isStarred: isStarred,
-      isDraft: isSdocDraft
+      isDraft: isSdocDraft,
+      direntList: []
     };
   }
 
   componentDidMount() {
     this.onSetFavicon();
+    this.getDirentList();
   }
 
   toggleStar = (isStarred) => {
@@ -39,9 +43,36 @@ export default class SdocEditor extends React.Component {
     this.onSetFavicon('_notification');
   };
 
+  getDirPath = () => {
+    const { docPath } = window.seafile;
+    const index = docPath.lastIndexOf('/');
+    if (index) {
+      return docPath.slice(0, index);
+    }
+    return '/';
+  };
+
+  getDirentList = () => {
+    const { repoID } = window.seafile;
+    const path = this.getDirPath();
+    seafileAPI.listDir(repoID, path, {'with_thumbnail': true}).then(res => {
+      let direntList = [];
+      res.data.dirent_list.forEach(item => {
+        let dirent = new Dirent(item);
+        direntList.push(dirent);
+      });
+      this.setState({
+        direntList: direntList
+      });
+    }).catch((err) => {
+      Utils.getErrorMsg(err, true);
+    });
+  };
+
   render() {
     const { repoID, docPath, docName, docPerm } = window.seafile;
-    const { isStarred, isDraft } = this.state;
+    const { isStarred, isDraft, direntList } = this.state;
+    const dirPath = this.getDirPath();
     return (
       <Fragment>
         <SimpleEditor isStarred={isStarred} isDraft={isDraft} />
@@ -51,6 +82,8 @@ export default class SdocEditor extends React.Component {
           docName={docName}
           docPerm={docPerm}
           isStarred={isStarred}
+          direntList={direntList}
+          dirPath={dirPath}
           toggleStar={this.toggleStar}
           unmarkDraft={this.unmarkDraft}
           onNewNotification={this.onNewNotification}