use markdown

src/shared/notes/kinds/kind1.tsx

@@ -1,6 +1,14 @@
 import { useMemo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 
-import { LinkPreview, NoteActions, NoteMetadata, VideoPreview } from '@shared/notes';
+import {
+  LinkPreview,
+  MentionUser,
+  NoteActions,
+  NoteMetadata,
+  VideoPreview,
+} from '@shared/notes';
 import { MentionNote } from '@shared/notes/mentions/note';
 import { ImagePreview } from '@shared/notes/preview/image';
 import { User } from '@shared/user';
@@ -25,9 +33,28 @@ export function NoteKind_1({
           <div className="relative z-20 -mt-5 flex items-start gap-3">
             <div className="w-11 shrink-0" />
             <div className="flex-1">
-              <div className="relative z-10 select-text whitespace-pre-line break-words text-base text-zinc-100">
+              <ReactMarkdown
+                className="markdown"
+                remarkPlugins={[remarkGfm]}
+                components={{
+                  del: ({ children }) => {
+                    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>
+                      );
+                  },
+                }}
+              >
                 {content.parsed}
-              </div>
+              </ReactMarkdown>
               {content.images.length > 0 && <ImagePreview urls={content.images} />}
               {content.videos.length > 0 && <VideoPreview urls={content.videos} />}
               {content.links.length > 0 && <LinkPreview urls={content.links} />}

src/shared/notes/kinds/repost.tsx

@@ -1,7 +1,11 @@
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
 import {
   ImagePreview,
   LinkPreview,
   MentionNote,
+  MentionUser,
   NoteActions,
   NoteMetadata,
   NoteSkeleton,
@@ -45,9 +49,18 @@ export function Repost({ event }: { event: LumeEvent }) {
           <div className="relative z-20 flex items-start gap-3">
             <div className="w-11 shrink-0" />
             <div className="flex-1">
-              <div className="relative z-10 select-text whitespace-pre-line break-all text-base text-zinc-100">
+              <ReactMarkdown
+                className="markdown"
+                remarkPlugins={[remarkGfm]}
+                components={{
+                  del: ({ children }) => {
+                    const pubkey = children[0] as string;
+                    return <MentionUser pubkey={pubkey.slice(3)} />;
+                  },
+                }}
+              >
                 {data.content.parsed}
-              </div>
+              </ReactMarkdown>
               {data.content.images.length > 0 && (
                 <ImagePreview urls={data.content.images} />
               )}

src/shared/notes/kinds/sub.tsx

@@ -1,7 +1,11 @@
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
 import {
   ImagePreview,
   LinkPreview,
   MentionNote,
+  MentionUser,
   NoteActions,
   NoteSkeleton,
   VideoPreview,
@@ -37,9 +41,18 @@ export function SubNote({ id }: { id: string }) {
         <div className="relative z-20 -mt-5 flex items-start gap-3">
           <div className="w-11 shrink-0" />
           <div className="flex-1">
-            <div className="relative z-10 select-text whitespace-pre-line break-words text-base text-zinc-100">
+            <ReactMarkdown
+              className="markdown"
+              remarkPlugins={[remarkGfm]}
+              components={{
+                del: ({ children }) => {
+                  const pubkey = children[0] as string;
+                  return <MentionUser pubkey={pubkey.slice(3)} />;
+                },
+              }}
+            >
               {data.content.parsed}
-            </div>
+            </ReactMarkdown>
             {data.content.images.length > 0 && (
               <ImagePreview urls={data.content.images} />
             )}

src/shared/notes/kinds/thread.tsx

@@ -1,7 +1,10 @@
 import { useMemo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 
 import {
   LinkPreview,
+  MentionUser,
   NoteActions,
   NoteMetadata,
   SubNote,
@@ -35,9 +38,18 @@ export function NoteThread({
           <div className="relative z-20 -mt-5 flex items-start gap-3">
             <div className="w-11 shrink-0" />
             <div className="flex-1">
-              <div className="relative z-10 select-text whitespace-pre-line break-words text-base text-zinc-100">
+              <ReactMarkdown
+                className="markdown"
+                remarkPlugins={[remarkGfm]}
+                components={{
+                  del: ({ children }) => {
+                    const pubkey = children[0] as string;
+                    return <MentionUser pubkey={pubkey.slice(3)} />;
+                  },
+                }}
+              >
                 {content.parsed}
-              </div>
+              </ReactMarkdown>
               {content.images.length > 0 && <ImagePreview urls={content.images} />}
               {content.videos.length > 0 && <VideoPreview urls={content.videos} />}
               {content.links.length > 0 && <LinkPreview urls={content.links} />}

src/shared/notes/mentions/note.tsx

@@ -1,5 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { memo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 
 import { createBlock } from '@libs/storage';
 
@@ -8,6 +10,8 @@ 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);
 
@@ -43,7 +47,22 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
       ) : status === 'success' ? (
         <>
           <User pubkey={data.pubkey} time={data.created_at} size="small" />
-          <div className="mt-2 flex items-start gap-3">{data.content.parsed}</div>
+          <div className="mt-2">
+            <ReactMarkdown
+              className="markdown"
+              remarkPlugins={[remarkGfm]}
+              components={{
+                del: ({ children }) => {
+                  const pubkey = children[0] as string;
+                  return <MentionUser pubkey={pubkey.slice(3)} />;
+                },
+              }}
+            >
+              {data.content.parsed.length > 200
+                ? data.content.parsed.substring(0, 200) + '...'
+                : data.content.parsed}
+            </ReactMarkdown>
+          </div>
         </>
       ) : (
         <p>Failed to fetch event</p>

src/shared/notes/mentions/user.tsx

@@ -9,7 +9,7 @@ export function MentionUser({ pubkey }: { pubkey: string }) {
   return (
     <Link
       to={`/app/user/${pubkey}`}
-      className="font-normal text-fuchsia-500 no-underline hover:text-fuchsia-600"
+      className="break-words font-normal !text-green-400 no-underline hover:!text-green-500"
     >
       @{user?.name || user?.displayName || shortenKey(pubkey)}
     </Link>

src/shared/user.tsx

@@ -71,7 +71,7 @@ export function User({
       >
         <h5
           className={`truncate font-semibold leading-none text-zinc-100 ${
-            size === 'small' ? 'max-w-[8rem]' : 'max-w-[18rem]'
+            size === 'small' ? 'max-w-[10rem]' : 'max-w-[18rem]'
           }`}
         >
           {user?.nip05?.toLowerCase() ||