Ensure any <scripts> are re-run after each render in Custom HTML module

src/ui/modules/CustomHTML.tsx

@@ -1,5 +1,8 @@
+'use client'
+
 import uid from '@/lib/uid'
 import { stegaClean } from '@sanity/client/stega'
+import { useEffect, useRef, useState } from 'react'
 
 export default function CustomHTML({
 	className,
@@ -13,13 +16,33 @@ export default function CustomHTML({
 		}
 	}
 >) {
+	const ref = useRef<HTMLElement>(null)
+	const [firstRender, setFirstRender] = useState(true)
+
 	if (!html?.code) return null
 
-	return (
-		<section
-			id={uid(props)}
-			className={stegaClean(className)}
-			dangerouslySetInnerHTML={{ __html: html.code }}
-		/>
-	)
+	if (!html.code.includes('<script'))
+		return (
+			<section
+				id={uid(props)}
+				className={stegaClean(className)}
+				dangerouslySetInnerHTML={{ __html: stegaClean(html.code) }}
+			/>
+		)
+
+	// if includes <script> tag, ensure script is re-run on each render
+
+	useEffect(() => {
+		if (firstRender) {
+			setFirstRender(false)
+		} else {
+			const parsed = document
+				.createRange()
+				.createContextualFragment(stegaClean(html.code))
+
+			ref.current?.appendChild(parsed)
+		}
+	}, [ref.current, html.code])
+
+	return <section ref={ref} id={uid(props)} className={stegaClean(className)} />
 }