move element embedding from Page Component to markdown-it

src/client/js/components/Page.js

@@ -17,7 +17,6 @@ export default class Page extends React.Component {
       currentTargetTableArea: null
     };
 
-    this.appendEditSectionButtons = this.appendEditSectionButtons.bind(this);
     this.renderHtml = this.renderHtml.bind(this);
     this.getHighlightedBody = this.getHighlightedBody.bind(this);
     this.saveHandlerForHandsontableModal = this.saveHandlerForHandsontableModal.bind(this);
@@ -27,27 +26,10 @@ export default class Page extends React.Component {
     this.renderHtml(this.props.markdown, this.props.highlightKeywords);
   }
 
-  componentDidUpdate() {
-    this.appendEditSectionButtons();
-  }
-
   setMarkdown(markdown) {
     this.renderHtml(markdown, this.props.highlightKeywords);
   }
 
-  /**
-   * Add edit section buttons to headers
-   * This invoke `appendEditSectionButtons` method of `legacy/crowi.js`
-   *
-   * TODO: transplant `appendEditSectionButtons` to this class in the future
-   */
-  appendEditSectionButtons(parentElement) {
-    if (this.props.showHeadEditButton) {
-      const crowiForJquery = this.props.crowi.getCrowiForJquery();
-      crowiForJquery.appendEditSectionButtons(this.revisionBodyElement);
-    }
-  }
-
   /**
    * transplanted from legacy code -- Yuki Takei
    * @param {string} body html strings

src/client/js/legacy/crowi.js

@@ -36,25 +36,6 @@ Crowi.renderTocContent = (tocHtml) => {
   $('#revision-toc-content').html(tocHtml);
 };
 
-/**
- * append buttons to section headers
- */
-Crowi.appendEditSectionButtons = function(parentElement) {
-  $('h1,h2,h3,h4,h5,h6', parentElement).each(function(idx, elm) {
-    const line = +elm.getAttribute('data-line');
-
-    // add button
-    $(this).append(`
-      <span class="revision-head-edit-button">
-        <a href="#edit" onClick="Crowi.setCaretLineData(${line})">
-          <i class="icon-note"></i>
-        </a>
-      </span>
-      `
-    );
-  });
-};
-
 /**
  * set 'data-caret-line' attribute that will be processed when 'shown.bs.tab' event fired
  * @param {number} line

src/client/js/util/markdown-it/header.js

@@ -22,6 +22,14 @@ export default class HeaderConfigurer {
         return self.renderToken(tokens, idx, options, env, self);
       }
     };
+
+    rules.heading_close = (tokens, idx) => {
+      return `<span class="revision-head-edit-button">
+                <a href="#edit" onClick="Crowi.setCaretLineData(parseInt(this.parentNode.parentNode.dataset.line, 10))">
+                  <i class="icon-note"></i>
+                </a>
+              </span></${tokens[idx].tag}>`;
+    };
   }
 
   /**