Show an outline around the <drupal-entity> element within CKEditor

Thanks! Moving to the right project.

Here's an updated patch that alters the ckeditor css from the entity_embed module.

Thanks!

Unfortunately this doesn't work well for left-aligned and right-aligned embeds. See attached screencast.

The easy solution was too good to be true. It also wouldn't work if drupal-entity elements are eventually allowed to be inline.

I compared it to the image2 plugin's behavior (which core's drupalimage plugin extends), and it uses display: inline-block, which has much better results.

The outline looks good now, there's no white space between the outline and the image. But I'm having trouble testing right or center align. On a standard install of Drupal 8.7.1, I can't get embed to change position when I use the align radios, as you're doing in the screenshot. I have the align filter on. Any idea why that's not working for me? I'd like to test it displaying on the right with the outline displaying correctly.

It looks like the align only works if you have a caption, see #2645458: data-align and data-caption don't work with entity_embed

Using inline-block allows the outline to look good, but it breaks data-align functionality. Right and center alignment no longer work with the caption.

On a side note the data-align functionality without the caption is broken.

I created an issue for that:

#3058870: data-align should work without caption

I started looking at this again, and the css change is unnecessary, I think. Removing it, I still see the yellow outline (when using a caption). The problem is that it doesn't work without the caption.

See #3058870: data-align should work without caption

Strangely, after you remove the caption it seems to keep working. But if you remove the element and add it back without a caption, it doesn't work.

Since it was working only when the caption was applied, I just borrowed the css that filter caption is applying.

Filter code:

.caption > * {
  display: block;
  max-width: 100%;
}

Then made the selector more specific:

drupal-entity > div.embedded-entity {
  display: block;
  max-width: 100%;
}

There must be some kind of js interaction with the css rules. Adding display block to the child element as filter caption does seems to fix it and still allows the alignment to work.

This I believe fixes both the outline and the alignment in 3058870.

When data-align isn't present, we want inline-block, so that it wraps the element. When data-align is present, the element floats and therefore, we can't have inline-block on there. In that case, the rule borrowed from the caption filter where the child element is a block fixes the outline.

I closed #3058870: data-align should work without caption. I couldn't recreate it. Which is odd because I was seeing it this morning, see #12.

So I am a little lost now on how to manually test this issue and that one. I'm not sure if some sort caching is showing it fixed now, or some sort of caching or config problem was breaking it earlier.

I'll have to start over testing the two issues with a fresh perspective a different day.

+++ b/css/entity_embed.editor.css
@@ -0,0 +1,19 @@
+  display: initial;

This causes no outline to show up when the embed is aligned to the center Changing it to inherit fixes that. But then left and right alignment break. The attached patch seems to work better.

That being said, there are still problems, such as data-align=center not working without data-caption (is that what #3058870: data-align should work without caption was about?).

But AFAICT the attached patch does fix the reported problem, in all possible permutations: with/without caption, no alignment/left/center/right, and all combinations of them. Despite the CSS being questionable, the UX improvement is not questionable, so I think we should go ahead and commit this.

Yes, I think it gets us closer. Plus, now that the css file is there, someone in the community is more likely to experiment with the settings and perhaps improve it.

@marcelovani, you can help by testing out the patch and verifying if it works for you.

After more hours of struggling with this than I would like (also for #2544020-28: CKEditor plugin not written with CKEditor >=4.4 in mind; rewrite it based on core's `drupalimage` plugin), I found a solution for #20: display: flex. Core is already using this in many places, so it should be fine for us to use this too. This was not available five years ago :)

I tested every permutation, these are my conclusions:

This largely confirms what we already concluded, but this now documents it with more precision.

1. +++ b/css/entity_embed.editor.css
   @@ -0,0 +1,22 @@
   +/* If data-align property is present, remove inline-block */
   +drupal-entity[data-align] {
   +  display: initial;
   +}
   +drupal-entity[data-align="center"] {
   +  display: inherit;
   +}
   

   All this initial and inherit is not very explicit. I'm making it more explicit. To match the above table.

2. +++ b/css/entity_embed.editor.css
   @@ -0,0 +1,22 @@
   +/* Allows outline to display, by allowing hover to work properly */
   +drupal-entity > div.embedded-entity {
   +  display: block;
   +  max-width: 100%;
   +}
   

   This is unnecessary, the .caption > * rule in filter.caption.css already does exactly this!

   Removing it.

Attributing this to @oknate instead of me because I accidentally attributed #2924391: [media entities] Regardless of @EntityEmbedDisplay plugin, Media entities representing a `image/*` MIME type should be able to have a per-embed `alt` and `title` to me instead of @oknate.

🚢

I'm seeing whitespace between the outline and the embed when align is set to none and there is a caption.

Steps to recreate:

• Install Standard profile, install media, entity_embed, admin_toolbar_tools.
• Create media embed button and enable on full_text format, drag full_text format to top of list so it shows by default on articles.
• Enable caption and align filter, show embedded entities filter.
• Embed media item using media embed button with thumbnail display.
• Add a caption

Expected, there should be no white space between the outline and the embedded entity.
Actual, for all view modes selected there's white space when align set to none.

It does work for other options, and it works for align none with no caption. There is no white space between the outline and the embed with align options other than none.

That is just the browser's style sheet imposing that margin by default. That is the space taken up by the <figure> tag and hence the captioned embed. So this is accurate.

The scope of this issue was to ensure that an accurate outline exists in all situations (see table in #24 for all possible situations).

I understand what you want, but it cannot be achieved through just CSS.

The only way to do what you want is to significantly change how the Entity Embed CKEditor plugin works: it would require removing the <drupal-entity> tag from the DOM. (This is implicitly what the drupalimage CKEditor widget in core does.)

So let's please do that in a follow-up issue. This issue solved the accessibility/usability issue, now it's down to a cosmetic issue :)

Ok, thanks for the thorough explanation why this isn't possible when the align option is set to none. The fact that the outline is showing up at all is huge!

There's one CS fail introduced in the patch:
drupal-entity[data-align=right]{
should be
drupal-entity[data-align=right] {
according to linter.

Here's a patch for the coding standard issue in #30.

Pushed that too :)