Improve handling CKEditor events from plugins

service.js

@@ -73,18 +73,20 @@ class BesService {
    * @param {Node} node DOM root node to proof
    */
   proof(node) {
-    this.updateStatusIcon('bes-status-loading', 'BesService je v procesu preverjanja pravopisa.')
+    this.updateStatusIcon(
+      'bes-status-loading',
+      'BesService je v procesu preverjanja pravopisa.'
+    )
     this.recursiveProof(node)
 
     // TODO: Check count in 'makrofinančno' case.
     const count = this.children?.reduce(
-      (total, child) => total + child.matches.length,
+      (total, child) => total + child?.matches?.length,
       0
     )
     if (count > 0)
       this.updateStatusIcon('bes-status-mistakes', 'Število napak: ' + count)
-    else
+    else this.updateStatusIcon('bes-status-success', 'V besedilu ni napak.')
-      this.updateStatusIcon('bes-status-success', 'V besedilu ni napak.')
   }
 
   /**
@@ -131,7 +133,10 @@ class BesService {
             await fetch(request, { signal })
               .then(response => {
                 if (!response.ok) {
-                  this.updateStatusIcon('bes-status-error', 'Napaka pri preverjanju pravopisa.')
+                  this.updateStatusIcon(
+                    'bes-status-error',
+                    'Napaka pri preverjanju pravopisa.'
+                  )
                   throw new Error('Backend server response was not OK')
                 }
                 return response.json()
@@ -190,7 +195,10 @@ class BesService {
               })
               .catch(error => {
                 if (error.name === 'AbortError') return
-                this.updateStatusIcon('bes-status-error', 'Napaka pri preverjanju pravopisa.')
+                this.updateStatusIcon(
+                  'bes-status-error',
+                  'Napaka pri preverjanju pravopisa.'
+                )
                 throw new Error(
                   'Parsing backend server response failed: ' + error
                 )
@@ -346,6 +354,7 @@ class BesService {
     let child = this.children?.find(child => child.element === el)
     if (!child) return
     if (this.textAreaService) child.isProofed = false
+    if (child.matches) {
       child.matches.forEach(match => {
         if (match?.highlights) {
           match.highlights.forEach(h => h.remove())
@@ -353,6 +362,7 @@ class BesService {
         }
       })
     }
+  }
 
   /**
    * Removes given block element from this.children array
@@ -369,7 +379,7 @@ class BesService {
   repositionMistakes() {
     this.children.forEach(child => {
       this.clearMistakeMarkup(child.element)
-      child.matches.forEach(match => {
+      child?.matches.forEach(match => {
         const { clientRects, highlights } = this.addMistakeMarkup(match.range)
         match.rects = clientRects
         match.highlights = highlights
@@ -698,59 +708,39 @@ class BesCKService extends BesService {
       const differ = this.ckEditorInstance.model.document.differ
       const changes = Array.from(differ.getChanges())
       for (const entry of changes) {
-        if (entry.type === 'insert' || entry.type === 'remove') {
+        if (entry.type === 'attribute') {
-          const insertedElement = entry.name
+          const parentElement = entry.range.start.parent
-          if (['paragraph', 'blockQuote'].includes(insertedElement)) {
+          const viewElement =
-            if (
+            this.ckEditorInstance.editing.mapper.toViewElement(parentElement)
-              entry.attributes.has('listIndent') ||
+          const domElement =
-              entry.name === 'blockQuote'
+            this.ckEditorInstance.editing.view.domConverter.mapViewToDom(
-            ) {
+              viewElement
-              this.clearAllMistakes(this.scrollPanel)
+            )
+          const child = this.children.find(
+            child => child.element === domElement
+          )
+          if (child) {
+            child.matches.forEach(match => {
+              console.log(match)
+              match.highlights.forEach(highlight => {
+                highlight.remove()
+                delete match.highlights
+              })
+            })
+            delete child.matches
+            child.isProofed = false
+          }
+          setTimeout(() => {
+            this.proof(domElement)
+            window.dispatchEvent(new Event('resize'))
+          }, 500)
+        } else {
           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.proofCKEditor()
-    })
-    this.ckEditorInstance.commands.get('redo').on('execute', () => {
-      this.proofCKEditor()
-    })
-    this.ckEditorInstance.commands.get('bold').on('execute', () => {
-      setTimeout(() => {
-        this.repositionMistakes()
-        window.dispatchEvent(new Event('resize'))
-      }, 500)
-    })
-    this.ckEditorInstance.commands.get('italic').on('execute', () => {
-      setTimeout(() => {
-        this.repositionMistakes()
-        window.dispatchEvent(new Event('resize'))
-      }, 500)
-    })
-    this.ckEditorInstance.commands.get('indent').on('execute', () => {
-      this.proofCKEditor()
-    })
-    this.ckEditorInstance.commands.get('outdent').on('execute', () => {
-      this.proofCKEditor()
-    })
-    this.ckEditorInstance.commands.get('numberedList').on('execute', () => {
-      this.proofCKEditor()
-    })
-    this.ckEditorInstance.commands.get('bulletedList').on('execute', () => {
-      this.proofCKEditor()
     })
   }
 
@@ -863,11 +853,13 @@ class BesCKService extends BesService {
   repositionMistakes() {
     this.children.forEach(child => {
       this.clearMistakeMarkup(child.element)
+      if (child.matches) {
         child.matches.forEach(match => {
           const { clientRects, highlights } = this.addMistakeMarkup(match.range)
           match.rects = clientRects
           match.highlights = highlights
         })
+      }
     })
     // window.dispatchEvent(new Event('resize'))
   }
@@ -1023,6 +1015,7 @@ class BesTAService {
       this.service.setStatusDivPosition(textAreaEl, this.service.statusDiv)
       this.service.children.forEach(child => {
         this.service.clearMistakeMarkup(child.element)
+        if (child.matches) {
           child.matches.forEach(match => {
             const { clientRects, highlights } = this.service.addMistakeMarkup(
               match.range
@@ -1030,6 +1023,7 @@ class BesTAService {
             match.rects = clientRects
             match.highlights = highlights
           })
+        }
       })
     })
 
@@ -1407,6 +1401,7 @@ window.onresize = () => {
     service.setStatusDivPosition(service.hostElement, service.statusDiv)
     service.children.forEach(child => {
       service.clearMistakeMarkup(child.element)
+      if (child.matches) {
         child.matches.forEach(match => {
           const { clientRects, highlights } = service.addMistakeMarkup(
             match.range
@@ -1414,6 +1409,7 @@ window.onresize = () => {
           match.rects = clientRects
           match.highlights = highlights
         })
+      }
     })
   })
 }