Implement event handling for CKEditor plugins to improve responsiveness

service.js

@@ -180,7 +180,7 @@ class BesService {
           }
           if (isInitialCall) {
             // TODO: Check count in 'makrofinančno' case.
-            const count = this.children.reduce(
+            const count = this.children?.reduce(
               (total, child) => total + child.matches.length,
               0
             )
@@ -283,7 +283,7 @@ class BesService {
    * @returns {Boolean} true if the element has already been grammar-proofed; false otherwise.
    */
   isProofed(el) {
-    return this.children.find(child => child.element === el)?.isProofed
+    return this.children?.find(child => child.element === el)?.isProofed
   }
 
   /**
@@ -320,7 +320,7 @@ class BesService {
    * @param {Element} el DOM element that we should re-grammar-proof
    */
   clearMistakeMarkup(el) {
-    let child = this.children.find(child => child.element === el)
+    let child = this.children?.find(child => child.element === el)
     if (!child) return
     child.matches.forEach(match => {
       if (match?.highlights) {
@@ -336,7 +336,7 @@ class BesService {
    * @param {Element} el DOM element for removal
    */
   removeChild(el) {
-    this.children = this.children.filter(child => child.element !== el)
+    this.children = this.children?.filter(child => child.element !== el)
   }
 
   /**
@@ -663,6 +663,47 @@ class BesCKService extends BesService {
       e => this.handleBeforeCKInput(e),
       false
     )
+    this.ckEditorInstance.model.document.on('change:data', () => {
+      const differ = this.ckEditorInstance.model.document.differ
+      const changes = Array.from(differ.getChanges())
+      // TODO: on font style changes etc.
+      for (const entry of changes) {
+        if (entry.type === 'insert' || entry.type === 'remove') {
+          const insertedElement = entry.name
+
+          if (['paragraph', 'blockQuote'].includes(insertedElement)) {
+            if (
+              entry.attributes.has('listIndent') ||
+              entry.name === 'blockQuote'
+            ) {
+              setTimeout(() => {
+                this.proof(hostElement)
+                window.dispatchEvent(new Event('resize'))
+              }, 500)
+              return
+            }
+          }
+          if (['table'].includes(insertedElement)) {
+            setTimeout(() => {
+              this.repositionMistakes()
+              window.dispatchEvent(new Event('resize'))
+            }, 500)
+          }
+        }
+      }
+    })
+    this.ckEditorInstance.commands.get('undo').on('execute', () => {
+      this.clearAllMistakes(this.scrollPanel)
+      setTimeout(() => {
+        this.proof(hostElement)
+      }, 500)
+    })
+    this.ckEditorInstance.commands.get('redo').on('execute', () => {
+      this.clearAllMistakes(this.scrollPanel)
+      setTimeout(() => {
+        this.proof(hostElement)
+      }, 500)
+    })
   }
 
   /**
@@ -687,7 +728,6 @@ class BesCKService extends BesService {
     let blockElements = new Set()
     event.getTargetRanges().forEach(range => {
       BesService.getNodesInRange(range).forEach(el => {
-        console.log(el)
         if (
           el === hostElement ||
           Array.from(hostElement.childNodes).includes(el)
@@ -696,7 +736,6 @@ class BesCKService extends BesService {
         }
       })
     })
-    console.log(blockElements)
     blockElements.forEach(block => {
       service.clearMistakeMarkup(block)
       service.removeChild(block)
@@ -786,7 +825,7 @@ class BesCKService extends BesService {
    * @param {Element} el DOM element for removal
    */
   removeChild(el) {
-    this.children = this.children.filter(child => child.element !== el)
+    this.children = this.children?.filter(child => child.element !== el)
   }
 
   /**