Add a button to remove an embedded media item from the editor

entirely too easy to accidentally stray-click the "X" icon and remove an embed. They asked for a confirmation dialog to be displayed first.

We don't do that for media items selected in the entity reference widget. So not sure if it is any more "dangerous" or easy. In the current situation, you would have to click to move the cursor after the image (or use the arrow key until you get there) and then use the backspace. Which could be a pain if you have to delete a bunch of images in an article. That one-click shortcut is a great improvement imho.

I also think there is value in being consistent in the way media is presented and managed across different fields/widgets. Even if that means providing an extra way of doing things. Some people may like to click, others like to use the backspace. That shouldn't be a problem. If we are afraid users might click it when they don't want to, we could improve the size of the buttons for example?

I agree that the confirmation message seems unnecessary. The delete button that we had for a bit and then removed in #2994702: Allow editors to alter embed-specific metadata, as well as `data-align` and `data-caption` had "undo" integration, so you could easily hit the back button (or the CKEditor "Undo" button) if you accidentally deleted the embed with the button. Which I think is better UX than requiring the user to always confirm the deletion. Since there's an easy way to undo it, a confirmation step seems superfluous.

We don't do that for media items selected in the entity reference widget. So not sure if it is any more "dangerous" or easy. In the current situation, you would have to click to move the cursor after the image (or use the arrow key until you get there) and then use the backspace. Which could be a pain if you have to delete a bunch of images in an article. That one-click shortcut is a great improvement imho.

+1

I also think there is value in being consistent in the way media is presented and managed across different fields/widgets.

+1

so you could easily hit the back button (or the CKEditor "Undo" button)

Or CMD/CTRL+Z.

+1 for no confirmation.

Here's an initial patch to restore the remove button. No confirmation dialog yet.

It's impossible to delete YouTube videos. Hopefully this issue will help.

This is more important now, as I found this UX bug with embedded youtube videos, using the default Remove Video media type.

Right now, to delete embedded media in the WYSIWYG, you do the following:
1) Click on the embedded media.
2) Hit the delete key.

But with YouTube videos, when you click on it, it starts or stops playing, or opens a page on YouTube's website. So you can't select your embedded media.

Video:
https://www.drupal.org/files/issues/2019-10-03/how-do-I-delete-this-yout...

Postponing on #3071713: Make error messages for embedded media themeable
It moves the JavaScript theme functions to a new file. Plus it's RTBC, so it should land soon.

I confirmed that with patch #6 (rerolled on top of 3078287-61 and 3071713-37), you can delete the Remote Video with either the mouse or by tabbing to the delete button and hitting enter/space.

Video:
https://www.drupal.org/files/issues/2019-10-03/sweet-relief-video-can-be...

But with YouTube videos, when you click on it, it starts or stops playing, or opens a page on YouTube's website. So you can't select your embedded media.

You can:

• Still click it if it's aligned.
• Give it focus by using the arrow keys

Furthermore, this is where #3064572: Add mask to prevent interaction with embedded media comes in (which still needs a sibling core issue, or perhaps we can change that to be the core issue). That is blocked on #3072382: Update CKEditor to version 4.13.

Per #9, demoting. The ability to interact with embedded media is the real problem here. And that is blocked on CKEditor 4.13.

#3071713: Make error messages for embedded media themeable landed so we can continue here.

Rerolled(#8), patch created for 9.1.x, Please review.

Fixed more tests, Please review.

Re-roll this patch for 9.3.x

Verified and tested patch #26.
Patch applied successfully but functionality not working

Testing Steps:
# Apply Seven theme
# Goto: node/add/article
# Click on the image icon in the body field
# Upload the image
# User is not able to see edit icon and cross button

Expected Results:
# User should see edit icon and cross button on the image

Actual Results:
# User is not able to see edit icon and cross button

Not working as expected.
Moving to Needs Work.

Fixing custom command fails of patch #26.

Fixing cs issues, Also added "filter.align.css" file, It was missed in last patch.

@chetanbharambe According to my information It is "Media Image" field, In #27 you are test with normal image filed, I have checked and found both the buttons (Edit Media, Remove Media). Please have a look.

Rerolled #29 for 9.3.x

Applied #33 patch applied successfully
After patch button has been added in editor
Thanks for the patch
For ref sharing screenshot

Fixed failed tests of patch #33.

(Attempted to) reroll against 9.5.x.

Fixed CCF for #40.

When using the contrib ckeditor module you probably need #3340516: Add a button to remove an embedded media item from the editor.

Here is a reroll for 9.5.10.

The Needs Review Queue Bot tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

This does not mean that the patch needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

I think this does not implement a confirmation dialog? Which is fine, it's not deleting but removing so recoverable. Would be good to update the issue summary to reflect this.

Attached patch works for Drupal 10.1 and the CkEditor 4 contrib module. It also needs the patch in #4 in #3340516: Add a button to remove an embedded media item from the editor.

Reroll of #49 for Drupal 10.2