Update handleBeforeInput logic

online-editor.js

@@ -17,7 +17,6 @@ class BesEditor {
     edit.addEventListener('scroll', e =>
       this.handleScrollEvent(edit, this.scrollPanel)
     )
-    //this.observeDeletions(this.el)
   }
 
   // Register editor
@@ -173,49 +172,18 @@ class BesEditor {
     blockElements.forEach(block => {
       this.clearProofed(block)
       this.clearMistakeMarkup(block)
+      this.clearChildren(block)
     })
     let editor = this
+    // Not the nice way to do it, but it works for now the repositionMistakes function is called before the DOM updates are finished.
+    setTimeout(() => {
+      editor.repositionMistakes(editor)
+    }, 0)
     this.timer = setTimeout(function () {
       editor.proof(editor.el)
     }, 1000)
   }
 
-  observeDeletions(editor) {
-    const observer = new MutationObserver(mutations => {
-      mutations.forEach(mutation => {
-        if (mutation.type === 'characterData') {
-          this.clearProofed(this.getBlockParent(mutation.target))
-        }
-        if (
-          mutation.type === 'childList' &&
-          mutation.removedNodes.length &&
-          !mutation.addedNodes.length
-        ) {
-          mutation.removedNodes.forEach(node => {
-            // TODO: This is a temporary solution. We need to handle all cases such as <p></p>, <br>, etc.
-            if (node.nodeName === 'DIV') {
-              this.children = this.children.filter(
-                child => child.elements !== node
-              )
-            } else console.log(node)
-          })
-          this.children.forEach(child => {
-            this.clearMistakeMarkup(child.elements)
-            child.matches.forEach(match => {
-              match.rects = this.addMistakeMarkup(match.range, this.scrollPanel)
-            })
-          })
-        }
-      })
-    })
-
-    observer.observe(editor, {
-      childList: true,
-      characterData: true,
-      subtree: true
-    })
-  }
-
   // Test if given block element has already been grammar-proofed.
   isProofed(el) {
     let filteredChildren = this.children.filter(child => child.elements === el)
@@ -271,6 +239,21 @@ class BesEditor {
       })
   }
 
+  // Remove all children from this.children array
+  clearChildren(el) {
+    if (el?.classList.contains('bes-online-editor')) return
+    else this.children = this.children.filter(child => child.elements !== el)
+  }
+
+  repositionMistakes(editor) {
+    editor.children.forEach(child => {
+      this.clearMistakeMarkup(child.elements)
+      child.matches.forEach(match => {
+        match.rects = this.addMistakeMarkup(match.range, this.scrollPanel)
+      })
+    })
+  }
+
   // Adds grammar mistake markup
   addMistakeMarkup(range, scrollPanel) {
     // TODO: Consider using range.getClientRects() instead of range.getBoundingClientRect()