Optimize repositioning mistakes in CKEditor

service.js

@@ -19,13 +19,15 @@ class BesService {
     this.originalSpellcheck = hostElement.spellcheck
     this.abortController = new AbortController()
     hostElement.spellcheck = false
-    hostElement.addEventListener(
-      'beforeinput',
-      BesService.handleBeforeInput,
-      false
-    )
     hostElement.addEventListener('click', BesService.handleClick)
     hostElement.addEventListener('scroll', BesService.handleScroll)
+    if (this.constructor === BesService) {
+      hostElement.addEventListener(
+        'beforeinput',
+        BesService.handleBeforeInput,
+        false
+      )
+    }
     besServices.push(this)
   }
 
@@ -239,9 +241,15 @@ class BesService {
     service.abortController.abort()
     let blockElements = new Set()
     event.getTargetRanges().forEach(range => {
-      BesService.getNodesInRange(range).forEach(el =>
+      BesService.getNodesInRange(range).forEach(el => {
-        blockElements.add(service.getBlockParent(el))
+        if (
-      )
+          el === hostElement ||
+          Array.from(hostElement.childNodes).includes(el) ||
+          hostElement.contains(el)
+        ) {
+          blockElements.add(service.getBlockParent(el))
+        }
+      })
     })
     blockElements.forEach(block => {
       service.clearMistakeMarkup(block)
@@ -639,7 +647,10 @@ class BesCKService extends BesService {
   constructor(hostElement, ckEditorInstance) {
     super(hostElement)
     this.ckEditorInstance = ckEditorInstance
-    this.disableCKEditorSpellcheck(ckEditorInstance)
+    this.disableCKEditorSpellcheck(this.ckEditorInstance)
+    this.ckEditorInstance.model.document.on('change:data', () => {
+      this.handleCKInput(hostElement, ckEditorInstance)
+    })
   }
 
   /**
@@ -655,6 +666,32 @@ class BesCKService extends BesService {
     return service
   }
 
+  handleCKInput(hostElement, ckEditorInstance) {
+    let service = besServices.find(e => e.hostElement === hostElement)
+    if (!service) return
+    if (service.timer) clearTimeout(service.timer)
+    service.abortController.abort()
+    const root = ckEditorInstance.model.document.getRoot()
+    const blockElements = Array.from(root.getChildren())
+    blockElements.forEach(block => {
+      const viewElement =
+        this.ckEditorInstance.editing.mapper.toViewElement(block)
+      const domElement =
+        this.ckEditorInstance.editing.view.domConverter.mapViewToDom(
+          viewElement
+        )
+      service.clearMistakeMarkup(domElement)
+      service.removeChild(domElement)
+    })
+    setTimeout(() => {
+      service.repositionMistakes()
+    }, 0)
+    service.timer = setTimeout(function () {
+      service.abortController = new AbortController()
+      service.proof(hostElement)
+    }, 1000)
+  }
+
   /**
    * This function disables the CKEditor spellcheck.
    *
@@ -704,6 +741,7 @@ class BesCKService extends BesService {
         match.highlights = highlights
       })
     })
+    // window.dispatchEvent(new Event('resize'))
   }
 
   // This function should be able to handle both cases or find a way that works for both.