Show something when embedding something non-previewable

[Reinmar]

📝 Provide a description of the improvement

It currently looks like this:

The problem is not that it's not clear that this is an HTML snippet, but rather – what snippet this is. If you have a couple of them in the content, you may not understand which is which or if they are filled already or not.

Therefore, some way to identify what's inside would be good.

Option 1. Show non-editable source

We could simply show a disabled textarea with the source of the embed, just like in the case of when previews are completely disabled.

However, how can we detect that a preview is not available?

One option is, of course, that when the sanitizer stripped everything, we know that the thing is non-previewable. But what if just one part of the input was removed and it makes the preview non-existent?

The other option is to make this check after rendering the preview. If it is 0px high, we can tell that the preview didn't render. However, this will be slow and may cause layout trashing so if we go this way we must be smart.

Related ticket (in this option): #8326.

Option 2. Add a "title" field

The other option would be to add a field for a snippet's title and display it e.g. in the "HTML snippet: <title>" place.

The title could be stored in data-title and we wouldn't have to do anything more – if the preview doesn't render, the user still sees something. We don't have to even detect these situations.

My biggest concern is that the title will leak to data, but I'd be fine with that as it's kind of a "label/caption" like thing.

---

If you'd like to see this improvement implemented, add a 👍 reaction to this post.

[Reinmar]

Option 3. Always show the banner from #8434.

Pros: Just like that.

Cons: Will be displayed for every embed and pollute the screen.

Option 4: Show the banner from #8434 when we detected a change by sanitizer.

Cons: Would require #8326. And still may not work.

[magda-chrzescian]

I introduced a solution in the PR.

I added a placeholder in the preview container. If any preview is visible, the placeholder is simply getting covered by it.

[magda-chrzescian]

One more follow-up: #8836