Hacker News Reader

Comment by VeejayRampay | Hacker News Reader

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?

View on HN

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.

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.

That was a huge problem to overcome when I was working on the new email designer for ActiveCampaign. Rangy had issues, because it wouldn't select ["empty" elements](https://developer.mozilla.org/en-US/docs/Glossary/Empty_elem...).

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.

Reply on news.ycombinator.com