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,12 +354,14 @@ class BesService {
     let child = this.children?.find(child => child.element === el)
     if (!child) return
     if (this.textAreaService) child.isProofed = false
-    child.matches.forEach(match => {
+    if (child.matches) {
-      if (match?.highlights) {
+      child.matches.forEach(match => {
-        match.highlights.forEach(h => h.remove())
+        if (match?.highlights) {
-        delete match.highlights
+          match.highlights.forEach(h => h.remove())
-      }
+          delete match.highlights
-    })
+        }
+      })
+    }
   }
 
   /**
@@ -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,60 +708,40 @@ 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)
+            )
-              setTimeout(() => {
+          const child = this.children.find(
-                this.proof(hostElement)
+            child => child.element === domElement
-                window.dispatchEvent(new Event('resize'))
+          )
-              }, 500)
+          if (child) {
-              return
+            child.matches.forEach(match => {
-            }
+              console.log(match)
-          }
+              match.highlights.forEach(highlight => {
-          if (['table'].includes(insertedElement)) {
+                highlight.remove()
-            setTimeout(() => {
+                delete match.highlights
-              this.repositionMistakes()
+              })
-              window.dispatchEvent(new Event('resize'))
+            })
-            }, 500)
+            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)
         }
       }
     })
-    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)
-      child.matches.forEach(match => {
+      if (child.matches) {
-        const { clientRects, highlights } = this.addMistakeMarkup(match.range)
+        child.matches.forEach(match => {
-        match.rects = clientRects
+          const { clientRects, highlights } = this.addMistakeMarkup(match.range)
-        match.highlights = highlights
+          match.rects = clientRects
-      })
+          match.highlights = highlights
+        })
+      }
     })
     // window.dispatchEvent(new Event('resize'))
   }
@@ -1023,13 +1015,15 @@ class BesTAService {
       this.service.setStatusDivPosition(textAreaEl, this.service.statusDiv)
       this.service.children.forEach(child => {
         this.service.clearMistakeMarkup(child.element)
-        child.matches.forEach(match => {
+        if (child.matches) {
-          const { clientRects, highlights } = this.service.addMistakeMarkup(
+          child.matches.forEach(match => {
-            match.range
+            const { clientRects, highlights } = this.service.addMistakeMarkup(
-          )
+              match.range
-          match.rects = clientRects
+            )
-          match.highlights = highlights
+            match.rects = clientRects
-        })
+            match.highlights = highlights
+          })
+        }
       })
     })
 
@@ -1407,13 +1401,15 @@ window.onresize = () => {
     service.setStatusDivPosition(service.hostElement, service.statusDiv)
     service.children.forEach(child => {
       service.clearMistakeMarkup(child.element)
-      child.matches.forEach(match => {
+      if (child.matches) {
-        const { clientRects, highlights } = service.addMistakeMarkup(
+        child.matches.forEach(match => {
-          match.range
+          const { clientRects, highlights } = service.addMistakeMarkup(
-        )
+            match.range
-        match.rects = clientRects
+          )
-        match.highlights = highlights
+          match.rects = clientRects
-      })
+          match.highlights = highlights
+        })
+      }
     })
   })
 }