Bug with editable 'pre' tag on the IE 10

Question

I have found some strange behavior of IE 10. I guess it's bug, but I didn't found any description of it here or in the Google, so I am not such sure about it.

The deal is a problem with editable "pre" tag. Actually, there are two problems.

It's reproducible in JSFiddler on the IE10:

<pre contentEditable="true">
    some text, it's editable
    text  <label contentEditable="false">it's not!!! test</label>
    some text
</pre>

Here is a link with demo I recorded on the JSFiddler (i can't attach images due to low reputation, so I give you a link only).

Some description:

1. I can't add text to the end of the line. When I set a caret to the end and start typing something, text appears on the new line. I can't reproduce this on the other browsers (IE 8-9, 11 works fine). I don't know what the problem is. BUT when I modify text on the same line, but in the middle of line, after that - everything works perfect (as expected) and I can add text to end.
2. I can edit uneditable children block. As you can see on the demo, I can easily move cursor between first and second letter of uneditable block (and ONLY between them, I can't move forward) and change the text. And yes, it works fine in other browsers (I can't edit anything inside block).

Can anyone confirm that it's a bug or I'm just doing something wrong?

If anyone knows any workarounds, please share.

Answer 1

Thank you all for help!
I guess I figured it out.

Yes, it's a bug with IE10, contentEditable tag and line ending \n. If you have all of them, so when you go to the end of the line IE10 put cursor after \n symbol, and when you try to enter some text - it occurs on the begging of new line.
Moreover, when you see that cursor is in the end of the line or it's in the begging of the next line, IE10 doesn't see any difference (you can see it visual, but internally - no difference).

After few days investigation, I didn't find way to overcome this behavior (or way to differ these states).
So, I just replace all \n with <br />:

if (IE.isTheBrowser && IE.actualVersion === 10) {
    var newLineFix = new RegExp("\n", "g");
    s = s.replace(newLineFix, "<br />");
}

That's it! Bug doesn't occur anymore.

---

Second issue about editing uneditible children. I just write the following fix (occurs when user enter a symbol):

function getOldRange() {
    return document.selection.createRange();
}

function onKeyPress() {
    if (getOldRange()) {
        var oldRange = getOldRange();

        if (IE.isTheBrowser && IE.actualVersion === 10) {
            var parent = oldRange.parentElement();

            if (parent.getAttribute("contentEditable") === "false") {
                var newRange = document.createRange();
                newRange.setStartAfter(parent);
                newRange.setEndAfter(parent);

                var selection = getNewSelection();
                selection.removeAllRanges();
                selection.addRange(newRange);
            }
        }

        ...
    }
}

I know that it's a bit of messy code, but it works just perfect for me!

Hope it helps somebody.