improve Embed image button UX

[vibros68]

close #2477

This pull request improve Embed image button in Mardown Editor.

• The old behavior: When clicking on the image button. An empty markdown image will be inserted in the editor. The user will need to copy the image url and define the name of the image
• The new behavior: When clicking on the image button. An upload image modal will be appeared. After selecting an image, the image url will be inserted to the markdown text at the current location of the cursor.

upload_image.mp4

[victorgcramos]

Hey @vibros68, thanks for the PR. Code looking clean. But I think the UX should be oriented to use image addresses, in case you want to add an image by reference, not by uploading the file to the server. If you want to attach an image, you can use the 📎 button.

For example, adding an image like this ![image-alt](https://decred.org/og-logo.png) will render an external image, and you don't need to upload it to our server as a file. In case you want to add multiple images, for example, you can use your own server to host your images, instead of attaching it to proposals files, which you can upload at most 5.

[vibros68]

@victorgcramos I just work as the comment of @lukebp in the issue. Can you confirm it @lukebp ?

[lukebp]

But I think the UX should be oriented to use image addresses, in case you want to add an image by reference, not by uploading the file to the server. If you want to attach an image, you can use the paperclip button.

This is not the direction we want to go and is what this issue is attempting to fix. The attachment button attaches images to the proposal. The button in this PR inserts images inline. Those are two different use cases.

We don't need a button for referencing external images because:

1. We don't want to encourage people to reference external images that may break in the future and cause the proposal to be incomplete.
2. Referencing external images is a rarely used feature.

@vibros68 the behavior you have in this PR is correct. Is this PR ready to be reviewed? If so, please request a review on it.

[vibros68]

@lukebp Yes it is ready to be reviewed

[victorgcramos]

@lukebp makes sense. Thanks!

[lukebp]

Nice job. I've tested this and everything is working as expected. I have two minor suggestions.

This is the modal for attaching an image.

Can you update the modal to read:

Attach a file
Select the file that you would like to attach to your proposal.

This is the modal for inserting an image into the proposal file.

Can you update the modal to read:

Insert an image
Select the image that you would like to insert into the proposal text.

[victorgcramos]

Looking good to me! Good job. UX is great and code is clean and readable!

[lukebp]

tACK

Needs code approval from @tiagoalvesdulce.

[tiagoalvesdulce]

LGTM

[xaur]

We don't need a button for referencing external images because:

1. We don't want to encourage people to reference external images that may break in the future and cause the proposal to be incomplete.
2. Referencing external images is a rarely used feature.

3. External images is a security risk (malicious content) and a privacy risk (tracking via referrer etc). I think we should not embed them for same reasons we warn about navigating external links (and for same reasons modern email services have an option to not load images by default).

[lukebp]

External images are not loaded inline. You can include them in markdown text, but they'll show up as a link and politeia will warn you about leaving politeia if you click the link.

Example external image link: decred logo

The issues you brought up with them are the reason for this behavior.

[xaur]

This is great, thanks!