Support rendering popup after scroll events

online-editor.js

@@ -10,6 +10,7 @@ class BesEditor {
     const { correctionPanel, scrollPanel } = this.createCorrectionPanel(edit)
     this.correctionPanel = correctionPanel
     this.scrollPanel = scrollPanel
+    this.offsetTop = null
     this.proof(edit)
     edit.addEventListener('beforeinput', e => this.handleBeforeInput(e), false)
     edit.addEventListener('click', e => this.handleClick(e))
@@ -283,21 +284,30 @@ class BesEditor {
         popup.hide()
         return
       }
-      if (BesEditor.renderPopup(matches, popup, e.clientX, e.clientY)) return
-    } else {
-      popup.hide()
-    }
+      if (
+        BesEditor.renderPopup(
+          matches,
+          popup,
+          e.clientX,
+          e.clientY,
+          this.offsetTop
+        )
+      )
+        return
+      else popup.hide()
+    } else popup.hide()
   }
 
   handleScrollEvent(editor, scrollPanel) {
     scrollPanel.style.top = -editor.scrollTop + 'px'
+    this.offsetTop = editor.scrollTop
   }
 
-  static renderPopup(matches, popup, clientX, clientY) {
+  static renderPopup(matches, popup, clientX, clientY, offsetTop) {
     for (let m of matches) {
       if (m.rects) {
         for (let r of m.rects) {
-          if (BesEditor.isPointInRect(clientX, clientY, r)) {
+          if (BesEditor.isPointInRect(clientX, clientY, r, offsetTop)) {
             popup.changeText(m.match.message)
             m.match.replacements.forEach(replacement => {
               popup.appendReplacements(
@@ -336,13 +346,22 @@ class BesEditor {
     scrollPanel.style.height = editor.scrollHeight + 'px'
   }
 
-  static isPointInRect(x, y, rect) {
-    return (
-      x >= rect.x &&
-      x < rect.x + rect.width &&
-      y >= rect.y &&
-      y < rect.y + rect.height
-    )
+  static isPointInRect(x, y, rect, offsetTop) {
+    if (!offsetTop) {
+      return (
+        x >= rect.x &&
+        x < rect.x + rect.width &&
+        y >= rect.y &&
+        y < rect.y + rect.height
+      )
+    } else {
+      return (
+        x >= rect.x &&
+        x < rect.x + rect.width &&
+        y >= rect.y - offsetTop &&
+        y < rect.y + rect.height - offsetTop
+      )
+    }
   }
 }