Add distinct highlighting for various error types

service2.js

@@ -177,13 +177,13 @@ class BesService {
    * @param {Range} range Grammar mistake range
    * @returns {Object} Client rectangles and grammar mistake highlight elements
    */
-  addMistakeMarkup(range) {
+  addMistakeMarkup(range, ruleType) {
     const clientRects = range.getClientRects()
     const scrollPanelRect = this.scrollPanel.getBoundingClientRect()
     let highlights = []
     for (let rect of clientRects) {
       const highlight = document.createElement('div')
-      highlight.classList.add('bes-typo-mistake')
+      highlight.classList.add(ruleType)
       highlight.style.left = `${rect.left - scrollPanelRect.left}px`
       highlight.style.top = `${rect.top - scrollPanelRect.top}px`
       highlight.style.width = `${rect.width}px`
@@ -464,8 +464,22 @@ class BesTreeService extends BesService {
                     }
                   }
 
-                  const { clientRects, highlights } =
-                    this.addMistakeMarkup(range)
+                  // TODO: Initial user feedback indicated a requirement for clear differentiation between spelling and grammar errors.
+                  // So to do that, we need to add a CSS class to the highlight element based on the rule type.
+                  const ruleTypes = {
+                    BESANA_1: 'bes-spelling-mistake',
+                    BESANA_2: 'bes-spelling-mistake',
+                    BESANA_3: 'bes-spelling-mistake',
+                    BESANA_4: 'bes-grammar-mistake',
+                    BESANA_5: 'bes-spelling-mistake'
+                  }
+                  const ruleType =
+                    ruleTypes[match.rule.id] || 'bes-spelling-mistake'
+
+                  const { clientRects, highlights } = this.addMistakeMarkup(
+                    range,
+                    ruleType
+                  )
                   matches.push({
                     rects: clientRects,
                     highlights: highlights,

styles.css

@@ -1,14 +1,21 @@
 /* TODO: Dark mode theme */
 
 /* Mistake types styles */
-.bes-typo-mistake {
-  border-bottom: 2px solid red;
+.bes-spelling-mistake {
+  border-bottom: 2px solid #ff7300;
   position: absolute;
   z-index: 3;
   cursor: text;
-  /* pointer-events: none; */
 }
 
+.bes-grammar-mistake {
+  border-bottom: 2px solid #007bff;
+  position: absolute;
+  z-index: 3;
+  cursor: text;
+}
+
+/* Styles required to ensure full functionality and optimal user experience. */
 .bes-correction-panel-parent {
   position: relative;
   overflow: visible;