Wrapping drupal-media image in a link produces empty P tags after image

Possible duplicate #2876094: Linking an image creates an empty paragraph tag in CKEditor

Agree with #4, #2876094: Linking an image creates an empty paragraph tag in CKEditor is further along, marking this as a duplicate.

I am having same issue. Does anyone found solution for this?

I have found solution to this issue.
install ckeditor config module https://www.drupal.org/project/ckeditor_config and edit full HTML and add
"autoParagraph = false"

This is a duplicate of #2876094: Linking an image creates an empty paragraph tag in CKEditor, please use that issue for any further comments, to avoid duplication of effort.

Not sure #8 is the way forwards, since this is a deprecated setting.

Note: This option is deprecated. Changing the default value might introduce unpredictable usability issues and is highly unrecommended.

http://origin-docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.config-cf...

So after careful review I'm pretty confident the symptoms are the same as #2876094: Linking an image creates an empty paragraph tag in CKEditor but with a different plugin the has vastly different code so its not the same bug. Best I can tell at this point, its related to the dtd definition from here or maybe some hacks related to that. I'm not 100% clear where this is happening yet but if you null out the drupalmedia plugin and this doesn't happen and if you add drupal-media as supported in a paragraph you can start to get some different behaviors so something weird is going on there. Not 100% on the details yet though, there is a lot of code here without a lot of comments on how its interacting.

Another rambly post to dump what I found investigating this for the next person or latter incarnations of myself.

Turns out poking at the DTD does change the behavior a lot so I guess related but the real problem seems to be somewhere in the interaction between autoparagraphing and upcasting/downcasting. I got really lost trying to piece together how all of this is suppose to work with CKEditor plugins since there's a lot of callbacks and async operations and I'm just not familiar with their responsibilities, interfaces, and interactions. I'm going to have to figure out a way to work with a un-obfuscated version of ckeditor to trace this out and I had to step back from this for a bit.

Hi, I'm also experiencing this same problem: when I add a link to embedded media inside ckeditor, a <p>&nbsp;</p> is added after the image.

I know Google has this ticket ranked higher in its search results, that is how I got here. However, #5 and #9 are correct that this is a duplicate. If you (current reader) go to the other ticket, issue 2876094 with patch, you will see that it has a patch for this issue. As of the writing of this comment, that issue is in the "needs review" phase. I will be trying that patch shortly.

This is a fundamentally different problem than #2876094: Linking an image creates an empty paragraph tag in CKEditor even though the symptom is the same (adding extra <p> tags). I have tried the patch in that issue and it does not fix this problem.

This issue occurs because the wrapping <a> tag is an inline element which requires being wrapped inside of a block element like a <p> or <div>. A more detailed explanation can be found here https://www.drupal.org/project/entity_embed/issues/3070941#comment-13205975 where <drupal-entity> tags run into the same problem.

Setting the a tag to a block element fixes this problem. Upcasting the link element may be a better solution, but as of now I couldn't get it working.

Attached is a test to prove the problem.

This should fix the problem, but I'm not sure it's the best solution since it turns <a> tags into block elements. This may have unforeseen side effects. I've played around with it and haven't seen any yet, but it's something to be aware of.

Unfortunately I don't think setting the <a> tag as a block element is an acceptable solution. It ends up visually doing some weird stuff with spacing like when links are inside a paragraph of text. So a better solution will need to be implemented. In the mean time, here is a hacky patch that removes the extra paragraph. This patch is basically straight from #3070941: [upstream] Embed wrapped in an a tag + toggling source button creates extra p tags. At the very least it might help people that need a solution until a better one is made.

Quick backport of the #17 patch for 8.9.x. Ignore this if you are on 9.x already.

Thank you so much for the patch, @segovia94. I can confirm that it works for my use case. And symptoms were exactly the same as attached in the video from a https://www.drupal.org/project/entity_embed/issues/3070941.
Also, I want to admit that current issue is not the same as in https://www.drupal.org/project/drupal/issues/2876094 (as mentioned by @segovia94 as well)

This is still "needs work" on account of review in #17.

My problem is very similar: when embedding a node as teaser, the embedded entity gets surrounded by empty paragraphs. Like this:

<p></p>
<article>embedded entity</article>
<br> 
</p>

I testet patch #17 in Drupal Core 9.2.7. But this didn't fix the problem.

After a bit of testing, I was able to reproduce this issue using the current ckeditor but I was not able to reproduce this using the new ckeditor5.

CKEditor 5 will replace the current CKEditor 4 from Drupal 10.

Steps followed:

1. Fresh install of Drupal 9.4 from HEAD using umami demo profile.
2. Created new article node, using CKEditor 4, added some "Test" paragraphs, and inserted a image from the media library in-between some paragraphs.
3. Selected the image, added a link to drupal.org on the media item.
4. Saved and viewed the page.
5. Confirmed that there was one additional empty paragraph after the image and the image was not actually wrapped in the link tag, which appeared above the image.
6. Enabled the ckeditor5 module, and updated basic and full html text formats to use ckeditor5.
7. Edited the Test article that I just created, confirmed that CKEditor 5 was now being used as the text editor.
8. For good measure, removed then re-added the image from the media library, and again added a link to drupal.org on the image.
9. Saved the article, and on viewing it confirmed that the empty paragraph was gone and the image was properly wrapped in the link.

So unless someone is very keen on getting this fixed before 10.0 is released, this will likely be closed as a won't fix.

For anyone who wants a quick fix, once you're able to, enable the new ckeditor5 core experimental module, and upgrade your text formats use it.

I am also having the same issue. Every time I click on "source" from the toolbar it adds an extra p tags after the media image in CKeditor.

