Refactor code

online-editor.js

@@ -9,54 +9,31 @@ window.onload = () => {
       timer: null
     }
     besEditors[edit.id] = editor
-    besCheckText(edit)
+    besProof(edit)
-
     edit.addEventListener('beforeinput', e => besBeforeInput(edit.id, e), false)
-
+    edit.addEventListener('click', e => besHandleClick(e))
-    edit.addEventListener('click', e => {
-      besHandleClick(e)
-    })
   })
 }
 
-function besIntervalsOverlap(start1, end1, start2, end2)
+// Recursively grammar-proofs one node.
-{
+async function besProof(el)
-  return (
-    start2 <= start1 && start1 < end2 ||
-    start1 <= start2 && start2 < end1)
-}
-
-async function besCheckText(el)
 {
   switch (el.nodeType) {
     case Node.TEXT_NODE:
       return [{ text: el.textContent, el: el, markup: false }]
 
     case Node.ELEMENT_NODE:
-      if (el.getAttribute('besChecked') === 'true') {
+      if (besIsBlockElement(el)) {
+        // Block elements are grammar-proofed independently.
+        if (besIsProofed(el)) {
           return [{ text: '<'+el.tagName+'/>', el: el, markup: true }]
         }
-      for (const el2 of el.childNodes) {
+        besClearAllMistakes(el)
-        if (el2.tagName === 'SPAN' && el2.classList.contains('typo-mistake')) {
-          el2.replaceWith(...el2.childNodes)
-          el2.remove()
-        }
-      }
         let data = []
         for (const el2 of el.childNodes) {
-        data = data.concat(await besCheckText(el2))
+          data = data.concat(await besProof(el2))
         }
-      let defaultView = document.defaultView;
+        if (data.some(x => !x.markup && !/^\s*$/.test(x.text))) {
-      switch (defaultView.getComputedStyle(el, null).getPropertyValue('display').toLowerCase())
-      {
-        case 'inline':
-        case 'inline-block':
-          data.splice(0, 0, { text: '<'+el.tagName+'>', el: el, markup: true })
-          data.splice(data.length, 0, { text: '</'+el.tagName+'>', markup: true })
-          return data;
-        default:
-          let regAllWhitespace = /^\s*$/
-          if (data.some(x => !x.markup && !regAllWhitespace.test(x.text))) {
           const requestData = {
             format: 'plain',
             data: JSON.stringify({annotation: data.map(x => x.markup ? { markup: x.text } : { text: x.text })}),
@@ -71,29 +48,12 @@ async function besCheckText(el)
           fetch(request)
             .then(response => {
               if (!response.ok) {
-                  // TODO: Make connectivity and BesStr issues non-fatal.
+                // TODO: Make connectivity and BesStr issues non-fatal. But show an error sign somewhere in the UI.
                 throw new Error('Backend server response was not OK')
               }
               return response.json()
             })
             .then(responseData => {
-                if (!responseData.matches.length) return
-
-                // Remove overlapping grammar mistakes for simplicity.
-                for (let idx1 = 0; idx1 < responseData.matches.length - 1; ++idx1) {
-                  for (let idx2 = idx1 + 1; idx2 < responseData.matches.length;) {
-                    if (besIntervalsOverlap(
-                      responseData.matches[idx1].offset, responseData.matches[idx1].offset + responseData.matches[idx1].length,
-                      responseData.matches[idx2].offset, responseData.matches[idx2].offset + responseData.matches[idx2].length)) {
-                      responseData.matches.splice(idx2, 1)
-                    }
-                    else idx2++
-                  }
-                }
-
-                // Reverse sort grammar mistakes for easier markup insertion later.
-                // When we start inserting grammar mistakes at the back, indexes before that remain valid.
-                responseData.matches.sort((a, b) => a.offset < b.offset ? +1 : a.offset > b.offset ? -1 : 0);
               responseData.matches.forEach(match => {
                 let range = document.createRange()
 
@@ -114,9 +74,80 @@ async function besCheckText(el)
                   }
                 }
 
-                  const clientRects = range.getClientRects()
+                besAddMistake(range, match)
+              })
+
+              besMarkProofed(el)
+            })
+            .catch(error => {
+              // TODO: Make parsing issues non-fatal. But show an error sign somewhere in the UI.
+              throw new Error('Parsing backend server response failed: ' + error)
+            })
+          }
+          return [{ text: '<'+el.tagName+'/>', el: el, markup: true }]
+      }
+      else {
+        // Surround inline element with dummy <tagName>...</tagName>.
+        let data = [{ text: '<'+el.tagName+'>', el: el, markup: true }]
+        for (const el2 of el.childNodes) {
+          data = data.concat(await besProof(el2))
+        }
+        data.splice(data.length, 0, { text: '</'+el.tagName+'>', markup: true })
+        return data;
+      }
+
+    default:
+      return [{ text: '<?'+el.nodeType+'>', el: el, markup: true }]
+  }
+}
+
+// Marks section of text that is about to change as not-yet-grammar-proofed.
+function besBeforeInput(editorId, event)
+{
+  let editor = besEditors[editorId]
+  if (editor.timer) clearTimeout(editor.timer)
+  editor.timer = setTimeout(function(){ besProof(edit) }, 1000)
+
+  // No need to invalidate elements after range.startContainer since they will
+  // get either deleted or replaced.
+  let edit = document.getElementById(editorId)
+  event.getTargetRanges().forEach(range => besClearProofed(besGetBlockParent(range.startContainer, edit)))
+}
+
+// Test if given block element has already been grammar-proofed.
+function besIsProofed(el)
+{
+  return el.getAttribute('besProofed') === 'true'
+}
+
+// Mark given block element as grammar-proofed.
+function besMarkProofed(el)
+{
+  el.setAttribute('besProofed', 'true')
+}
+
+// Mark given block element as not grammar-proofed.
+function besClearProofed(el)
+{
+  el?.removeAttribute('besProofed')
+}
+
+// Remove all grammar mistakes markup for given block element.
+function besClearAllMistakes(el) {
+  for (const el2 of el.childNodes) {
+    if (el2.tagName === 'SPAN' && el2.classList.contains('typo-mistake')) {
+      el2.replaceWith(...el2.childNodes)
+      el2.remove()
+    }
+  }
+}
+
+// Adds grammar mistake markup
+function besAddMistake(range, match) {
   const correctionPanel = document.getElementById('correction-panel');
-                  const rect = clientRects[0];
+  const clientRects = range.getClientRects()
+  for (let i = 0, n = clientRects.length; i < n; ++i) {
+    const rect = clientRects[i]
     const highlight = document.createElement("div");
     highlight.classList.add("typo-mistake");
     highlight.dataset.info = match.message;
@@ -134,57 +165,40 @@ async function besCheckText(el)
       // besHandleClick(e);
       // return true;
     // });
-                })
-
-                el.setAttribute('besChecked', 'true')
-              })
-              .catch(error => {
-                // TODO: Make parsing issues non-fatal.
-                throw new Error('Parsing backend server response failed: ' + error)
-              })
-          }
-          return [{ text: '<'+el.tagName+'/>', el: el, markup: true }]
-      }
-
-    default:
-      return [{ text: '<?'+el.nodeType+'>', el: el, markup: true }]
   }
 }
 
