Problem/Motivation

#2511404: Image entities/fields embedded using Entity Embed cannot be linked in CKEditor introduced the ability to directly warp embedded entities in links inside CKEditor (which is 🎉🎉🎉 by the way!).

However, editors tend to use whatever is available to them, and some embeddable entities might include rendered markup with links. This would lead to the ability to have <a> tags with <a> tags, which isn't ideal.

If it's feasible, it would be ideal to allow links only on entities that don't include links in their markup, when rendered.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

Comments

marcoscano created an issue. See original summary.

Wim Leers credited wrd.

wim leers’s picture

Funny, none of the 83 followers in #2511404: Image entities/fields embedded using Entity Embed cannot be linked in CKEditor ever thought of that! Oh, no, I'm wrong — @wrd thought of that in #2511404-40: Image entities/fields embedded using Entity Embed cannot be linked in CKEditor apparently. Crediting him too. He wrote:

One possible issue I can see is that this results in a link option for every entity type. This won't make sense for some entities -- an embedded video, for example, or a custom entity type that contains link fields of its own (say, a Contact entity that includes email, web, and tel links).

Should the option to allow an entity to be linked be selectable somewhere? Perhaps the entity type form, or on the display mode?


I think we can detect the presence of links in an embedded entity's representation, and if so, disallow linking. Of course, an entity could change over time and could gain links at a later time.

In that sense, @wrd's proposal to make it configurable per entity type probably makes more sense?

wim leers’s picture

Issue tags: -Media Initiative

Untagging Media Initiative because I think this only ever applies to non-Media entities.

marcoscano’s picture

because I think this only ever applies to non-Media entities.

No big deal, but I don't think so. In our use case for example, we have a "Document" media type that, when rendered, displays:
- an icon,
- the file size
- a taxonomy term name that was added to the document
- a link to download the file.

Also, I can think of remote media items such as tweets or instagram posts, that would also include links in their internal markup.

I like a lot the idea of avoiding a run-time smart detection and just configuring somewhere which media types should be "linkable". We could default to types that use the image source, but allow other types to opt-in (while also allowing some image-based types to opt-out)

Thanks!

wim leers’s picture

Issue tags: +Media Initiative

You're absolutely right. Sorry about that.

wim leers’s picture

Did more testing yesterday. Turns out a linked embedded entity still has correctly working links inside the embedded entity. So actually, the originally reported problem is a non-problem.

Also: it's possible that an entity containing links may want to have the links still rendered when embedded but wants them to be made non-interactive.

This is a very hard problem, which really depends on the scenario. It's not at all clear what the appropriate course of action is.

wim leers’s picture

This came up again, but now in Drupal core's DrupalMedia CKEditor plugin: #3075527: FilterAutoP breaks links around the <drupal-media> tag.

ckaotik’s picture

I think we can detect the presence of links in an embedded entity's representation, and if so, disallow linking.

I see a problem with an auto-detect solution. Yes, anchor tags within anchor tags are a horrible mess and invalid HTML. However, we sometimes have to work with layouts doing just this. Here's a sample scenario with a required license/copyright link on some media:

<a href="..." title="link added in ckeditor">
  <figure>
    Some content, e.g. an <img ...> Tag.
    <figcaption>Some caption <a href="...">© some copyright</a></figcaption>
  </figure>
</a>

Usually, such code is accompanied by some z-index CSS rules.

Yes, this can be solved better using an "empty" <a href="..."></a> Tag (e.g. https://bdwm.be/html5-alternative-nested-anchor-tags), but rewriting all templates is oftentimes not feasible :(

A general setting on the embed button config, maybe with an alter-hook for special cases, should work nicely. But an automatic detection gives me headaches.

geek-merlin’s picture

With HTMLDom it's quite straightforward to eliminate all a tags. We can expose this as a twig markup filter to use in the default template. And we can expose an alternative filter that uses the object hack (google it) to wrap a tags in object tags so links inside links are functional, and people can use it in their custom templates.

kasey_mk’s picture

Just updated to 1.5 on Drupal 10.1.6 and I came here hoping to find an option to turn off linking on embedded entities.

We use entity_embed exclusively for Paragraphs, which all handle links their own way. I need a way to prevent users from trying to add links around all that. Even if there was a check-and-fix for a tags within a tags before rendering, I don't want a confusing UI offering options that won't work and obscuring the options that will.

kasey_mk’s picture

StatusFileSize
new32.42 KB

Here's a super-simple patch that I think just removes the link button from the UI without touching anything else:

In js/build/drupalentity.js, t("Entity Embed toolbar"),items:["entityEmbedEdit","entityEmbedLink","editEmbeddedEntity"] becomes t("Entity Embed toolbar"),items:["entityEmbedEdit","editEmbeddedEntity"]

As discussed above, I'd love to see some options built in - to turn the linking on or off entirely, or as suggested, per entity - but this will let me move ahead with my use case.

Thanks to all who work on this! I can see that adding links was a huge effort, and just because I need it to not be there doesn't mean I don't appreciate all the time everyone put on it!

loze’s picture

I think all the options available in ckeditor5 (edit, link, align, caption, etc.) should all be configurable on the media bundle, or view mode.

tichris59’s picture

StatusFileSize
new35.94 KB

As Kasey_MK , we use entity embed with entity that can't contain be linked, this button must be hide in my case, it would be great to choose which entity can use it, case by cas (per example media image like it but media map in my case not).
I put here a patch that merges #12 and another bug https://www.drupal.org/project/entity_embed/issues/3416277 (#2).
Thanks for your patch Kasey_MK

javi-er’s picture

The problem with @kasey_mx patch is that it replaces the build script entirely, so any new releases of this module will have the build code reverted to the specific version of this patch without you noticing it. Ideally a config option should be added for allowing or removing linking as asked above.