WIP: GC-529 invoke saveOnHackmd API

* listen messages on HackmdEditor and dispatch onChange event

resource/js/components/PageEditorByHackmd/HackmdEditor.jsx

@@ -9,18 +9,45 @@ export default class HackmdEditor extends React.PureComponent {
     this.state = {
     };
 
+    this.listenMessages = this.listenMessages.bind(this);
+    this.notifyBodyChangesHandler = this.notifyBodyChangesHandler.bind(this);
+
     this.loadHandler = this.loadHandler.bind(this);
   }
 
-  componentWillMount() {
+  componentDidMount() {
+    const contentWindow = this.refs.iframe.contentWindow;
+    this.listenMessages(contentWindow);
   }
 
-  syncToLatestRevision() {
+  /**
+   *
+   * @param {object} targetWindow
+   */
+  listenMessages(targetWindow) {
+    window.addEventListener('message', (e) => {
+      if (targetWindow !== e.source) {
+        return;
+      }
+
+      const data = JSON.parse(e.data);
+      const operation = data.operation;
 
+      if (operation === 'notifyBodyChanges') {
+        this.notifyBodyChangesHandler();
+      }
+    });
   }
 
-  loadHandler() {
+  notifyBodyChangesHandler() {
+    // dispatch onChange()
+    if (this.props.onChange != null) {
+      this.props.onChange();
+    }
+  }
 
+  loadHandler() {
+    // this.refs.iframe.postMessage('initialize', )
   }
 
   render() {
@@ -40,4 +67,5 @@ HackmdEditor.propTypes = {
   markdown: PropTypes.string.isRequired,
   hackmdUri: PropTypes.string.isRequired,
   pageIdOnHackmd: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
 };