-function besGetBlockParent(el, edit)
+// Tests if given element is block element.
+function besIsBlockElement(el)
 {
   const defaultView = document.defaultView
-  while (el && el !== edit) {
-    switch (el.nodeType) {
-      case Node.TEXT_NODE:
-        el = el.parentNode
-        continue
-  
-      case Node.ELEMENT_NODE:
   switch (defaultView.getComputedStyle(el, null).getPropertyValue('display').toLowerCase())
   {
     case 'inline':
     case 'inline-block':
-            el = el.parentNode
+      return false;
-            continue
     default:
-            return el
+      return true
   }
 }
-  }
-  return el
-}
 
-function besBeforeInput(editorId, event)
+// Returns first block parent element
+function besGetBlockParent(el, edit)
 {
-  let editor = besEditors[editorId]
+  while (el && el !== edit) {
-  if (editor.timer) clearTimeout(editor.timer)
+    switch (el.nodeType) {
-  editor.timer = setTimeout(function(){ besCheckText(edit) }, 1000)
+      case Node.TEXT_NODE:
+        el = el.parentNode
+        break
   
-  // No need to invalidate elements after range.startContainer since they will
+      case Node.ELEMENT_NODE:
-  // get either deleted or replaced.
+        if (besIsBlockElement(el)) {
-  let edit = document.getElementById(editorId)
+          return el
-  event.getTargetRanges().forEach(range => besGetBlockParent(range.startContainer, edit)?.removeAttribute('besChecked'))
+        }
+        el = el.parentNode
+    }
+  }
+  return el
 }
 
 function besHandleClick(e) {