Tags are overlapping (going inside another tags) in Tinymce

Question

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>

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:

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:

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?

Answer 1

I got to know that this behavior is expected because many people uses spans for different types of formats such as colors, case, font-sizes etc. and want to be able to write in that same format the beginning and end of a word.

However if you don't want above behavior the you can use the noneditable plugin to protect your tag. See below fiddle for working example: https://fiddle.tiny.cloud/55haab/1

When I used this noneditable plugin I ran into another issue. Basically to use noneditable plugin we add "noneditable" in plugin in tinymce.init and use "mceNonEditable" class in elements. In my case when I try to apply this mentioned class I am getting JS error,

tinymce.min.js:9 Uncaught TypeError: Cannot read property 'class' of undefined

So, to solve this issue I apply this class using "extended_valid_elements" in tinymce.init:

extended_valid_elements: 'accessfilter[class=mceNonEditable]'