Resolve misalignment issues in textarea cases

service.js

@@ -577,13 +577,17 @@ class BesService {
     match.range.deleteContents()
     match.range.insertNode(document.createTextNode(replacement))
     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
+      // The commented code below only works in cases where we only have one paragraph.
+      // Until we find a better solution, we will use the textAreaEl.value approach.
+
+      // 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.textAreaService.textAreaEl.value = this.hostElement.outerText
     }
     this.clearMistakeMarkup(el)
     // In my opinion, this approach provides the most straightforward solution for repositioning mistakes after a change.
@@ -743,16 +747,19 @@ class BesTAService {
     cloneDiv.style.fontSize = textAreaStyles.fontSize
     cloneDiv.style.fontFamily = textAreaStyles.fontFamily
     cloneDiv.style.lineHeight = textAreaStyles.lineHeight
+    cloneDiv.style.margin = textAreaStyles.margin
+    cloneDiv.style.border = textAreaStyles.border
+    cloneDiv.style.borderRadius = textAreaStyles.borderRadius
     const scrollbarWidth = textAreaEl.offsetWidth - textAreaEl.clientWidth
-    cloneDiv.style.width = textAreaEl.clientWidth - scrollbarWidth + 'px'
+    cloneDiv.style.padding = textAreaStyles.padding
     cloneDiv.style.height = textAreaStyles.height
     cloneDiv.style.maxHeight = textAreaStyles.height
-    cloneDiv.style.padding = textAreaStyles.padding
-    cloneDiv.style.margin = textAreaStyles.margin
     cloneDiv.style.overflowY = 'auto'
     cloneDiv.style.position = 'absolute'
     cloneDiv.style.top = `${textAreaRect.top + scrollTop}px`
     cloneDiv.style.left = `${textAreaRect.left}px`
+    cloneDiv.style.width =
+      parseInt(textAreaStyles.width) + parseInt(scrollbarWidth) - 2 + 'px'
     textAreaEl.style.zIndex = 2
     textAreaEl.style.position = 'relative'
     textAreaEl.parentNode.insertBefore(cloneDiv, textAreaEl)
@@ -789,7 +796,6 @@ class BesTAService {
    * @param {Event} e Click event
    */
   handleTAClick(e) {
-    //TODO: Consider adding some kind of proofing?
     this.textAreaEl.style.visibility = 'hidden'
     const deepestElement = document.elementFromPoint(e.clientX, e.clientY)
     this.textAreaEl.style.visibility = 'visible'