update revisionId of PageEditorByHackmd when page is saved

resource/js/app.js

@@ -149,6 +149,35 @@ Object.keys(componentMappings).forEach((key) => {
   }
 });
 
+/*
+ * HackMD Editor
+ */
+// render PageEditorWithHackmd
+let pageEditorByHackmd = null;
+const pageEditorWithHackmdElem = document.getElementById('page-editor-with-hackmd');
+if (pageEditorWithHackmdElem) {
+  // create onSave event handler
+  const onSaveSuccess = function(page) {
+    // modify the revision id value to pass checking id when updating
+    crowi.getCrowiForJquery().updatePageForm(page);
+    // re-render Page component if exists
+    if (componentInstances.page != null) {
+      componentInstances.page.setMarkdown(page.revision.body);
+    }
+  };
+
+  pageEditorByHackmd = ReactDOM.render(
+    <PageEditorByHackmd crowi={crowi}
+        pageId={pageId} revisionId={pageRevisionId}
+        pageIdOnHackmd={pageIdOnHackmd} revisionIdHackmdSynced={pageRevisionIdHackmdSynced} hasDraftOnHackmd={hasDraftOnHackmd}
+        markdown={markdown}
+        onSaveSuccess={onSaveSuccess} />,
+    pageEditorWithHackmdElem
+  );
+  componentInstances.pageEditorByHackmd = pageEditorByHackmd;
+}
+
+
 /*
  * PageEditor
  */
@@ -162,9 +191,14 @@ if (pageEditorElem) {
   const onSaveSuccess = function(page) {
     // modify the revision id value to pass checking id when updating
     crowi.getCrowiForJquery().updatePageForm(page);
-    // re-render Page component if exists
+
     if (componentInstances.page != null) {
+      // re-render Page component
       componentInstances.page.setMarkdown(page.revision.body);
+      // set revision id to PageEditorByHackmd
+      if (componentInstances.pageEditorByHackmd != null) {
+        componentInstances.pageEditorByHackmd.setRevisionId(page.revision._id);
+      }
     }
   };
 
@@ -264,32 +298,6 @@ if (pageEditorGrantSelectorElem) {
   );
 }
 
-/*
- * HackMD Editor
- */
-// render PageEditorWithHackmd
-const pageEditorWithHackmdElem = document.getElementById('page-editor-with-hackmd');
-if (pageEditorWithHackmdElem) {
-  // create onSave event handler
-  const onSaveSuccess = function(page) {
-    // modify the revision id value to pass checking id when updating
-    crowi.getCrowiForJquery().updatePageForm(page);
-    // re-render Page component if exists
-    if (componentInstances.page != null) {
-      componentInstances.page.setMarkdown(page.revision.body);
-    }
-  };
-
-  pageEditor = ReactDOM.render(
-    <PageEditorByHackmd crowi={crowi}
-        pageId={pageId} revisionId={pageRevisionId}
-        pageIdOnHackmd={pageIdOnHackmd} revisionIdHackmdSynced={pageRevisionIdHackmdSynced} hasDraftOnHackmd={hasDraftOnHackmd}
-        markdown={markdown}
-        onSaveSuccess={onSaveSuccess} />,
-    pageEditorWithHackmdElem
-  );
-}
-
 // render for admin
 const customCssEditorElem = document.getElementById('custom-css-editor');
 if (customCssEditorElem != null) {

resource/js/components/PageEditorByHackmd.jsx

@@ -13,6 +13,7 @@ export default class PageEditorByHackmd extends React.PureComponent {
     this.state = {
       isInitialized: false,
       isInitializing: false,
+      revisionId: this.props.revisionId,
       pageIdOnHackmd: this.props.pageIdOnHackmd,
     };
 
@@ -27,6 +28,14 @@ export default class PageEditorByHackmd extends React.PureComponent {
   componentWillMount() {
   }
 
+  /**
+   * update revisionId of state
+   * @param {string} revisionId
+   */
+  setRevisionId(revisionId) {
+    this.setState({revisionId});
+  }
+
   getHackmdUri() {
     const envVars = this.props.crowi.config.env;
     return envVars.HACKMD_URI;
@@ -119,7 +128,7 @@ export default class PageEditorByHackmd extends React.PureComponent {
     const hackmdUri = this.getHackmdUri();
 
     const isPageExistsOnHackmd = (this.state.pageIdOnHackmd != null);
-    const isRevisionMatch = (this.props.revisionId === this.props.revisionIdHackmdSynced);
+    const isRevisionMatch = (this.state.revisionId === this.props.revisionIdHackmdSynced);
     const isResume = isPageExistsOnHackmd && isRevisionMatch && this.props.hasDraftOnHackmd;
 
     if (this.state.isInitialized) {