Dotted underline on demo gets cut off when backspacing

[1j01]

If you make a newline in the middle of the dotted underline on the demo and then backspace, the underline gets removed from the second part of the text.

[nmielnik]

The dotted underline is actually added via some custom css just for the demo which is tied to a <span> with a class name. When the newline is added, it splits up that <span> and the css is no longer applied to the newly created element.

Maybe the css could be updated to not show up once someone starts editing...

[1j01]

It's lost when joining lines, not splitting. But you can do whatever you want.

[nmielnik]

Yes, you're right. In Chrome, it looks like the css class is actually copied over to the newly created <span> within a new <p> whenever you insert the newline (so the underline shows up when it's split)

But then when you backspace and the contents of the two <p> are merged, only one of the two <span>s still have the class, the other has some inline styles added as well.

The issue also happens in Safari, but it doesn't appear to happen in Firefox or IE (in those browsers, when you backspace, the dotted underline remains).

Also, while I was playing around with it in Safari, it seems like something with spellcheck was firing and changing the text depending on where I inserted the newline:

Before:

After:

You can see it converted 'highli' into 'highly' just by adding a newline (no spellcheck prompt or anything).

So yeah, looks like there are some issues that could be fixed here, especially around the css-based styling (the dotted underline) clashing a bit with how the browser is handling styling of the text and merging elements together.