texthighlighter icon indicating copy to clipboard operation
texthighlighter copied to clipboard

bug: Overlapping highlights cause text to be switched around.

Open fzzylogic opened this issue 9 years ago • 6 comments

Here's a bug i noticed.

  1. In the simple demo, highlight the "Lorem ipsum" header.
  2. 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!

fzzylogic avatar Sep 17 '16 08:09 fzzylogic

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

Doyel avatar Nov 26 '16 04:11 Doyel

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.

fzzylogic avatar Nov 26 '16 10:11 fzzylogic

Hi,

Anyone found a solution for this?

Kind regards

Fr3z avatar Jun 21 '17 11:06 Fr3z

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.

fzzylogic avatar Jun 21 '17 14:06 fzzylogic

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

Doyel avatar Jun 21 '17 18:06 Doyel

Works great, thanks for sharing!

fzzylogic avatar Jun 23 '17 00:06 fzzylogic