From b936e1f403e0565adc9a619d8b9426dfd6b9492c Mon Sep 17 00:00:00 2001
From: Abijeet <abijeetpatro@gmail.com>
Date: Sun, 10 Jun 2018 13:11:10 +0530
Subject: [PATCH] Added code to handle scroll for markdown.

Signed-off-by: Abijeet <abijeetpatro@gmail.com>
---
 .../assets/js/components/markdown-editor.js   | 35 +++++++++++++++++++
 .../assets/js/components/page-display.js      |  7 ++--
 .../assets/js/components/wysiwyg-editor.js    | 30 ++++++++++------
 resources/assets/js/vues/page-editor.js       |  7 ----
 4 files changed, 60 insertions(+), 19 deletions(-)

diff --git a/resources/assets/js/components/markdown-editor.js b/resources/assets/js/components/markdown-editor.js
index 06426bf34..4e0ba83ba 100644
--- a/resources/assets/js/components/markdown-editor.js
+++ b/resources/assets/js/components/markdown-editor.js
@@ -18,6 +18,13 @@ class MarkdownEditor {
 
         this.onMarkdownScroll = this.onMarkdownScroll.bind(this);
         this.init();
+
+        // Scroll to text if needed.
+        const queryParams = (new URL(window.location)).searchParams;
+        const scrollText = queryParams.get('content-text');
+        if (scrollText) {
+            this.scrollToText(scrollText);
+        }
     }
 
     init() {
@@ -387,6 +394,34 @@ class MarkdownEditor {
         });
     }
 
+    // Scroll to a specified text
+    scrollToText(searchText) {;
+        if (!searchText) {
+            return;
+        }
+        const content = this.cm.getValue();
+        const lines = content.split(/\r?\n/);
+        let lineNumber = -1;
+        for (let i = 0; i !== lines.length; ++i) {
+            const line = lines[i];
+            if (!line) {
+                continue;
+            }
+            if (line.indexOf(searchText) !== -1) {
+                lineNumber = i;
+                break;
+            }
+        }
+
+        if (lineNumber !== -1) {
+            this.cm.scrollIntoView({
+                line: lineNumber,
+                char: lines[lineNumber].length
+            }, 200);
+            this.cm.focus();
+        }
+    }
+
 }
 
 module.exports = MarkdownEditor ;
\ No newline at end of file
diff --git a/resources/assets/js/components/page-display.js b/resources/assets/js/components/page-display.js
index 82676b61b..ec5bcd67e 100644
--- a/resources/assets/js/components/page-display.js
+++ b/resources/assets/js/components/page-display.js
@@ -222,7 +222,7 @@ class PageDisplay {
     }
     setupEditOnHeader() {
         const headingEditIcon = document.querySelector('.heading-edit-icon');
-        if (headingEditIcon.length === 0) {
+        if (headingEditIcon === null) {
             // user does not have permission to edit.
             return;
         }
@@ -239,7 +239,10 @@ class PageDisplay {
             const headingId = currHeading.id;
 
             let editIcon = visibleHeadingEditIcon.cloneNode(true);
-            editIcon.href += `#${headingId}`;
+
+            // get the first 50 characters.
+            let queryContent = currHeading.textContent && currHeading.textContent.substring(0, 50);
+            editIcon.href += `?content-id=${headingId}&content-text=${encodeURIComponent(queryContent)}`;
 
             currHeading.appendChild(editIcon);
         }
diff --git a/resources/assets/js/components/wysiwyg-editor.js b/resources/assets/js/components/wysiwyg-editor.js
index 69286abff..a094359ec 100644
--- a/resources/assets/js/components/wysiwyg-editor.js
+++ b/resources/assets/js/components/wysiwyg-editor.js
@@ -483,22 +483,25 @@ class WysiwygEditor {
             },
             setup: function (editor) {
 
-                editor.on('init ExecCommand change input NodeChange ObjectResized', editorChange);
+                editor.on('ExecCommand change input NodeChange ObjectResized', editorChange);
+
+                editor.on('init', () => {
+                    editorChange();
+                    // Scroll to the content if needed.
+                    const queryParams = (new URL(window.location)).searchParams;
+                    const scrollId = queryParams.get('content-id');
+                    if (scrollId) {
+                        scrollToText(scrollId);
+                    }
+                });
 
                 function editorChange() {
                     let content = editor.getContent();
                     window.$events.emit('editor-html-change', content);
                 }
 
-                window.$events.listen('editor-html-update', html => {
-                    editor.setContent(html);
-                    editor.selection.select(editor.getBody(), true);
-                    editor.selection.collapse(false);
-                    editorChange(html);
-                });
-
-                window.$events.listen('editor-scroll-to-text', textId => {
-                    const element = editor.dom.get(textId)
+                function scrollToText(scrollId) {
+                    const element = editor.dom.get(scrollId)
                     if (!element) {
                         return;
                     }
@@ -508,6 +511,13 @@ class WysiwygEditor {
                     editor.selection.select(element, true);
                     editor.selection.collapse(false);
                     editor.focus();
+                }
+
+                window.$events.listen('editor-html-update', html => {
+                    editor.setContent(html);
+                    editor.selection.select(editor.getBody(), true);
+                    editor.selection.collapse(false);
+                    editorChange(html);
                 });
 
                 registerEditorShortcuts(editor);
diff --git a/resources/assets/js/vues/page-editor.js b/resources/assets/js/vues/page-editor.js
index 3796fbf65..020e371b0 100644
--- a/resources/assets/js/vues/page-editor.js
+++ b/resources/assets/js/vues/page-editor.js
@@ -43,13 +43,6 @@ 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 = {