CKEditor 5 updated to version 39, now supports empty inline elements, for inline icons such as Fontawesome

A relatively widespread practice is for (Drupal and non-Drupal) sites to use inline icons, typically through icon fonts such as Font Awesome (for Drupal: https://www.drupal.org/project/fontawesome).

This requires markup like <i class="fa-brands fa-drupal"></i> to print a Drupal logo or <i class="fab fa-drupal"></i> to print a Druplicon. A similar tactic is often used for custom inline icons, for example <span class="icon my-icon"></span> My text.

Every release of CKEditor 5 (until now!) strips ⚠️ empty inline elements, even if you've listed them as "Manually editable HTML tags" under "Source editing". It even does so in the Full HTML text format (or equivalent text formats). This was a critical data loss bug.

That's why Drupal 10.1.3 exceptionally is upgrading from CKEditor 38.1.0 to 39.0.0 — a major release bump. That being said, the major breaking change in this release does not affect Drupal at all, so as far as the Drupal ecosystem is concerned, this can be considered a minor release.

This unblocks another ~10% of Drupal 8/9/10 sites to upgrade from CKEditor 4 to 5! 🚀

Detail

CKEditor 5 fundamentally did not support empty inline elements.

CKEditor 4 in fact also did not support this! But it allowed a small piece of code to be added to enable this, for example the Drupal fontawesome module does this:

// Allow empty tags in the CKEditor since Font Awesome requires them.
  if ('editor' in drupalSettings && 'fontawesome' in drupalSettings.editor) {
    $.each(drupalSettings.editor.fontawesome.allowedEmptyTags, (_, tag) => {
      CKEDITOR.dtd.$removeEmpty[tag] = 0;
    });
  }

CKEditor 5 39 added support for this, which fixes one of the last prioritized upstream blockers (since this was a critical data loss bug preventing sites upgrading from CKEditor 4 to 5).