Tags are overlapping (going inside another tags) in Tinymce

by

We are using Tinymce 5.6.2 in our project and facing really weird issue. We have two custom buttons and when you click on them they add some HTML (for example span tags). So to reproduce the issue, first click on Button1 this will insert below HTML into editor window:

<p><span class="container1"><span class="icon1">1</span>[[Test One]]</span></p>

enter image description here

Now press Home button from keyboard or use arrow keys and go to left most of the editor window i.e. just before newly added content. See highlighted cursor position in below image:
enter image description here

Now click on Button2 and that will insert another HTML. Technically it should insert new HTML before Button1 content because we have shifted our cursor to beginning of editor window and before Button1 content but when you see code of editor window, you find second set of HTML elements got inserted into Button1’s HTML. See below image:
enter image description here

I’ve created a fiddle to reproduce this issue: https://fiddle.tiny.cloud/f5haab/3

Anyone has any idea why it’s happening and how to resolve this issue?

146 thoughts on “Tags are overlapping (going inside another tags) in Tinymce”