fix: remove re-highlight warning messages

packages/react/src/components/LoadedCode.tsx

@@ -1,59 +1,68 @@
-import { useEffect, useState } from "react";
+import { useRef, useEffect, useState, forwardRef } from "react";
 import hljs from "highlight.js";
 import { Button } from "@components/Button";
 import { useToast } from "@components/Toast";
 import { escapeHtml } from "@/utils/escapeHtml";
 
-export function LoadedCode({ from }: { from: string }) {
+export const GITHUB = "https://raw.githubusercontent.com/p-sw/ui/main/";
-  const [state, setState] = useState<string | undefined | null>();
-  const { toast } = useToast();
 
-  useEffect(() => {
+export const LoadedCode = forwardRef<HTMLPreElement, { from: string }>(
-    (async () => {
+  ({ from }, outRef) => {
-      const res = await fetch(from);
+    const [state, setState] = useState<string | undefined | null>();
-      const text = await res.text();
+    const { toast } = useToast();
-      setState(escapeHtml(text));
-    })();
-  }, [from]);
 
-  useEffect(() => {
+    useEffect(() => {
-    if (state) {
+      (async () => {
-      hljs.highlightAll();
+        const res = await fetch(from);
-    }
+        const text = await res.text();
-  }, [state]);
+        setState(escapeHtml(text));
+      })();
+    }, [from]);
 
-  return (
+    const ref = useRef<HTMLElement | null>(null);
-    <pre
+
-      className={`relative hljs w-full h-64 rounded-lg ${
+    useEffect(() => {
-        !state ? "animate-pulse" : ""
+      if (ref.current && !ref.current.dataset.highlighted) {
-      }`}
+        hljs.highlightElement(ref.current);
-    >
+      }
-      <Button
+    }, [state]);
-        preset="default"
+
-        size="icon"
+    return (
-        className="sticky float-right top-0 text-black dark:text-white"
+      <pre
-        onClick={() => {
+        className={`relative hljs w-full h-64 rounded-lg ${
-          navigator.clipboard.writeText(state ?? "");
+          !state ? "animate-pulse" : ""
-          toast({
+        }`}
-            title: "Copied",
+        ref={outRef}
-            description: "The code has been copied to your clipboard.",
-            status: "success",
-          });
-        }}
       >
-        <svg
+        <Button
-          xmlns="http://www.w3.org/2000/svg"
+          preset="default"
-          width="1.2em"
+          size="icon"
-          height="1.2em"
+          className="sticky float-right top-0 text-black dark:text-white"
-          viewBox="0 0 24 24"
+          onClick={() => {
+            navigator.clipboard.writeText(state ?? "");
+            toast({
+              title: "Copied",
+              description: "The code has been copied to your clipboard.",
+              status: "success",
+            });
+          }}
         >
-          <path
+          <svg
-            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
-            d="M4 7v14h14v2H4c-1.1 0-2-.9-2-2V7zm16-4c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h3.18C11.6 1.84 12.7 1 14 1s2.4.84 2.82 2zm-6 0c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1s-.45-1-1-1m-4 4V5H8v12h12V5h-2v2z"
+            width="1.2em"
-          />
+            height="1.2em"
-        </svg>
+            viewBox="0 0 24 24"
-      </Button>
+          >
-      <code className="language-tsx">{state ?? null}</code>
+            <path
-    </pre>
+              fill="currentColor"
-  );
+              d="M4 7v14h14v2H4c-1.1 0-2-.9-2-2V7zm16-4c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h3.18C11.6 1.84 12.7 1 14 1s2.4.84 2.82 2zm-6 0c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1s-.45-1-1-1m-4 4V5H8v12h12V5h-2v2z"
-}
+            />
+          </svg>
+        </Button>
+        <code className="language-tsx" ref={ref}>
+          {state ?? null}
+        </code>
+      </pre>
+    );
+  }
+);