feat: support editing YouTube and Google Maps embeds

apps/studio/next.config.mjs

@@ -21,20 +21,24 @@ const ContentSecurityPolicy = `
   form-action 'self';
   frame-ancestors 'self';
   img-src * data: blob:;
-  frame-src 'self';
+  frame-src
+    'self'
+    https://www.google.com
+    https://www.youtube-nocookie.com
+    ;
   object-src 'none';
   script-src 'self' 'unsafe-eval' https://*.wogaa.sg;
   style-src 'self' https: 'unsafe-inline';
   connect-src
     'self'
-    https://schema.isomer.gov.sg
     https://browser-intake-datadoghq.com
     https://*.browser-intake-datadoghq.com
     https://vitals.vercel-insights.com/v1/vitals
     https://*.amazonaws.com
     https://*.wogaa.sg
     https://placehold.co
     https://cdn.growthbook.io/api/features/${env.NEXT_PUBLIC_GROWTHBOOK_CLIENT_KEY}
+    https://cdn.growthbook.io/sub/${env.NEXT_PUBLIC_GROWTHBOOK_CLIENT_KEY}
     https://widget.intercom.io/widget/${env.NEXT_PUBLIC_INTERCOM_APP_ID}
     ${env.NODE_ENV === "production" ? "https://isomer-user-content.by.gov.sg" : "https://*.by.gov.sg"}
     ;

apps/studio/package.json

@@ -120,6 +120,7 @@
     "fuzzysort": "^2.0.4",
     "inter-ui": "^4.0.2",
     "iron-session": "^8.0.1",
+    "isomorphic-dompurify": "^2.12.0",
     "jotai": "^2.9.1",
     "kysely": "^0.27.3",
     "lodash": "^4.17.21",

apps/studio/src/components/PageEditor/constants.ts

@@ -276,6 +276,7 @@ type AllowedBlockSections = {
 
 export const ARTICLE_ALLOWED_BLOCKS: AllowedBlockSections = [
   { label: "Basic building blocks", types: ["prose", "image", "callout"] },
+  { label: "Embed external content", types: ["googlemaps", "youtube"] },
 ]
 
 export const CONTENT_ALLOWED_BLOCKS: AllowedBlockSections = [
@@ -284,6 +285,7 @@ export const CONTENT_ALLOWED_BLOCKS: AllowedBlockSections = [
     label: "Organise complex content",
     types: ["contentpic", "infocards", "accordion", "infocols"],
   },
+  { label: "Embed external content", types: ["googlemaps", "youtube"] },
 ]
 export const HOMEPAGE_ALLOWED_BLOCKS: AllowedBlockSections = [
   {

apps/studio/src/features/editing-experience/components/form-builder/FormBuilder.tsx

@@ -25,6 +25,8 @@ import {
   jsonFormsConstControlTester,
   JsonFormsDateControl,
   jsonFormsDateControlTester,
+  JsonFormsEmbedControl,
+  jsonFormsEmbedControlTester,
   jsonFormsGroupLayoutRenderer,
   jsonFormsGroupLayoutTester,
   JsonFormsImageControl,
@@ -57,6 +59,7 @@ const renderers: JsonFormsRendererRegistryEntry[] = [
   { tester: jsonFormsArrayControlTester, renderer: JsonFormsArrayControl },
   { tester: jsonFormsBooleanControlTester, renderer: JsonFormsBooleanControl },
   { tester: jsonFormsConstControlTester, renderer: JsonFormsConstControl },
+  { tester: jsonFormsEmbedControlTester, renderer: JsonFormsEmbedControl },
   { tester: jsonFormsIntegerControlTester, renderer: JsonFormsIntegerControl },
   { tester: jsonFormsImageControlTester, renderer: JsonFormsImageControl },
   { tester: jsonFormsLinkControlTester, renderer: JsonFormsLinkControl },

apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsEmbedControl.tsx

@@ -0,0 +1,160 @@
+import type { ControlProps, RankedTester } from "@jsonforms/core"
+import {
+  Box,
+  FormControl,
+  HStack,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  useDisclosure,
+} from "@chakra-ui/react"
+import { and, isStringControl, rankWith, schemaMatches } from "@jsonforms/core"
+import { withJsonFormsControlProps } from "@jsonforms/react"
+import {
+  Button,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+  ModalCloseButton,
+  Textarea,
+} from "@opengovsg/design-system-react"
+import { z } from "zod"
+
+import { JSON_FORMS_RANKING } from "~/constants/formBuilder"
+import { useZodForm } from "~/lib/form"
+import { getIframeSrc } from "../../../utils"
+
+export const jsonFormsEmbedControlTester: RankedTester = rankWith(
+  JSON_FORMS_RANKING.TextControl,
+  and(
+    isStringControl,
+    schemaMatches((schema) => schema.format === "embed"),
+  ),
+)
+
+interface EmbedCodeModalProps {
+  isOpen: boolean
+  onClose: () => void
+  onSave: (embedCode: string) => void
+}
+
+function EmbedCodeModal({ isOpen, onClose, onSave }: EmbedCodeModalProps) {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isValid },
+  } = useZodForm({
+    schema: z.object({
+      embedCode: z.string().min(1),
+    }),
+  })
+
+  const onSubmit = handleSubmit(({ embedCode }) => {
+    onClose()
+    onSave(embedCode)
+    reset()
+  })
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <form onSubmit={onSubmit}>
+          <ModalHeader mr="3.5rem">Insert embed code</ModalHeader>
+          <ModalCloseButton size="lg" />
+
+          <ModalBody>
+            <Text>
+              Paste the embed code provided into the input field below.
+            </Text>
+
+            <FormControl mt="1rem" isRequired isInvalid={!!errors.embedCode}>
+              <Textarea
+                placeholder="Paste embed code here"
+                fontFamily="monospace"
+                minAutosizeRows={5}
+                {...register("embedCode")}
+              />
+            </FormControl>
+          </ModalBody>
+
+          <ModalFooter>
+            <HStack spacing="0.75rem">
+              <Button
+                variant="clear"
+                color="base.content.default"
+                onClick={onClose}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" onClick={onSubmit} isDisabled={!isValid}>
+                Insert
+              </Button>
+            </HStack>
+          </ModalFooter>
+        </form>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+export function JsonFormsEmbedControl({
+  data,
+  label,
+  handleChange,
+  path,
+  description,
+  required,
+  errors,
+}: ControlProps) {
+  const {
+    isOpen: isEmbedModalOpen,
+    onOpen: onEmbedModalOpen,
+    onClose: onEmbedModalClose,
+  } = useDisclosure()
+
+  const handleEmbedCodeSave = (embedCode: string) => {
+    const src = getIframeSrc(embedCode)
+    handleChange(path, src)
+  }
+
+  return (
+    <>
+      <EmbedCodeModal
+        isOpen={isEmbedModalOpen}
+        onClose={onEmbedModalClose}
+        onSave={(embedCode) => handleEmbedCodeSave(embedCode)}
+      />
+
+      <Box>
+        <FormControl isRequired={required} isInvalid={!!errors}>
+          <FormLabel description={description}>{label}</FormLabel>
+
+          <HStack>
+            <Input
+              type="text"
+              value={String(data || "")}
+              onChange={(e) => handleChange(path, e.target.value)}
+              placeholder={label}
+              disabled
+            />
+
+            <Button variant="clear" onClick={onEmbedModalOpen}>
+              Update
+            </Button>
+          </HStack>
+          <FormErrorMessage>
+            {label} {errors}
+          </FormErrorMessage>
+        </FormControl>
+      </Box>
+    </>
+  )
+}
+
+export default withJsonFormsControlProps(JsonFormsEmbedControl)

apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/index.ts

@@ -62,3 +62,7 @@ export {
   default as JsonFormsRefControl,
   jsonFormsRefControlTester,
 } from "./JsonFormsRefControl"
+export {
+  default as JsonFormsEmbedControl,
+  jsonFormsEmbedControlTester,
+} from "./JsonFormsEmbedControl"

apps/studio/src/features/editing-experience/components/utils.ts

@@ -3,6 +3,7 @@ import type {
   IsomerGeneratedSiteProps,
 } from "@opengovsg/isomer-components"
 import type { UseMutateAsyncFunction } from "@tanstack/react-query"
+import DOMPurify from "isomorphic-dompurify"
 import set from "lodash/set"
 
 import type collectionSitemap from "~/features/editing-experience/data/collectionSitemap.json"
@@ -91,3 +92,17 @@ export const generatePreviewSitemap = (
     })),
   } as IsomerGeneratedSiteProps["siteMap"]
 }
+
+export const getIframeSrc = (embedCode: string) => {
+  const elem = DOMPurify.sanitize(embedCode, {
+    ALLOWED_TAGS: ["iframe"],
+    RETURN_DOM_FRAGMENT: true,
+  })
+  const sanitizedUrl = elem.firstElementChild?.getAttribute("src")
+
+  if (sanitizedUrl === null) {
+    return undefined
+  }
+
+  return sanitizedUrl
+}

packages/components/src/interfaces/complex/GoogleMaps.ts

@@ -15,6 +15,7 @@ export const GoogleMapsSchema = Type.Object(
       title: "Google Maps embed URL",
       description: "Refer to the guide to understand how to embed your map.",
       pattern: GOOGLE_MAPS_URL_PATTERN,
+      format: "embed",
     }),
   },
   {

packages/components/src/interfaces/complex/YouTube.ts

@@ -15,6 +15,7 @@ export const YouTubeSchema = Type.Object(
       title: "YouTube URL",
       description: "Refer to the guide to understand how to embed your video.",
       pattern: YOUTUBE_URL_PATTERN,
+      format: "embed",
     }),
   },
   {