From ac7fe2b90ea5bd06620f9054e03650cb76376f7c Mon Sep 17 00:00:00 2001
From: Aljaz Grilc <aljaz.grilc@amebis.si>
Date: Mon, 13 Jan 2025 10:27:05 +0100
Subject: [PATCH] feat: Enhance popupCorrectionPanel to highlight selected
 elements #2

---
 service.js | 21 +++++++++++++--------
 styles.css | 10 ++++++++++
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/service.js b/service.js
index 57506f7..5886c5d 100644
--- a/service.js
+++ b/service.js
@@ -426,11 +426,11 @@ class BesService {
    * @param {*} match Grammar checking rule match
    * @param {PointerEvent} source Click event source
    */
-  popupCorrectionPanel(el, match, source) {
+  popupCorrectionPanel(el, match, source, highlightEl) {
     const popup = document.querySelector('bes-popup-el')
     popup.changeMessage(match.match.message)
     popup.appendReplacements(el, match, this, this.isContentEditable())
-    popup.show(source.clientX, source.clientY)
+    popup.show(source.clientX, source.clientY, highlightEl)
   }
 
   /**
@@ -868,7 +868,7 @@ class BesTreeService extends BesService {
               h.getBoundingClientRect()
             )
           ) {
-            this.popupCorrectionPanel(el, m, source)
+            this.popupCorrectionPanel(el, m, source, h)
             return
           }
         }
@@ -1406,7 +1406,7 @@ class BesPlainTextService extends BesService {
               h.getBoundingClientRect()
             )
           ) {
-            this.popupCorrectionPanel(result.range, m, source)
+            this.popupCorrectionPanel(result.range, m, source, h)
             return
           }
         }
@@ -1953,8 +1953,10 @@ class BesPopup extends HTMLElement {
    * @param {Number} x X location hint
    * @param {Number} y Y location hint
    */
-  show(x, y) {
+  show(x, y, highlightEl) {
     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.
@@ -2074,9 +2076,12 @@ class BesPopup extends HTMLElement {
    * Dismisses all the popups.
    */
   static hide() {
-    document
-      .querySelectorAll('bes-popup-el')
-      .forEach(popup => popup.classList.remove('show'))
+    document.querySelectorAll('bes-popup-el').forEach(popup => {
+      popup.classList.remove('show')
+    })
+    document.querySelectorAll('.bes-mistake-highlight-selected').forEach(el => {
+      el.classList.remove('bes-mistake-highlight-selected')
+    })
   }
 }
 
diff --git a/styles.css b/styles.css
index c00b9ca..0f0ead9 100644
--- a/styles.css
+++ b/styles.css
@@ -15,6 +15,16 @@
   cursor: text;
 }
 
+.bes-spelling-mistake.bes-mistake-highlight-selected {
+  background: #cc7024;
+  opacity: 0.5;
+}
+
+.bes-grammar-mistake.bes-mistake-highlight-selected {
+  background: #3691f3;
+  opacity: 0.5;
+}
+
 /* Styles required to ensure full functionality and optimal user experience. */
 .bes-correction-panel-parent {
   position: relative;