A discussion about adding an image remover button to the composer preview began with Don suggesting the feature to easily delete images from the composer. pmusaraj marked the topic as pr-welcome.
ghassan started working on the feature and sought guidance on the correct component to use (d-editor.js or composer-editor.js). pmusaraj suggested placing the delete button next to the resizing images and adding alt text buttons in the composer preview.
sam expressed concerns about adding the delete button, suggesting it might be too rare to need it and could add visual noise. awesomerobot proposed an alternative design, moving the edit button to the left and adding a delete button on the right.
ghassan and awesomerobot discussed the implementation details, including the positioning of the title editor and the overflow behavior of the alt text container.
After refining the design and implementation, ghassan shared a video of the feature in action and later submitted a pull request, which was merged by darkpixlz.
I’m just thinking about a new feature to easily delete image from composer. Many times happens when user upload more image and only want to delete one of them it is really complicate if user not familiar with markdown. Of course they try but the result is usually some broken links etc…
There was a modification with image alt text which works pretty good and user friendly. It add the ability to edit alt text on preview side.
It would be awesome to place a delete button on the image in preview side. Maybe a icon or X on the image corner and clicking that button it could target and remove the actual image markdown code.
I am working on resolving this; I almost have a working proof of concept.
I just have one confusion between those two components d-editor.js and composer-editor,js. My solution so far is based on listening to the preview/html content when updated inside d-editor.js compoenet…etc.
Am I in the right direction?
The most appropriate place for deleting an image would be next to the buttons we show on hover for resizing images and adding alt text in the composer preview.
The hook to delete the image markup should be very similar to the 100%/75%/50% buttons. You can see here how the image scaling is done.
Move the edit button to the left (bonus: closer mouse distance to the composer input), and then put the delete button on the right… so now we’ve got some distance between harmless and dangerous actions.
Other nice-to-haves:
make the edit icon blue like the 50%, 75%
keep the text black, but make it click through to the input as well
when the title editor is open, can we position it to match the baseline of the preview text (so a z-layer above)? This makes things less shifty on click:
So they have their button with a bunch of options, scaling is click and drag on handles…
One nice little detail is that if you add an image that’s too small for the button overlay, they force the image to a scale that contains the button once you try to interact with it. That avoids having a button on hover that overlays any surrounding content.
Now back to your points above; it would make sense assuming you want the overflow behaviour to be the default. Otherwise for short alt the delete button would be just close edit alt button.
Also another alternative is just show alt container before scale buttons e.g:
icon or X on the image corner and clicking that button it could target and remove the actual image markdown code. 
