Refine mistakes display for textarea inputs

service.js

@@ -710,28 +710,17 @@ class BesTAService {
     this.cloneDiv = this.createCloneDiv(textAreaEl)
     this.service = BesService.register(this.cloneDiv, this)
     this.textAreaEl.addEventListener('input', () => this.handleInput())
-    this.textAreaEl.addEventListener('click', e => {
-      //TODO: Consider adding some kind of proofing?
-      this.textAreaEl.style.display = 'none'
-      const deepestElement = document.elementFromPoint(e.clientX, e.clientY)
-      this.textAreaEl.style.display = ''
-
-      const clickEvent = new CustomEvent('click', {
-        detail: {
-          clientX: e.clientX,
-          clientY: e.clientY,
-          targetElement: deepestElement
-        }
-      })
-
-      this.cloneDiv.dispatchEvent(clickEvent)
+    this.textAreaEl.addEventListener('click', e => this.handleTAClick(e))
+    this.textAreaEl.addEventListener('scroll', () => {
+      this.cloneDiv.scrollTop = this.textAreaEl.scrollTop
     })
   }
 
   createCloneDiv(textAreaEl) {
     const cloneDiv = document.createElement('div')
     const textAreaRect = textAreaEl.getBoundingClientRect()
-    cloneDiv.style.top = `${textAreaRect.top}px`
+    const scrollTop = window.scrollY || document.documentElement.scrollTop
+    cloneDiv.style.top = `${textAreaRect.top + scrollTop}px`
     cloneDiv.style.left = `${textAreaRect.left}px`
     const textAreaStyles = window.getComputedStyle(textAreaEl)
     cloneDiv.style.fontSize = textAreaStyles.fontSize
@@ -739,8 +728,10 @@ class BesTAService {
     cloneDiv.style.lineHeight = textAreaStyles.lineHeight
     cloneDiv.style.width = textAreaStyles.width
     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'
     textAreaEl.style.position = 'relative'
     textAreaEl.style.zIndex = 2
@@ -762,6 +753,22 @@ class BesTAService {
     this.cloneDiv.dispatchEvent(customEvent)
   }
 
+  handleTAClick(e) {
+    //TODO: Consider adding some kind of proofing?
+    this.textAreaEl.style.display = 'none'
+    const deepestElement = document.elementFromPoint(e.clientX, e.clientY)
+    this.textAreaEl.style.display = ''
+
+    const clickEvent = new CustomEvent('click', {
+      detail: {
+        clientX: e.clientX,
+        clientY: e.clientY,
+        targetElement: deepestElement
+      }
+    })
+    this.cloneDiv.dispatchEvent(clickEvent)
+  }
+
   // TODO: think of a way to reposition the cursor after the replacement
   handleReplacement(el) {
     this.textAreaEl.value = el.outerText