From 2040710f050d0e9521ceaeefe5509d2d3e4b4b0d Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Thu, 18 Apr 2024 10:56:57 +0100
Subject: [PATCH] custom row renderer to allow for clickable links

---
 src/app/components/code-highlighter.tsx     | 50 +++++++++++++++++++++
 src/app/components/player/lookup-player.tsx |  2 +-
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/src/app/components/code-highlighter.tsx b/src/app/components/code-highlighter.tsx
index ec0b246..93785f5 100644
--- a/src/app/components/code-highlighter.tsx
+++ b/src/app/components/code-highlighter.tsx
@@ -14,12 +14,62 @@ type CodeHighlighterProps = {
   rounded?: boolean;
 };
 
+import createElement from "react-syntax-highlighter/dist/esm/create-element";
+
+/**
+ * Render the rows with the ability to render links.
+ *
+ * @param rows the rows to render
+ * @param stylesheet the stylesheet to use
+ * @param useInlineStyles should inline styles be used
+ * @returns the rendered rows
+ */
+function rowRenderer({
+  rows,
+  stylesheet,
+  useInlineStyles,
+}: {
+  rows: any;
+  stylesheet: { [key: string]: React.CSSProperties };
+  useInlineStyles: boolean;
+}) {
+  return rows.map((node: any, i: number) => {
+    node.children = node.children.map((children: any) => {
+      const text = children?.children?.[0]?.value;
+
+      if (typeof text === "string" && text.startsWith('"http')) {
+        return {
+          ...children,
+          tagName: "a",
+          properties: {
+            ...children.properties,
+            href: text.slice(1, -1), // in JSON strings are enclosed with ", they need to be removed
+            target: "_blank",
+            // Tailwind CSS classes
+            class: "underline !text-primary hover:!text-muted-foreground transition-all",
+          },
+        };
+      }
+
+      return children;
+    });
+
+    return createElement({
+      node,
+      stylesheet,
+      useInlineStyles,
+      key: `code-segement${i}`,
+    });
+  });
+}
+
 export function CodeHighlighter({ code, rounded = true }: CodeHighlighterProps): ReactElement {
   return (
     <SyntaxHighlighter
       language="json"
       style={atomOneDark}
       wrapLongLines
+      renderer={rowRenderer}
       customStyle={{
         maxHeight: "600px",
         backgroundColor: "hsl(var(--popover))",
diff --git a/src/app/components/player/lookup-player.tsx b/src/app/components/player/lookup-player.tsx
index 9dcaded..4dd671d 100644
--- a/src/app/components/player/lookup-player.tsx
+++ b/src/app/components/player/lookup-player.tsx
@@ -49,7 +49,7 @@ export function LookupPlayer({ currentPlayer }: PlayerLookupProps): ReactElement
         description: (err as Error).message,
         duration: 5000,
       });
-      return setLoading(false);
+      return;
     }
   };