SHS-5629: Editors can more easily edit a caption

[codechefmarc]

READY FOR REVIEW

Summary

• Adds a patch to Drupal core to add an edit icon next to media items that use the core media library form display.
• This allows for editing of the media item in a modal while in a node edit form.
• Tugboat testing instance: https://pr1580-lqaarerjbqqcvxksaxnggcqcjx0lz4qh.tugboatqa.com

Need Review By (Date)

7/22/2024

Urgency

low

Steps to Test

1. Login to the site
2. Edit the homepage or a page that has a "Banner image(s) with partial overlay and text

3. Click "Edit" in the "Banner image(s) with partial overlay and text" paragraph

4. Click "Edit" on one of the "Banner image with overlay and text" paragraphs

5. Verify that there's now a pencil icon in addition to the "X" icon on top of the Image media

6. Click the pencil icon
7. Verify that a modal pops up that has the media edit form for that image

8. Change the text in the "Caption/Credit" text area
9. Save the media in the modal
10. Save the page
11. Verify that the caption text on the slide that was edited has now changed

PR Checklist

• PR Checklist
• Humsci Basic PR Checklist

---

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • https://app.asana.com/0/0/1207858777652180

[cienvaras]

@codechefmarc I can see the edit button and open the modal, but I found an issue with the modal position. It's not always centered, and sometimes the "Save" button cannot be accessed:

Not sure what's the cause of the issue, because every other time the modal is rendered in the right position.

Also, please check the other comment I left in the code. Thanks!

[codechefmarc]

@cienvaras - Ok, switched out the patch for a d.o. version and also added a patch that I think fixes the save button issue. It had to do with Gin, I believe. I had a hard time recreating as it worked for me without that patch, but once I put that patch in, it works all the time, I think? Please re-test. What browser were you using? I tested on Arc and Safari.

[cienvaras]

@codechefmarc I initially tested in Arc in Mac. After applying the gin patch, I tested again in Arc, Chrome and Safari and I still have the issue in Arc and Chrome, Safari works well.

It seems that the issue is related to scrolling. In most cases, the dialog is initially shown in the right position, but if I close it, scroll the page and open it again it's displayed too low on the page.

I'll try to get someone else to test this and discard that the problem is happening only on my computer, but I'll hold on merging this until we're sure that the issue is solved.

[ahughes3]

It seems that the issue is related to scrolling. In most cases, the dialog is initially shown in the right position, but if I close it, scroll the page and open it again it's displayed too low on the page.

I'll try to get someone else to test this and discard that the problem is happening only on my computer, but I'll hold on merging this until we're sure that the issue is solved.

@codechefmarc @cienvaras I tested today using Chrome on a Mac and the issue is still there. I tested previously before the patch was added and experienced the same issue. The modal opens up but I can't scroll to access the save button

https://www.loom.com/share/cef1a182ef7745c1988cb31241851c8e?sid=ee07a8e6-f092-4577-812b-c98fefe0eee9

[codechefmarc]

@ahughes3 , @cienvaras - Thank you for testing, I'll get back on this ticket and research how we can fix that odd bug. I'm sure there is a way.

[codechefmarc]

@ahughes3 and @cienvaras - I pushed some changes up and tested the dialog after scrolling and it appear to be working for me, please re-test. Thank you!
https://pr1580-lqaarerjbqqcvxksaxnggcqcjx0lz4qh.tugboatqa.com/