Refactor popupCorrectionPanel to handle multiple grammar matches

service.js

@@ -454,13 +454,14 @@ class BesService {
    * @param {*} match Grammar checking rule match
    * @param {PointerEvent} source Click event source
    */
-  popupCorrectionPanel(el, match, source) {
+  popupCorrectionPanel(pointsInRect, source) {
     this.dismissPopup()
     const popup = document.querySelector('bes-popup-el')
-    // TODO: popup.setContent(elements, matches, this, this.isContentEditable())
+    BesPopup.clearReplacements()
-    popup.changeMessage(match.match.message)
+    pointsInRect.forEach(({ el, match }) => {
-    popup.appendReplacements(el, match, this, this.isContentEditable())
+      popup.setContent(el, match, this, this.isContentEditable())
       this.highlightMistake(match)
+    })
     popup.show(source.clientX, source.clientY)
   }
 
@@ -910,18 +911,18 @@ class BesTreeService extends BesService {
     const source = event?.detail !== 1 ? event?.detail : event
     const el = this.getBlockParent(source.targetElement || source.target)
     if (!el) return
-
+    const pointsInRect = []
     for (let result of this.results) {
       for (let m of result.matches) {
         for (let rect of m.highlights) {
           if (BesService.isPointInRect(source.clientX, source.clientY, rect)) {
-            this.popupCorrectionPanel(el, m, source)
+            pointsInRect.push({ el, match: m })
-            return
           }
         }
       }
     }
     this.dismissPopup()
+    if (pointsInRect.length) this.popupCorrectionPanel(pointsInRect, source)
   }
 }
 
@@ -1563,18 +1564,19 @@ class BesPlainTextService extends BesService {
     const source = event?.detail !== 1 ? event?.detail : event
     const el = source.targetElement || source.target || this.hostElement
     if (!el) return
-
+    const pointsInRect = []
     for (let result of this.results) {
       for (let m of result.matches) {
         for (let rect of m.highlights) {
           if (BesService.isPointInRect(source.clientX, source.clientY, rect)) {
-            this.popupCorrectionPanel(result.range, m, source)
+            console.log(result.range)
-            return
+            pointsInRect.push({ el: result.range, match: m })
           }
         }
       }
     }
     this.dismissPopup()
+    if (pointsInRect.length) this.popupCorrectionPanel(pointsInRect, source)
   }
 
   /**
@@ -2043,6 +2045,7 @@ class BesPopup extends HTMLElement {
           background-color: #eee;
           padding: 10px;
           border-radius: 5px;
+          border: 1px solid #f1f3f9;
         }
         .bes-replacement-btn{
           margin: 4px 1px;
@@ -2083,6 +2086,7 @@ class BesPopup extends HTMLElement {
           .bes-text-div {
             font-weight: lighter;
             background-color: #333;
+            border: 1px solid #57585A;
           }
         }
       </style>
@@ -2091,12 +2095,6 @@ class BesPopup extends HTMLElement {
           <div class="bes-popup-title">Besana</div>
           <button class="bes-close-btn" onclick="BesPopup.dismiss()">X</button>
         </div>
-        <div class="bes-text-div">
-          <span class="popup-text">
-          </span>
-          <div class="bes-replacement-div">
-          </div>
-        </div>
       </div>
     `
     this.addEventListener('mousedown', this.onMouseDown)
@@ -2135,13 +2133,36 @@ class BesPopup extends HTMLElement {
     }
   }
 
+  setContent(el, match, service, allowReplacements) {
+    const popup = this.shadowRoot.querySelector('.bes-popup-container')
+    const newTextDiv = this.createPopupTextDiv()
+    popup.appendChild(newTextDiv)
+    this.changeMessage(match.match.message, newTextDiv)
+    if (match.match.replacements) {
+      this.appendReplacements(el, match, service, allowReplacements, newTextDiv)
+    }
+  }
+
+  createPopupTextDiv() {
+    const textDiv = document.createElement('div')
+    textDiv.classList.add('bes-text-div')
+    const popupText = document.createElement('span')
+    popupText.classList.add('popup-text')
+    const replacementDiv = document.createElement('div')
+    replacementDiv.classList.add('bes-replacement-div')
+    textDiv.appendChild(popupText)
+    textDiv.appendChild(replacementDiv)
+    return textDiv
+  }
+
   /**
    * Clears all grammar mistake suggestions.
    */
-  clearReplacements() {
+  static clearReplacements() {
-    Array.from(
+    const popup = document.querySelector('bes-popup-el')
-      this.shadowRoot.querySelector('.bes-replacement-div')?.children
+    popup.shadowRoot
-    ).forEach(replacement => replacement.remove())
+      .querySelectorAll('.bes-text-div')
+      .forEach(el => el.remove())
   }
 
   /**
@@ -2153,8 +2174,8 @@ class BesPopup extends HTMLElement {
    * @param {Boolean} allowReplacements Host element is mutable and grammar mistake may be replaced
    *                                    by suggestion
    */
-  appendReplacements(el, match, service, allowReplacements) {
+  appendReplacements(el, match, service, allowReplacements, element) {
-    const replacementDiv = this.shadowRoot.querySelector('.bes-replacement-div')
+    const replacementDiv = element.querySelector('.bes-replacement-div')
     match.match.replacements.forEach(replacement => {
       const replacementBtn = document.createElement('button')
       replacementBtn.classList.add('bes-replacement-btn')
@@ -2174,9 +2195,8 @@ class BesPopup extends HTMLElement {
    *
    * @param {String} text
    */
-  changeMessage(text) {
+  changeMessage(text, element) {
-    this.clearReplacements()
+    element.querySelector('.popup-text').innerText = text
-    this.shadowRoot.querySelector('.popup-text').innerText = text
   }
 
   /**