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.
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?
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 :)
To be more precise, the biggest pain with selections I feel is that if you have a H1 (for example) containing some text and you select that text, the range will never report the H1 even though the user actually selected it. That makes it hard to go full WYSIWYG and you end up having to deal with parentNode and the likes.
I ended up rolling my own solution that worked for us, but one approach we tried out was looking at each selected element's parent. If the first and last element non-empty nodes in the parent were selected, then we also added the parent to the selection.
yeah, It will report the underlying textnode (if you are lucky). It's really inconsistent across browsers: some report the h1 tag, some the underlying node. Depends also how far you go and if you mark over the tag (without highlighting another node). Chrome is doing the best job in my experience.
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
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!
