mir3z / texthighlighter Goto Github PK

I am trying to use your library, so first of all thanks for the awesome resource.

Can you guide me how to create a another demo on which the highlights are created after a user clicks on a button.

A selection is not automatically converted into a highlight. And there is no sandbox on the page

/**
* Highlights range.
* Wraps text of given range object in wrapper element.
* @param {Range} range
* @param {HTMLElement} wrapper
* @returns {Array} - array of created highlights.
* @memberof TextHighlighter
*/
TextHighlighter.prototype.highlightRangefunction(range, wrapper) {
....

• here if result.startContainer is undefined then we are getting "Cannot read property 'nodeType' of null" error.

Is it possible to prevent before merge two highlights?
I mean disable extending existing higlight when new higlight has common part with existing one.

It would be awesome to disable overlapping selections 👍

In jquery.textHighlighter.js Line 415, the use of innerText returns null (tested on Firefox 21). It seems that $(hightlight).text() should be used.

Hello,
is there any possibility to create demo with .destroy() method?

I tried to initialize the plug in on click and I would like to have off button to switch it off,
so I tried destroy() method, but it did not stop highlighting. Once I switch it on,
I cannot switch it off. I would like to have it like "higlight pen" button on my page and when you select
this tool you can highlight text. If you switch it of, it should not highlight anymore until you selet the tool again.

example:

Thanks for the details!

(Rough) Steps to reproduce (variations on these will consistently reproduce the issue; reproduction may be possible other ways as well):

1. Highlight a string1 of text with any color1, but leave some unhighlighted on one side

                                 \1/ (original endpoint of color1)
   <color1>a b c d e f g h i j k l </color1>m n o p
   

2. With a different color2, highlight a string2 of text overlapping with string1 on one end (not inside string1)

                 \2/ (original start of color2)   \1/
   <color1>a b c d </color1><color2>e f g h i j k l m n o p</color2>
   

3. With a third color3, highlight a string3, which has one endpoint in each string1 and string2

                 \2/ (startpoint of color2)                        \1/
   <color1>a b c d </color1><color3>e f g h i j k </color3><color2>l m n o p</color2>
   

4. (most consistent method I've found) With transparent color (eraser), click on the section that is still color2

                 \2/ (startpoint of color2)       \1/   \/ click here
   <color1>a b c d </color1><color3>e f g h i j k </color3><color2>l m n o p</color2>
   

A seemingly-random portion of text is deleted.

Is it possible to extend the API to support removing a single highlight? If I remove a highlight in an element with multiple highlights, it does not work properly because the paths are no longer correct.

I am changing the colorpicker.js array of three color , its got affected of three dots but color is not picking from here at all it already set somewhere i am nor getting from where it is coming . please do the reply for assistance where should i change to change the color of backgrond of highlighted text?

Hi,
Is there a way to toggle hilighting events? to make a button On/Off (or select/deselect a color) the behavior.
Thanks

If I highlight first word in other highlighted text, then this word moved to the end of parent highlighting.

Like this:
allows you to highlight text on web pages*TextHighlighter*. Just select it!

It's happened because .insertBefore(el, null) behaves like .appendChild(el)

I may have finished porting this to typescript. seems to be working for me. I'll see if I can make an npm model. I made them all static functions rather than full class. you pass in the body object to get it to work

Steps to reproduce:

1. Given string "Lorem ipsum", highlight "Lorem"
2. Highlight "ipsum" using same color
3. Highlight "Lorem ipsum"

The space is not highlighted and therefore the highlights are not merged. Removing the regex check seems to solve this: https://github.com/mir3z/jquery.texthighlighter/blob/master/src/jquery.textHighlighter.js#L193

Was there another reason for this test? Given the node type has already been verified as text, wouldn't node.nodeValue always be a string?

@mir3z Could you please explain why this repository isn't maintained anymore?

I downloaded but its not highlighting in iframe , its showing well in server but not running in local

In Safari on iPad it only lets me select one word at a time.

The tool doesn't seem to work anymore since I updated to Safari 7.0.1 (possibly 7.0 as well) on mac.

hey @mir3z ! This is a really great util! I have a question that (I hope) is pretty straight forward. I have an application where I am saving user highlights by serializing. When they come back to the page, I want the (old) highlights to load automatically. I also have a collaborative function that has users working together, and I am able to send the serialized highlights from one browser to the other in real time. What function do I hand (any highlight / range) to in order for the highlight to show up colored on the screen? Many thanks!

Hi ,
i have a question:
i have a DB in server and in want to save selected text into Table.
how can i do that?

Tnx
Vahid

How it appears: for example lets take sentence "Text above inner"

1. select "above"
2. change color and select the right part of sentence "e inner"
3. select the right part of sentence "Text a"

As a result the text is corrupted and looks like "Text bovae inner" (see attached image)

I am trying to unhighlight the highlight by sending the rangy object but it gives error
Cannot read property 'nodeType' of undefined

i am calling unhighlight method by following syntax
hltr.removeHighlights('{"w":"<span class="highlighted" data-timestamp="1522665031488" style="background-color: rgb(255, 255, 123);" data-highlighted="true">","p":"ipsum","r":"3:1","s":27,"t":5}');

I'm trying to unmark a single selection but removeHighlights removes all the highlights.

The deserialization code fails to work in all cases. Here is an example taken from
http://mir3z.github.io/texthighlighter/demos/serialization.html
The following serialization string that the code puts into the console, when de-serialized, doesn't fully deserialize all the highlights and also throws some errors.

In the case below note that the third highlight (of the word "Donec") doesn't get highilghted on deserializing.

[["<span class=\"highlighted\" data-timestamp=\"1437222899270\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>"," ac ","7:3",0,4],["<span class=\"highlighted\" data-timestamp=\"1437222885083\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>","ipsum","3:1",27,5],["<span class=\"highlighted\" data-timestamp=\"1437222886941\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>","Donec","3:5",18,5],["<span class=\"highlighted\" data-timestamp=\"1437222897406\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>","ellentesque leo nulla, porta non lectus eu, ullamcorper semper est. Nunc ","3:9",188,73],["<span class=\"highlighted\" data-timestamp=\"1437222903031\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>","Sed ut pretium leo, quis vehicula diam. Proin nisi metus, elementum ut mi port","13:1",148,78],["<span class=\"highlighted\" data-timestamp=\"1437222897406\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>","\n                    risus vel","3:11",0,30],["<span class=\"highlighted\" data-timestamp=\"1437222899270\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>","suada auctor. Ut ","7:1",140,17],["<span class=\"highlighted\" data-timestamp=\"1437222901358\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>"," ante eu mollis. In nec\n                    dui vel mauris lacinia vulputate id nec turpis. Aliquam vestibulum, elit sit amet fringilla\n                    malesuada, quam nunc eleifend nunc, id iaculis est neque pretium libero.\n                ","9:3",0,245],["<span class=\"highlighted\" data-timestamp=\"1437222886052\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>","consectetur","3:3",17,11],["<span class=\"highlighted\" data-timestamp=\"1437222901358\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>","attis tellus. Fusce orci nisi,\n                    ultricies vel hendrerit id, egestas id turpis. Proin cursus diam tortor, sed ullamcorper eros commodo\n                    vitae. Aenean et maximus sapien. Nam felis velit, ullamcorper eu turpis ut, hendrerit accumsan augue.\n                    Nulla et purus sem. Ut at hendrerit purus. ","9:1",213,338],["<span class=\"highlighted\" data-timestamp=\"1437222904383\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>","ntum vitae\n                    lectus. Phasellus ut purus commodo ante iaculis molestie. Integer turpis felis, pellentesque eu\n                    dignissim vel, sodales vel metus. Aliquam tempus lorem odio. Sed purus arcu, auctor eget sodales\n                    ac, venenatis ac velit. Pra","17:1",222,291],["<span class=\"highlighted\" data-timestamp=\"1437222901358\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>","Phasellus mollis commodo","9:2:0",0,24],["<span class=\"highlighted\" data-timestamp=\"1437222899270\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>","egestas elit","7:2:0",0,12],["<span class=\"highlighted\" data-timestamp=\"1437222897406\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>","convallis","3:10:0",0,9],["<span class=\"highlighted\" data-timestamp=\"1437222901358\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>","First Name","11:1:1:1:0",0,10],["<span class=\"highlighted\" data-timestamp=\"1437222901358\" style=\"background-color: rgb(255, 255, 123);\" data-highlighted=\"true\"></span>","Last Name","11:1:1:3:0",0,9]]

Here's one of the errors it adds into the console:

"Can't deserialize highlight descriptor. Cause: IndexSizeError: Failed to execute 'splitText' on 'Text': The offset 188 is larger than the Text node's length."

I use this library in a project, and like it very much, but this bug affects my project quite frequently. I've attempted to figure out why the deserialization code has this problem, but haven't been able to, any help you can offer would be greatly appreciated. If you need more sample cases, I'm happy to provide.

Steps to reproduce (with some pseudo-ML of current functionality):

1. Highlight a string with any color1. Result:

   <color1>This is now highlighted<color1>
   

2. With a different color2, highlight a substring1 of string. Result:

   <color1>This <color2>is now</color2> highlighted</color1>
   

3. With color1, highlight a different substring2; it may overlap with substring1 as long as one endpoint of substring2 is outside substring1. The entire string is returned to color 1. Result:

   <color1>This is now highlighted</color1>
   

This doesn't seem like the intended functionality. Is it? If not, it could be fixed:

Case 1: If substring2 does not overlap with substring1, do nothing (since it's highlighting the whole string redundantly with color1.

Case 2: If substring2 completely contains substring1, replace the node substring1 with its innerHTML (or text(), if more appropriate), deleting it as a child node, and making its content directly part of string.

Case 3: If substring2 does overlap with substring1, "push" the beginning of substring1 to only include the portion that was not highlighted with color1. To visualize, here's some pseudo-ML of fixed functionality:

1. Highlight string with color1. Result:

   <color1>This is now highlighted<color1>
   

2. Highlight substring1 ("is now") with color2. Result:

   <color1>This <color2>is now</color2> highlighted</color1>
   

3. Highlight substring2 ("now highlighted") with color1. Result (either of these work, but it depends how much parent/child relationship you want to keep):

   <color1>This <color2>is </color2>now highlighted</color1>, or
   <color1>This </color1><color2>is </color2><color1>now highlighted</color1>
   

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!

Is this project going to support restoring highlights after page reloaded?

We are getting many issues at this method.
JS console throwing - Cannot read property 'insertBefore' of null at this method.

can you please handle this error?

/**
* Inserts base element before refEl.
* @param {Node} refEl - node before which base element will be inserted
* @returns {Node} - inserted element
*/
insertBefore: function(refEl) {
return refEl.parentNode.insertBefore(el, refEl);
},

Regards,
Praveen Danagoudra