From c1224e0b747f6e539cc4b5ad0aa27934dd5221be Mon Sep 17 00:00:00 2001
From: Shobhan Karthish <91373483+ShobhanKarthish@users.noreply.github.com>
Date: Sat, 5 Sep 2026 09:15:31 +0000
Subject: [PATCH] fix: render SchemaDisplayPath as React nodes

Avoid dangerouslySetInnerHTML so path/children cannot inject HTML.
Closes #486.
---
 packages/elements/src/schema-display.tsx | 25 +++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/elements/src/schema-display.tsx b/packages/elements/src/schema-display.tsx
index d3d4c691..990e0c99 100644
--- a/packages/elements/src/schema-display.tsx
+++ b/packages/elements/src/schema-display.tsx
@@ -97,19 +97,22 @@ export const SchemaDisplayPath = ({
 }: SchemaDisplayPathProps) => {
   const { path } = useContext(SchemaDisplayContext);
 
-  // Highlight path parameters
-  const highlightedPath = path.replaceAll(
-    /\{([^}]+)\}/g,
-    '<span class="text-blue-600 dark:text-blue-400">{$1}</span>'
-  );
+  // Highlight path parameters as React nodes (escapes by construction)
+  const parts = path.split(/(\{[^}]+\})/g);
 
   return (
-    <span
-      className={cn("font-mono text-sm", className)}
-      // oxlint-disable-next-line eslint-plugin-react(no-danger)
-      dangerouslySetInnerHTML={{ __html: children ?? highlightedPath }}
-      {...props}
-    />
+    <span className={cn("font-mono text-sm", className)} {...props}>
+      {children ??
+        parts.map((part, i) =>
+          /^\{[^}]+\}$/.test(part) ? (
+            <span className="text-blue-600 dark:text-blue-400" key={i}>
+              {part}
+            </span>
+          ) : (
+            part
+          )
+        )}
+    </span>
   );
 };