Enhance logic for rendering mistakes post-scroll and optimize the clearMistakesMarkup function

online-editor.js

@@ -133,9 +133,14 @@ class BesEditor {
                     }
                   }
 
+                  const { clientRects, highlight } = this.addMistakeMarkup(
+                    range,
+                    this.scrollPanel
+                  )
                   matches.push({
+                    rects: clientRects,
+                    highlight: highlight,
                     range: range,
-                    rects: this.addMistakeMarkup(range, this.scrollPanel),
                     match: match
                   })
                 })
@@ -243,21 +248,9 @@ class BesEditor {
     this.children
       .filter(child => child.elements === el)
       .forEach(child => {
-        // TODO: Remove elements that are found in editor object, that way we can avoid looping through all elements.
         child.matches.forEach(match => {
-          for (const rect of match.rects) {
+          match.highlight.remove()
-            for (let child of this.scrollPanel.children) {
+          delete match.highlight
-              let childRect = child.getBoundingClientRect()
-              const isWithinRect =
-                childRect.left >= rect.left &&
-                childRect.right <= rect.right &&
-                childRect.top >= rect.top &&
-                childRect.bottom <= rect.bottom + 20
-              if (isWithinRect) {
-                child.remove()
-              }
-            }
-          }
         })
       })
   }
@@ -272,7 +265,12 @@ class BesEditor {
     editor.children.forEach(child => {
       this.clearMistakeMarkup(child.elements)
       child.matches.forEach(match => {
-        match.rects = this.addMistakeMarkup(match.range, this.scrollPanel)
+        const { clientRects, highlight } = this.addMistakeMarkup(
+          match.range,
+          this.scrollPanel
+        )
+        match.rects = clientRects
+        match.highlight = highlight
       })
     })
   }
@@ -282,9 +280,9 @@ class BesEditor {
     // TODO: Consider using range.getClientRects() instead of range.getBoundingClientRect()
     const clientRects = range.getClientRects()
     const scrollPanelRect = scrollPanel.getBoundingClientRect()
+    const highlight = document.createElement('div')
     for (let i = 0, n = clientRects.length; i < n; ++i) {
       const rect = clientRects[i]
-      const highlight = document.createElement('div')
       highlight.classList.add('bes-typo-mistake')
       const topPosition = rect.top - scrollPanelRect.top
       const leftPosition = rect.left - scrollPanelRect.left
@@ -294,7 +292,7 @@ class BesEditor {
       highlight.style.height = `${rect.height}px`
       this.scrollPanel.appendChild(highlight)
     }
-    return clientRects
+    return { clientRects, highlight }
   }
 
   // Tests if given element is block element.
@@ -399,6 +397,9 @@ class BesEditor {
   handleScrollEvent(editor, scrollPanel) {
     scrollPanel.style.top = -editor.scrollTop + 'px'
     this.offsetTop = editor.scrollTop
+    setTimeout(() => {
+      this.repositionMistakes(this)
+    }, 300)
   }
 
   static findParent(target) {
@@ -416,7 +417,7 @@ class BesEditor {
     for (let m of matches) {
       if (m.rects) {
         for (let r of m.rects) {
-          if (BesEditor.isPointInRect(clientX, clientY, r, editor.offsetTop)) {
+          if (BesEditor.isPointInRect(clientX, clientY, r)) {
             popup.changeText(m.match.message)
             m.match.replacements.forEach(replacement => {
               popup.appendReplacements(
@@ -507,22 +508,13 @@ class BesEditor {
     scrollPanel.style.height = editor.scrollHeight + 'px'
   }
 
-  static isPointInRect(x, y, rect, offsetTop) {
+  static isPointInRect(x, y, rect) {
-    if (!offsetTop) {
+    return (
-      return (
+      x >= rect.x &&
-        x >= rect.x &&
+      x < rect.x + rect.width &&
-        x < rect.x + rect.width &&
+      y >= rect.y &&
-        y >= rect.y &&
+      y < rect.y + rect.height
-        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
-      )
-    }
   }
 }
 
@@ -543,7 +535,12 @@ window.onresize = () => {
     editor.children.forEach(child => {
       editor.clearMistakeMarkup(child.elements)
       child.matches.forEach(match => {
-        match.rects = editor.addMistakeMarkup(match.range, editor.scrollPanel)
+        const { clientRects, highlight } = editor.addMistakeMarkup(
+          match.range,
+          editor.scrollPanel
+        )
+        match.rects = clientRects
+        match.highlight = highlight
       })
     })
   })