Sdoc draft (#5556)

* [dir view] redesigned the sdoc draft identifier * [dir view] added option 'Mark as draft' to 'New File' dialog; added big button '+ SeaDoc' for empty library * [sdoc draft] fixed API typos * [sdoc file view] displayed draft identifier & added 'unmark as draft' for drafts * [media/sdoc-editor] updated i18n/l10n strings for sdoc-editor * [dir view] 'New' dropdown menu: added '(beta)' for 'New SeaDoc File'
2025-04-28 03:10:45 +00:00 · 2023-07-22 15:54:25 +08:00 · 2023-07-22 15:54:25 +08:00 · 68ed3e5773
commit 68ed3e5773
parent f02f40ee3a
20 changed files with 148 additions and 99 deletions
--- a/frontend/src/components/dialog/create-file-dialog.js
+++ b/frontend/src/components/dialog/create-file-dialog.js
@ -9,7 +9,7 @@ const propTypes = {
  parentPath: PropTypes.string.isRequired,
  onAddFile: PropTypes.func.isRequired,
  checkDuplicatedName: PropTypes.func.isRequired,
-  addFileCancel: PropTypes.func.isRequired,
+  toggleDialog: PropTypes.func.isRequired,
 };

 class CreateFile extends React.Component {
@ -18,7 +18,8 @@ class CreateFile extends React.Component {
    this.state = {
      parentPath: '',
      childName: props.fileType || '',
-      isDraft: false,
+      isMarkdownDraft: false,
+      isSdocDraft: false,
      errMessage: '',
      isSubmitBtnActive: false,
    };
@ -60,8 +61,9 @@ class CreateFile extends React.Component {
      this.setState({errMessage: errMessage});
    } else {
      let path = this.state.parentPath + newName;
-      let isDraft = this.state.isDraft;
-      this.props.onAddFile(path, isDraft);
+      const { isMarkdownDraft, isSdocDraft } = this.state;
+      this.props.onAddFile(path, isMarkdownDraft, isSdocDraft);
+      this.props.toggleDialog();
    }
  }

@ -75,7 +77,7 @@ class CreateFile extends React.Component {
  handleCheck = () => {
    let pos = this.state.childName.lastIndexOf('.');

-    if (this.state.isDraft) {
+    if (this.state.isMarkdownDraft) {
      // from draft to not draft
      // case 1, normally, the file name is ended with `(draft)`, like `test(draft).md`
      // case 2, the file name is not ended with `(draft)`, the user has deleted some characters, like `test(dra.md`
@ -86,17 +88,17 @@ class CreateFile extends React.Component {
        // remove `(draft)` from file name
        this.setState({
          childName: fileName + fileType,
-          isDraft: !this.state.isDraft
+          isMarkdownDraft: !this.state.isMarkdownDraft
        });
      } else {
        // don't change file name
        this.setState({
-          isDraft: !this.state.isDraft
+          isMarkdownDraft: !this.state.isMarkdownDraft
        });
      }
    }

-    if (!this.state.isDraft) {
+    if (!this.state.isMarkdownDraft) {
      // from not draft to draft
      // case 1, test.md  ===> test(draft).md
      // case 2, .md ===> (draft).md
@ -106,25 +108,21 @@ class CreateFile extends React.Component {
        let fileType = this.state.childName.substring(pos);
        this.setState({
          childName: fileName + '(draft)' + fileType,
-          isDraft: !this.state.isDraft
+          isMarkdownDraft: !this.state.isMarkdownDraft
        });
      } else if (pos === 0 ) {
        this.setState({
          childName: '(draft)' + this.state.childName,
-          isDraft: !this.state.isdraft
+          isMarkdownDraft: !this.state.isMarkdownDraft
        });
      } else {
        this.setState({
-          isDraft: !this.state.isdraft
+          isMarkdownDraft: !this.state.isMarkdownDraft
        });
      }
    }
  }

-  toggle = () => {
-    this.props.addFileCancel();
-  }
-
  checkDuplicatedName = () => {
    let isDuplicated = this.props.checkDuplicatedName(this.state.childName);
    return isDuplicated;
@ -136,10 +134,18 @@ class CreateFile extends React.Component {
    this.newInput.current.setSelectionRange(0,0);
  }

+  toggleMarkSdocDraft = (e) => {
+    this.setState({
+      isSdocDraft: e.target.checked
+    });
+  }
+
  render() {
+    const { isSdocDraft } = this.state;
+    const { toggleDialog } = this.props;
    return (
-      <Modal isOpen={true} toggle={this.toggle} onOpened={this.onAfterModelOpened}>
-        <ModalHeader toggle={this.toggle}>{gettext('New File')}</ModalHeader>
+      <Modal isOpen={true} toggle={toggleDialog} onOpened={this.onAfterModelOpened}>
+        <ModalHeader toggle={toggleDialog}>{gettext('New File')}</ModalHeader>
        <ModalBody>
          <Form>
            <FormGroup>
@ -159,11 +165,19 @@ class CreateFile extends React.Component {
                </Label>
              </FormGroup>
            )}
+            {this.props.fileType == '.sdoc' && (
+              <FormGroup check>
+                <Label check>
+                  <Input type="checkbox" checked={isSdocDraft} onChange={this.toggleMarkSdocDraft}/>
+                  <span>{gettext('Mark as draft')}</span>
+                </Label>
+              </FormGroup>
+            )}
          </Form>
          {this.state.errMessage && <Alert color="danger" className="mt-2">{this.state.errMessage}</Alert>}
        </ModalBody>
        <ModalFooter>
-          <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
+          <Button color="secondary" onClick={toggleDialog}>{gettext('Cancel')}</Button>
          <Button color="primary" onClick={this.handleSubmit} disabled={!this.state.isSubmitBtnActive}>{gettext('Submit')}</Button>
        </ModalFooter>
      </Modal>
--- a/frontend/src/components/dir-view-mode/dir-column-nav.js
+++ b/frontend/src/components/dir-view-mode/dir-column-nav.js
@ -143,11 +143,6 @@ class DirColumnNav extends React.Component {
    this.props.onAddFolderNode(dirPath);
  }

-  onAddFileNode = (filePath, isDraft) => {
-    this.setState({isAddFileDialogShow: !this.state.isAddFileDialogShow});
-    this.props.onAddFileNode(filePath, isDraft);
-  }
-
  onRenameNode = (newName) => {
    this.setState({isRenameDialogShow: !this.state.isRenameDialogShow});
    let node = this.state.opNode;
@ -287,9 +282,9 @@ class DirColumnNav extends React.Component {
          <ModalPortal>
            <CreateFile
              parentPath={this.state.opNode.path}
-              onAddFile={this.onAddFileNode}
+              onAddFile={this.props.onAddFileNode}
              checkDuplicatedName={this.checkDuplicatedName}
-              addFileCancel={this.onAddFileToggle}
+              toggleDialog={this.onAddFileToggle}
            />
          </ModalPortal>
        )}
--- a/frontend/src/components/dirent-grid-view/dirent-grid-view.js
+++ b/frontend/src/components/dirent-grid-view/dirent-grid-view.js
@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { siteRoot, thumbnailSizeForOriginal, username, isPro, enableFileComment, fileAuditEnabled, folderPermEnabled, canGenerateShareLink } from '../../utils/constants';
+import { siteRoot, thumbnailSizeForOriginal, username } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import URLDecorator from '../../utils/url-decorator';
@ -29,6 +29,7 @@ const propTypes = {
  repoID: PropTypes.string.isRequired,
  currentRepoInfo: PropTypes.object,
  direntList: PropTypes.array.isRequired,
+  fullDirentList: PropTypes.array,
  onAddFile: PropTypes.func,
  onItemDelete: PropTypes.func,
  onItemCopy: PropTypes.func.isRequired,
@ -48,7 +49,7 @@ const propTypes = {
  onItemRename: PropTypes.func.isRequired,
 };

-class DirentGridView extends React.Component{
+class DirentGridView extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
@ -93,11 +94,6 @@ class DirentGridView extends React.Component{
    this.setState({isCopyDialogShow: !this.state.isCopyDialogShow});
  }

-  onAddFile = (filePath, isDraft) => {
-    this.setState({isCreateFileDialogShow: false});
-    this.props.onAddFile(filePath, isDraft);
-  }
-
  onAddFolder = (dirPath) => {
    this.setState({isCreateFolderDialogShow: false});
    this.props.onAddFolder(dirPath);
@ -169,7 +165,7 @@ class DirentGridView extends React.Component{
        this.onCreateFolderToggle(currentObject);
        break;
      case 'New File':
-        this.onCreateFileToggle(currentObject);
+        this.onCreateFileToggle();
        break;
      case 'Access Log':
        this.onAccessLog(currentObject);
@ -274,7 +270,7 @@ class DirentGridView extends React.Component{
  onMarkAsDraft = (currentObject) => {
    let repoID = this.props.repoID;
    let filePath = this.getDirentPath(currentObject);
-    seafileAPI.sdocMaskAsDraft(repoID, filePath).then((res) => {
+    seafileAPI.sdocMarkAsDraft(repoID, filePath).then((res) => {
      this.props.updateDirent(currentObject, 'is_sdoc_draft', true);
    }).catch(error => {
      let errMessage = Utils.getErrorMsg(error);
@ -285,7 +281,7 @@ class DirentGridView extends React.Component{
  onUnmarkAsDraft = (currentObject) => {
    let repoID = this.props.repoID;
    let filePath = this.getDirentPath(currentObject);
-    seafileAPI.sdocUnmaskAsDraft(repoID, filePath).then((res) => {
+    seafileAPI.sdocUnmarkAsDraft(repoID, filePath).then((res) => {
      this.props.updateDirent(currentObject, 'is_sdoc_draft', false);
    }).catch(error => {
      let errMessage = Utils.getErrorMsg(error);
@ -527,9 +523,9 @@ class DirentGridView extends React.Component{
          <ModalPortal>
            <CreateFile
              parentPath={this.props.path}
-              onAddFile={this.onAddFile}
+              onAddFile={this.props.onAddFile}
              checkDuplicatedName={this.checkDuplicatedName}
-              addFileCancel={this.onCreateFileToggle}
+              toggleDialog={this.onCreateFileToggle}
            />
          </ModalPortal>
        )}
--- a/frontend/src/components/dirent-list-view/dirent-list-item.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-item.js
@ -365,7 +365,7 @@ class DirentListItem extends React.Component {
  onMarkAsDraft = () => {
    let repoID = this.props.repoID;
    let filePath = this.getDirentPath(this.props.dirent);
-    seafileAPI.sdocMaskAsDraft(repoID, filePath).then((res) => {
+    seafileAPI.sdocMarkAsDraft(repoID, filePath).then((res) => {
      this.props.updateDirent(this.props.dirent, 'is_sdoc_draft', true);
    }).catch(error => {
      let errMessage = Utils.getErrorMsg(error);
@ -376,7 +376,7 @@ class DirentListItem extends React.Component {
  onUnmarkAsDraft = () => {
    let repoID = this.props.repoID;
    let filePath = this.getDirentPath(this.props.dirent);
-    seafileAPI.sdocUnmaskAsDraft(repoID, filePath).then((res) => {
+    seafileAPI.sdocUnmarkAsDraft(repoID, filePath).then((res) => {
      this.props.updateDirent(this.props.dirent, 'is_sdoc_draft', false);
    }).catch(error => {
      let errMessage = Utils.getErrorMsg(error);
@ -737,7 +737,7 @@ class DirentListItem extends React.Component {
                <a href={dirent.type === 'dir' ? dirHref : fileHref} onClick={this.onItemClick}>{dirent.name}</a>
              }
              {(Utils.isSdocFile(dirent.name) && dirent.is_sdoc_draft) &&
-                <span className="pl-1">{'(draft)'}</span>
+                <span className="sdoc-draft-identifier">{gettext('Draft')}</span>
              }
            </Fragment>
          )}
--- a/frontend/src/components/dirent-list-view/dirent-list-view.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-view.js
@ -1,9 +1,8 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { siteRoot, gettext, thumbnailSizeForOriginal, username, isPro, enableFileComment, fileAuditEnabled, folderPermEnabled, canGenerateShareLink } from '../../utils/constants';
+import { siteRoot, gettext, thumbnailSizeForOriginal, username } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import TextTranslation from '../../utils/text-translation';
-import { seafileAPI } from '../../utils/seafile-api';
 import URLDecorator from '../../utils/url-decorator';
 import Loading from '../loading';
 import toaster from '../toast';
@ -220,11 +219,6 @@ class DirentListView extends React.Component {
    this.setState({isCreateFolderDialogShow: !this.state.isCreateFolderDialogShow});
  }

-  onAddFile = (filePath, isDraft) => {
-    this.setState({isCreateFileDialogShow: false});
-    this.props.onAddFile(filePath, isDraft);
-  }
-
  onAddFolder = (dirPath) => {
    this.setState({isCreateFolderDialogShow: false});
    this.props.onAddFolder(dirPath);
@ -371,7 +365,7 @@ class DirentListView extends React.Component {
        let id = 'dirents-menu';
        let menuList = [];
        if (isCustomPermission) {
-          const { modify: canModify, copy: canCopy, download: canDownload, delete: canDelete } = customPermission.permission; 
+          const { modify: canModify, copy: canCopy, download: canDownload, delete: canDelete } = customPermission.permission;
          canModify && menuList.push(TextTranslation.MOVE);
          canCopy && menuList.push(TextTranslation.COPY);
          canDownload && menuList.push(TextTranslation.DOWNLOAD);
@ -704,9 +698,9 @@ class DirentListView extends React.Component {
              <CreateFile
                parentPath={this.props.path}
                fileType={this.state.fileType}
-                onAddFile={this.onAddFile}
+                onAddFile={this.props.onAddFile}
                checkDuplicatedName={this.checkDuplicatedName}
-                addFileCancel={this.onCreateFileToggle}
+                toggleDialog={this.onCreateFileToggle}
              />
            </ModalPortal>
          )}
--- a/frontend/src/components/dirent-list-view/dirent-none-view.js
+++ b/frontend/src/components/dirent-list-view/dirent-none-view.js
@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { gettext } from '../../utils/constants';
+import { enableSeadoc, gettext } from '../../utils/constants';
 import Loading from '../loading';
 import ModalPortal from '../modal-portal';
 import CreateFile from '../../components/dialog/create-file-dialog';
@ -10,7 +10,7 @@ import '../../css/tip-for-new-file.css';
 const propTypes = {
  path: PropTypes.string.isRequired,
  isDirentListLoading: PropTypes.bool.isRequired,
-  onAddFile: PropTypes.func.isRequired,
+  onAddFile: PropTypes.func.isRequired
 };

 class DirentNodeView extends React.Component {
@ -41,11 +41,6 @@ class DirentNodeView extends React.Component {
    return false; // current repo is null, and unnecessary to check duplicated name
  }

-  onAddFile = (filePath, isDraft) => {
-    this.setState({isCreateFileDialogShow: false});
-    this.props.onAddFile(filePath, isDraft);
-  }
-
  render() {
    if (this.props.isDirentListLoading) {
      return (<Loading />);
@ -53,9 +48,9 @@ class DirentNodeView extends React.Component {

    return (
      <Fragment>
-        <div className="tip-for-new-file text-center">
-          <p className="text-secondary">{gettext('This folder has no content at this time.')}</p>
-          <p className="text-secondary">{gettext('You can create files quickly')}{' +'}</p>
+        <div className="tip-for-new-file">
+          <p className="text-secondary text-center">{gettext('This folder has no content at this time.')}</p>
+          <p className="text-secondary text-center">{gettext('You can create files quickly')}{' +'}</p>
          <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.md')}>
            {'+ Markdown'}</button>
          <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.pptx')}>
@ -65,14 +60,17 @@ class DirentNodeView extends React.Component {
            {'+ Word'}</button>
          <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.xlsx')}>
            {'+ Excel'}</button>
+          <br />
+          {enableSeadoc && <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.sdoc')}>
+            {'+ SeaDoc'}</button>}
        </div>
        {this.state.isCreateFileDialogShow && (
          <ModalPortal>
            <CreateFile
              parentPath={this.props.path}
              fileType={this.state.fileType}
-              onAddFile={this.onAddFile}
-              addFileCancel={this.onCreateFileToggle}
+              onAddFile={this.props.onAddFile}
+              toggleDialog={this.onCreateFileToggle}
              checkDuplicatedName={this.checkDuplicatedName}
            />
          </ModalPortal>
--- a/frontend/src/components/toolbar/dir-operation-toolbar.js
+++ b/frontend/src/components/toolbar/dir-operation-toolbar.js
@ -110,7 +110,7 @@ class DirOperationToolbar extends React.Component {
  onCreateFileToggle = () => {
    this.setState({
      isCreateFileDialogShow: !this.state.isCreateFileDialogShow,
-      fileType: '',
+      fileType: ''
    });
  }

@ -149,11 +149,6 @@ class DirOperationToolbar extends React.Component {
    });
  }

-  onAddFile = (filePath, isDraft) => {
-    this.setState({isCreateFileDialogShow: false});
-    this.props.onAddFile(filePath, isDraft);
-  }
-
  onAddFolder = (dirPath) => {
    this.setState({isCreateFolderDialogShow: false});
    this.props.onAddFolder(dirPath);
@ -215,7 +210,7 @@ class DirOperationToolbar extends React.Component {
                <button className="dropdown-item" onClick={this.onCreateExcelToggle} role="menuitem">{gettext('New Excel File')}</button>
                <button className="dropdown-item" onClick={this.onCreatePPTToggle} role="menuitem">{gettext('New PowerPoint File')}</button>
                <button className="dropdown-item" onClick={this.onCreateWordToggle} role="menuitem">{gettext('New Word File')}</button>
-                {enableSeadoc && <button className="dropdown-item" onClick={this.onCreateSeaDocToggle} role="menuitem">{gettext('New SeaDoc File')}</button>}
+                {enableSeadoc && <button className="dropdown-item" onClick={this.onCreateSeaDocToggle} role="menuitem">{gettext('New SeaDoc File')} (beta)</button>}
              </div>
            )}
          </Fragment>
@ -255,9 +250,9 @@ class DirOperationToolbar extends React.Component {
            <CreateFile
              parentPath={this.props.path}
              fileType={this.state.fileType}
-              onAddFile={this.onAddFile}
+              onAddFile={this.props.onAddFile}
              checkDuplicatedName={this.checkDuplicatedName}
-              addFileCancel={this.onCreateFileToggle}
+              toggleDialog={this.onCreateFileToggle}
            />
          </ModalPortal>
        )}
--- a/frontend/src/components/toolbar/multiple-dir-operation-toolbar.js
+++ b/frontend/src/components/toolbar/multiple-dir-operation-toolbar.js
@ -124,7 +124,7 @@ class MultipleDirOperationToolbar extends React.Component {
  onMarkAsDraft = (dirent) => {
    let repoID = this.props.repoID;
    let filePath = this.getDirentPath(dirent);
-    seafileAPI.sdocMaskAsDraft(repoID, filePath).then((res) => {
+    seafileAPI.sdocMarkAsDraft(repoID, filePath).then((res) => {
      this.props.updateDirent(dirent, 'is_sdoc_draft', true);
    }).catch(error => {
      let errMessage = Utils.getErrorMsg(error);
@ -135,7 +135,7 @@ class MultipleDirOperationToolbar extends React.Component {
  onUnmarkAsDraft = (dirent) => {
    let repoID = this.props.repoID;
    let filePath = this.getDirentPath(dirent);
-    seafileAPI.sdocUnmaskAsDraft(repoID, filePath).then((res) => {
+    seafileAPI.sdocUnmarkAsDraft(repoID, filePath).then((res) => {
      this.props.updateDirent(dirent, 'is_sdoc_draft', false);
    }).catch(error => {
      let errMessage = Utils.getErrorMsg(error);
--- a/frontend/src/css/dirent-list-item.css
+++ b/frontend/src/css/dirent-list-item.css
@ -23,3 +23,15 @@
 .tag-list-title {
  overflow: hidden;
 }
+
+.sdoc-draft-identifier {
+  display: inline-block;
+  font-size: 14px;
+  color: #888;
+  background: #eee;
+  padding: 0 8px;
+  height: 20px;
+  line-height: 20px;
+  border-radius: 10px;
+  margin-left: 6px;
+}
--- a/frontend/src/models/dirent.js
+++ b/frontend/src/models/dirent.js
@ -38,7 +38,7 @@ class Dirent {
        this.encoded_thumbnail_src = json.encoded_thumbnail_src;
      }
      if (Utils.isSdocFile(json.name)) {
-        this.is_sdoc_draft = json.is_sdoc_draft;
+        this.is_sdoc_draft = json.is_sdoc_draft || false;
      }
    }
  }
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@ -866,15 +866,26 @@ class LibContentView extends React.Component {
    });
  }

-  onAddFile = (filePath, isDraft) => {
+  onAddFile = (filePath, isMarkdownDraft, isSdocDraft) => {
    let repoID = this.props.repoID;
-    seafileAPI.createFile(repoID, filePath, isDraft).then(res => {
+    seafileAPI.createFile(repoID, filePath, isMarkdownDraft).then(res => {
      let name = Utils.getFileName(filePath);
      let parentPath = Utils.getDirName(filePath);
      if (this.state.currentMode === 'column') {
        this.addNodeToTree(name, parentPath, 'file');
      }
      if (parentPath === this.state.path && !this.state.isViewFile) {
+        if (isSdocDraft) { // the new file is marked to be draft
+          seafileAPI.sdocMarkAsDraft(repoID, filePath).then((res) => {
+            this.addDirent(name, 'file', res.data.size, isSdocDraft);
+          }).catch(error => {
+            let errMessage = Utils.getErrorMsg(error);
+            toaster.danger(errMessage);
+            this.addDirent(name, 'file', res.data.size);
+          });
+          return;
+        }
+
        this.addDirent(name, 'file', res.data.size);
      }
    }).catch((error) => {
@ -1377,8 +1388,8 @@ class LibContentView extends React.Component {
    }
  }

-  addDirent = (name, type, size) => {
-    let item = this.createDirent(name, type, size);
+  addDirent = (name, type, size, isSdocDraft) => {
+    let item = this.createDirent(name, type, size, isSdocDraft);
    let direntList = this.state.direntList;
    if (type === 'dir') {
      direntList.unshift(item);
@ -1714,11 +1725,15 @@ class LibContentView extends React.Component {
    return new TreeNode({object});
  }

-  createDirent(name, type, size) {
+  createDirent(name, type, size, isSdocDraft) {
    // use current dirent parent's permission as it's permission
    const { userPerm: permission } = this.state;
-    let mtime = new Date().getTime()/1000;
-    let dirent = new Dirent({name, type, mtime, size, permission});
+    const mtime = new Date().getTime()/1000;
+    const obj = { name, type, mtime, size, permission };
+    if (isSdocDraft) {
+      obj.is_sdoc_draft = isSdocDraft;
+    }
+    const dirent = new Dirent(obj);
    return dirent;
  }

--- a/frontend/src/pages/repo-wiki-mode/side-panel.js
+++ b/frontend/src/pages/repo-wiki-mode/side-panel.js
@ -125,11 +125,6 @@ class SidePanel extends Component {
    this.props.onAddFolderNode(dirPath);
  }

-  onAddFileNode = (filePath, isDraft) => {
-    this.setState({isAddFileDialogShow: !this.state.isAddFileDialogShow});
-    this.props.onAddFileNode(filePath, isDraft);
-  }
-
  onRenameNode = (newName) => {
    this.setState({isRenameDialogShow: !this.state.isRenameDialogShow});
    let node = this.state.opNode;
@ -215,9 +210,9 @@ class SidePanel extends Component {
            <CreateFile
              fileType={'.md'}
              parentPath={this.state.opNode.path}
-              onAddFile={this.onAddFileNode}
+              onAddFile={this.props.onAddFileNode}
              checkDuplicatedName={this.checkDuplicatedName}
-              addFileCancel={this.onAddFileToggle}
+              toggleDialog={this.onAddFileToggle}
            />
          </ModalPortal>
        )}
--- a/frontend/src/pages/sdoc-editor/external-operations.js
+++ b/frontend/src/pages/sdoc-editor/external-operations.js
@ -10,7 +10,8 @@ const propTypes = {
  repoID: PropTypes.string.isRequired,
  docPath: PropTypes.string.isRequired,
  isStarred: PropTypes.bool.isRequired,
-  toggleStar: PropTypes.func.isRequired
+  toggleStar: PropTypes.func.isRequired,
+  unmarkDraft: PropTypes.func.isRequired
 };

 class ExternalOperations extends React.Component {
@ -26,17 +27,29 @@ class ExternalOperations extends React.Component {
    const eventBus = EventBus.getInstance();
    this.unsubscribeInternalLinkEvent = eventBus.subscribe(EXTERNAL_EVENT.INTERNAL_LINK_CLICK, this.onInternalLinkToggle);
    this.unsubscribeStar = eventBus.subscribe(EXTERNAL_EVENT.TOGGLE_STAR, this.toggleStar);
+    this.unsubscribeUnmark = eventBus.subscribe(EXTERNAL_EVENT.UNMARK_AS_DRAFT, this.unmark);
  }

  componentWillUnmount() {
    this.unsubscribeInternalLinkEvent();
    this.unsubscribeStar();
+    this.unsubscribeUnmark();
  }

  onInternalLinkToggle = () => {
    this.setState({isShowInternalLinkDialog: !this.state.isShowInternalLinkDialog});
  }

+  unmark = () => {
+    const { repoID, docPath } = this.props;
+    seafileAPI.sdocUnmarkAsDraft(repoID, docPath).then((res) => {
+      this.props.unmarkDraft();
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
  toggleStar = () => {
    const { isStarred, repoID, docPath  } = this.props;
    if (isStarred) {
--- a/frontend/src/pages/sdoc-editor/index.js
+++ b/frontend/src/pages/sdoc-editor/index.js
@ -6,9 +6,10 @@ export default class SdocEditor extends React.Component {

  constructor(props) {
    super(props);
-    const { isStarred } = window.app.pageOptions;
+    const { isStarred, isSdocDraft } = window.app.pageOptions;
    this.state = {
-      isStarred: isStarred
+      isStarred: isStarred,
+      isDraft: isSdocDraft
    };
  }

@ -16,17 +17,22 @@ export default class SdocEditor extends React.Component {
    this.setState({isStarred: isStarred});
  }

+  unmarkDraft = () => {
+    this.setState({isDraft: false});
+  }
+
  render() {
    const { repoID, docPath } = window.seafile;
-    const { isStarred } = this.state;
+    const { isStarred, isDraft } = this.state;
    return (
      <Fragment>
-        <SimpleEditor isStarred={isStarred} />
+        <SimpleEditor isStarred={isStarred} isDraft={isDraft} />
        <ExternalOperations
          repoID={repoID}
          docPath={docPath}
          isStarred={isStarred}
          toggleStar={this.toggleStar}
+          unmarkDraft={this.unmarkDraft}
        />
      </Fragment>
    );
--- a/media/css/seahub_react.css
+++ b/media/css/seahub_react.css
@ -1360,4 +1360,3 @@ a.table-sort-op:hover {
 #wiki-file-content .seafile-markdown-outline .seafile-markdown-outline:hover {
  overflow-y: auto;
 }
-  
--- a/media/sdoc-editor/locales/en/sdoc-editor.json
+++ b/media/sdoc-editor/locales/en/sdoc-editor.json
@ -258,5 +258,9 @@
  "Revision": "Revision",
  "Error": "Error",
  "Start_revise": "Start revise",
-  "Failed_to_execute_operation_on_server": "Failed to execute operation on server"
+  "Failed_to_execute_operation_on_server": "Failed to execute operation on server",
+  "Start_revise_tip": "Create a temporary document and modify on it, merge it back after reviewing changes",
+  "Load_doc_content_error": "Load doc content error",
+  "Draft": "Draft",
+  "Unmark_as_draft": "Unmark as draft"
 }
--- a/media/sdoc-editor/locales/zh-CN/sdoc-editor.json
+++ b/media/sdoc-editor/locales/zh-CN/sdoc-editor.json
@ -255,8 +255,12 @@
  "Are_you_sure_to_delete_this_comment": "你确定要删除这个评论吗?",
  "Confirm": "确定",
  "View_changes": "查看改动",
-  "Revision": "修订",
+  "Revision": "修订稿",
  "Error": "错误",
  "Start_revise": "开始修订",
-  "Failed_to_execute_operation_on_server": "无法在服务器上执行操作"
+  "Failed_to_execute_operation_on_server": "无法在服务器上执行操作",
+  "Start_revise_tip": "创建一个临时文档并对其进行修订，检查更改后将其合并回来",
+  "Load_doc_content_error": "加载文档内容错误",
+  "Draft": "草稿",
+  "Unmark_as_draft": "取消草稿标记"
 }
--- a/seahub/seadoc/urls.py
+++ b/seahub/seadoc/urls.py
@ -15,7 +15,7 @@ urlpatterns = [
    re_path(r'^copy-history-file/(?P<repo_id>[-0-9a-f]{36})/$', SeadocCopyHistoryFile.as_view(), name='seadoc_copy_history_file'),
    re_path(r'^history/(?P<file_uuid>[-0-9a-f]{36})/$', SeadocHistory.as_view(), name='seadoc_history'),
    re_path(r'^drafts/$', SeadocDrafts.as_view(), name='seadoc_drafts'),
-    re_path(r'^mask-as-draft/(?P<repo_id>[-0-9a-f]{36})/$', SeadocMaskAsDraft.as_view(), name='seadoc_mask_as_draft'),
+    re_path(r'^mark-as-draft/(?P<repo_id>[-0-9a-f]{36})/$', SeadocMaskAsDraft.as_view(), name='seadoc_mark_as_draft'),
    re_path(r'^comments/(?P<file_uuid>[-0-9a-f]{36})/$', SeadocCommentsView.as_view(), name='seadoc_comments'),
    re_path(r'^comment/(?P<file_uuid>[-0-9a-f]{36})/(?P<comment_id>\d+)/$', SeadocCommentView.as_view(), name='seadoc_comment'),
    re_path(r'^revisions/$', SeadocRevisions.as_view(), name='seadoc_revisions'),
--- a/seahub/templates/sdoc_file_view_react.html
+++ b/seahub/templates/sdoc_file_view_react.html
@ -26,6 +26,7 @@ publisherNickname: '{{ publisher_nickname }}',
 isPublished: {% if is_published %}true{% else %}false{% endif %},
 revisionCreatedAt: '{{ revision_created_at }}',
 revisionUpdatedAt: '{{ revision_updated_at }}',
+isSdocDraft: {% if is_sdoc_draft %}true{% else %}false{% endif %}
 {% endblock %}

 {% block render_bundle %}
--- a/seahub/views/file.py
+++ b/seahub/views/file.py
@ -76,6 +76,7 @@ from seahub.thumbnail.utils import extract_xmind_image, get_thumbnail_src, \
 from seahub.drafts.utils import get_file_draft, \
        is_draft_file, has_draft_file
 from seahub.seadoc.utils import get_seadoc_file_uuid, gen_seadoc_access_token, is_seadoc_revision
+from seahub.seadoc.models import SeadocDraft

 if HAS_OFFICE_CONVERTER:
    from seahub.utils import (
@ -661,11 +662,18 @@ def view_lib_file(request, repo_id, path):
            can_edit_file = False
        elif is_locked and not locked_by_me:
            can_edit_file = False
+        return_dict['can_edit_file'] = can_edit_file

        seadoc_perm = 'rw' if can_edit_file else 'r'
-        return_dict['can_edit_file'] = can_edit_file
        return_dict['seadoc_access_token'] = gen_seadoc_access_token(file_uuid, filename, username, permission=seadoc_perm)

+        # draft
+        is_sdoc_draft = False
+        sdoc_draft = SeadocDraft.objects.get_by_doc_uuid(file_uuid)
+        if sdoc_draft:
+            is_sdoc_draft = True
+        return_dict['is_sdoc_draft'] = is_sdoc_draft
+
        # revision
        revision_info = is_seadoc_revision(file_uuid)
        return_dict.update(revision_info)