<ul> and <ol> elements are inserted before ui elements

[scofalik]

Assume this view state:

<ul>
  <li>Foo<span class="myUi"></span></li>
  <li>Bar</li>
</ul>

Now, a user indents second item. What happens then is:

1. <li>Bar</li> is extracted.
2. It is wrapped into <ul>.
3. It is inserted into view, inside "Foo" <li>.

Unfortunately it is inserted at wrong position. Lists have that characteristic, that in <li>, no other node should be after <ul> or <ol>. When insertion position is mapped from model to view, it is before Foo text node and <span> ui element. The result is this:

<ul>
  <li>
    Foo
    <ul>
      <li>Bar</li>
    </ul>
    <span class="myUi"></span>
  </li>
</ul>

This is a very different structure. Now ui element is not "after Foo" but "after Bar". Also, depending on CSS styles, it may display in a weird way.