Embed does not render in CKEditor 5

Just a followup. The embed is not displaying in CKEditor 5 appears to be because the actual module's lite_youtube_embedlibrary isn't loading when the CKEditor 5 media embed is added. The lite-youtube element is inserted, but without the JS/CSS it isn't obviously displaying anything. When I manually loaded the library on all pages in a quick custom module, the embed element does render.

Another issue is however that CKEditor 5 inserts the lite-youtube element in a figure tag that has display: table. That causes the sizing of the thumbnail to be tiny.

well, that's not really a CKE5 specific problem. This is a general problem with embedded media: see ✨ CKEditor embedded media previews do not render with attached assets Active and #3085273: [Meta] Preview embedded media / entities in ckeditor → . However I am not against including a workaround inside this module, as long as it's a quite elegant one

However I am not against including a workaround inside this module, as long as it's a quite elegant one.

For the library loading, one option would be create a simple CKEditor 5 plugin that loads the library when the media embed plugin is enabled. I think that can be achieved with a simple `lite_youtube_embed.ckeditor5.yml` file. Something like:

media_lite_youtube_embed:
  provider: media
  ckeditor5:
    plugins:
      - drupalMedia.DrupalMedia
  drupal:
    label: lite_youtube_embed
    library: lite_youtube_embed/lite_youtube_embed
    elements:
      - <lite-youtube>
      - <lite-youtube videoid playlabel params>
    conditions:
      filter: media_embed

The second issue with the figure tag with

display: table

might be more difficult...

would be great, if you could verify your proposed fix.. unfortunately I cannot use CKE5 (and therefore also D10) atm, as we use linkit module in all our projects, and it is lacking CKE5 support unfortunately. hope this will get fixed soon

would be great, if you could verify your proposed fix

Loading the library via a CKEditor5 yaml config file does appear to work. It doesn't solve the figure and display: table issue however.

The code here worked for me:
https://www.drupal.org/project/drupal/issues/3072317#comment-14926967 ✨ CKEditor embedded media previews do not render with attached assets Active

function mymodule_support_preprocess_page(&$variables) {
  if (\Drupal::service('router.admin_context')->isAdminRoute()) {
    $variables['#attached']['library'][] = 'mymodule_support/ckeditor5_fixes';
  }
}

document.body.addEventListener('click', (e) => {
  // Prevent opening colorbox images in the current tab while in the editor.
  if (e.target.parentElement.classList.contains('colorbox')) {
    e.preventDefault();
  }
});

I managed to solve it like this:

Creating a my_module.ckeditor5.yml (like #4):

# my_module/my_module.ckeditor5.yml
media_lite_youtube_embed:
  provider: media
  ckeditor5:
    plugins:
      - drupalMedia.DrupalMedia
  drupal:
    label: lite_youtube_embed
    library: lite_youtube_embed/lite_youtube_embed
    elements:
      - <lite-youtube>
      - <lite-youtube videoid playlabel params>
    conditions:
      filter: media_embed

add library and css in my_module:

// my_module/css/lite_youtube_embed.css
figure.drupal-media.ck-widget:has(lite-youtube) {
  display: block;
  float: none;
}
figure.drupal-media.ck-widget lite-youtube {
  min-height: var(--ck-min-height);
  aspect-ratio: 16 / 10;
}

then add a preprocess hook in my_module:

// my_module/my_module.module
/**
 * Implements hook_preprocess_page().
 */
function my_module_preprocess_page(&$variables) {
  // Embed does not render in CKEditor 5
  if (\Drupal::service('router.admin_context')->isAdminRoute()) {
    $variables['#attached']['library'][] = 'my_module/lite_youtube_embed';
  }
}