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
- Drag a valid image file that we support and drop it on to the cover image area of the editor.
- Once the file is dropped, it will behave like a file selection upload.
- The spinner will appear
- The image will upload successfully and a cover image will appear
Drag/drop a post body image
- Drag a valid image file that we support and drop it on to the post body area of the editor.
- The post body editable area will change to an opacity of 25%
- The file uploads and inserts the markdown for the uploaded file into the last known cursor position of the post body editable area.
- 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.
- 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.
Also, the editor help has been updated to take image drag and drop into account.
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?
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.
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
- Copy an image into your clipboard.
- Paste it into article body
- 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?
A big thank you to @s_aitchison for fixing the issues with my code and getting this out the door
Top comments (3)
Thank you @s_aitchison and @nickytonline for getting this over the line 😊
Already using this @link2twenty ! Nice work. 👏🏻
Super excited to have this change in the codebase - really nice work! ✨🚀