Adding attributes to a link wrapping an image does not work

Created on 8 February 2025, 2 months ago

Problem/Motivation

In the attached gif you can see how, using a manual decorator, I've tried adding a link with target="_blank" around my images but the attributes are not casted to the anchor.

So instead of getting

<a href="https://test.com"  target="_blank">
  <img data-entity-uuid="XXX" data-entity-type="file" src="XXX" width="222" height="186" alt="">
</a>

I'm getting

<a href="https://test.com">
  <img data-entity-uuid="XXX" data-entity-type="file" src="XXX" width="222" height="186" alt="">
</a>

Noted while testing:
- It does work for anchors wrapping text
- It does work for anchors wrapping media
- It does work when the anchor and image are inside a paragraph

<p>
    <a href="https://test.com" target="_blank">
       <img data-entity-uuid="XXX" data-entity-type="file" src="XXX" width="222" height="186" alt="">
     </a>
</p>

It just doesn't work when it's just the anchor wrapping the image.

I've also tried adding other attributes (like rel="noopener noreferrer") and with the same results, they are not casted to the anchor, so it seems it's not specific to the target, rather the casting of the attributes in that specific scenario.

Steps to reproduce

I've created a test module which adds a manual decorator that allows me to add target="_blank" through the ckeditor5 link plugin.


use Drupal\ckeditor5\Plugin\CKEditor5PluginDefinition;

function editor_testing_ckeditor5_plugin_info_alter(array &$plugin_definitions): void {
  // Add a link decorator to the link plugin.
  assert($plugin_definitions['ckeditor5_link'] instanceof CKEditor5PluginDefinition);
  $link_plugin_definition = $plugin_definitions['ckeditor5_link']->toArray();
  $link_plugin_definition['ckeditor5']['config']['link']['decorators'][] = [
    'mode' => 'manual',
    'label' => t('Open this in a new window'),
    'attributes' => [
      'target' => '_blank',
    ],
  ];
  $plugin_definitions['ckeditor5_link'] = new CKEditor5PluginDefinition($link_plugin_definition);
}

That should do the trick.

Proposed resolution

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Active

Version

11.1 🔥

Component

ckeditor5.module

Created by

🇳🇱Netherlands ronaldtebrake

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024