From b8171840247fcb5259a3256434e1959e21bc00ed Mon Sep 17 00:00:00 2001
From: Liyuan Li <v@b3log.org>
Date: Thu, 14 May 2020 19:36:57 +0800
Subject: [PATCH] :bug: fix # 412

---
 CHANGELOG.md                      |  1 +
 src/ts/markdown/outlineRender.ts  | 19 +++++++++----------
 src/ts/toolbar/Preview.ts         |  7 ++++++-
 src/ts/util/fixBrowserBehavior.ts | 10 ++++++++--
 4 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3bcc9a03b..ff853b785 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -66,6 +66,7 @@
 
 ### v3.2.6 / 2020-05-xx
 
+* [412](https://github.com/Vanessa219/vditor/issues/412) 预览界面大纲无法定位 `修复缺陷`
 * [411](https://github.com/Vanessa219/vditor/issues/411) 复制到微信公众号后代码块背景丢失 `修复缺陷`
 * [410](https://github.com/Vanessa219/vditor/issues/410) not delete inline code(firfox) `修复缺陷`
 * [405](https://github.com/Vanessa219/vditor/issues/405) translated mindmap into Korean `文档相关`
diff --git a/src/ts/markdown/outlineRender.ts b/src/ts/markdown/outlineRender.ts
index d49da3b35..59e3cfe02 100644
--- a/src/ts/markdown/outlineRender.ts
+++ b/src/ts/markdown/outlineRender.ts
@@ -16,14 +16,9 @@ export const outlineRender = (contentElement: HTMLElement, targetElement: Elemen
         }
     });
     targetElement.innerHTML = tocHTML;
-    if (targetElement.getAttribute("data-render") === "true") {
-        return;
-    }
-    targetElement.setAttribute("data-render", "true");
-    targetElement.addEventListener("click", (event: Event & { target: HTMLElement }) => {
-        const itemElement = event.target;
-        if (itemElement.classList.contains("vditor-outline__item")) {
-            const id = itemElement.getAttribute("data-id");
+    targetElement.querySelectorAll(".vditor-outline__item").forEach((item) => {
+        item.addEventListener("click", (event: Event & { target: HTMLElement }) => {
+            const id = item.getAttribute("data-id");
             if (vditor) {
                 if (vditor.options.height === "auto") {
                     let windowScrollY = document.getElementById(id).offsetTop + vditor.element.offsetTop;
@@ -35,11 +30,15 @@ export const outlineRender = (contentElement: HTMLElement, targetElement: Elemen
                     if (vditor.element.offsetTop < window.scrollY) {
                         window.scrollTo(window.scrollX, vditor.element.offsetTop);
                     }
-                    vditor[vditor.currentMode].element.scrollTop = document.getElementById(id).offsetTop;
+                    if (vditor.element.querySelector('.vditor-preview').contains(contentElement)) {
+                        contentElement.parentElement.scrollTop = document.getElementById(id).offsetTop;
+                    } else {
+                        contentElement.scrollTop = document.getElementById(id).offsetTop;
+                    }
                 }
             } else {
                 window.scrollTo(window.scrollX, document.getElementById(id).offsetTop);
             }
-        }
+        });
     });
 };
diff --git a/src/ts/toolbar/Preview.ts b/src/ts/toolbar/Preview.ts
index 5184c7390..6fd6dcf8d 100644
--- a/src/ts/toolbar/Preview.ts
+++ b/src/ts/toolbar/Preview.ts
@@ -2,6 +2,7 @@ import {Constants} from "../constants";
 import {getEventName} from "../util/compatibility";
 import {MenuItem} from "./MenuItem";
 import {disableToolbar, enableToolbar, hidePanel} from "./setToolbar";
+import {renderOutline} from "../util/fixBrowserBehavior";
 
 export class Preview extends MenuItem {
     constructor(vditor: IVditor, menuItem: IMenuItem) {
@@ -17,7 +18,7 @@ export class Preview extends MenuItem {
                 return;
             }
 
-            const toolbars = Constants.EDIT_TOOLBARS.concat(["both", "format", "edit-mode", "outline", "devtools"]);
+            const toolbars = Constants.EDIT_TOOLBARS.concat(["both", "format", "edit-mode", "devtools"]);
             if (btnElement.classList.contains("vditor-menu--current")) {
                 btnElement.classList.remove("vditor-menu--current");
                 if (vditor.currentMode === "sv") {
@@ -32,6 +33,7 @@ export class Preview extends MenuItem {
                     vditor.preview.element.style.display = "none";
                 }
                 enableToolbar(vditor.toolbar.elements, toolbars);
+                renderOutline(vditor);
             } else {
                 disableToolbar(vditor.toolbar.elements, toolbars);
                 vditor.preview.element.style.display = "block";
@@ -43,6 +45,9 @@ export class Preview extends MenuItem {
                 vditor.preview.render(vditor);
                 btnElement.classList.add("vditor-menu--current");
                 hidePanel(vditor, ["subToolbar", "hint", "popover"]);
+                setTimeout(() => {
+                    renderOutline(vditor);
+                }, vditor.options.preview.delay);
             }
         });
     }
diff --git a/src/ts/util/fixBrowserBehavior.ts b/src/ts/util/fixBrowserBehavior.ts
index f7b2fb4c2..554001ea0 100644
--- a/src/ts/util/fixBrowserBehavior.ts
+++ b/src/ts/util/fixBrowserBehavior.ts
@@ -387,8 +387,14 @@ export const isToC = (text: string) => {
 export const renderOutline = (vditor: IVditor) => {
     const outlineElement = vditor.element.querySelector(".vditor-outline") as HTMLElement;
     if (outlineElement && outlineElement.style.display === "block") {
-        outlineRender(vditor[vditor.currentMode].element,
-            outlineElement.querySelector(".vditor-outline__content"), vditor);
+        const previewElement: HTMLElement = vditor.element.querySelector('.vditor-preview')
+        if (previewElement && previewElement.style.display === "block") {
+            outlineRender(previewElement.lastElementChild as HTMLElement,
+                outlineElement.querySelector(".vditor-outline__content"), vditor);
+        } else {
+            outlineRender(vditor[vditor.currentMode].element,
+                outlineElement.querySelector(".vditor-outline__content"), vditor);
+        }
     }
 };