Unordered list wraps the first parent HTML element if you remove the list and add it again

[ivansoares90]

Expected behavior.

Unordered list should always wrap marked HTML elements only.

Actual behavior.

Unordered list wraps the first parent HTML element if you remove the unordered list and add it again.

Steps to reproduce the problem.

1. Add an element with text to the froala editor
2. Mark the element as an unordered list item
3. Remove the unordered list
4. Add the unordered list again

Editor version.

v3.2.5-2

OS.

Ubuntu 18.04.4 LTS

Browser.

Chrome Version 87.0.4280.88 (Official Build) (64-bit)

Recording.

https://user-images.githubusercontent.com/54924440/105222557-6aeb4880-5b39-11eb-927c-67eda5b08583.mp4

In our use case we have <div contenteditable="false"><div contenteditable="true">text here</div></div> and the issue with the bullet becomes quite problematic as the div with contenteditable=true becomes wrapped in the <ul><li> when it's parent shouldn't be editable.

[SandeepJoel]

During the unformatting of a list element(like ul tag) when it is inside an parent wrapper (like div tag), the conversion of the li element back to set default tag is not happening properly, hence thereby causing these inconsistencies.

Can we get any update on this ? @stefanneculai

[izhylenko]

It seems like <li> tag content becomes wrapped in <p> ONLY if you 'unformat' list inside the <div> container. Any other container (e.g. <aside>, <article> etc) breaks this logics, so the text within <li> tags becomes unwraped in the container and next time you tap format this text as a list, Froala will convert a parent element to <ul> instead of this specific element.

As an example you can use this layout

<div>
   <ul>
     <li>Element 1</li>
     <li>Element 2</li>
   </ul>
</div>

Froala will correctly transform it to the following layout if you click on the Bullet list button with cursor on the second element.

<div>
   <ul>
     <li>Element 1</li>
   </ul>
   <p>Element 2</p>
</div>

While if you change <div> to <aside> in the initial piece of html, the result of 'unformatiing' Element 2 item will be following

<aside>
   <ul>
     <li>Element 1</li>
   </ul>Element 2
</aside>

And next time you click format a text as a bullet list it will format a parent aside element as a list item.

Really needs to be fixed asap.