[upstream] CKEditor 5 Restructures And Removes Inline HTML Tags

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(?).

@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.

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>).

Regarding this issue, I found that there was no easy way to "fix" the problem. As this is not an issue in the first place. Meaning, that CKEditor 5 was altering the HTML code because the code itself was wrong (obviously). So, I updated the structure of the DOM via code using an update hook to queue all nodes where I needed my DOM processing to take place and then created a QueueWorker to process the DOM.
Here is a gist of how the work has been done. Please note that I have targetted only those nodes using some specific paragraph components as the DOM alteration was taking place in those nodes containing some specific components.
Update Hook -

/**
 * Implements hook_update_N().
 *
 * CKEditor 5 Components Update.
 */
function ckeditor_5_update_9250() {
  $node_data = \Drupal::entityTypeManager()->getStorage('node');
  $paragraph_data = \Drupal::entityTypeManager()->getStorage('paragraph');
  // Components Array.
  $components_array = [
    'lorem_ipsum_component_name',
    'lorem_ipsum_component_name_1',
    'lorem_ipsum_component_name_2',
  ];
  // Get Field Map For Entity Reference Revisions.
  $paragraph_bundles = \Drupal::service('entity_field.manager')->getFieldMapByFieldType('entity_reference_revisions');
  $nodes = [];
  if ($paragraph_bundles) {
    foreach ($paragraph_bundles as $index => $paragraph_field) {
      // Check If The Bundle Is For Nodes.
      if ($index == 'node') {
        foreach ($paragraph_field as $field_name => $field_info) {
          $paragraph_field_load = FieldStorageConfig::loadByName('node', $field_name);
          // Check If The Field's Target type Is Paragraph.
          if ($paragraph_field_load->getSettings()['target_type'] == 'paragraph') {
            foreach ($components_array as $component_name) {
              $paragraph_load = $paragraph_data->loadByProperties(['type' => $component_name]);
              foreach ($paragraph_load as $paragraph_id => $paragraph) {
                // Check If Nodes Use The Components.
                if (count($node_data->loadByProperties([$field_name => $paragraph_id]))) {
                  $paragraph_bundle = $paragraph->bundle();
                  $nodes[$paragraph_bundle][] = $node_data->loadByProperties([$field_name => $paragraph_id]);
                }
              }
            }
          }
        }
      }
    }
  }
  // If There Are Nodes Associated With Components.
  if ($nodes) {
    // Array To Store Nodes' Group With More Than One Element In A Separate
    // Index.
    $excess_nodes = [];
    foreach ($nodes as $component => $nodes_group) {
      foreach ($nodes_group as $node_group) {
        // Check If The Array Group Has More Than One Element.
        if (count($node_group) > 1) {
          foreach ($node_group as $node) {
            $excess_nodes[$component][] = [$node];
          }
        }
        else {
          $excess_nodes[$component][] = $nodes_group;
        }
      }
      $nodes = $excess_nodes;
    }
    // Remove Duplicate Nodes, And Store Unique Nodes In A Separate Array.
    $unique_nodes = [];
    foreach ($nodes as $component => $unique_node_group) {
      foreach ($unique_node_group as $node) {
        $unique_nodes[$component] = array_values(array_map('unserialize', array_unique(array_map('serialize', $node))));
      }
    }
    /** @var \Drupal\Core\Queue\QueueInterface $queue */
    $queue = \Drupal::service('queue')->get('ckeditor5_components_update');
    foreach ($unique_nodes as $component => $node_group) {
      foreach ($node_group as $node) {
        $item = new \stdClass();
        $item->nodes = $node;
        $item->components = $component;
        $queue->createItem($item);
      }
    }
  }
}

QueueWorker -

public function processItem($data) {
    $nodes = (array) $data->nodes;
    $node = reset($nodes);
    $node_id = $node->id();
    $referenced_entities = $node->referencedEntities();
    foreach ($referenced_entities as $field) {
      if ($field instanceof Paragraph) {
        $fields = [
          'field_html_section',
          'field_html',
        ];
        $paragraph_id = $field->bundle();
        foreach ($fields as $main_html_field) {
          if ($field->hasField($main_html_field) && $field->get($main_html_field)->value) {
            $html_value = $field->get($main_html_field)->value;
            $html_value = mb_convert_encoding($html_value, 'HTML-ENTITIES', 'UTF-8');
            $dom = new \DOMDocument();
            $dom->loadHTML($html_value, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
         }
       }
     }
   }
  }

Then, in the QueueWorker, used switch-case to target each paragraph and its corresponding DOM processing.
Hope this helps someone :)