feat: apply react-highlight in LoadedCode

packages/react/package.json

@@ -15,6 +15,7 @@
     "highlight.js": "^11.9.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-highlight": "^0.15.0",
     "react-router-dom": "^6.23.1",
     "rehype-highlight": "^7.0.0",
     "rehype-slug": "^6.0.0",
@@ -28,6 +29,7 @@
     "@types/node": "^20.12.13",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
+    "@types/react-highlight": "^0",
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",

packages/react/src/components/LoadedCode.tsx

@@ -1,15 +1,18 @@
-import { useRef, useEffect, useState, forwardRef } from "react";
-import hljs from "highlight.js";
+import { useEffect, useState } from "react";
+import Highlight from "react-highlight";
 import { Button } from "@components/Button";
 import { useToast } from "@components/Toast";
 import { twMerge } from "tailwind-merge";
 
 export const GITHUB = "https://raw.githubusercontent.com/p-sw/ui/main";
 
-export const LoadedCode = forwardRef<
-  HTMLPreElement,
-  { from: string; className?: string }
->(({ from, className }, outRef) => {
+export const LoadedCode = ({
+  from,
+  className,
+}: {
+  from: string;
+  className?: string;
+}) => {
   const [state, setState] = useState<string | undefined | null>();
   const { toast } = useToast();
 
@@ -21,15 +24,6 @@ export const LoadedCode = forwardRef<
     })();
   }, [from]);
 
-  const ref = useRef<HTMLPreElement | null>(null);
-
-  useEffect(() => {
-    if (state && ref.current && !ref.current.dataset.highlighted) {
-      hljs.configure({ ignoreUnescapedHTML: true });
-      hljs.highlightElement(ref.current);
-    }
-  }, [state]);
-
   return (
     <div className={twMerge("relative", className)}>
       <Button
@@ -65,16 +59,13 @@ export const LoadedCode = forwardRef<
           />
         </svg>
       </Button>
-      <pre
-        className={`relative hljs w-full h-64 rounded-lg language-tsx ${
+      <Highlight
+        className={`w-full h-64 rounded-lg language-tsx ${
           !state ? "animate-pulse" : ""
         }`}
-        ref={ref}
       >
-        <code className="language-tsx" ref={outRef}>
-          {state ?? null}
-        </code>
-      </pre>
+        {state ?? ""}
+      </Highlight>
     </div>
   );
-});
+};

yarn.lock

@@ -1009,6 +1009,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-highlight@npm:^0":
+  version: 0.12.8
+  resolution: "@types/react-highlight@npm:0.12.8"
+  dependencies:
+    "@types/react": "npm:*"
+  checksum: 10c0/c0a275d4d1ddf99cd08f7bfb66cd10db85b10c49a60650c1aa19b93f8a07c85dbae5f2236015d2592d04b8fba2c029904eecd09acf5aab12466ea0cd0d423f10
+  languageName: node
+  linkType: hard
+
 "@types/react-router-dom@npm:^5.3.3":
   version: 5.3.3
   resolution: "@types/react-router-dom@npm:5.3.3"
@@ -2603,6 +2612,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"highlight.js@npm:^10.5.0":
+  version: 10.7.3
+  resolution: "highlight.js@npm:10.7.3"
+  checksum: 10c0/073837eaf816922427a9005c56c42ad8786473dc042332dfe7901aa065e92bc3d94ebf704975257526482066abb2c8677cc0326559bb8621e046c21c5991c434
+  languageName: node
+  linkType: hard
+
 "highlight.js@npm:^11.9.0, highlight.js@npm:~11.9.0":
   version: 11.9.0
   resolution: "highlight.js@npm:11.9.0"
@@ -4308,6 +4324,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-highlight@npm:^0.15.0":
+  version: 0.15.0
+  resolution: "react-highlight@npm:0.15.0"
+  dependencies:
+    highlight.js: "npm:^10.5.0"
+  checksum: 10c0/edb618c04fb44af03cea128ec26b4aaecd690982f8bafb3e47040c1706b0721184ea029b8365c4a937ea60ae1d75b3c214863ca8fa5a46477093209ad63f89ab
+  languageName: node
+  linkType: hard
+
 "react-refresh@npm:^0.14.0":
   version: 0.14.2
   resolution: "react-refresh@npm:0.14.2"
@@ -4360,6 +4385,7 @@ __metadata:
     "@types/node": "npm:^20.12.13"
     "@types/react": "npm:^18.2.66"
     "@types/react-dom": "npm:^18.2.22"
+    "@types/react-highlight": "npm:^0"
     "@types/react-router-dom": "npm:^5.3.3"
     "@typescript-eslint/eslint-plugin": "npm:^7.2.0"
     "@typescript-eslint/parser": "npm:^7.2.0"
@@ -4373,6 +4399,7 @@ __metadata:
     postcss: "npm:^8.4.38"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
+    react-highlight: "npm:^0.15.0"
     react-router-dom: "npm:^6.23.1"
     rehype-highlight: "npm:^7.0.0"
     rehype-slug: "npm:^6.0.0"