Rebuild DOM after a window.selection has been removed

Question

I am running into an issue with highlighting selected text in a paragraph. Specifically, when the user removes the selected highlight the paragraph sometimes re-renders and sometimes it does not causing issues if/when the user tries to create a new highlight.

Here is the scenario:

The paragraph <p>Over the last few weeks you have learned how a philosophical commitment to naturalism has led the scientific community to disallow the possibility of a supernatural explanation of the origin of our universe and the origin of life. You have also seen that this commitment is not based on scientifically observed data, and in fact, conveniently throws aside the very methodology that modern science claims to be built upon. The battle between modern science and the Bible is a battle of worldviews. It is not an argument about the facts that can be observed, but the explanations offered to account for them.</p> <p>Over the last few weeks you have learned how a philosophical commitment to naturalism has led the scientific community to disallow the possibility of a supernatural explanation of the origin of our universe and the origin of life. You have also seen that this commitment is not based on scientifically observed data, and in fact, conveniently throws aside the very methodology that modern science claims to be built upon. The battle between modern science and the Bible is a battle of worldviews. It is not an argument about the facts that can be observed, but the explanations offered to account for them.</p>

The DOM from inspecting the element

The User highlights a selection: ...learned how a philo sophical comm itment to...

The DOM after highlight

The User removes the highlight: ...learned how a philosophical commitment to...

The DOM after the highlight is removed

Now if the User tries to highlight/unhighlight some or parts of those words again it removes the text from the DOM.

I am trying to force the DOM to refresh after the selection has been removed.

Here is my Selection method:

surroundSelection(action) {
        var span = document.createElement("span")
        
        if(action == 'highlight')
            span.className = 'highlighted'

        var sel = window.getSelection()
        
        if(action == 'remove') {
            let ancestor = sel.anchorNode.parentNode.parentNode
            let parent = sel.anchorNode.parentElement
            
            ancestor.insertBefore(sel.anchorNode, parent)
            sel.anchorNode.remove()
        }
        if (window.getSelection) {
            
            if (sel.rangeCount) {
                var range = this.selectedRange.cloneRange()
            
                if(action == 'highlight')
                    range.surroundContents(span)

                sel.removeAllRanges()
                sel.addRange(range)
            }
        }
        this.saveHighlight(sel)
    }

Answer 1

I found a solution. at the the saveHighlight method I call a new function that takes the ID and innerHtml of the selection and then I replace the innerHtml