Cleanups and improvements

online-editor.js

@@ -14,10 +14,10 @@ class BesEditor {
     this.proof(edit)
     edit.addEventListener('beforeinput', e => this.handleBeforeInput(e), false)
     edit.addEventListener('click', e => this.handleClick(e))
-    edit.addEventListener('scroll', () =>
-      this.handleScrollEvent(this.el, this.scrollPanel)
+    edit.addEventListener('scroll', e =>
+      this.handleScrollEvent(edit, this.scrollPanel)
     )
-    this.observeDeletions(this.el)
+    //this.observeDeletions(this.el)
   }
 
   // Register editor
@@ -162,8 +162,18 @@ class BesEditor {
   }
 
   // Marks section of text that is about to change as not-yet-grammar-proofed.
-  handleBeforeInput() {
+  handleBeforeInput(event) {
     if (this.timer) clearTimeout(this.timer)
+    let blockElements = new Set()
+    event.getTargetRanges().forEach(range => {
+      BesEditor.getNodesInRange(range).forEach(el =>
+        blockElements.add(this.getBlockParent(el))
+      )
+    })
+    blockElements.forEach(block => {
+      this.clearProofed(block)
+      this.clearMistakeMarkup(block)
+    })
     let editor = this
     this.timer = setTimeout(function () {
       editor.proof(editor.el)
@@ -230,17 +240,20 @@ class BesEditor {
 
   // Mark given block element as not grammar-proofed.
   clearProofed(el) {
-    let filteredChildren = this.children.filter(child => child.elements === el)
-    if (filteredChildren.length) filteredChildren[0].isProofed = false
+    this.children
+      .filter(child => child.elements === el)
+      .forEach(child => {
+        child.isProofed = false
+      })
   }
 
   // Remove all grammar mistakes markup for given block element.
   clearMistakeMarkup(el) {
-    let filteredChildren = this.children.filter(child => child.elements === el)
-    if (!filteredChildren.length) return
-
+    this.children
+      .filter(child => child.elements === el)
+      .forEach(child => {
         // TODO: Remove elements that are found in editor object, that way we can avoid looping through all elements.
-    filteredChildren[0].matches.forEach(match => {
+        child.matches.forEach(match => {
           for (const rect of match.rects) {
             for (let child of this.scrollPanel.children) {
               let childRect = child.getBoundingClientRect()
@@ -255,6 +268,7 @@ class BesEditor {
             }
           }
         })
+      })
   }
 
   // Adds grammar mistake markup
@@ -302,6 +316,59 @@ class BesEditor {
     return el
   }
 
+  static getNextNode(node) {
+    if (node.firstChild) return node.firstChild
+    while (node) {
+      if (node.nextSibling) return node.nextSibling
+      node = node.parentNode
+    }
+  }
+
+  static getParents(node) {
+    let parents = []
+    do {
+      parents.push(node)
+      node = node.parentNode
+    } while (node)
+    return parents.reverse()
+  }
+
+  static getNodesInRange(range) {
+    var start = range.startContainer
+    var end = range.endContainer
+
+    let startAncestors = BesEditor.getParents(start)
+    let endAncestors = BesEditor.getParents(end)
+    let commonAncestor = null
+    for (
+      let i = 0;
+      i < startAncestors.length &&
+      i < endAncestors.length &&
+      startAncestors[i] === endAncestors[i];
+      ++i
+    ) {
+      commonAncestor = startAncestors[i]
+    }
+
+    var nodes = []
+    var node
+
+    // walk parent nodes from start to common ancestor
+    for (node = start.parentNode; node; node = node.parentNode) {
+      nodes.push(node)
+      if (node == commonAncestor) break
+    }
+    nodes.reverse()
+
+    // walk children and siblings from start until end is found
+    for (node = start; node; node = BesEditor.getNextNode(node)) {
+      nodes.push(node)
+      if (node == end) break
+    }
+
+    return nodes
+  }
+
   // TODO: Improve this function to support copied rich html content from news sites, etc.
   handleClick(e) {
     const targetEl = e.target