diff --git a/online-editor.js b/online-editor.js index 5860f3e..f67d6f6 100644 --- a/online-editor.js +++ b/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

,
, 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()