Support rendering mistakes for multiple active editors

online-editor.js

@@ -104,7 +104,7 @@ class BesEditor {
 
                   matches.push({
                     range: range,
-                    rects: this.addMistakeMarkup(range, match),
+                    rects: this.addMistakeMarkup(range, this.correctionPanel),
                     match: match
                   })
                 })
@@ -141,22 +141,8 @@ class BesEditor {
     const panelParent = document.createElement('div')
     panelParent.classList.add('bes-correction-panel-parent')
     const panel = document.createElement('div')
-    const styles = window.getComputedStyle(edit)
+    this.setCorrectionPanelSize(edit, panel)
     panel.classList.add('bes-correction-panel')
-    const totalWidth =
-      parseFloat(styles.width) +
-      parseFloat(styles.marginLeft) +
-      parseFloat(styles.marginRight) +
-      parseFloat(styles.paddingLeft) +
-      parseFloat(styles.paddingRight)
-    const totalHeight =
-      parseFloat(styles.height) +
-      parseFloat(styles.marginTop) +
-      parseFloat(styles.marginBottom) +
-      parseFloat(styles.paddingTop) +
-      parseFloat(styles.paddingBottom)
-    panel.style.width = totalWidth + 'px'
-    panel.style.height = totalHeight + 'px'
 
     panelParent.appendChild(panel)
     edit.parentElement.insertBefore(panelParent, edit)
@@ -214,6 +200,7 @@ class BesEditor {
     let filteredChildren = this.children.filter(child => child.elements === el)
     if (!filteredChildren.length) return
 
+    // TODO: Remove elements that are found in editor object, that way we can avoid looping through all elements.
     filteredChildren[0].matches.forEach(match => {
       for (const rect of match.rects) {
         for (let child of this.correctionPanel.children) {
@@ -232,14 +219,18 @@ class BesEditor {
   }
 
   // Adds grammar mistake markup
-  addMistakeMarkup(range, match) {
+  addMistakeMarkup(range, correctionPanel) {
+    // TODO: Consider using range.getClientRects() instead of range.getBoundingClientRect()
     const clientRects = range.getClientRects()
+    const correctionPanelRect = correctionPanel.getBoundingClientRect()
     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')
-      highlight.style.left = `${rect.left}px`
+      const topPosition = rect.top - correctionPanelRect.top
-      highlight.style.top = `${rect.top}px`
+      const leftPosition = rect.left - correctionPanelRect.left
+      highlight.style.left = `${leftPosition}px`
+      highlight.style.top = `${topPosition}px`
       highlight.style.width = `${rect.width}px`
       highlight.style.height = `${rect.height}px`
       this.correctionPanel.appendChild(highlight)
@@ -314,6 +305,24 @@ class BesEditor {
     return false
   }
 
+  setCorrectionPanelSize(editor, correctionPanel) {
+    const styles = window.getComputedStyle(editor)
+    const totalWidth =
+      parseFloat(styles.width) +
+      parseFloat(styles.marginLeft) +
+      parseFloat(styles.marginRight) +
+      parseFloat(styles.paddingLeft) +
+      parseFloat(styles.paddingRight)
+    const totalHeight =
+      parseFloat(styles.height) +
+      parseFloat(styles.marginTop) +
+      parseFloat(styles.marginBottom) +
+      parseFloat(styles.paddingTop) +
+      parseFloat(styles.paddingBottom)
+    correctionPanel.style.width = totalWidth + 'px'
+    correctionPanel.style.height = totalHeight + 'px'
+  }
+
   static isPointInRect(x, y, rect) {
     return (
       x >= rect.x &&
@@ -333,10 +342,14 @@ window.onload = () => {
 
 window.onresize = () => {
   besEditors.forEach(editor => {
+    editor.setCorrectionPanelSize(editor.el, editor.correctionPanel)
     editor.children.forEach(child => {
       editor.clearMistakeMarkup(child.elements)
       child.matches.forEach(match => {
-        match.rects = editor.addMistakeMarkup(match.range, match)
+        match.rects = editor.addMistakeMarkup(
+          match.range,
+          editor.correctionPanel
+        )
       })
     })
   })