diff --git a/frontend/src/pages/sdoc-editor/external-operations.js b/frontend/src/pages/sdoc-editor/external-operations.js
index 4a7d6770f1..0a745a9b39 100644
--- a/frontend/src/pages/sdoc-editor/external-operations.js
+++ b/frontend/src/pages/sdoc-editor/external-operations.js
@@ -1,11 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { EventBus, EXTERNAL_EVENT } from '@seafile/sdoc-editor';
+import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+import toaster from '../../components/toast';
 import InternalLinkDialog from '../../components/dialog/internal-link-dialog';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
   docPath: PropTypes.string.isRequired,
+  isStarred: PropTypes.bool.isRequired,
+  toggleStar: PropTypes.func.isRequired
 };
 
 class ExternalOperations extends React.Component {
@@ -20,16 +25,37 @@ class ExternalOperations extends React.Component {
   componentDidMount() {
     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);
   }
 
   componentWillUnmount() {
     this.unsubscribeInternalLinkEvent();
+    this.unsubscribeStar();
   }
 
   onInternalLinkToggle = () => {
     this.setState({isShowInternalLinkDialog: !this.state.isShowInternalLinkDialog});
   }
 
+  toggleStar = () => {
+    const { isStarred, repoID, docPath  } = this.props;
+    if (isStarred) {
+      seafileAPI.unstarItem(repoID, docPath).then((res) => {
+        this.props.toggleStar(false);
+      }).catch((error) => {
+        const errorMsg = Utils.getErrorMsg(error);
+        toaster.danger(errorMsg);
+      });
+    } else {
+      seafileAPI.starItem(repoID, docPath).then((res) => {
+        this.props.toggleStar(true);
+      }).catch((error) => {
+        const errorMsg = Utils.getErrorMsg(error);
+        toaster.danger(errorMsg);
+      });
+    }
+  }
+
   render() {
     const { repoID, docPath } = this.props;
     const { isShowInternalLinkDialog } = this.state;
diff --git a/frontend/src/pages/sdoc-editor/index.js b/frontend/src/pages/sdoc-editor/index.js
index d2ef2e2157..0ba1b32d17 100644
--- a/frontend/src/pages/sdoc-editor/index.js
+++ b/frontend/src/pages/sdoc-editor/index.js
@@ -3,12 +3,31 @@ import { SimpleEditor } from '@seafile/sdoc-editor';
 import ExternalOperations from './external-operations';
 
 export default class SdocEditor extends React.Component {
+
+  constructor(props) {
+    super(props);
+    const { isStarred } = window.app.pageOptions;
+    this.state = {
+      isStarred: isStarred
+    };
+  }
+
+  toggleStar = (isStarred) => {
+    this.setState({isStarred: isStarred});
+  }
+
   render() {
     const { repoID, docPath } = window.seafile;
+    const { isStarred } = this.state;
     return (
       <Fragment>
-        <SimpleEditor />
-        <ExternalOperations repoID={repoID} docPath={docPath} />
+        <SimpleEditor isStarred={isStarred} />
+        <ExternalOperations
+          repoID={repoID}
+          docPath={docPath}
+          isStarred={isStarred}
+          toggleStar={this.toggleStar}
+        />
       </Fragment>
     );
   }
diff --git a/frontend/src/view-file-sdoc.js b/frontend/src/view-file-sdoc.js
index 1ee73e08eb..48bf8bd91a 100644
--- a/frontend/src/view-file-sdoc.js
+++ b/frontend/src/view-file-sdoc.js
@@ -31,6 +31,7 @@ window.seafile = {
   parentFolderURL: `${siteRoot}library/${repoID}/${Utils.encodePath(repoName + parentDir)}`,
   assetsUrl,
   isShowInternalLink: true,
+  isStarIconShown: true // for star/unstar
 };
 
 ReactDom.render(