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:
This is a bigger scope, but with rotate and crop we might want a whole different kind of menu?
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: