Giters

jakiestfu / Medium.js

A tiny JavaScript library for making contenteditable beautiful (Like Medium's editor)

Home Page:http://jakiestfu.github.io/Medium.js/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Problem with inserting a span into another span (Rangy implementation issue?)

veseo opened this issue · comments

commented

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.