impl save with shortcut and update Page, PageEditor, PageEditorByHackmd

resource/js/app.js

@@ -176,9 +176,14 @@ const saveWithShortcutSuccessHandler = function(page) {
   if (componentInstances.page != null) {
     componentInstances.page.setMarkdown(page.revision.body);
   }
+  // re-render PageEditor component
+  if (componentInstances.pageEditor != null) {
+    componentInstances.pageEditor.setMarkdown(page.revision.body);
+  }
   // set revision id to PageEditorByHackmd
   if (componentInstances.pageEditorByHackmd != null) {
     componentInstances.pageEditorByHackmd.setRevisionId(pageRevisionId);
+    componentInstances.pageEditorByHackmd.setMarkdown(page.revision.body);
   }
 };
 
@@ -262,7 +267,8 @@ if (pageEditorElem) {
         onSaveWithShortcut={saveWithShortcut} />,
     pageEditorElem
   );
-  // set refs for pageEditor
+  componentInstances.pageEditor = pageEditor;
+  // set refs for setCaretLine/forceToFocus when tab is changed
   crowi.setPageEditor(pageEditor);
 }
 

resource/js/components/PageEditor.js

@@ -61,6 +61,11 @@ export default class PageEditor extends React.Component {
     this.renderPreview(this.state.markdown);
   }
 
+  setMarkdown(markdown) {
+    this.setState({ markdown });
+    this.refs.editor.setValue(markdown);
+  }
+
   focusToEditor() {
     this.refs.editor.forceToFocus();
   }

resource/js/components/PageEditorByHackmd.jsx

@@ -11,6 +11,7 @@ export default class PageEditorByHackmd extends React.PureComponent {
     super(props);
 
     this.state = {
+      markdown: this.props.markdown,
       isInitialized: false,
       isInitializing: false,
       revisionId: this.props.revisionId,
@@ -28,6 +29,13 @@ export default class PageEditorByHackmd extends React.PureComponent {
   componentWillMount() {
   }
 
+  setMarkdown(markdown) {
+    this.setState({ markdown });
+    if (this.refs.hackmdEditor != null) {
+      this.refs.hackmdEditor.setValue(markdown);
+    }
+  }
+
   /**
    * update revisionId of state
    * @param {string} revisionId
@@ -134,10 +142,14 @@ export default class PageEditorByHackmd extends React.PureComponent {
     if (this.state.isInitialized) {
       return (
         <HackmdEditor
+          ref='hackmdEditor'
           hackmdUri={hackmdUri}
           pageIdOnHackmd={this.state.pageIdOnHackmd}
-          initializationMarkdown={isResume ? null : this.props.markdown}
+          initializationMarkdown={isResume ? null : this.state.markdown}
           onChange={this.hackmdEditorChangeHandler}
+          onSaveWithShortcut={(document) => {
+            this.props.onSaveWithShortcut(document);
+          }}
         >
         </HackmdEditor>
       );
@@ -194,6 +206,7 @@ export default class PageEditorByHackmd extends React.PureComponent {
 PageEditorByHackmd.propTypes = {
   crowi: PropTypes.object.isRequired,
   markdown: PropTypes.string.isRequired,
+  onSaveWithShortcut: PropTypes.func.isRequired,
   pageId: PropTypes.string,
   revisionId: PropTypes.string,
   pageIdOnHackmd: PropTypes.string,

resource/js/components/PageEditorByHackmd/HackmdEditor.jsx

@@ -13,6 +13,7 @@ export default class HackmdEditor extends React.PureComponent {
     this.notifyBodyChangesHandler = this.notifyBodyChangesHandler.bind(this);
 
     this.loadHandler = this.loadHandler.bind(this);
+    this.saveHandler = this.saveHandler.bind(this);
   }
 
   componentDidMount() {
@@ -20,6 +21,14 @@ export default class HackmdEditor extends React.PureComponent {
     this.listenMessages(contentWindow);
   }
 
+  setValue(newValue) {
+    const data = { operation: 'setValue' };
+    if (newValue != null) {
+      data.document = newValue;
+    }
+    this.postMessageToHackmd(data);
+  }
+
   /**
    *
    * @param {object} targetWindow
@@ -34,8 +43,13 @@ export default class HackmdEditor extends React.PureComponent {
       const operation = data.operation;
       const body = data.body;
 
-      if (operation === 'notifyBodyChanges') {
-        this.notifyBodyChangesHandler(body);
+      switch (operation) {
+        case 'notifyBodyChanges':
+          this.notifyBodyChangesHandler(body);
+          break;
+        case 'save':
+          this.saveHandler(body);
+          break;
       }
     });
   }
@@ -56,11 +70,13 @@ export default class HackmdEditor extends React.PureComponent {
   }
 
   loadHandler() {
-    const data = { operation: 'setValue' };
-    if (this.props.initializationMarkdown != null) {
-      data.document = this.props.initializationMarkdown;
+    this.setValue(this.props.initializationMarkdown);
+  }
+
+  saveHandler(document) {
+    if (this.props.onSaveWithShortcut != null) {
+      this.props.onSaveWithShortcut(document);
     }
-    this.postMessageToHackmd(data);
   }
 
   render() {
@@ -81,4 +97,5 @@ HackmdEditor.propTypes = {
   pageIdOnHackmd: PropTypes.string.isRequired,
   initializationMarkdown: PropTypes.string,
   onChange: PropTypes.func,
+  onSaveWithShortcut: PropTypes.func,
 };