Add MutationObserver for Editor Changes.

This allows detection and handling of deleted 'div' elements, thereby improving error correction and overall editor functionality.

online-editor.js

@@ -17,6 +17,7 @@ class BesEditor {
     edit.addEventListener('scroll', () =>
       this.handleScrollEvent(this.el, this.scrollPanel)
     )
+    this.observeDeletions(this.el)
   }
 
   // Register editor
@@ -160,20 +161,44 @@ class BesEditor {
   }
 
   // Marks section of text that is about to change as not-yet-grammar-proofed.
-  handleBeforeInput(event) {
+  handleBeforeInput() {
     if (this.timer) clearTimeout(this.timer)
     let editor = this
     this.timer = setTimeout(function () {
       editor.proof(editor.el)
     }, 1000)
+  }
 
-    // No need to invalidate elements after range.startContainer since they will
-    // get either deleted or replaced.
-    event
-      .getTargetRanges()
-      .forEach(range =>
-        this.clearProofed(this.getBlockParent(range.startContainer))
-      )
+  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.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.