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

https://drupal.stackexchange.com/questions/314021/in-ckeditor-5-how-not-...

Thanks for the detailed bug report, @zenimagine! 👏

Default core/profiles/standard/config/optional/core.entity_view_display.media.image.default.yml config:

langcode: en
status: true
dependencies:
  config:
    - field.field.media.image.field_media_image
    - image.style.large
    - media.type.image
  module:
    - image
id: media.image.default
targetEntityType: media
bundle: image
mode: default
content:
  field_media_image:
    type: image
    label: visually_hidden
    settings:
      image_style: 'large'
      image_link: ''
      image_loading:
        attribute: lazy
    third_party_settings: {  }
    weight: 1
    region: content
hidden:
  created: true
  thumbnail: true
  uid: true
  name: true

Note how image_link: '' means that image media are not linked by default in this view mode. But you can change this to image_link: content or image_link: file, in which case this will be linked.

In that case, it's indeed possible to click the image media and the link will be followed.

Given this is non-standard configuration, I don't think this qualifies as Major, but it definitely is something that should be fixed.

Having read https://git.drupalcode.org/project/ckeditor/-/blob/1.0.x/js/plugins/drup..., I'm not sure CKEditor 4 protected against this either. We need to check that. If it worked correctly there, then this would be a regression.

@zenimagine: any chance you could check that? 😊🙏

No, I haven't worked on a patch yet.

That is a question for the media system component, not for ckeditor5.module. I don't know the answer 😇

I do acknowledge that the CKEditor 5 "media rendered with wrapping link" entity view display configuration is broken in CKEditor 5, that will be handled here 👍

I was about to create this issue, glad it's here, ran into it when testing variations out #3348603: CKEditor 5 resizes images with % width instead of px width (the CKEditor 4 default): breaks image captions *and* is a regression 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 as of #13. 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.