Non editable elements don't work as soon as they are replaced by new non editable elements (even when identical)

What is the current behavior? Describe the bug

1. Enable the noneditable plugin
2. Enter the following HTML through the “source code” modal: <div id="non-editable-bug" class="mceNonEditable">Non editable bug</div>
3. TinyMCE shouldn’t allow to edit the “Non editable bug” text; which is expected
4. Now replace the entire <div> with the exact same contents using the following code:

   tinymce.activeEditor.dom.setOuterHTML(tinymce.activeEditor.dom.select('#non-editable-bug'), '<div id="non-editable-bug" class="mceNonEditable">Non editable bug</div>')
   

5. Note that it now allows the “Non editable bug” text to be edited, which means the <div> is no longer non editable

What is the expected behavior?

The “Non editable bug” text given in the above steps shouldn’t be allowed to edit after replacement since the mceNonEditable class is still present.

Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE?

The issue is observed on TinyMCE v5.2.1 on Edge. Didn’t check it on other browsers and for previous versions. But I’m happy to do so if required.

Additional notes

The issue doesn’t occur and it works as expected when the entire container element having the mceNonEditable class is not replaced but only the contents inside are replaced. That is:

tinymce.activeEditor.dom.setHTML(tinymce.activeEditor.dom.select('#non-editable-bug'), 'Non editable bug')

[ashfordneil]

I made this fiddle to try to reproduce the bug. I can reproduce it on Tiny 5.2.1, but by the looks of things it’s something we fixed with the 5.3 release. Have a play with the fiddle on the latest stable release (which is 5.7 at the moment), and if you can find a way to reproduce the bug still then let us know.

[radiantshaw]

Thank you so much for providing the solution so quickly, @ashfordneil. It’s working properly on the fiddle you provided. I need to check if it works in our app though. I’ll revert accordingly when I get the chance.

BTW, if anyone from the future is wondering how to make it work in the versions before 5.3, you can add the contenteditable="false" attribute manually to the element you’re trying to insert. As such:

tinymce.activeEditor.selection.setContent('<div id="non-editable-bug" contenteditable="false">Non editable bug</div>')

And yes, if you’re adding the contenteditable attribute manually, then you don’t need to add the mceNonEditable class.