feat: polish

packages/ui/src/note/mentions/note.tsx

@@ -1,13 +1,7 @@
-import { NOSTR_MENTIONS } from "@lume/utils";
-import { ReactNode, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import reactStringReplace from "react-string-replace";
 import { User } from "../../user";
-import { Hashtag } from "./hashtag";
-import { MentionUser } from "./user";
 import { useArk, useEvent } from "@lume/ark";
 import { LinkIcon } from "@lume/icons";
-import { stripHtml } from "string-strip-html";
 
 export function MentionNote({
   eventId,
@@ -16,72 +10,11 @@ export function MentionNote({
   eventId: string;
   openable?: boolean;
 }) {
+  const ark = useArk();
+
   const { t } = useTranslation();
   const { isLoading, isError, data } = useEvent(eventId);
 
-  const ark = useArk();
-  const content = useMemo(() => {
-    if (!data) return "";
-
-    const text = stripHtml(data.content.trim()).result;
-    const words = text.split(/( |\n)/);
-
-    // @ts-ignore, kaboom !!!
-    let parsedContent: ReactNode[] = text;
-
-    const hashtags = words.filter((word) => word.startsWith("#"));
-    const mentions = words.filter((word) =>
-      NOSTR_MENTIONS.some((el) => word.startsWith(el)),
-    );
-
-    try {
-      if (hashtags.length) {
-        for (const hashtag of hashtags) {
-          parsedContent = reactStringReplace(
-            parsedContent,
-            hashtag,
-            (match, i) => {
-              return <Hashtag key={match + i} tag={hashtag} />;
-            },
-          );
-        }
-      }
-
-      if (mentions.length) {
-        for (const mention of mentions) {
-          parsedContent = reactStringReplace(
-            parsedContent,
-            mention,
-            (match, i) => <MentionUser key={match + i} pubkey={mention} />,
-          );
-        }
-      }
-
-      parsedContent = reactStringReplace(
-        parsedContent,
-        /(https?:\/\/\S+)/g,
-        (match, i) => {
-          const url = new URL(match);
-          return (
-            <a
-              key={match + i}
-              href={url.toString()}
-              target="_blank"
-              rel="noreferrer"
-              className="content-break inline-block w-full truncate font-normal text-blue-500 hover:text-blue-600"
-            >
-              {url.toString()}
-            </a>
-          );
-        },
-      );
-
-      return parsedContent;
-    } catch (e) {
-      return text;
-    }
-  }, [data]);
-
   if (isLoading) {
     return (
       <div
@@ -120,7 +53,7 @@ export function MentionNote({
         </User.Root>
       </User.Provider>
       <div className="line-clamp-4 select-text whitespace-normal text-balance leading-normal">
-        {content}
+        {data.content}
       </div>
       {openable ? (
         <div className="flex h-10 items-center justify-between">