custom HTML without <script> as server components

src/ui/modules/CustomHTML/WithScript.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import { ComponentProps, useEffect, useRef, useState } from 'react'
+import moduleProps from '@/lib/moduleProps'
+
+/**
+ * @description If the code includes a <script> tag, ensure the script is re-run on each render
+ */
+export default function WithScript({
+	code,
+	className,
+	...props
+}: Partial<{ code: string } & Sanity.Module> & ComponentProps<'section'>) {
+	if (!code) return null
+
+	const ref = useRef<HTMLElement>(null)
+	const [firstRender, setFirstRender] = useState(true)
+
+	useEffect(() => {
+		if (firstRender) {
+			setFirstRender(false)
+		} else {
+			const parsed = document.createRange().createContextualFragment(code)
+			ref.current?.appendChild(parsed)
+		}
+	}, [ref.current, code])
+
+	return <section ref={ref} {...moduleProps(props)} />
+}

src/ui/modules/CustomHTML/index.tsx

@@ -0,0 +1,28 @@
+import moduleProps from '@/lib/moduleProps'
+import { stegaClean } from 'next-sanity'
+import WithScript from './WithScript'
+
+export default function CustomHTML({
+	className,
+	html,
+	...props
+}: Partial<
+	{
+		className: string
+		html: {
+			code: string
+		}
+	} & Sanity.Module
+>) {
+	if (!html?.code) return null
+
+	return html.code.includes('<script') ? (
+		<WithScript code={stegaClean(html.code)} {...props} />
+	) : (
+		<section
+			className={stegaClean(className)}
+			{...moduleProps(props)}
+			dangerouslySetInnerHTML={{ __html: stegaClean(html.code) }}
+		/>
+	)
+}