DEV Community

loading...
Cover image for Changelog: Paste images into editor

Changelog: Paste images into editor

link2twenty profile image Andrew Bone ・1 min read

For a while it's been possible to drag images into the editor and have them automatically upload and insert into the post. Thanks to this pull request from @nickytonline .

Drag and drop an image in the editor #10145

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [x] Feature
  • [ ] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

Adds drag and drop image functionality to the v2 Editor. You can drop an image in the cover image section and it will upload. You can also drop an image in the content body of the post. This feature works exactly like image drag and drop on GitHub.

Related Tickets & Documents

#9992, #10203

QA Instructions, Screenshots, Recordings

To test

Ensure #9992 works still

Drag/drop a cover image

cover-image-drop

  1. Drag a valid image file that we support and drop it on to the cover image area of the editor.
  2. Once the file is dropped, it will behave like a file selection upload.
    1. The spinner will appear
    2. The image will upload successfully and a cover image will appear

Drag/drop a post body image

body-image-drop

  1. Drag a valid image file that we support and drop it on to the post body area of the editor.
  2. The post body editable area will change to an opacity of 25%
  3. The file uploads and inserts the markdown for the uploaded file into the last known cursor position of the post body editable area.
  4. Opacity returns to normal.

Errors

  • If more than one file is dropped on either of the droppable regions mentioned above, a snackbar item will appear notifying the user that they can only drop one file.

image

  • If an invalid file is dropped on either of the droppable regions mentioned above, a snackbar item will appear notifying the user that the file is an unsupported image type.

image

Also, the editor help has been updated to take image drag and drop into account.

image

Added tests?

  • [x] yes
  • [ ] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.forem.com
  • [ ] readme
  • [x] no documentation needed

[optional] Are there any post deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

Jim from the Office looking at the camera and saying "Yes!"

Now it's also possible to copy and paste and image straight into a post without needing to save it as a file first. For instance I took this screenshot while writing this post and just pasted it in.

meta self screenshot

PR to add paste images:

Add paste image #10212

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [x] Feature
  • [ ] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

Add ability to paste images along side drag and drop

Related Tickets & Documents

closes #10210

QA Instructions, Screenshots, Recordings

forem__paste-image-directly

  1. Copy an image into your clipboard.
  2. Paste it into article body
  3. See it appear

Added tests?

  • [ ] yes
  • [ ] no, because they aren't needed
  • [x] no, because I need help

Added to documentation?

  • [ ] docs.forem.com
  • [ ] readme
  • [x] no documentation needed

[optional] Are there any post deployment tasks we need to perform?

N/A

[optional] What gif best describes this PR or how it makes you feel?

Mad Scientist

A big thank you to @s_aitchison for fixing the issues with my code and getting this out the door

Discussion (3)

pic
Editor guide
Collapse
link2twenty profile image
Andrew Bone Author

Thank you @s_aitchison and @nickytonline for getting this over the line 😊

Collapse
nickytonline profile image
Nick Taylor (he/him) • Edited

Already using this @link2twenty ! Nice work. 👏🏻

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her)

Super excited to have this change in the codebase - really nice work! ✨🚀