profile description rich text

src/components/Composer.tsx

···
-import { RichText } from "@atproto/api";
+import { AppBskyRichtextFacet, RichText } from "@atproto/api";
 import { useAtom } from "jotai";
 import { Dialog } from "radix-ui";
 import { useEffect, useRef, useState } from "react";
···
     try {
       const rt = new RichText({ text: postText });
       await rt.detectFacets(agent);
+
+      if (rt.facets?.length) {
+      rt.facets = rt.facets.filter((item) => {
+        if (item.$type !== "app.bsky.richtext.facet") return true;
+        if (!item.features?.length) return true;
+
+        item.features = item.features.filter((feature) => {
+          if (feature.$type !== "app.bsky.richtext.facet#mention") return true;
+          const did = feature.$type === "app.bsky.richtext.facet#mention" ? (feature as AppBskyRichtextFacet.Mention)?.did : undefined;
+          return typeof did === "string" && did.startsWith("did:");
+        });
+
+        return item.features.length > 0;
+      });
+    }
 
       const record: Record<string, unknown> = {
         $type: "app.bsky.feed.post",

src/components/UniversalPostRenderer.tsx

···
     return { start, end, feature: f.features[0] };
   });
 }
-function renderTextWithFacets({
+export function renderTextWithFacets({
   text,
   facets,
   navigate,

src/routes/profile.$did/index.tsx

···
+import { RichText } from "@atproto/api";
 import { useQueryClient } from "@tanstack/react-query";
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useAtom } from "jotai";
-import React from "react";
+import React, { type ReactNode,useEffect, useState } from "react";
 
 import { Header } from "~/components/Header";
-import { UniversalPostRendererATURILoader } from "~/components/UniversalPostRenderer";
+import { renderTextWithFacets, UniversalPostRendererATURILoader } from "~/components/UniversalPostRenderer";
 import { useAuth } from "~/providers/UnifiedAuthProvider";
 import { imgCDNAtom } from "~/utils/atoms";
 import { toggleFollow, useGetFollowState, useGetOneToOneState } from "~/utils/followState";
···
 function ProfileComponent() {
   // booo bad this is not always the did it might be a handle, use identity.did instead
   const { did } = Route.useParams();
+  const navigate = useNavigate();
   const queryClient = useQueryClient();
   const {
     data: identity,
···
           </div>
           {description && (
             <div className="text-base leading-relaxed text-gray-800 dark:text-gray-300 mb-5 whitespace-pre-wrap break-words text-[15px]">
-              {description}
+              {/* {description} */}
+              <RichTextRenderer key={did} description={description}/>
             </div>
           )}
         </div>
···
       )}
     </>
   );
+}
+
+export function RichTextRenderer({ description }: { description: string }) {
+  const [richDescription, setRichDescription] = useState<string | ReactNode[]>(description);
+  const { agent } = useAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    let mounted = true;
+
+    // setRichDescription(description);
+
+    async function processRichText() {
+      try {
+        if (!agent?.did) return;
+        const rt = new RichText({ text: description });
+        await rt.detectFacets(agent);
+
+        if (!mounted) return;
+
+        if (rt.facets) {
+          setRichDescription(renderTextWithFacets({ text: rt.text, facets: rt.facets, navigate }));
+        } else {
+          setRichDescription(rt.text);
+        }
+      } catch (error) {
+        console.error("Failed to detect facets:", error);
+        if (mounted) {
+          setRichDescription(description);
+        }
+      }
+    }
+
+    processRichText();
+
+    return () => {
+      mounted = false;
+    };
+  }, [description, agent, navigate]);
+
+  return <>{richDescription}</>;
 }