From c6123ec4d8f97a13c020a4d615034f72d2a2bf00 Mon Sep 17 00:00:00 2001
From: Liyuan Li <v@b3log.org>
Date: Sat, 11 Apr 2020 16:40:14 +0800
Subject: [PATCH] :sparkles: fix #304

---
 src/ts/ir/index.ts      |  3 ++-
 src/ts/sv/index.ts      |  3 ++-
 src/ts/wysiwyg/index.ts | 27 +++++++++++++++++++--------
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/ts/ir/index.ts b/src/ts/ir/index.ts
index c6705ecb1..606aee74d 100644
--- a/src/ts/ir/index.ts
+++ b/src/ts/ir/index.ts
@@ -11,6 +11,7 @@ import {expandMarker} from "./expandMarker";
 import {highlightToolbar} from "./highlightToolbar";
 import {input} from "./input";
 import {processAfterRender, processHint} from "./process";
+import {hidePanel} from "../toolbar/setToolbar";
 
 class IR {
     public element: HTMLPreElement;
@@ -39,7 +40,7 @@ class IR {
 
     private bindEvent(vditor: IVditor) {
         this.element.addEventListener("scroll", () => {
-            vditor.hint.element.style.display = "none";
+            hidePanel(vditor, ["hint", "headings", "emoji", "edit-mode"]);
         });
 
         this.element.addEventListener("copy", (event: ClipboardEvent & { target: HTMLElement }) => {
diff --git a/src/ts/sv/index.ts b/src/ts/sv/index.ts
index 410336a85..b58b9e4e9 100644
--- a/src/ts/sv/index.ts
+++ b/src/ts/sv/index.ts
@@ -6,6 +6,7 @@ import {getSelectText} from "./getSelectText";
 import {html2md} from "./html2md";
 import {inputEvent} from "./inputEvent";
 import {insertText} from "./insertText";
+import {hidePanel} from "../toolbar/setToolbar";
 
 class Editor {
     public element: HTMLPreElement;
@@ -61,7 +62,7 @@ class Editor {
         });
 
         this.element.addEventListener("scroll", () => {
-            vditor.hint.element.style.display = "none";
+            hidePanel(vditor, ["hint", "headings", "emoji", "edit-mode"]);
             if (!vditor.preview || (vditor.preview && vditor.preview.element.style.display === "none")) {
                 return;
             }
diff --git a/src/ts/wysiwyg/index.ts b/src/ts/wysiwyg/index.ts
index de9ad44be..209687e18 100644
--- a/src/ts/wysiwyg/index.ts
+++ b/src/ts/wysiwyg/index.ts
@@ -62,14 +62,25 @@ class WYSIWYG {
                 });
         }
 
-        this.element.addEventListener("scroll", () => {
-            hidePanel(vditor, ["hint", "headings", "emoji", "edit-mode"]);
-            if (this.popover.style.display !== "block") {
-                return;
-            }
-            const top = parseInt(this.popover.getAttribute("data-top"), 10) - vditor.wysiwyg.element.scrollTop;
-            this.popover.style.top = Math.max(-8, Math.min(top, this.element.clientHeight - 21)) + "px";
-        });
+        if (vditor.options.typewriterMode) {
+            window.addEventListener("scroll", () => {
+                hidePanel(vditor, ["hint", "headings", "emoji", "edit-mode"]);
+                if (this.popover.style.display !== "block") {
+                    return;
+                }
+                const top = parseInt(this.popover.getAttribute("data-top"), 10);
+                this.popover.style.top = Math.max(top, (window.scrollY - vditor.element.offsetTop - 8)) + "px";
+            });
+        } else {
+            this.element.addEventListener("scroll", () => {
+                hidePanel(vditor, ["hint", "headings", "emoji", "edit-mode"]);
+                if (this.popover.style.display !== "block") {
+                    return;
+                }
+                const top = parseInt(this.popover.getAttribute("data-top"), 10) - vditor.wysiwyg.element.scrollTop;
+                this.popover.style.top = Math.max(-8, Math.min(top, this.element.clientHeight - 21)) + "px";
+            });
+        }
 
         this.element.addEventListener("copy", (event: ClipboardEvent & { target: HTMLElement }) => {
             const range = getSelection().getRangeAt(0);