Copy/Paste Option for adding Book Covers resolving #9993

[Spaarsh]

Closes #9993

feature

Technical

Changes are limited to .html and .js files only. It is still a bit buggy on the front end side. A user may be shown 'No Image Selected' even if that is not the case. But the submission will be successfully done nonetheless.

Testing

1. Go to any works page.
2. Either click on the 'Add Another Issue' or try to edit any existing edition and skip to step 4.
3. Add the details for a dummy issue and proceed.
4. Click on 'Manage Covers' button.
5. If the add.html page now features a paste option which successfully adds the new cover, the code is successful.

Screenshot

Stakeholders

@RayBB @cdrini @mekarpeles @Freso

[Spaarsh]

@cdrini Are any changed required? Waiting for your review!

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 0% with 43 lines in your changes missing coverage. Please review.

Project coverage is 17.26%. Comparing base (347bff9) to head (504b4b4).
Report is 131 commits behind head on master.

Files with missing lines	Patch %	Lines
openlibrary/plugins/openlibrary/js/covers.js	0.00%	32 Missing and 5 partials ⚠️
openlibrary/plugins/openlibrary/js/index.js	0.00%	4 Missing and 2 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #10101      +/-   ##
==========================================
+ Coverage   17.12%   17.26%   +0.13%     
==========================================
  Files          89       89              
  Lines        4752     4841      +89     
  Branches      831      853      +22     
==========================================
+ Hits          814      836      +22     
- Misses       3428     3480      +52     
- Partials      510      525      +15     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[cdrini]

Nice work @Spaarsh this looks like a great start! A few code fixes from a quick first pass.

Also for the UI: Place the image inside the "paste image" grey box ; just above the "Use this image" button. Like so:

We use this UI for one of the other grey boxes, so see if you can re-use the CSS there.

[cdrini]

Ah there's a bug here; since there can be multiple items in the clipboardItems, you'll want to skip any non image types, not error. Eg

if (!item.types.includes('image/png')) {
    continue;
}

And also check for jpg images as well, since those will work too!

[Spaarsh]

Yes done. Additionally, initially I had included only png support because clipboards store all copied image formats in .png irrespective of the initial image format. However after a little digging after your suggestion, I found out that in Windows, users can changes their settings to store images in the jpg format. I may have to dig deeper into this, but I do not see any harm in adding the support right now.

[Spaarsh]

This is the updated UI:

All the other recommended changes have been made as well. There is another issue now, the add.html page is not scrollable and hence, the bottom most part of the page is inaccesible. Should I make the necessary changes in the CSS as well to address that?

[Spaarsh]

@cdrini any updates on this?