Problem with inserting a span into another span (Rangy implementation issue?)
veseo opened this issue · 0 comments
Hello,
we are trying to implement a rich-text editor, whose features include setting font-size of a selection. However, we encountered a strange behaviour of Rangy (not sure if it's actually a Rangy problem or a problem of its implementation by Medium.js?). Here's an example, to illustrate the problem:
Use http://pastebin.com/jSfpxmEq as a base, mark "Lorem ipsum" and click "Span 50" to change its font-size to 50px. Then, select part of that text (e.g. "em") and click "Span 11" to change only that selection's font-size to 11px. While the expected behaviour is that we get a nested span with the new value inside the parent span, i.e.
<span style="font-size: 50px" class="medium-span">Lor<span style="font-size: 11px" class="medium-span">em</span> ipsum</span>
we get three spans, all of which with the first entered value (in this case, 50px), i.e.:
<span style="font-size: 50px" class="medium-span">Lor</span><span style="font-size: 50px" class="">em</span><span style="font-size: 50px" class="medium-span"> ipsum</span>
Clicking again on the button (kinda) does it, even if with semantically invalid/strange results:
<span style="font-size: 50px" class="medium-span">Lor</span><span style="font-size: 50px" class=""><span style="font-size: 11px" class="medium-span">em</span></span><span style="font-size: 50px" class="medium-span"> ipsum</span>
I found a workaround for that issue, but seems a bit "nuclear" - rmoving the medium-* classes from the newly generated spans and then trying to create the new element returns the desired results (that's why I believe it might not be a Rangy bug?). However, I don't think that's the correct solution for that problem. Could you please fix that bug or at least redirect it to the Rangy devs, if it's a bug in their library.