add HackmdEditor component

config/webpack.common.js

@@ -51,7 +51,7 @@ module.exports = (options) => {
       'hljs': 'hljs',
     },
     resolve: {
-      extensions: ['.js', '.json'],
+      extensions: ['.js', '.jsx', '.json'],
       modules: [helpers.root('src'), helpers.root('node_modules')],
       alias: {
         '@root': helpers.root('/'),

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">hackmd-editor</div>
+        <div id="hackmd-editor"></div>
       </div>
       {% include '../_form.html' %}
     {% endif %}

resource/js/app.js

@@ -14,6 +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 Page             from './components/Page';
 import PageListSearch   from './components/PageListSearch';
 import PageHistory      from './components/PageHistory';
@@ -228,6 +229,29 @@ if (pageEditorGrantSelectorElem) {
   );
 }
 
+/*
+ * HackMD Editor
+ */
+// render PageEditor
+const hackmdEditorElem = document.getElementById('hackmd-editor');
+if (hackmdEditorElem) {
+  // 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(
+    <HackmdEditor crowi={crowi}
+        onSaveSuccess={onSaveSuccess} />,
+    hackmdEditorElem
+  );
+}
+
 // render for admin
 const customCssEditorElem = document.getElementById('custom-css-editor');
 if (customCssEditorElem != null) {

resource/js/components/HackmdEditor.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-
-export default class HackmdEditor extends React.Component {
+export default class HackmdEditor extends React.PureComponent {
 
   constructor(props) {
     super(props);
@@ -17,13 +16,15 @@ export default class HackmdEditor extends React.Component {
   }
 
   render() {
-    const hackMdUri = this.props.crowi.config.HACKMD_URI;
+    const envVars = this.props.crowi.config.env;
+    const hackMdUri = envVars.HACKMD_URI;
     if (hackMdUri == null) {
       return <React.Fragment></React.Fragment>;
     }
 
     return (
-      <iframe src={hackMdUri}></iframe>
+      <iframe src={hackMdUri}>
+      </iframe>
     );
   }
 }

resource/styles/scss/_on-edit.scss

@@ -377,8 +377,11 @@ body.on-edit {
 
     #hackmd-editor,
     iframe {
+      width: 100vw;
       min-height: calc(100vh - #{$header-plus-footer});   // for IE11
       height: calc(100vh - #{$header-plus-footer});
+
+      border: none;
     }
   }