add PageEditorWithHackmd component

lib/views/widget/page_content.html

@@ -33,7 +33,7 @@
         <div id="page-editor">{% if pageForm.body %}{{ pageForm.body }}{% endif %}</div>
       </div>
       <div class="tab-pane edit-form" id="hackmd">
-        <div id="hackmd-editor"></div>
+        <div id="page-editor-with-hackmd"></div>
       </div>
       {% include '../_form.html' %}
     {% endif %}

resource/js/agent-for-hackmd.js

@@ -11,7 +11,7 @@
  */
 
 /* eslint-disable no-console  */
-console.log('Loading GROWI agent for HackMD...');
+console.log('[HackMD] Loading GROWI agent for HackMD...');
 
 const allowedOrigin = '{{origin}}';         // will be replaced by swig
 const styleFilePath = '{{styleFilePath}}';  // will be replaced by swig
@@ -22,26 +22,40 @@ const styleFilePath = '{{styleFilePath}}';  // will be replaced by swig
  */
 function validateOrigin(event) {
   if (event.origin !== allowedOrigin) {
-    console.error('Rejected', 'Cause: "event.origin" and "allowedOrigin" does not match');
+    console.error('[HackMD] Message is rejected.', 'Cause: "event.origin" and "allowedOrigin" does not match');
     return;
   }
 }
 
+/**
+ * Insert link tag to load style file
+ */
 function insertStyle() {
   const element = document.createElement('link');
   element.href = styleFilePath;
   element.rel = 'stylesheet';
   document.getElementsByTagName('head')[0].appendChild(element);
 }
+
+
 insertStyle();
 
 window.addEventListener('message', (event) => {
   validateOrigin(event);
-  console.log('getValue called');
+
+  const data = JSON.parse(event.data);
+  switch (data.operation) {
+    case 'getValue':
+      console.log('getValue called');
+      break;
+    case 'setValue':
+      console.log('setValue called');
+      break;
+  }
 });
 
 window.addEventListener('load', (event) => {
   console.log('loaded');
 });
 
-console.log('GROWI agent for HackMD has successfully loaded.');
+console.log('[HackMD] GROWI agent for HackMD has successfully loaded.');

resource/js/app.js

@@ -14,7 +14,7 @@ import PageEditor       from './components/PageEditor';
 import OptionsSelector  from './components/PageEditor/OptionsSelector';
 import { EditorOptions, PreviewOptions } from './components/PageEditor/OptionsSelector';
 import GrantSelector    from './components/PageEditor/GrantSelector';
-import HackmdEditor     from './components/HackmdEditor';
+import PageEditorWithHackmd from './components/PageEditorWithHackmd';
 import Page             from './components/Page';
 import PageListSearch   from './components/PageListSearch';
 import PageHistory      from './components/PageHistory';
@@ -232,9 +232,9 @@ if (pageEditorGrantSelectorElem) {
 /*
  * HackMD Editor
  */
-// render PageEditor
-const hackmdEditorElem = document.getElementById('hackmd-editor');
-if (hackmdEditorElem) {
+// 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
@@ -246,9 +246,11 @@ if (hackmdEditorElem) {
   };
 
   pageEditor = ReactDOM.render(
-    <HackmdEditor crowi={crowi}
+    <PageEditorWithHackmd crowi={crowi}
+        pageId={pageId} revisionId={pageRevisionId}
+        markdown={markdown}
         onSaveSuccess={onSaveSuccess} />,
-    hackmdEditorElem
+    pageEditorWithHackmdElem
   );
 }
 

resource/js/components/PageEditorWithHackmd.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import HackmdEditor from './PageEditorWithHackmd/HackmdEditor';
+
+export default class PageEditorWithHackmd extends React.PureComponent {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+    };
+  }
+
+  componentWillMount() {
+  }
+
+  syncToLatestRevision() {
+
+  }
+
+  render() {
+    const envVars = this.props.crowi.config.env;
+    const hackMdUri = envVars.HACKMD_URI;
+
+    if (hackMdUri == null || this.props.pageIdOnHackMD == null) {
+      return <React.Fragment></React.Fragment>;
+    }
+
+    return <HackmdEditor
+        markdown={this.props.markdown}
+        hackMdUri={hackMdUri}
+        pageIdOnHackMD={this.props.pageIdOnHackMD}
+      >
+      </HackmdEditor>;
+  }
+}
+
+PageEditorWithHackmd.propTypes = {
+  crowi: PropTypes.object.isRequired,
+  markdown: PropTypes.string.isRequired,
+  pageId: PropTypes.string,
+  revisionId: PropTypes.string,
+  pageIdOnHackMD: PropTypes.string,
+};
+PageEditorWithHackmd.defaultProps = {
+  pageIdOnHackMD: 'bj2uX22SQQWGdrYqgGg6EQ'  // Dummy data
+};

resource/js/components/HackmdEditor.jsx → resource/js/components/PageEditorWithHackmd/HackmdEditor.jsx

@@ -15,22 +15,20 @@ export default class HackmdEditor extends React.PureComponent {
   componentWillMount() {
   }
 
-  loadHandler() {
+  syncToLatestRevision() {
 
   }
 
-  render() {
-    const envVars = this.props.crowi.config.env;
-    const hackMdUri = envVars.HACKMD_URI;
+  loadHandler() {
 
-    if (hackMdUri == null) {
-      return <React.Fragment></React.Fragment>;
-    }
+  }
 
+  render() {
+    const src = `${this.props.hackMdUri}/${this.props.pageIdOnHackMD}`;
     return (
       <iframe id='iframe-hackmd'
         ref='iframe'
-        src={hackMdUri}
+        src={src}
         onLoad={this.loadHandler}
       >
       </iframe>
@@ -39,6 +37,7 @@ export default class HackmdEditor extends React.PureComponent {
 }
 
 HackmdEditor.propTypes = {
-  crowi: PropTypes.object.isRequired,
-  pageIdOnHackMD: PropTypes.string,
+  markdown: PropTypes.string.isRequired,
+  hackMdUri: PropTypes.string.isRequired,
+  pageIdOnHackMD: PropTypes.string.isRequired,
 };