From e0a14ce6cff79de954a194b052226d600222248e Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Sat, 15 Jul 2023 21:01:27 +0700
Subject: [PATCH] update markdown

---
 src/shared/notes/content.tsx        | 54 +++++++++++++++++++++++++++++
 src/shared/notes/index.tsx          |  1 +
 src/shared/notes/kinds/kind1.tsx    | 42 ++--------------------
 src/shared/notes/kinds/kind1063.tsx |  2 +-
 src/shared/notes/kinds/repost.tsx   | 33 ++----------------
 src/shared/notes/kinds/sub.tsx      | 39 ++-------------------
 src/shared/notes/kinds/thread.tsx   | 33 ++----------------
 src/shared/notes/mentions/note.tsx  | 17 ++++++---
 src/shared/notes/mentions/user.tsx  | 10 +++---
 src/utils/parser.tsx                |  7 ++--
 10 files changed, 85 insertions(+), 153 deletions(-)
 create mode 100644 src/shared/notes/content.tsx

diff --git a/src/shared/notes/content.tsx b/src/shared/notes/content.tsx
new file mode 100644
index 00000000..a3c4c0ea
--- /dev/null
+++ b/src/shared/notes/content.tsx
@@ -0,0 +1,54 @@
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+import {
+  ImagePreview,
+  LinkPreview,
+  MentionNote,
+  MentionUser,
+  VideoPreview,
+} from '@shared/notes';
+
+export function NoteContent({
+  content,
+}: {
+  content: {
+    original: string;
+    parsed: string;
+    notes: string[];
+    images: string[];
+    videos: string[];
+    links: string[];
+  };
+}) {
+  return (
+    <>
+      <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="rounded bg-zinc-800 px-2 py-px text-sm font-normal text-orange-400 no-underline hover:bg-orange-100 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} />)}
+    </>
+  );
+}
diff --git a/src/shared/notes/index.tsx b/src/shared/notes/index.tsx
index de14f037..b12f5be9 100644
--- a/src/shared/notes/index.tsx
+++ b/src/shared/notes/index.tsx
@@ -20,3 +20,4 @@ export * from './kinds/repost';
 export * from './kinds/sub';
 export * from './skeleton';
 export * from './actions';
+export * from './content';
diff --git a/src/shared/notes/kinds/kind1.tsx b/src/shared/notes/kinds/kind1.tsx
index 34b3d702..3cfa7562 100644
--- a/src/shared/notes/kinds/kind1.tsx
+++ b/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}
diff --git a/src/shared/notes/kinds/kind1063.tsx b/src/shared/notes/kinds/kind1063.tsx
index 04be866a..1e18caab 100644
--- a/src/shared/notes/kinds/kind1063.tsx
+++ b/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) && (
diff --git a/src/shared/notes/kinds/repost.tsx b/src/shared/notes/kinds/repost.tsx
index b1705514..7ab7ff16 100644
--- a/src/shared/notes/kinds/repost.tsx
+++ b/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}
diff --git a/src/shared/notes/kinds/sub.tsx b/src/shared/notes/kinds/sub.tsx
index 75c71078..23b5e3b1 100644
--- a/src/shared/notes/kinds/sub.tsx
+++ b/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>
diff --git a/src/shared/notes/kinds/thread.tsx b/src/shared/notes/kinds/thread.tsx
index 82fc4add..5a6fd43a 100644
--- a/src/shared/notes/kinds/thread.tsx
+++ b/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}
diff --git a/src/shared/notes/mentions/note.tsx b/src/shared/notes/mentions/note.tsx
index 4e994d70..39582d8d 100644
--- a/src/shared/notes/mentions/note.tsx
+++ b/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>
+                    );
                 },
               }}
             >
diff --git a/src/shared/notes/mentions/user.tsx b/src/shared/notes/mentions/user.tsx
index 20bef718..49fcf80f 100644
--- a/src/shared/notes/mentions/user.tsx
+++ b/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>
   );
 }
diff --git a/src/utils/parser.tsx b/src/utils/parser.tsx
index 2c9c18ec..de84283f 100644
--- a/src/utils/parser.tsx
+++ b/src/utils/parser.tsx
@@ -1,9 +1,6 @@
 import getUrls from 'get-urls';
 import { Event, parseReferences } from 'nostr-tools';
-import { Link } from 'react-router-dom';
-import reactStringReplace from 'react-string-replace';
-
-import { MentionUser } from '@shared/notes/mentions/user';
+import ReactPlayer from 'react-player';
 
 import { LumeEvent } from '@utils/types';
 
@@ -34,7 +31,7 @@ export function parser(event: LumeEvent) {
       content.images.push(url);
       // remove url from original content
       content.parsed = content.parsed.replace(url, '');
-    } else if (url.match(/\.(mp4|webm|mov|ogv|avi|mp3)$/)) {
+    } else if (ReactPlayer.canPlay(url)) {
       // video
       content.videos.push(url);
       // remove url from original content