Updates

Co-Authored-By: Claude Opus 5.5 <[email protected]>

components/elements/HtmlToReactComponent.tsx

@@ -1,10 +1,9 @@
 import type { DetailedHTMLProps, HTMLAttributes } from "react";
-import HtmlToReact from "html-to-react";
 import { twMerge } from "tailwind-merge";
 
-export type TWUI_TOGGLE_PROPS = DetailedHTMLProps<
-    HTMLAttributes<HTMLDivElement>,
-    HTMLDivElement
+export type TWUI_TOGGLE_PROPS = Omit<
+    DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+    "dangerouslySetInnerHTML"
 > & {
     html: string;
     componentRef?: React.RefObject<any>;
@@ -12,6 +11,9 @@ export type TWUI_TOGGLE_PROPS = DetailedHTMLProps<
 
 /**
  * # HTML String to React Component
+ * Renders the HTML as-is, so only pass trusted or already-escaped HTML.
+ * Uses `dangerouslySetInnerHTML` rather than an HTML-to-React parser so
+ * it works in both server and browser bundles.
  * @className_wrapper twui-html-react
  */
 export default function HtmlToReactComponent({
@@ -19,16 +21,12 @@ export default function HtmlToReactComponent({
     componentRef,
     ...props
 }: TWUI_TOGGLE_PROPS) {
-    const htmlToReactParser = HtmlToReact.Parser();
-    const reactElement = htmlToReactParser.parse(html);
-
     return (
         <div
             {...props}
-            className={twMerge("", props.className)}
+            className={twMerge("twui-html-react", props.className)}
             ref={componentRef}
-        >
-            {reactElement}
-        </div>
+            dangerouslySetInnerHTML={{ __html: html }}
+        />
     );
 }