Sometimes text highlighting extends to the bottom of the page when reloading.

[DemonQilin]

• I have searched open and closed issues and pull requests for duplicates, using these search terms:
  • highlight
  • invalid
  • broken
• I have checked the latest main branch to see if this has already been fixed, in this file:
  • utils.ts

Description of the problem:

Sometimes when highlighting text and reloading the page, the target text is no longer highlighted but instead all text following it is highlighted to the end.

I don't have a clear individual replication path, but I copied my highlights from the localStorage to Chrome, Firefox and Edge and in all of them the same error happened.

By having the highlights and visiting the following sections:

• https://rust-book.cs.brown.edu/ch09-02-recoverable-errors-with-result.html
• https://rust-book.cs.brown.edu/ch10-02-traits.html
• https://rust-book.cs.brown.edu/ch10-03-lifetime-syntax.html
• https://rust-book.cs.brown.edu/ch13-01-closures.html
• https://rust-book.cs.brown.edu/ch14-02-publishing-to-crates-io.html

The pages look like this:

And the following error appears in the console:

Suggested fix:

I have identified that the error occurs within the highlightIsValid function of the utils.ts file on line 67, where the innerHTML of the first element of the dom_nodes array is readed but this array is empty because the validation of line 64 uses the statement if (!dom_nodes) return false; which only validates that it is not falsy but not its length.

Therefore it should be corrected by replacing this validation with:

export const highlightIsValid = (highlighter: Highlighter, highlight: HighlightSource) => {
  /*other code*/

  // if highlight has no DOM node, filter
  if (!dom_node?.length) return false;
};

[willcrichton]

This will be fixed in #117. Thanks for finding the issue!