Adds edit icon to each header in the page.

Towards #618

Signed-off-by: Abijeet <abijeetpatro@gmail.com>

resources/assets/js/components/page-display.js

@@ -11,6 +11,7 @@ class PageDisplay {
         this.setupPointer();
         this.setupStickySidebar();
         this.setupNavHighlighting();
+        this.setupEditOnHeader();
 
         // Check the hash on load
         if (window.location.hash) {
@@ -219,7 +220,31 @@ class PageDisplay {
             }
         }
     }
+    setupEditOnHeader() {
+        const headingEditIcon = document.querySelector('.heading-edit-icon');
+        if (headingEditIcon.length === 0) {
+            // user does not have permission to edit.
+            return;
+        }
+
+        // Create a clone of the edit icon without the hidden class
+        const visibleHeadingEditIcon = headingEditIcon.cloneNode(true);
+        visibleHeadingEditIcon.style.display = '';
+
+        const headings = document.querySelector('.page-content').querySelectorAll('h1, h2, h3, h4, h5, h6');
+
+        // add an edit icon to each header.
+        for (let i = 0; i !== headings.length; ++i) {
+            const currHeading = headings[i];
+            const headingId = currHeading.id;
+
+            let editIcon = visibleHeadingEditIcon.cloneNode(true);
+            editIcon.href += `#${headingId}`;
+
+            currHeading.appendChild(editIcon);
+        }
+    }
 
 }
 
-module.exports = PageDisplay;
+module.exports = PageDisplay;

resources/assets/js/components/wysiwyg-editor.js

@@ -497,6 +497,19 @@ class WysiwygEditor {
                     editorChange(html);
                 });
 
+                window.$events.listen('editor-scroll-to-text', textId => {
+                    const element = editor.dom.get(textId)
+                    if (!element) {
+                        return;
+                    }
+
+                    // scroll the element into the view and put the cursor at the end.
+                    element.scrollIntoView();
+                    editor.selection.select(element, true);
+                    editor.selection.collapse(false);
+                    editor.focus();
+                });
+
                 registerEditorShortcuts(editor);
 
                 let wrap;

resources/assets/js/vues/page-editor.js

@@ -43,6 +43,13 @@ function mounted() {
     window.$events.listen('editor-markdown-change', markdown => {
         this.editorMarkdown = markdown;
     });
+
+    const scrollToText = window.location.hash ? window.location.hash.substr(1) : '';
+    if (scrollToText) {
+        setTimeout(() => {
+            window.$events.emit('editor-scroll-to-text', scrollToText);
+        }, 1000)
+    }
 }
 
 let data = {

resources/assets/sass/_pages.scss

@@ -66,6 +66,17 @@
   }
   h1, h2, h3, h4, h5, h6, pre {
     clear: left;
+
+    .heading-edit-icon {
+      margin-left: 10px;
+      font-size: 0.7em;
+      display: none;
+      line-height: 1em;
+
+      .svg-icon {
+          bottom: 0px;
+      }
+    }
   }
   hr {
     clear: both;
@@ -89,6 +100,16 @@
   del {
     background: #FFECEC;
   }
+  h1:hover,
+  h2:hover,
+  h3:hover,
+  h4:hover,
+  h5:hover,
+  h6:hover {
+    .heading-edit-icon {
+      display: inline;
+    }
+  }
 }
 
 // Page content pointers

resources/views/pages/show.blade.php

@@ -132,6 +132,10 @@
         </div>
 
         @include('pages/page-display')
+
+        @if(userCan('page-update', $page))
+            <a href="{{ $page->getUrl('/edit') }}" class="text-primary text-button heading-edit-icon" style="display: none">@icon('edit')</a>
+        @endif
     </div>
 
     @if ($commentsEnabled)