Show HN: A DOM text-selection highlight renderer

http://bowlingx.github.io/marklib/

by bowlingx • 11 years ago

93 42 11 years ago

bowlingx.github.io

bowlingx12• 11 years ago

I build a fast small text-selection renderer that creates serializable text-renderings. Feedback appreciated. Right now it lacks some documentation how to use it, but I hope the sample makes clear what the library does.

VeejayRampay2• 11 years ago

We were working on a Medium-style text editor for a while and text selection is notoriously hard. Things like https://github.com/timdown/rangy somehow made it more palatable but seriously, what a pain when you want to select something and apply DOM transformations to the underlying nodes.

Could a WYSIWYG text editor be based on your library or does it have a completely different target?

bowlingx12• 11 years ago

Thank you for the Feedback. The library only focuses on render a selection, either a serialized one (it's not yet shown in the demo) or a selection made by the user.

But of course you may use it with any other library :)

alfonsodev• 11 years ago

Thanks for sharing this. Great work!. I was wondering if it would mark a second time and third and I could test it in the small demo. It meet my expectations :) Great work!

Two humble suggestions: - the glare effect in the text "Damn fast easy marking with serializable selections" made me think for a sec that this library was about different thing that I though. I'd remove that effect and mark the word "marking" in that text, so the slogan it's already a demo.

- If the library support marking in different colors show it in the demo would be awesome. or maybe in different advanced demo

bowlingx12• 11 years ago

Thank you :). Good point, I just thought it looks nice (works not in firefox though :/). Of course other colors would be possible, it's just a class that's applied on the wrapping elements. I will continue to develop the library and create more examples and use cases!

lepunk• 11 years ago

Well done! I know it is not an easy task to do. I built something fairly similar (and way less quick) http://jsfiddle.net/2XLBr/ and the git repo: https://github.com/skimhub/phone-highlight

mparramon• 11 years ago

This is a case of Something.js if I've ever seen one:

http://www.developingandstuff.com/2015/03/somethingjs.html

Gigablah• 11 years ago

One, it doesn't have ".js" in the title. Two, it's a Show HN post.

pimlottc• 11 years ago

I get inconsistent results when I triple-click to create the selection. For example, triple-clicking the word "Start" in the first paragraph highlights the entire first line, extending to the right margin; hitting enter to "mark" it results in the entire paragraph being marked. Triple-clicking the first word "Marklib" in the next sentence highlights the remaining three sentences, but only "Marklib" is marked.

Also, any marking in the "code block" or the page title omits the spaces, which looks a little awkward.

Running Chrome 43.0.2357.124 on OS X

thomasfoster96• 11 years ago

Well done - works surprisingly well on my iPhone. Working with text selection in the browser is notoriously difficult so I'm glad this works.

notNow• 11 years ago

At the risk of sounding a bit grumpy but I'm genuine here, I seriously don't get this tool. Is not the same thing as getSelection() with a CSS background-color cherry on the top or I'm missing something here?

gkop• 11 years ago

You definitely want to use a library that wraps getSelection() and evens out cross-browser inconsistencies.

bowlingx12• 11 years ago

marklib helps you persisting selections a user did by providing rendering and serialization of selections.

WaltPurvis2• 11 years ago

I'll volunteer to display my total ignorance: I have no idea what you mean when you say "rendering and serialization of selections" or why and how that is useful. Could you elaborate and give some good scenarios in which it (whatever it is) would be useful? I think this could be cool, but I don't understand.

pknight2• 11 years ago

Did you take inspiration from Rangy (https://github.com/timdown/rangy) and if yes, what makes Marklib better? Would like to know if there are obvious benefits to using Marklib over Rangy.

bowlingx12• 11 years ago

Hi :), marklib focuses on rendering and persisting (serializing) the selection, not on actually providing a cross-browser functionality to get the selection.

