TextArea: Position cursor after user selects suggested correction

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
    *