update markdown

src/shared/notes/kinds/kind1.tsx

@@ -1,16 +1,6 @@
 import { useMemo } from 'react';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
 
-import {
-  LinkPreview,
-  MentionUser,
-  NoteActions,
-  NoteMetadata,
-  VideoPreview,
-} from '@shared/notes';
-import { MentionNote } from '@shared/notes/mentions/note';
-import { ImagePreview } from '@shared/notes/preview/image';
+import { NoteActions, NoteContent, NoteMetadata } from '@shared/notes';
 import { User } from '@shared/user';
 
 import { parser } from '@utils/parser';
@@ -30,36 +20,10 @@ export function NoteKind_1({
       <div className="relative overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
         <div className="relative flex flex-col">
           <User pubkey={event.pubkey} time={event.created_at} />
-          <div className="relative z-20 -mt-5 flex items-start gap-3">
+          <div className="relative z-20 -mt-6 flex items-start gap-3">
             <div className="w-11 shrink-0" />
             <div className="flex-1">
-              <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}
-              </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} />}
-              {content.notes.length > 0 &&
-                content.notes.map((note: string) => <MentionNote key={note} id={note} />)}
+              <NoteContent content={content} />
               <NoteActions
                 id={event.event_id}
                 rootID={event.parent_id}

src/shared/notes/kinds/kind1063.tsx

@@ -16,7 +16,7 @@ export function NoteKind_1063({ event }: { event: LumeEvent }) {
       <div className="relative overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
         <div className="flex flex-col">
           <User pubkey={event.pubkey} time={event.created_at} />
-          <div className="relative z-20 -mt-5 flex items-start gap-3">
+          <div className="relative z-20 -mt-6 flex items-start gap-3">
             <div className="w-11 shrink-0" />
             <div className="flex-1">
               {isImage(url) && (

src/shared/notes/kinds/repost.tsx

@@ -1,16 +1,9 @@
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-
 import {
-  ImagePreview,
-  LinkPreview,
-  MentionNote,
-  MentionUser,
   NoteActions,
+  NoteContent,
   NoteMetadata,
   NoteSkeleton,
   RepostUser,
-  VideoPreview,
 } from '@shared/notes';
 import { User } from '@shared/user';
 
@@ -49,29 +42,7 @@ 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">
-              <ReactMarkdown
-                className="markdown"
-                remarkPlugins={[remarkGfm]}
-                components={{
-                  del: ({ children }) => {
-                    const pubkey = children[0] as string;
-                    return <MentionUser pubkey={pubkey.slice(3)} />;
-                  },
-                }}
-              >
-                {data.content.parsed}
-              </ReactMarkdown>
-              {data.content.images.length > 0 && (
-                <ImagePreview urls={data.content.images} />
-              )}
-              {data.content.videos.length > 0 && (
-                <VideoPreview urls={data.content.videos} />
-              )}
-              {data.content.links.length > 0 && <LinkPreview urls={data.content.links} />}
-              {data.content.notes.length > 0 &&
-                data.content.notes.map((note: string) => (
-                  <MentionNote key={note} id={note} />
-                ))}
+              <NoteContent content={data.content} />
               <NoteActions
                 id={event.event_id}
                 rootID={event.parent_id}

src/shared/notes/kinds/sub.tsx

@@ -1,15 +1,4 @@
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-
-import {
-  ImagePreview,
-  LinkPreview,
-  MentionNote,
-  MentionUser,
-  NoteActions,
-  NoteSkeleton,
-  VideoPreview,
-} from '@shared/notes';
+import { NoteActions, NoteContent, NoteSkeleton } from '@shared/notes';
 import { User } from '@shared/user';
 
 import { useEvent } from '@utils/hooks/useEvent';
@@ -38,32 +27,10 @@ export function SubNote({ id }: { id: string }) {
       <div className="absolute bottom-0 left-[18px] h-[calc(100%-3.4rem)] w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600" />
       <div className="mb-5 flex flex-col">
         <User pubkey={data.pubkey} time={data.created_at} />
-        <div className="relative z-20 -mt-5 flex items-start gap-3">
+        <div className="relative z-20 -mt-6 flex items-start gap-3">
           <div className="w-11 shrink-0" />
           <div className="flex-1">
-            <ReactMarkdown
-              className="markdown"
-              remarkPlugins={[remarkGfm]}
-              components={{
-                del: ({ children }) => {
-                  const pubkey = children[0] as string;
-                  return <MentionUser pubkey={pubkey.slice(3)} />;
-                },
-              }}
-            >
-              {data.content.parsed}
-            </ReactMarkdown>
-            {data.content.images.length > 0 && (
-              <ImagePreview urls={data.content.images} />
-            )}
-            {data.content.videos.length > 0 && (
-              <VideoPreview urls={data.content.videos} />
-            )}
-            {data.content.links.length > 0 && <LinkPreview urls={data.content.links} />}
-            {data.content.notes.length > 0 &&
-              data.content.notes.map((note: string) => (
-                <MentionNote key={note} id={note} />
-              ))}
+            <NoteContent content={data.content} />
             <NoteActions id={data.id} eventPubkey={data.pubkey} />
           </div>
         </div>

src/shared/notes/kinds/thread.tsx

@@ -1,17 +1,6 @@
 import { useMemo } from 'react';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
 
-import {
-  LinkPreview,
-  MentionUser,
-  NoteActions,
-  NoteMetadata,
-  SubNote,
-  VideoPreview,
-} from '@shared/notes';
-import { MentionNote } from '@shared/notes/mentions/note';
-import { ImagePreview } from '@shared/notes/preview/image';
+import { NoteActions, NoteContent, NoteMetadata, SubNote } from '@shared/notes';
 import { User } from '@shared/user';
 
 import { parser } from '@utils/parser';
@@ -35,26 +24,10 @@ export function NoteThread({
         <div className="relative">{reply && <SubNote id={reply} />}</div>
         <div className="relative flex flex-col">
           <User pubkey={event.pubkey} time={event.created_at} />
-          <div className="relative z-20 -mt-5 flex items-start gap-3">
+          <div className="relative z-20 -mt-6 flex items-start gap-3">
             <div className="w-11 shrink-0" />
             <div className="flex-1">
-              <ReactMarkdown
-                className="markdown"
-                remarkPlugins={[remarkGfm]}
-                components={{
-                  del: ({ children }) => {
-                    const pubkey = children[0] as string;
-                    return <MentionUser pubkey={pubkey.slice(3)} />;
-                  },
-                }}
-              >
-                {content.parsed}
-              </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} />}
-              {content.notes.length > 0 &&
-                content.notes.map((note: string) => <MentionNote key={note} id={note} />)}
+              <NoteContent content={content} />
               <NoteActions
                 id={event.event_id}
                 rootID={event.parent_id}