WIP: render page with react component

invoke appendEditSectionButtons from Page component

resource/js/components/Page.js

@@ -10,6 +10,7 @@ export default class Page extends React.Component {
 
     this.state = {};
 
+    this.appendEditSectionButtons = this.appendEditSectionButtons.bind(this);
     this.renderHtml = this.renderHtml.bind(this);
     // this.getHighlightBody = this.getHighlightBody.bind(this);
   }
@@ -34,6 +35,21 @@ export default class Page extends React.Component {
   //   return returnBody;
   // }
 
+  componentDidUpdate() {
+    this.appendEditSectionButtons();
+  }
+
+  /**
+   * Add edit section buttons to headers
+   * This invoke `appendEditSectionButtons` method of `legacy/crowi.js`
+   */
+  appendEditSectionButtons(parentElement) {
+    if (this.props.showHeadEditButton) {
+      const crowiForJquery = this.props.crowi.getCrowiForJquery();
+      crowiForJquery.appendEditSectionButtons(this.previewElement);
+    }
+  }
+
   renderHtml(markdown) {
     var context = {
       markdown,
@@ -86,5 +102,6 @@ Page.propTypes = {
   crowiRenderer: PropTypes.object.isRequired,
   markdown: PropTypes.string.isRequired,
   pagePath: PropTypes.string.isRequired,
+  showHeadEditButton: PropTypes.bool,
   highlightKeywords: PropTypes.string,
 };

resource/js/legacy/crowi.js

@@ -27,9 +27,8 @@ Crowi.createErrorView = function(msg) {
 /**
  * append buttons to section headers
  */
-Crowi.appendEditSectionButtons = function(contentId, markdown) {
-  const $content = $(contentId || '#revision-body-content');
-  $('h1,h2,h3,h4,h5,h6', $content).each(function(idx, elm) {
+Crowi.appendEditSectionButtons = function(parentElement) {
+  $('h1,h2,h3,h4,h5,h6', parentElement).each(function(idx, elm) {
     const line = +elm.getAttribute('data-line');
 
     // add button