bug: Overlapping highlights cause text to be switched around.

mir3z / texthighlighter

-- NO LONGER MAINTAINED -- TextHighlighter allows you to highlight text on web pages.

http://mir3z.github.com/texthighlighter/

MIT License

230 stars 101 forks source link

bug: Overlapping highlights cause text to be switched around. #27

Open fzzylogic opened 7 years ago

fzzylogic commented 7 years ago

Here's a bug i noticed.

In the simple demo, highlight the "Lorem ipsum" header.
Select another color, and highlight from "Lorum" till halfway in "ipsum".

The letters in the header will be switched around, for example to "sumLorem ip"

This does not happen when doing the same with text within a paragraph.
It does happen when a highlighted selection spans paragraphs.

Btw, texthighlighter is great, thanks for making it available!

Doyel commented 7 years ago

Hi,

I have also come across the same bug. Have you figured out any solution to it? Or any work-around? Please let me know! I will love to learn about it, if there is any.

Saswati

fzzylogic commented 7 years ago

Don't know of a solution yet. Found another highlighter called rangy, not sure if it would help you. But i am still holding out for mir3z to get to this some time as i quite like this implementation. Maybe there's something in the forks.

Cool, i found a fork where this is fixed.

Edit: Sorry, it's not fixed there. A workaround may be to use the onBeforeHighlight callback to remove the underlying highlight first.

Fr3z commented 7 years ago

Hi,

Anyone found a solution for this?

Kind regards

fzzylogic commented 7 years ago

Not that i know of. When a range is highlighted, the onBeforeHighlight callback receives the range and gives you a chance to do stuff before highlighting happens. Haven't had a chance to look at this, but i suspect clearing any previously selected highlights at that point, by looping over each element in the range and passing it to removeHighlights(element), may resolve this. Please mention if that works for you. Not really a solution obviously. Tx.

Doyel commented 7 years ago

Hi,

I was able to make the code that fzzylogic had pointed to work for me, with some changes. I have attached the working version of the file below. The below file also includes a fix for a bug that failed to store highlights when multiple colors were used to highlight the same text overlapping with each other.

Please make sure to change the extension to "js" from "txt". GitHub was not allowing me to upload the file otherwise.

TextHighlighter.txt

fzzylogic commented 7 years ago

Works great, thanks for sharing!