Applying styles to non-editable elements incorrectly modifies inner content instead of wrapping them

[maksympetrenko]

We have a non-editable element like:

<span contenteditable="false" class="fr-deletable" custom-data="${data}">
  <span title="non-editable">
    Custom non-editable
  </span>
</span>

and it can be added to a editable area using a newly registered command (Froala.RegisterCommand('addNonEditable')).

Now we add only this one element to the Froala editor, highlight it, and apply a font size (or any other property that uses CSS styles).

Expected behavior

It should create a span wrapper around the non-editable element and apply the styles to that wrapper, like this:

<span styles="font-size: 18px;">
  <span contenteditable="false" class="fr-deletable" custom-data="${data}">
    <span title="non-editable">
      Custom non-editable
    </span>
  </span>
</span>

Actual behavior

Instead, it does not create a span wrapper. It simply finds the span inside the non-editable element and applies the styles to it:

  <span contenteditable="false" class="fr-deletable" custom-data="${data}">
    <span title="non-editable"  styles="font-size: 18px;">
      Custom non-editable
    </span>
  </span>

If we add two non-editable elements one after another, highlight both, and apply the font size, it behaves as follows:

  <span contenteditable="false" class="fr-deletable" custom-data="${data}">
    <span title="non-editable"  styles="font-size: 18px;">
      First custom non-editable
    </span>
  </span>
  <span styles="font-size: 18px;">
    <span contenteditable="false" class="fr-deletable" custom-data="${data}">
      <span title="non-editable">
        Second custom non-editable
      </span>
    </span>
  </span>

It changes the inner HTML of the first non-editable element but correctly adds a wrapper around the second.

Version of Froala editor

4.6.0