Implement ResizeObserver to observe resizing in host elements

service2.js

@@ -1,6 +1,5 @@
 // TODO: Test with contenteditable="plaintext-only"
 // TODO: Implement <textarea> class
-// TODO: Port CKEditor class from service.js
 
 /**
  * Collection of all grammar checking services in the document
@@ -9,11 +8,6 @@
  */
 let besServices = []
 
-// TODO: Replace with Resize observer to call onResize() for hostElement only.
-window.addEventListener('resize', () =>
-  besServices.forEach(service => service.onResize())
-)
-
 window.addEventListener('scroll', () =>
   besServices.forEach(service => service.onScroll())
 )
@@ -36,6 +30,11 @@ class BesService {
     this.onScroll = this.onScroll.bind(this)
     this.hostElement.addEventListener('scroll', this.onScroll)
 
+    this.resizeObserver = new ResizeObserver(() => {
+      this.onResize()
+    })
+    this.resizeObserver.observe(this.hostElement)
+
     besServices.push(this)
   }
 
@@ -45,6 +44,7 @@ class BesService {
   unregister() {
     if (this.abortController) this.abortController.abort()
     besServices = besServices.filter(item => item !== this)
+    this.resizeObserver.disconnect()
     this.hostElement.removeEventListener('scroll', this.onScroll)
     this.hostElement.spellcheck = this.originalSpellcheck
     this.clearCorrectionPanel()
@@ -817,7 +817,7 @@ class BesCKService extends BesTreeService {
     setTimeout(() => {
       // Now that the text is done changing, we can correctly calculate markup position.
       this.repositionAllMarkup()
-      
+
       // Defer grammar-checking to reduce stress on grammar-checking server.
       this.timer = setTimeout(() => {
         this.proofAll()