refactor: Ensure that entire mistake is highlighted, including parts spanning in multiple lines #2

service.js

@@ -426,14 +426,26 @@ class BesService {
    * @param {*} match Grammar checking rule match
    * @param {PointerEvent} source Click event source
    */
-  popupCorrectionPanel(el, match, source, highlightEl) {
+  popupCorrectionPanel(el, match, source) {
     const popup = document.querySelector('bes-popup-el')
+    popup.changeMessage(match.match.message)
+    popup.appendReplacements(el, match, this, this.isContentEditable())
+    this.highlightMistake(match)
+    popup.show(source.clientX, source.clientY)
+  }
+
+  /**
+   * Removes previously highlighted grammar mistake and highlights new one.
+   *
+   * @param {*} match Grammar checking rule match
+   */
+  highlightMistake(match) {
     document.querySelectorAll('.bes-mistake-highlight-selected').forEach(el => {
       el.classList.remove('bes-mistake-highlight-selected')
     })
-    popup.changeMessage(match.match.message)
-    popup.appendReplacements(el, match, this, this.isContentEditable())
-    popup.show(source.clientX, source.clientY, highlightEl)
+    match.highlights.forEach(h =>
+      h.classList.add('bes-mistake-highlight-selected')
+    )
   }
 
   /**
@@ -871,7 +883,7 @@ class BesTreeService extends BesService {
               h.getBoundingClientRect()
             )
           ) {
-            this.popupCorrectionPanel(el, m, source, h)
+            this.popupCorrectionPanel(el, m, source)
             return
           }
         }
@@ -1409,7 +1421,7 @@ class BesPlainTextService extends BesService {
               h.getBoundingClientRect()
             )
           ) {
-            this.popupCorrectionPanel(result.range, m, source, h)
+            this.popupCorrectionPanel(result.range, m, source)
             return
           }
         }
@@ -1956,10 +1968,8 @@ class BesPopup extends HTMLElement {
    * @param {Number} x X location hint
    * @param {Number} y Y location hint
    */
-  show(x, y, highlightEl) {
+  show(x, y) {
     this.style.position = 'fixed'
-    this.highlightEl = highlightEl
-    this.highlightEl.classList.add('bes-mistake-highlight-selected')
 
     // Element needs some initial placement for the browser to provide this.offsetWidth and this.
     // offsetHeight measurements.