update markdown

src/shared/notes/mentions/note.tsx

@@ -5,13 +5,11 @@ import remarkGfm from 'remark-gfm';
 
 import { createBlock } from '@libs/storage';
 
-import { NoteSkeleton } from '@shared/notes/skeleton';
+import { MentionUser, NoteSkeleton } from '@shared/notes';
 import { User } from '@shared/user';
 
 import { useEvent } from '@utils/hooks/useEvent';
 
-import { MentionUser } from './user';
-
 export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
   const { status, data } = useEvent(id);
 
@@ -53,8 +51,17 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
               remarkPlugins={[remarkGfm]}
               components={{
                 del: ({ children }) => {
-                  const pubkey = children[0] as string;
-                  return <MentionUser pubkey={pubkey.slice(3)} />;
+                  const key = children[0] as string;
+                  if (key.startsWith('pub')) return <MentionUser pubkey={key.slice(3)} />;
+                  if (key.startsWith('tag'))
+                    return (
+                      <button
+                        type="button"
+                        className="font-normal text-orange-400 no-underline hover:text-orange-500"
+                      >
+                        {key.slice(3)}
+                      </button>
+                    );
                 },
               }}
             >

src/shared/notes/mentions/user.tsx

@@ -1,5 +1,3 @@
-import { Link } from 'react-router-dom';
-
 import { useProfile } from '@utils/hooks/useProfile';
 import { shortenKey } from '@utils/shortenKey';
 
@@ -7,11 +5,11 @@ export function MentionUser({ pubkey }: { pubkey: string }) {
   const { user } = useProfile(pubkey);
 
   return (
-    <Link
-      to={`/app/user/${pubkey}`}
-      className="break-words font-normal !text-green-400 no-underline hover:!text-green-500"
+    <button
+      type="button"
+      className="break-words rounded bg-zinc-800 px-2 py-px text-sm font-normal text-blue-400 no-underline hover:bg-blue-100 hover:text-blue-500"
     >
       @{user?.name || user?.displayName || shortenKey(pubkey)}
-    </Link>
+    </button>
   );
 }