feat: Enhance popupCorrectionPanel to highlight selected elements #2

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')
+    })
   }
 }
 

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;