CKEditor embedded media previews do not render with attached assets

It is actually insane that there's literally no way to tell if the media item is being rendered inside CKEditor.

This does not work:

function mymodule_support_preprocess_media(&$variables) {
  if (\Drupal::service('router.admin_context')->isAdminRoute()) {
    // Even inside the editor, the media item isn't in an admin route.
  }

  if (\Drupal::routeMatch()->getRouteName() === 'media.filter.preview') {
    // It's only a preview when you first embed it, but on edit it's just part of the content!
  }
}

This is the ridiculous thing I had to do in order to allow clicking on a media item so you can adjust display mode etc:

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 can't imagine what other media embeds will need to go through to suppress behavior.

In our special use case we add to load some JS after a custom web component was displayed as a media.

We wrote a Javascript MutationObserver to detect the addition to the page of our custom element and load the related javascript library.

Here is an quick and dirty piece of code for those interested:

jQuery(document).ready(function() {
	// Function to remove specific attribute
	function initImageComparisonSlider(mutationsList, observer) {
		mutationsList.forEach(mutation => {
			// Check if nodes are added
			if (mutation.type === 'childList') {
				// Iterate through added nodes
				mutation.addedNodes.forEach(node => {
					// Check if the node is an element of type DIV
					if ((node.nodeType === 1) && (node.tagName === "DIV")) {
						var article = node.children[0];
						// Check if the node is an element of type ARTICLE
						if (article.tagName === "ARTICLE") {
							var ics = article.children[1];
							// Check if the node is an element of type IMG-COMPARISON-SLIDER
							if (ics.tagName === "IMG-COMPARISON-SLIDER") {
								once('ics-js-css', 'body').forEach(function (element) {
									let scriptEle = document.createElement("script");
									scriptEle.setAttribute("src", "https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/index.js");
									scriptEle.setAttribute("type", "text/javascript");
									scriptEle.setAttribute("async", "async");
									document.body.appendChild(scriptEle);
								});
							}
						}
          }
				});
			}
		});
	}
	
	// Create a new MutationObserver
	const observer = new MutationObserver(initImageComparisonSlider);
	
	// Define the target node to observe
	const targetNode = document.body;
	
	// Configuration of the observer
	const config = { childList: true, subtree: true };
	
	// Start observing the target node for configured mutations
	observer.observe(targetNode, config);
});

We used Asset Injector for our test, script was activated only on node/*/edit pages.