Image remover button to composer preview

Hello,

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 :wastebasket: icon or X on the image corner and clicking that button it could target and remove the actual image markdown code. :slightly_smiling_face:

Thanks :slightly_smiling_face:

8 Likes

Thanks Don, that sounds like a useful button and it’s probably not too hard to add. Will mark this as pr-welcome, happy to see this added.

3 Likes

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?

1 Like

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.

image

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.

2 Likes

I am a bit mixed on adding this there, cause it seems so rare to need it and it will add visual noise.

I guess a “bin” icon aligned to the right of that line, so it is not too close to the edit button?

@awesomerobot thoughts?

Also, I wonder if the order of operations here is right, is rotate and crop more important?

3 Likes

For just adding a delete button we could do:

Screen Shot 2022-07-18 at 9.42.53 PM

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:
    Screen Shot 2022-07-18 at 9.44.53 PM

This is a bigger scope, but with rotate and crop we might want a whole different kind of menu?

http://notion.so has a nice example:

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.

7 Likes

@awesomerobot Thanks for your feedback. I have another question to make sure we are on the same page. regarding this point:

Since there are two scinarios how the “scale buttons” container appear along with “alt edit button”

Noramlly those appear in same line; however when the alt text is long, the alt conainer would overflow to the next line:

Same line

Overflow

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:

Sameline:

Overflow:

So its clear delete button comes after 50% but not clear how would that works out in the above two scinarios

2 Likes

[Update]

I followed the second apprach above:
Here is a video how it looks

If you all looks good; I would refactor code and push/create a PR.

8 Likes

Thanks for explaining the extra details! I think this looks good!

6 Likes

Thank you; I have already submmited a PR FEATURE: add image delete button in preview. by ghassanmas · Pull Request #17624 · discourse/discourse · GitHub

7 Likes

This has now been merged as of today

6 Likes