WIP: add buttons to edit and scroll to section

resource/css/_wiki.scss

@@ -40,15 +40,19 @@ div.body {
 
 .revision-head {
 
-  .revision-head-link {
-    display: none;
+  .revision-head-link,
+  .revision-head-edit-button {
+    visibility: hidden;
     font-size: 0.6em;
     padding-top: 4px;
     padding-left: 10px;
   }
-  &:hover .revision-head-link {
-    display: inline-block;
+  &:hover .revision-head-link,
+  &:hover .revision-head-edit-button {
+    visibility: unset;
   }
+
+
 }
 
 .wiki {

resource/js/legacy/crowi-form.js

@@ -56,6 +56,24 @@
     $('.content-main').removeClass('on-edit');
   });
 
+  // detect mutations for #edit-form
+  var mo = new MutationObserver(function(mutationRecords){
+    console.log(mutationRecords);
+
+    const formBody = $('#form-body');
+    const scrollToLine = formBody.data('scroll-to-line');
+
+    if (scrollToLine !== undefined) {
+      console.log(`scroll to ${scrollToLine}`)
+      const lineHeight = parseInt(formBody.css('line-height'));
+      const scrollTopAmount = scrollToLine * lineHeight;
+      formBody.scrollTop(scrollTopAmount);
+    }
+    // reset 'scroll-to-line'
+    formBody.removeData('scroll-to-line');
+  });
+  mo.observe(document.querySelector('#edit-form'), {attributes: true});
+
 /**
  * DOM ready
  */

resource/js/legacy/crowi.js

@@ -30,6 +30,44 @@ Crowi.correctHeaders = function(contentId) {
   });
 };
 
+/**
+ *
+ */
+Crowi.appendEditSectionButtons = function(contentId, markdown) {
+  const $content = $(contentId || '#revision-body-content');
+  $('h1,h2,h3,h4,h5,h6', $content).each(function(idx, elm) {
+    // get header text string
+    const text = $(this).text();
+
+    // search pos for '# ...'
+    // https://regex101.com/r/y5rpO5/1
+    const regexp = new RegExp(`[^\r\n]*#+[^\r\n]*${text}[^\r\n]*`);
+    let position = markdown.search(regexp);
+    if (position < 0) { // if not found, search text only
+      position = markdown.search(text);
+    }
+
+    // get line number
+    const lineNumber = markdown.substr(0, position).split('\n').length;
+
+    // add button
+    $(this).append(`
+      <span class="revision-head-edit-button">
+        <a href="#edit-form" onClick="Crowi.setScrollToLineAttrToFormBodyElem(${lineNumber})">
+          <i class="fa fa-edit"></i>
+        </a>
+      </span>
+      `
+    );
+  });
+};
+
+Crowi.setScrollToLineAttrToFormBodyElem = function(lineNumber) {
+  console.log(lineNumber);
+  $('#form-body').data('scroll-to-line', lineNumber);
+}
+
+
 Crowi.revisionToc = function(contentId, tocId) {
   var $content = $(contentId || '#revision-body-content');
   var $tocId = $(tocId || '#revision-toc');
@@ -460,6 +498,7 @@ $(function() {
           });
 
           Crowi.correctHeaders('#revision-body-content');
+          Crowi.appendEditSectionButtons('#revision-body-content', markdown);
           Crowi.revisionToc('#revision-body-content', '#revision-toc');
 
           Promise.resolve($('#revision-body-content'));