Why rangy always create new inline elements when the selection traverse multi inline elements

[ItsRyanWu]

For example:

<p>This is a <i>italic</i> word</p>

After I make a selection and use Rangy to handle it and it will be transformed like this:

<p>
    <span class="marked">This is a </span>
    <i><span class="marked">italic</span></i>
    <span class="marked">word</span>
</p>

But how can I config Rangy to transform the original HTML like this?

<p><span class="marked">This is a <i>italic</i> word</span></p>

And sometimes it expected to be a much more complicated result when I select incomplete words for example "This is a ita":

<p>
    <span class="marked">This is a <i>ita</i></span><i>lic</i> word
</p>

Did I miss some parameters to make Rangy preform like above? Actually, that's how Medium highlighter performs and I am making the same function now.

[ItsRyanWu]

I have already given up using Rangy to implement that function and was successful to realize it with native Range API

[pburrows]

I wonder if Rangy is even needed anymore. The native range APIs seem to have caught up long ago to the benefits Rangy delivered.