marklib is especially useful and build for rendering incremental persisted selections and/or adding selections when other selections are already rendered (and though have modified the DOM). This is something rangy does not provide (at least that's my last information).

pknight2• 11 years ago

very nice!

agrothberg• 11 years ago

Might be worth adding this to adding these notes to the README.

user3885• 11 years ago

There is also https://github.com/SmartTeleMax/MaSha MaSha has ajax support. But no library supports multiple colors :(

tauchunfall• 11 years ago

Thanks a thousand for posting about marklib (and rangy, and phone-highlight).

lgas• 11 years ago

Seems like a good candidate for a bookmarklet that injects it into any page.

christiangenco2• 11 years ago

My thoughts exactly. This should be a chrome plugin.

Flenser• 11 years ago

http://www.getpoint.co/

dfar12• 11 years ago

I noticed that you can mark an already marked section, which adds the marked color on top again, and again and again until you can't tell anymore because alpha = 100.

bowlingx12• 11 years ago

yes, thats correct, I just specified colors for 4 overlappings. This is just made with css, you can specify the level how deep you want.

dfar12• 11 years ago

Oops... I guessed wrong. It's a nice option to be able to define different colors for each level. Great work.

wdewind• 11 years ago

This is really nice work! I think I've found a bug where the highlight doesn't fully mark the part I've selected, though. To reproduce scroll down to the section "A second paragraph with some latin like text" and select that header, the entire paragraph, and up to the button below it. Then press enter. Only the header is highlighted.

bowlingx12• 11 years ago

Hey, thank you for your feedback. Yeah, that are some problems with the selection that comes back (no textnode comes back but properly the body or something else). I have no solution for this so far but I will figure something out ;). thanks!

baby2• 11 years ago

There is a weird behavior when you highlight something that has partially already been highlighted. I think you should take a look at how `preview` on osx does it. It cancels the already highlighted parts only if they are included in the new highlighted area. If an already highlighted part cross with the new highlighted area, then it will behave like it is behaving in your script.

bowlingx12• 11 years ago

Thank you for your feedback. What do you mean with cancel? The script will render all selections without doing any assumptions about previous renderings and nests them. Can you give an example?

thank you :)

baby2• 11 years ago

do you have osx? that would be easier for you to open a pdf and see how that highlight thing works.

I'll try to explain it again giving another example:

if you highlight a word, and then you highlight the entire sentence containing that world, with your script it will highlight the word with a different color, with osx it will display like you didn't highlight the word prior to this

your behavior only happens when two highlighted segments cross over, but none of them contain the other.

kevin• 11 years ago

This is really great. I think we're going to use this for helping us highlight parts of the YC application that sticks out to the partners. Very interesting to see that what you actually store in local storage.

[{"startOffset":35,"endOffset":42,"startContainerPath":"html>body>div:nth-of-type(1)>div>p:nth-of-type(1);0","endContainerPath":"html>body>div:nth-of-type(1)>div>p:nth-of-type(1);0"},{"startOffset":32,"endOffset":7,"startContainerPath":"html>body>div:nth-of-type(1)>div>p:nth-of-type(1);10","endContainerPath":"html>body>div:nth-of-type(1)>div>p:nth-of-type(1)>code:nth-of-type(3);0"}]

One thing I think we might tweak for ourselves is to also store a copy of the string in there.

Thank you so much for sharing! I bet people would love an example showing how to use this to sync highlighted examples across user accounts. Hopefully, someone will do a Show HN of that!

callmevlad• 11 years ago

It seems like using a tree-index based path, this serialization format would only work with purely static content. If you have a change to the underlying content (e.g. adding a new paragraph before a selection), there doesn't seem to be enough information in the serialized path to select the right part of the page.

bowlingx12• 11 years ago

That's correct. But it is possible to specify a context container where the highlighting is executed so if you change parts of the document (like around this container) it doesn't change the relative path.

Example:

<html>

<body>

  <p>...</p>

</article>

</body>

</html>

If you add or change words and paragraphs of course, that would make the highlighting unstable. You could also restrict the marking to a specific paragraph only (and set the context accordingly). It always depends on the application this library is used for. But if anyone has a good idea how to compensate that I'm open for suggestions :)

Thank you for your feedback.

sandaru1• 11 years ago

Is there a good library that does the same inside a textarea?

Show HN: A DOM text-selection highlight renderer

Related Stories