From 5328a663aa87d30e907c0f96304c8950b42c8615 Mon Sep 17 00:00:00 2001
From: Gianni Ferullo <giannif@gmail.com>
Date: Fri, 10 May 2024 08:42:35 -0400
Subject: [PATCH] execute the bottle data tag

---
 .../src/components/dangerous-element.tsx      | 24 +++++++++++++++++++
 .../react-components/src/components/gif.tsx   |  4 ++--
 2 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 packages/react-components/src/components/dangerous-element.tsx

diff --git a/packages/react-components/src/components/dangerous-element.tsx b/packages/react-components/src/components/dangerous-element.tsx
new file mode 100644
index 00000000..4d4a6a0c
--- /dev/null
+++ b/packages/react-components/src/components/dangerous-element.tsx
@@ -0,0 +1,24 @@
+import React, { useRef, useLayoutEffect } from 'react'
+/**
+ * Execute a script tag in a React component.
+ * https://macarthur.me/posts/script-tags-in-react/
+ */
+function DangrousElement({ markup }: { markup: string }) {
+    const elRef = useRef<HTMLDivElement>(null)
+
+    useLayoutEffect(() => {
+        if (!elRef.current) return
+        const range = document.createRange()
+        range.selectNode(elRef.current)
+        const documentFragment = range.createContextualFragment(markup)
+
+        // Inject the markup, triggering a re-run!
+        elRef.current.innerHTML = ''
+        elRef.current.append(documentFragment)
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+
+    return <div ref={elRef} dangerouslySetInnerHTML={{ __html: markup }}></div>
+}
+
+export default DangrousElement
diff --git a/packages/react-components/src/components/gif.tsx b/packages/react-components/src/components/gif.tsx
index d62edfac..0d8a385a 100644
--- a/packages/react-components/src/components/gif.tsx
+++ b/packages/react-components/src/components/gif.tsx
@@ -8,6 +8,7 @@ import styled from 'styled-components'
 import * as pingback from '../util/pingback'
 import AttributionOverlay from './attribution/overlay'
 import VerifiedBadge from './attribution/verified-badge'
+import DangerousElement from './dangerous-element'
 import { PingbackContext } from './pingback-context-manager'
 import { GifOverlayProps } from './types'
 
@@ -201,7 +202,6 @@ const Gif = ({
         onGifVisible(gif, e) // gif is visible, perhaps just partially
         setLoadedClassName(Gif.imgLoadedClassName)
     }
-
     useEffect(() => {
         // the id has changed, maybe the image has loaded
         if (image.current?.complete) {
@@ -289,7 +289,7 @@ const Gif = ({
                 />
                 {isAd &&
                     bottleData?.tags?.map((tag: string, index: number) => (
-                        <div dangerouslySetInnerHTML={{ __html: tag }} key={index} />
+                        <DangerousElement markup={tag} key={index} />
                     ))}
             </picture>
             {Overlay && (