From a23dea067ce3ed5e715acd192a75b90e157061da Mon Sep 17 00:00:00 2001
From: Aljaz Grilc <aljaz.grilc@amebis.si>
Date: Thu, 30 May 2024 09:03:54 +0200
Subject: [PATCH 1/2] Enhance visual appearance of popup element

---
 service2.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/service2.js b/service2.js
index c197952..02f651b 100644
--- a/service2.js
+++ b/service2.js
@@ -1365,6 +1365,7 @@ class BesPopup extends HTMLElement {
           display: block;
         }
         .popup-text {
+          font-size: 0.93rem;
           max-width: 160px;
           color: black;
           text-align: center;
@@ -1372,9 +1373,10 @@ class BesPopup extends HTMLElement {
           z-index: 1;
         }
         .bes-popup-container {
+          font-family: Arial, sans-serif;
           visibility: hidden;
           min-width: 200px;
-          max-width: 300px;
+          max-width: 350px;
           background-color: rgb(241, 243, 249);
           box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
           border-radius: 5px;
@@ -1410,6 +1412,9 @@ class BesPopup extends HTMLElement {
         .bes-replacement-btn:hover{
           background-color: #1976f0;
         }
+        .bes-replacement-div{
+          margin-top: 4px;
+        }
         :host(.show) .bes-popup-container {
           visibility: visible;
           animation: fadeIn 1s;
@@ -1507,7 +1512,7 @@ class BesPopup extends HTMLElement {
    */
   changeMessage(text) {
     this.clearReplacements()
-    this.shadowRoot.querySelector('.popup-text').textContent = text
+    this.shadowRoot.querySelector('.popup-text').innerText = text
   }
 
   /**

From 32f4360de9a5d2654a338ecf590d8f5f5cae2fec Mon Sep 17 00:00:00 2001
From: Aljaz Grilc <aljaz.grilc@amebis.si>
Date: Mon, 3 Jun 2024 10:49:34 +0200
Subject: [PATCH 2/2] Implement debouncing to optimize text error handling

Previously, texts with numerous errors could cause performance issues due to the high frequency of function calls. With the new debouncing implementation, we effectively limit the rate at which the error handling function executes, thereby reducing potential lagginess and improving the overall user experience.
---
 service2.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/service2.js b/service2.js
index 02f651b..87762b7 100644
--- a/service2.js
+++ b/service2.js
@@ -26,6 +26,7 @@ class BesService {
     this.hostElement = hostElement
     this.results = [] // Results of grammar-checking, one per each block/paragraph of text
     this.createCorrectionPanel()
+    this.firstCall = true
 
     // Disable browser built-in spell-checker to prevent collision with our grammar markup.
     this.originalSpellcheck = this.hostElement.spellcheck
@@ -774,7 +775,16 @@ class BesDOMService extends BesTreeService {
    */
   onInput() {
     // Now that the text is done changing, we can correctly calculate markup position.
-    this.repositionAllMarkup()
+    // This is a way to resolve lagginess in repositioning markup with many mistakes.
+    if (this.firstCall) {
+      this.repositionAllMarkup()
+      this.firstCall = false
+    }
+    clearTimeout(this.debounceTimer)
+    this.debounceTimer = setTimeout(() => {
+      this.repositionAllMarkup()
+      this.firstCall = true
+    }, 300)
 
     // Defer grammar-checking to reduce stress on grammar-checking server.
     this.timer = setTimeout(() => {