[drupalMedia] CKEditor 5 allow caption/linking/view mode/alignment functionality to be enabled per bundle

It's worth noting that nearly all of Media and Media Library's test coverage and development have been focused on images. The result is that new features for images tend to be added to all media types (whether they are appropriate or not). There are many more areas where adding or removing embed options would make other media types such as video, audio, documents, maps, charts (and more) significantly more usable and accessible. Overriding this experience was much easier in CKEditor 4 with the entity embed dialog (modal) as it allowed for Drupal form alters per media type. With CKEditor 5, this all has to be considered as part of the plugin architecture for the balloon toolbar that appears on each embedded media item.

Very interesting and astute observation, @joshuami! 👏🙈

Audio might have a caption, but it would be rare.

Would you expect only a player, and no caption? I think a caption can be reasonable here.

I cannot think of a use case or semantic approach for captioning documents when embedded.

I can: an accompanying description? Just like one could have

<figure>
  <blockquote>An epic quote here</blockquote>
  <figcaption>Explanation contextualizing the quote.</blockquote>

Is that not reasonable/realistic? 🤔

@Wim Leers, thanks for asking the clarifying questions.

Audio might have a caption, but it would be rare.

Okay, "rare" may have been an overstatement. 😄

Originally, I was thinking of documents as not really something you would semantically mark up as a figure, but you might have a point. Reading through the HTML 5 definition of flow content (https://www.w3.org/TR/2011/WD-html5-author-20110809/content-models.html#...), I guess it would be a correct usage to wrap a document media link in a figure and provide a figcaption as the description.

I've certainly implemented a description field on documents and used the display mode template to output a description with an aria-describedby on the document. There wasn't a way to add a caption to a document in earlier releases of media library with CKEditor 4, so I hadn't really given it thought to using it.

Generally, a little more configurability for what appears in the drupalmedia toolbar would be helpful. There are so many use cases were the

Updated the issue summary to focus on the link button as that is the larger issue for creating patterns that will break media players and document download links.

Generally, a little more configurability for what appears in the drupalmedia toolbar would be helpful. There are so many use cases were the

You're leaving me hanging there! 🤣 Where were you going with that? 😄

Could you please also list one example for each of Caption/Link/View mode/Alignment to show why these features only make sense sometimes? 🙏

You're leaving me hanging there! 🤣 Where were you going with that? 😄

😆 At least you can tell it wasn't generated by AI.

That was a few days ago, so I can only guess at what I was going to say, but it would have been something like this. 🤔

It would be nice to be able to choose whether or not caption, link, display mode, and even alignment appear per each type of media. As a developer, I can put all sorts of things into a media entity display mode. Here are some examples of where I might want to prevent one of the default toolbar items.

Caption: I may choose to provide a caption rather than have CKEditor provide the caption functionality because I want to include license and attribution meta data in the caption.

Link: I might want to prevent editors from adding a link around an image to discourage the creation of gaudy image "buttons" that break from the style guide. I would definitely want to hide the link functionality from documents, audio, and video because it would break the functionality and lead to more support requests. (Sorry, that's two examples 😜)

Display mode: If there is only one display mode for a media type, I might want to hide that display mode to reduce the visual complexity for my editors.

Alignment: I might want to hide alignment from videos because I want my editors to always embed full-width videos and the align left and right forces a 50% width by default.

I can probably train editors to work around all of these scenarios, but if I could hide the feature I don't want them to use, they will be much happier and it lowers the chance of confusion.

Moving #7 into the issue summary 👍

Thank you — that's very helpful. I agree this would significantly increase usability (as well as accessibility: far less "noise" to sift through).

This will require

1. significantly expanding the configuration for the media_embed plugin
2. updating the CKEditor 5 JS plugin to respect this
3. test coverage to prove it's all working

Actually … it kind of depends whether these settings belong on the media_embed filter or in the CKEditor 5 plugin. If it's in the filter settings, then the filter would be able to enforce those restrictions (for example, to avoid those gaudy image buttons you're referring to). If it's in the CKEditor 5 plugin settings, then it'd be "UI-only-enforcement": we wouldn't offer the UI affordances, but they might set those attributes in the Source Editing view anyway.

Thoughts on that?

That is a good question. I think just the CKEditor plugin would meet the need. Adjusting the media_embed filter for all possible configurations would get complicated quickly. And, there might be a need to support legacy content that used one of the disabled features.

A disallowed patterns filter would a pretty slick feature as well. It would be nice to strip empty elements like headings and paragraphs that editors always seem to be leaving behind. I'll have to think about writing that up as a separate issue. 😁

And, there might be a need to support legacy content that used one of the disabled features.

Correct. I am glad you surfaced that. I was curious if that'd be a concern or not — hence I intentionally omitted it from #9.

So it sounds like you're thinking about UI-only enforcement?

I think UI-only enforcement would be sufficient.

I cannot create a link around a Drupal Media Image in content. When inserting an image, I have the link button in the insert media mini-window and it saves without complaint, but when rendered, the link is stripped out. I am running Drupal 9 and 10 with CKEditor 5. Not sure what I am missing, some module or the order of filters, which is:

• Convert line breaks into HTML (i.e.
  and

  )

• Linkit URL converter
• Convert URLs into links
• Align images
• Caption images
• Embed media
• Display embedded entities
• Apply responsive behavior to HTML tables.
• Display UO Calendar Entities
• Correct faulty and chopped off HTML
• Advanced Insert View

Advice wold be greatly appreciated.

The solution to my issue in #13 has been identified by caspervoogt (#57 in https://www.drupal.org/project/drupal/issues/3075527 🐛 Adding links around embedded media through CKEditor might lead to invalid/complex markup when rendered Active ) and works for my sites as well. Odd side-effect. Removing that filter does not appear to negatively affect the content manager experience.