Add highlight rendering for "selected" grammar mistakes

service.js

@@ -41,6 +41,7 @@ class BesService {
     this.enabledCategories = []
     this.disabledCategories = []
     this.results = [] // Results of grammar-checking, one per each block/paragraph of text
+    this.highlightedRects = []
     this.createCorrectionPanel()
 
     // Disable browser built-in spell-checker to prevent collision with our grammar markup.
@@ -331,10 +332,10 @@ class BesService {
     const scrollPanelRect = this.scrollPanel.getBoundingClientRect()
     let highlights = []
     const dpr = window.devicePixelRatio
-    this.ctx.lineWidth = 1 * dpr
+    this.ctx.lineWidth = 2 * dpr // Use 2 for clearer visibility
     this.ctx.strokeStyle = ruleId.startsWith('MORFOLOGIK_RULE')
-      ? '#e91313'
-      : '#269b26'
+      ? '#ff7300'
+      : '#007bff'
     for (let rect of range.getClientRects()) {
       const x = (rect.left - scrollPanelRect.left) * dpr
       const y = (rect.top - scrollPanelRect.top) * dpr
@@ -467,7 +468,26 @@ class BesService {
    * @param {*} match Grammar checking rule match
    */
   highlightMistake(match) {
-    console.log(match)
+    // TODO: Če sta 2 napaki v istem rectu, se prikaže samo zgornja/zadnja (oz. tista, ki jo uporabnik klikne). To pa pomeni, da se lahko podčrtana barva razlikuje od "highlight" barve.
+    const highlightColor = match.match.rule.id.startsWith('MORFOLOGIK_RULE')
+      ? '#ff7300'
+      : '#007bff'
+
+    match.highlights.forEach(highlight => {
+      const rect = highlight
+      const highlightElement = document.createElement('div')
+      highlightElement.classList.add('highlight-rect')
+      highlightElement.style.position = 'absolute'
+      highlightElement.style.left = `${rect.x}px`
+      highlightElement.style.top = `${rect.y}px`
+      highlightElement.style.width = `${rect.width}px`
+      highlightElement.style.height = `${rect.height}px`
+      highlightElement.style.backgroundColor = highlightColor
+      highlightElement.style.opacity = '0.5'
+      highlightElement.style.cursor = 'text'
+      document.body.appendChild(highlightElement)
+      this.highlightedRects.push(highlightElement)
+    })
   }
 
   /**
@@ -919,6 +939,7 @@ class BesTreeService extends BesService {
       }
     }
     BesPopup.hide()
+    this.highlightedRects.forEach(h => h.remove())
   }
 }
 
@@ -1592,6 +1613,7 @@ class BesPlainTextService extends BesService {
       }
     }
     BesPopup.hide()
+    this.highlightedRects.forEach(h => h.remove())
   }
 
   /**