Register a resize observer for the textarea element

service.js

@@ -880,6 +880,7 @@ class BesTAService {
     this.textAreaEl.addEventListener('scroll', () => {
       this.cloneDiv.scrollTop = this.textAreaEl.scrollTop
     })
+    this.registerResizeObserver(this.textAreaEl)
   }
 
   /**
@@ -971,6 +972,36 @@ class BesTAService {
     this.cloneDiv.dispatchEvent(clickEvent)
   }
 
+  /**
+   * Registers the resize observer for the textarea element
+   *
+   * @param {Node} textAreaEl
+   * @returns {void}
+   */
+  registerResizeObserver(textAreaEl) {
+    const resizeObserver = new ResizeObserver(() => {
+      this.setCloneDivSize(textAreaEl, this.cloneDiv)
+      this.service.setCorrectionPanelSize(
+        textAreaEl,
+        this.service.correctionPanel,
+        this.service.scrollPanel
+      )
+      this.service.setStatusDivPosition(textAreaEl, this.service.statusDiv)
+      this.service.children.forEach(child => {
+        this.service.clearMistakeMarkup(child.element)
+        child.matches.forEach(match => {
+          const { clientRects, highlights } = this.service.addMistakeMarkup(
+            match.range
+          )
+          match.rects = clientRects
+          match.highlights = highlights
+        })
+      })
+    })
+
+    resizeObserver.observe(textAreaEl)
+  }
+
   /**
    * Registers grammar checking service
    *