<a href="/sites/default/files/2021-09/What%20are%20the%20rules%20on%20using%20new%20animal%20test%20data%20%5B994KB%5D.pdf">
<drupal-entity data-embed-button="media_entity_embed" data-entity-embed-display="view_mode:media.tiny" data-entity-embed-display-settings="" data-entity-type="media" data-entity-uuid="92e78c71-fac9-4635-a30a-a55df6982b9d"></drupal-entity>
</a>
<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

Anyone got this fixed?

#26: thank you very much for that testing! We indeed tried to make things work at least equally good in CKEditor 5 as they do in CKEditor 4, and I'm glad to see that this bug would not be carried over! :)

I will go on record as being "very keen on getting this fixed before 10.0 is released."

• Using Drupal 9.3.9, trying the experimental CKEditor 5 module resulted in data loss, so that's not a good workaround for my current project. (I would love to report this as a bug but don't know where to begin.)
• Neither patch #17 on this issue or #38 on #2876094: Linking an image creates an empty paragraph tag in CKEditor work for me.
• The workaround I'm currently entertaining, to support this use case, is to enable IMCE and add a second toolbar button to insert images from IMCE file browser, for images that require links. (Losing all the benefits of using Media in the first place and creating an end-user training nightmare.) :-(

I can't help with writing code but could test functionality on new patches. If someone has a different workaround for this issue I'd try that too, because the IMCE workaround is dreadful!

I can confirm the excact same behaviour described in #27.
Switching back and forth to souece code view adds additional

tags - in my case whereever there already is a

already.

I ran into this problem (at least, I think it's this problem) today. We use the file_download_link module with a "Download link" view mode so that a media item can be embedded and appear as a download link. This works just fine in lists, but today someone tried embedding the file in the middle of a paragraph. A /p tag was inserted before the media item, and a p tag after it.

Switching to source code mode in the editor, deleting the tags, and saving produced the desired result, but switching back to wysiwyg mode brought the undesired tags back.

3131055-17.patch fixes this issue for me with Drupal 9.3.12

3131055-17.patch also resolved the issue for me on 9.3.13

Others' successes with the patch inspired me to retest -- and now on 9.3.13, 3131055-17.patch also resolved the issue for my sites.

Solved an identical issue on entity_embed, but in a different way, one-liner actually, so maybe worth checking. Adding a related issue.

It seems like, Drupal's link feature is not intended for embedded entities in CKEditor.

Meanwhile, it is worth, looking at the Entity Embed link module.

This commit moved all of media's ckeditor(4) stuff into the ckeditor(4) module, so patch from #17 doesn't apply anymore. Here's an updated patch, which applies successfully to 9.5.0-beta2.

Re-rolled the #40 patch for D9.5.x-dev. Please check and review.

Patch with #42 CCF fix and interdiff between patches attached.
#42 Patch was not applying. Now Patch is applying cleanly for me.
Thanks

Fixing the coding standard issue with patch #42

Fixed CCF of #46.
Please review.

patch #20 is wrong for 9.5.x , its need work

Patch #47 applies to 9.5.3 successfully

This issue is being reviewed by the kind folks in Slack, #needs-review-queue-initiative. We are working to keep the size of Needs Review queue [2700+ issues] to around 400 (1 month or less), following Review a patch or merge request as a guide.

Want to take a step back and just take a look.

1. Has this been confirmed in ckeditor5?
2. If this is strictly a ckeditor4 issue what is the proposed solution, should be added to the issue summary.

Has this been confirmed in ckeditor5?

I confirmed in comment #26 that this issue is not relevant in CKEditor5 and so is only relevant to CKEditor4.

I suspect that measns this issue should be moved to the CKEditor4 contrib module, unless it will actually get fixed in 9.x (which seems unlikely at this point).

I doubt it. I’m not sure how ckeditor4 fixes are being handled. If we fix in 9.x it will have to be ported then

Confirmed this issue with CKeditor 4, which I suppose is actually new contrib module.

I managed to adapt the solution also used in Entity Embed, as found at #3282295: Additional paragraphs added when embedding an entity in CKEditor and linking it, and suggested by @Graber above in #37.

The solution was as simple as adding the following lines to the Contrib ckeditor @ modules/contrib/ckeditor/js/plugins/drupalmedialibrary/plugin.js after the existing beforeInit function:

    init: function init(editor) {
      // Prevent adding extra lines.
      editor.dataProcessor.writer.setRules('drupal-media', {
        breakAfterClose: false
      });
    },

This solution is quite a lot simpler than the patch to date on this issue!

Attached patch for the ckeditor contrib

I will say that #53 seems to be working, but I haven't tested it extensively.

I have tested the patch in #53 with Drupal 9.5.9 and it works, being as it is the same solution as provided for Entity Embeds drupal-entity tags it would seem to be the solution to go for.
Though we are still using the ckeditor bundled in the core not the contrib so I had to manually apply the changes to the core ckeditor module js.

Attached is the version of the patch for the core but using the same fix as #53.

I tested the patch in #53 and it prevents the accumulation of empty p tags, but it is now adding an empty p tag before each media embed that is wrapped in a link/a tag.

In other words, the code should look like this:

<p><a href="#">[drupal embed]</a></p>

But it looks like this:

<p>&nbsp;</p>
<a href="#">[drupal embed]</a>

But like I said, this patch is an improvement as additional p tags aren't added every time you save the node like before.

Since Drupal 9 is End of Life today, I am moving this issue to the contrib module and re-rolling the patch from #55.

#57 wasn't applying. Refactored it for the current 1.0.x branch.

Added the original test back in.

moved the test to the correct file