[upstream] CKEditor 5 Restructures And Removes Inline HTML Tags

That markup looks like you're using https://www.drupal.org/project/fontawesome → . Are you?

See #3274028-8: CKEditor 5 compatibility → and #3274028-29: CKEditor 5 compatibility → .

Hi Wim, I am giving another example of the HTML DOM Restructuring which is not how I need it to be -
Input -
<div class="container"> <span class="icon"><a href="#" target="_blank"><em>SOMETHING</em></a></span></div>
Output -
<div class="container"><a href="#" target="_blank"><em><span class="icon">SOMETHING</span></em></a></div>
The main issue with this kind of restructuring is that it affects all the existing nodes the moment they are opened up in "/edit" and re-saved. I am currently backtracking on what happens when I click on the "Source" button. Maybe some .js file gets called which in turn filters out and restructures the DOM(?).

I can see how that's disruptive. But that sure looks like some pretty questionable HTML 😅 That makes this difficult to describe and report. Can you still reproduce this without the <em> too? Try to find the smallest possible pattern, and then verify that it works with multiple tag combinations. That'd help report this upstream, and would result in a higher priority upstream.

@Wim, I removed <em> from my DOM -

<div class="container">
<span>
<a href="#">Test</a>
</span>
</div>

It is getting changed into -

<div class="container">
    <a href="#"><span>Test</span></a><span>&nbsp;</span>
</div>

However, upon further testing, this is not the only instance where the DOM is getting changed. I am checking on a few more instances of HTML structure, where the DOM is getting changed. Will keep everything updated here.

Thanks!

Tested for these cases -
Input -
<a href="#">&nbsp;</a>
Output - Entire Thing Got Removed. However, if I enter <a href="#">Lorem Ipsum</a>, it works.
Another test case -
Input -

<a aria-label="Lorem Ipsum" class="lorem-ipsum-class" href="#" rel="noopener" target="_blank">
  <svg fill="none" height="18" viewbox="0 0 16 18" width="16" xmlns="http://www.w3.org/2000/svg">
    <path d="M1 2.6554C1 1.48814 2.27454 0.768165 3.27427 1.37068L13.8017 7.71531C14.7693 8.29848 14.7693 9.70157 13.8017 10.2847L3.27427 16.6294C2.27454 17.2319 1 16.5119 1 15.3447V2.6554Z"
      stroke="#14142B" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
  </svg>
  Watch
</a>

Output -

<a class="lorem-ipsum-class" href="#" aria-label="Lorem Ipsum" rel="noopener" target="_blank"><svg fill="none" height="18" viewBox="0 0 16 18" width="16" xmlns="http://www.w3.org/2000/svg">
    <path d="M1 2.6554C1 1.48814 2.27454 0.768165 3.27427 1.37068L13.8017 7.71531C14.7693 8.29848 14.7693 9.70157 13.8017 10.2847L3.27427 16.6294C2.27454 17.2319 1 16.5119 1 15.3447V2.6554Z" stroke="#14142B" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
  </svg></a>
<p>
    <a class="lorem-ipsum-class" href="#" aria-label="Lorem Ipsum" rel="noopener" target="_blank">&nbsp;Watch</a>
</p>

Here, the anchor tag that contains the main <svg><path></path></svg> is being copied after the main anchor tag, and put inside a paragraph (<p></p>).

That is related to the HTML normalization "feature" of CKeditor 5. See https://github.com/ckeditor/ckeditor5/issues/16203 for more examples.