Update mistake rendering and clearing functionality

online-editor.js

@@ -10,13 +10,13 @@ window.onload = () => {
       children: [
         {
           elements: null,
-          isProofed: false,
-          matches: [
-            {
-              range: null,
-              rects: null
-            }
-          ]
+          isProofed: false
+          // matches: [
+          //   {
+          //     range: null,
+          //     rects: null
+          //   }
+          // ]
         }
       ]
     }
@@ -74,7 +74,7 @@ async function besProof(el) {
               return response.json()
             })
             .then(responseData => {
-              const matches = [{ range: null, rects: null, message: null }]
+              let matches = []
               responseData.matches.forEach(match => {
                 let range = document.createRange()
 
@@ -167,34 +167,63 @@ function besHandleBeforeInput(editorId, event) {
 
 // Test if given block element has already been grammar-proofed.
 function besIsProofed(el) {
-  return el.getAttribute('besProofed') === 'true'
+  if (el.id.startsWith('ed')) return
+  const editorId = el.parentElement.id
+  const editor = besEditors[editorId]
+  let filteredChildren = editor?.children.filter(child => child.elements === el)
+  return filteredChildren[0]?.isProofed
 }
 
 // Mark given block element as grammar-proofed.
 function besMarkProofed(el, matches) {
   const editorId = el.parentElement.id
   const editor = besEditors[editorId]
-  editor.children.push({
+  let newChild = {
     isProofed: true,
     elements: el,
     matches: matches
-  })
-  // editor.children['matches'] = matches
+  }
+
+  editor.children = editor.children.map(child =>
+    child.elements === newChild.elements ? newChild : child
+  )
+  if (!editor.children.some(child => child.elements === newChild.elements)) {
+    editor.children.push(newChild)
+  }
 }
 
 // Mark given block element as not grammar-proofed.
 function besClearProofed(el) {
-  el?.removeAttribute('besProofed')
+  const editorId = el.parentElement.id
+  const editor = besEditors[editorId]
+  let filteredChildren = editor.children.filter(child => child.elements === el)
+  if (filteredChildren.length) filteredChildren[0].isProofed = false
 }
 
 // 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('bes-typo-mistake')) {
-      el2.replaceWith(...el2.childNodes)
-      el2.remove()
+  if (el.id.startsWith('ed')) return
+  const editorId = el.parentElement.id
+  const editor = besEditors[editorId]
+  let filteredChildren = editor?.children.filter(child => child.elements === el)
+  if (!filteredChildren.length) return
+
+  const correctionPanel = document.getElementById('correction-panel')
+  filteredChildren[0].matches.forEach(match => {
+    for (const rect of match.rects) {
+      for (let child of correctionPanel.children) {
+        let childRect = child.getBoundingClientRect()
+        const isWithinRect =
+          childRect.left >= rect.left &&
+          childRect.right <= rect.right &&
+          childRect.top >= rect.top &&
+          childRect.bottom <= rect.bottom + 20
+        if (isWithinRect) {
+          child.remove()
         }
       }
+    }
+  })
 }
 
 // Adds grammar mistake markup