I am using Rangy to do some text highlighting. The user selects a bit of text, clicks a button, and the text is highlighted using the Rangy highlighter module. I am also allowing the user to search for pieces of text, search results are again highlighted using the same highlighter module. However, for search results I use a different class.
The problem I am having with this is when I search for a piece of text that is contained within a highlight. Rangy is being too clever for my liking and is merging what I want to be two spans with different classes, into a single span with multiple classes. Although it looks fine, the problem comes from "clearing" the search results. This currently removes the overlapped highlight too.
In terms of resulting HTML, I currently have something like this:
<span class="highlight search">some text</span><span class="highlight"> and some more</span>
But what I want, is a span within a span result, like so:
<span class="highlight"><span class="search">some text</span> and some more</span>
Is there some setting I can use when creating the highlighter or css applier that will give me this result?
