From 3e868b25174e0cfab544ff517cde143effc22cce Mon Sep 17 00:00:00 2001
From: Simon Rozman <simon@rozman.si>
Date: Tue, 2 Apr 2024 14:27:59 +0200
Subject: [PATCH] TextArea: Position cursor after user selects suggested
 correction

---
 service.js | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/service.js b/service.js
index 91e8c93..0b2021b 100644
--- a/service.js
+++ b/service.js
@@ -576,8 +576,12 @@ class BesService {
     this.abortController.abort()
     match.range.deleteContents()
     match.range.insertNode(document.createTextNode(replacement))
-    if (this.textAreaService)
-      this.textAreaService.handleReplacement(this.hostElement)
+    if (this.textAreaService) {
+      let text = this.textAreaService.textAreaEl.value
+      this.textAreaService.textAreaEl.value =
+        text.substring(0, match.match.offset) + replacement + text.substring(match.match.offset + match.match.length)
+      this.textAreaService.textAreaEl.selectionStart = this.textAreaService.textAreaEl.selectionEnd = match.match.offset
+    }
     this.clearMistakeMarkup(el)
     // In my opinion, this approach provides the most straightforward solution for repositioning mistakes after a change.
     // It maintains reasonable performance as it only checks the block element that has been modified,
@@ -785,16 +789,6 @@ class BesTAService {
     this.cloneDiv.dispatchEvent(clickEvent)
   }
 
-  /**
-   * This function handles the replacement of the text in the textarea element
-   *
-   * @param {HTMLElement} el Element whose outerText will be used as a replacement
-   */
-  handleReplacement(el) {
-    // TODO: think of a way to reposition the cursor after the replacement
-    this.textAreaEl.value = el.outerText
-  }
-
   /**
    * Registers grammar checking service
    *