[drupalMedia] When media is embedded in a view mode whose display is configured to link elsewhere, that link should not be clickable in CKEditor

I was about to create this issue, glad it's here, ran into it when testing variations out 🐛 CKEditor 5 resizes images with % width instead of px width (the CKEditor 4 default): breaks image captions *and* is a regression Fixed Though not related to that issue I thought I'd reference it here for completeness.

The improvements to images embedded via CKeditor 5 are impressive, but all other media types suffer a little bit from an upgrade to CKeditor 5.

More use cases for linked media within CKeditor 5 are embedding documents, videos, and audio that are all interactive. I'm not sure the media module is the correct place to address whether media is clickable within the text editor. Right now the touch target for showing the contextual toolbar on a media item is a thin line around the image, document, video, etc. If you miss that line and click the media, you get one of two experiences:

Unlinked Media

If the media is an image without a configured linked display, you get the contextual media toolbar.

This is pretty much what an editor would expect.

Linked Media

If the media is a remote video, clicking on the media will play the video.

If the media is a document, clicking on the media will download the document.

For any media type other than image, the loss of an "edit media" button that has a decent touch target is a huge loss. The loss of an embed dialog that allows you to configure and possibly replace the media seems to also be the result of only looking at media management from an image perspective and not considering the embed complexities for other media types.

It would be a better experience, if a user could interact with a preview of the media entity where the entire embedded item is a trigger for the contextual toolbar. This would be similar to the link contextual toolbar which opens when you click the link rather than taking you to the link destination.

Updating the issue summary with the additional use cases.

we should emulate demo in https://ckeditor.com/docs/ckeditor5/latest/features/media-embed.html#demo, clicking the media won't playing the video.

It seems pointer-events: none css rule do the tricks

Ran the test without the first to make sure it failed and got

1) Drupal\Tests\ckeditor5\FunctionalJavascript\MediaTest::testMediaPointerEvent
Failed asserting that two strings are equal.
--- Expected
+++ Actual
@@ @@
-'http://drupal-10.x.ddev.site/node/1/edit'
+'http://drupal-10.x.ddev.site/sites/simpletest/34354334/files/image-test.png'

/var/www/html/web/vendor/phpunit/phpunit/src/Framework/Constraint/Equality/IsEqual.php:96
/var/www/html/web/core/modules/ckeditor5/tests/src/FunctionalJavascript/MediaTest.php:1687
/var/www/html/web/vendor/phpunit/phpunit/src/Framework/TestResult.php:728

Which is good so I'll remove that tag.

#6 was tagged for an issue summary update if that could happen next please.

I think the issue summary is fine. At least I was able to figure out what this issue is about based on that.

Just tested on a Drupal 10.1 site with the patch against a remote video and a document embed. In both cases, clicking the media item triggers the tooltip instead of triggering the interaction with the media item (playing the video or downloading the document).

Thanks for jumping in on this one @lauriii!

Committed d80291c and pushed to 11.x. Thanks! Also cherry-picked to 10.1.x since this is a bug fix.

Automatically closed - issue fixed for 2 weeks with no activity.