feat: support editing YouTube and Google Maps embeds

[dcshzj]

Problem

We have the YouTube and Google Maps embed components, but no way to create/edit them on Studio.

Closes ISOM-1676.

Solution

Breaking Changes

• Yes - this PR contains breaking changes
• No - this PR is backwards compatible

Features:

• Add the new YouTube and Google Maps embed components as supported components that can be added for article and content pages.
• Introduced a new embed form control in JSONForms to allow users to paste in the embed code, which is then sanitised and parsed to extract the actual URL of the embed using DOMPurify.
• Expanded the Content Security Policy to allow YouTube and Google Maps.

Bug Fixes:

• There was an issue with loading Growthbook due to a missing entry in the Content Security Policy of Studio.

Notes:

• The editing experience on Studio is still pending design.

Screenshots

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
isomer-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 16, 2024 7:39am

[linear]

ISOM-1676 YouTube & Google Maps Embeds

[datadog-opengovsg]

Datadog Report

Branch report: feat/embeds-studio-editing
Commit report: 4070a4d
Test service: isomer-studio

✅ 0 Failed, 196 Passed, 34 Skipped, 37.91s Total Time
⬆️ Test Sessions change in coverage: 1 increased (+0.22%)

[sehyunidaaa]

Hey just curious! is there a reason why there's an 'update' button instead of having the textarea directly on the form?

[dcshzj]

Hey just curious! is there a reason why there's an 'update' button instead of having the textarea directly on the form?

Clarified offline! Mainly is because we are constructing the iframe ourselves (for security) rather than letting the user input any iframe that they want. The validation for iframes would also be harder to perform compared to just checking the URL which we are currently doing.

[sehyunidaaa]

Thank you! Added some minor design suggestions here after our discussion! @dcshzj

https://www.figma.com/design/g7LnLn4IUcUC9dYxgsHEJM/IsomerCMS-V2-(working-title%3A-%22Isomer-Studio%22)?node-id=10835-42086