Determine why highlighting preview breaks

[cyrusae]

Code:

 useEffect(() => {
  document.addEventListener('selectionchange', () => {
   let selection = document.getSelection().anchorNode.parentElement;
   if (selection != null) {
   if (selection.tagName ===  'mark') { 
    setPhrase(selection.innerText);
    if (code != null && code != '') {
     setPhrase('<mark class="' + code +  '">' + selection.innerText + '</mark>')
    }    
   } else {
    let sentence = document.getSelection().toString();
    setPhrase(sentence);
    if (code != null && code != '') {
     setPhrase('<mark class="' + code + '">' + sentence + '</mark>')
    }
   }
  }
   document.getElementById('phReview').innerHTML = phrase;
  })
 })

Issues:

• Moving mouse causes page to crash because the parentElement is null.
• Selecting multiple words ends at the second-to-last word.
• Interaction with tooltips, and thus with highlights, extremely jank.

[cyrusae]

and (in [statementID].tsx)

document.addEventListener('selectionstart', () => {
     phrase.innerHTML = words;
     phrase.removeEventListener('pointerenter', () => {
      phrase.innerHTML += tooltip;
     });
    })