refactor note component

src/app/newsfeed/components/contentParser.tsx

@@ -1,56 +0,0 @@
-import { NoteQuote } from '@lume/app/newsfeed/components/note/quote';
-import { NoteMentionUser } from '@lume/app/newsfeed/components/user/mention';
-import ImagePreview from '@lume/shared/preview/image';
-import VideoPreview from '@lume/shared/preview/video';
-import YoutubePreview from '@lume/shared/preview/youtube';
-
-import destr from 'destr';
-import reactStringReplace from 'react-string-replace';
-
-export const contentParser = (noteContent: any, noteTags: any) => {
-  let parsedContent = noteContent.trim();
-
-  // get data tags
-  const tags = destr(noteTags);
-  // handle urls
-  parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
-    if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
-      // image url
-      return <ImagePreview key={match + i} url={match} size="large" />;
-    } else if (match.match(/(http:|https:)?(\/\/)?(www\.)?(youtube.com|youtu.be)\/(watch|embed)?(\?v=|\/)?(\S+)?/)) {
-      // youtube
-      return <YoutubePreview key={match + i} url={match} size="large" />;
-    } else if (match.match(/\.(mp4|webm)$/i)) {
-      // video
-      return <VideoPreview key={match + i} url={match} size="large" />;
-    } else {
-      return (
-        <a key={match + i} href={match} className="cursor-pointer text-fuchsia-500" target="_blank" rel="noreferrer">
-          {match}
-        </a>
-      );
-    }
-  });
-  // handle #-hashtags
-  parsedContent = reactStringReplace(parsedContent, /#(\w+)/g, (match, i) => (
-    <span key={match + i} className="cursor-pointer text-fuchsia-500">
-      #{match}
-    </span>
-  ));
-  // handle mentions
-  if (tags && tags.length > 0) {
-    parsedContent = reactStringReplace(parsedContent, /\#\[(\d+)\]/gm, (match, i) => {
-      if (tags[match][0] === 'p') {
-        // @-mentions
-        return <NoteMentionUser key={tags[match][1] + i} pubkey={tags[match][1]} />;
-      } else if (tags[match][0] === 'e') {
-        // note-quotes
-        return <NoteQuote key={tags[match][1] + i} id={tags[match][1]} />;
-      } else {
-        return;
-      }
-    });
-  }
-
-  return parsedContent;
-};

src/app/newsfeed/pages/following/index.page.tsx

@@ -1,7 +1,7 @@
 import NoteForm from '@lume/app/newsfeed/components/form';
-import NoteBase from '@lume/app/newsfeed/components/note/base';
+import NoteBase from '@lume/app/note/components/base';
-import { Placeholder } from '@lume/app/newsfeed/components/note/placeholder';
+import { Placeholder } from '@lume/app/note/components/placeholder';
-import { NoteQuoteRepost } from '@lume/app/newsfeed/components/note/quoteRepost';
+import { NoteQuoteRepost } from '@lume/app/note/components/quoteRepost';
 import { hasNewerNoteAtom } from '@lume/stores/note';
 import { getNotes } from '@lume/utils/storage';
 

src/app/note/components/base.tsx

@@ -1,9 +1,9 @@
-import NoteMetadata from '@lume/app/newsfeed/components/note/metadata';
+import NoteMetadata from '@lume/app/note/components/metadata';
-import { NoteParent } from '@lume/app/newsfeed/components/note/parent';
+import { NoteParent } from '@lume/app/note/components/parent';
-import { NoteDefaultUser } from '@lume/app/newsfeed/components/user/default';
 import { noteParser } from '@lume/app/note/components/parser';
 import ImagePreview from '@lume/app/note/components/preview/image';
 import VideoPreview from '@lume/app/note/components/preview/video';
+import { NoteDefaultUser } from '@lume/app/note/components/user/default';
 
 import { navigate } from 'vite-plugin-ssr/client/router';
 
@@ -24,7 +24,11 @@ export default function NoteBase({ event }: { event: any }) {
       onClick={(e) => openNote(e)}
       className="relative z-10 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 px-3 py-5 hover:bg-black/20"
     >
-      {event.parent_id ? <NoteParent key={event.parent_id} id={event.parent_id} /> : <></>}
+      {event.parent_id && event.parent_id !== event.event_id ? (
+        <NoteParent key={event.parent_id} id={event.parent_id} />
+      ) : (
+        <></>
+      )}
       <div className="relative z-10 flex flex-col">
         <NoteDefaultUser pubkey={event.pubkey} time={event.created_at} />
         <div className="mt-1 pl-[52px]">

src/app/note/components/comment.tsx

@@ -1,11 +1,8 @@
-import { contentParser } from '@lume/app/newsfeed/components/contentParser';
+import { NoteDefaultUser } from '@lume/app/note/components/user/default';
-import { NoteDefaultUser } from '@lume/app/newsfeed/components/user/default';
 
 import { memo } from 'react';
 
 export const NoteComment = memo(function NoteComment({ event }: { event: any }) {
-  const content = contentParser(event.content, event.tags);
-
   return (
     <div className="relative z-10 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 px-3 py-5 hover:bg-black/20">
       <div className="relative z-10 flex flex-col">
@@ -13,7 +10,7 @@ export const NoteComment = memo(function NoteComment({ event }: { event: any })
         <div className="-mt-5 pl-[52px]">
           <div className="flex flex-col gap-2">
             <div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
-              {content}
+              {event.content}
             </div>
           </div>
         </div>

src/app/note/components/metadata.tsx

@@ -1,6 +1,6 @@
-import NoteLike from '@lume/app/newsfeed/components/metadata/like';
+import NoteLike from '@lume/app/note/components/metadata/like';
-import NoteReply from '@lume/app/newsfeed/components/metadata/reply';
+import NoteReply from '@lume/app/note/components/metadata/reply';
-import NoteRepost from '@lume/app/newsfeed/components/metadata/repost';
+import NoteRepost from '@lume/app/note/components/metadata/repost';
 import ZapIcon from '@lume/shared/icons/zap';
 import { RelayContext } from '@lume/shared/relayProvider';
 import { READONLY_RELAYS } from '@lume/stores/constants';

src/app/note/components/parent.tsx

@@ -1,8 +1,8 @@
-import NoteMetadata from '@lume/app/newsfeed/components/note/metadata';
+import NoteMetadata from '@lume/app/note/components/metadata';
-import { NoteDefaultUser } from '@lume/app/newsfeed/components/user/default';
 import { noteParser } from '@lume/app/note/components/parser';
 import ImagePreview from '@lume/app/note/components/preview/image';
 import VideoPreview from '@lume/app/note/components/preview/video';
+import { NoteDefaultUser } from '@lume/app/note/components/user/default';
 import { RelayContext } from '@lume/shared/relayProvider';
 import { READONLY_RELAYS } from '@lume/stores/constants';
 

src/app/note/components/parser.tsx

@@ -1,55 +1,66 @@
+import { NoteQuote } from '@lume/app/note/components/quote';
+import { NoteMentionUser } from '@lume/app/note/components/user/mention';
+
 import { Event, parseReferences } from 'nostr-tools';
+import reactStringReplace from 'react-string-replace';
 
 const getURLs = new RegExp(
-  '(^|[ \t\r\n])((ftp|http|https|gopher|mailto|news|nntp|telnet|wais|file|prospero|aim|webcal):(([A-Za-z0-9$_.+!*(),;/?:@&~=-])|%[A-Fa-f0-9]{2}){2,}(#([a-zA-Z0-9][a-zA-Z0-9$_.+!*(),;/?:@&~=%-]*))?([A-Za-z0-9$_+!*();/?:~-]))',
+  '(^|[ \t\r\n])((ftp|http|https|gopher|mailto|news|nntp|telnet|wais|file|prospero|aim|webcal|wss|ws):(([A-Za-z0-9$_.+!*(),;/?:@&~=-])|%[A-Fa-f0-9]{2}){2,}(#([a-zA-Z0-9][a-zA-Z0-9$_.+!*(),;/?:@&~=%-]*))?([A-Za-z0-9$_+!*();/?:~-]))',
-  'g'
+  'gmi'
 );
 
 export const noteParser = (event: Event) => {
   const references = parseReferences(event);
-  const content = { original: event.content, parsed: event.content, images: [], videos: [], others: [] };
+  const content: { original: string; parsed: any; images: string[]; videos: string[] } = {
-
+    original: event.content,
-  // remove extra whitespace
+    parsed: event.content,
-  content.parsed = content.parsed.replace(/\s+/g, ' ').trim();
+    images: [],
+    videos: [],
+  };
 
   // handle media
-  content.original.match(getURLs)?.forEach((url) => {
+  content.original.match(getURLs)?.forEach((item) => {
-    if (url.match(/\.(jpg|jpeg|gif|png|webp|avif)$/im)) {
+    // make sure url is trimmed
+    const url = item.trim();
+
+    if (url.match(/\.(jpg|jpeg|gif|png|webp|avif)$/gim)) {
       // image url
-      content.images.push(url.trim());
+      content.images.push(url);
       // remove url from original content
       content.parsed = content.parsed.replace(url, '');
-    } else if (url.match(/(http:|https:)?(\/\/)?(www\.)?(youtube.com|youtu.be)\/(watch|embed)?(\?v=|\/)?(\S+)?/)) {
+    } else if (url.match(/\.(mp4|webm|mov)$/i)) {
-      // youtube
-      content.videos.push(url.trim());
-      // remove url from original content
-      content.parsed = content.parsed.replace(url, '');
-    } else if (url.match(/\.(mp4|webm|mov)$/im)) {
       // video
-      content.videos.push(url.trim());
+      content.videos.push(url);
       // remove url from original content
       content.parsed = content.parsed.replace(url, '');
-    } else {
-      content.others.push(url.trim());
     }
   });
 
+  // handle hashtag
+  content.parsed = reactStringReplace(content.parsed, /#(\w+)/g, (match, i) => (
+    <span key={match + i} className="cursor-pointer text-fuchsia-500 hover:text-fuchsia-600">
+      #{match}
+    </span>
+  ));
+
   // handle note references
   references?.forEach((reference) => {
     if (reference?.profile) {
-      content.parsed = content.parsed.replace(
+      content.parsed = reactStringReplace(content.parsed, reference.text, () => {
-        reference.text,
+        return <NoteMentionUser key={reference.profile.pubkey} pubkey={reference.profile.pubkey} />;
-        `<NoteMentionUser pubkey="${reference.profile.pubkey}" />`
+      });
-      );
     }
     if (reference?.event) {
-      content.parsed = content.parsed.replace(reference.text, `<NoteQuote id="${reference.event.id}" />;`);
+      content.parsed = reactStringReplace(content.parsed, reference.text, () => {
+        return <NoteQuote key={reference.event.id} id={reference.event.id} />;
+      });
     }
-    if (reference?.address) {
+  });
-      content.parsed = content.parsed.replace(
+
-        reference.text,
+  // make sure no unnessary spaces are left
-        `<a href="${reference.address}" target="_blank">${reference.address}</>`
+  content.parsed.forEach((item: string, index: string) => {
-      );
+    if (typeof item === 'string') {
+      content.parsed[index] = item.replace(/^\x20+|\x20+$/gm, '');
     }
   });
 

src/app/note/components/quote.tsx

@@ -1,7 +1,7 @@
-import { NoteDefaultUser } from '@lume/app/newsfeed/components/user/default';
 import { noteParser } from '@lume/app/note/components/parser';
 import ImagePreview from '@lume/app/note/components/preview/image';
 import VideoPreview from '@lume/app/note/components/preview/video';
+import { NoteDefaultUser } from '@lume/app/note/components/user/default';
 import { RelayContext } from '@lume/shared/relayProvider';
 import { READONLY_RELAYS } from '@lume/stores/constants';
 

src/app/note/components/quoteRepost.tsx

@@ -1,5 +1,5 @@
-import { RootNote } from '@lume/app/newsfeed/components/note/rootNote';
+import { RootNote } from '@lume/app/note/components/rootNote';
-import { NoteRepostUser } from '@lume/app/newsfeed/components/user/repost';
+import { NoteRepostUser } from '@lume/app/note/components/user/repost';
 import { getQuoteID } from '@lume/utils/transform';
 
 import { memo } from 'react';

src/app/note/components/replies.tsx

@@ -1,4 +1,4 @@
-import NoteReplyForm from '@lume/app/note/components/form';
+import NoteReplyForm from '@lume/app/note/components/formReply';
 import NoteReply from '@lume/app/note/components/reply';
 import { RelayContext } from '@lume/shared/relayProvider';
 import { READONLY_RELAYS } from '@lume/stores/constants';

src/app/note/components/reply.tsx

@@ -1,16 +1,19 @@
-import { contentParser } from '@lume/app/newsfeed/components/contentParser';
+import { noteParser } from '@lume/app/note/components//parser';
-
+import ImagePreview from '@lume/app/note/components/preview/image';
-import NoteReplyUser from './user';
+import VideoPreview from '@lume/app/note/components/preview/video';
+import NoteReplyUser from '@lume/app/note/components/user/reply';
 
 export default function NoteReply({ data }: { data: any }) {
-  const content = contentParser(data.content, data.tags);
+  const content = noteParser(data);
 
   return (
     <div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3.5 hover:bg-black/20">
       <div className="flex flex-col">
         <NoteReplyUser pubkey={data.pubkey} time={data.created_at} />
         <div className="-mt-[17px] pl-[48px]">
-          <div className="whitespace-pre-line break-words break-words text-sm leading-tight">{content}</div>
+          <div className="whitespace-pre-line break-words text-sm leading-tight">{content.parsed}</div>
+          {Array.isArray(content.images) && content.images.length ? <ImagePreview urls={content.images} /> : <></>}
+          {Array.isArray(content.videos) && content.videos.length ? <VideoPreview urls={content.videos} /> : <></>}
         </div>
       </div>
     </div>

src/app/note/components/rootNote.tsx

@@ -1,8 +1,8 @@
-import NoteMetadata from '@lume/app/newsfeed/components/note/metadata';
+import NoteMetadata from '@lume/app/note/components/metadata';
-import { NoteDefaultUser } from '@lume/app/newsfeed/components/user/default';
 import { noteParser } from '@lume/app/note/components/parser';
 import ImagePreview from '@lume/app/note/components/preview/image';
 import VideoPreview from '@lume/app/note/components/preview/video';
+import { NoteDefaultUser } from '@lume/app/note/components/user/default';
 import { RelayContext } from '@lume/shared/relayProvider';
 import { READONLY_RELAYS } from '@lume/stores/constants';
 
@@ -46,7 +46,7 @@ export const RootNote = memo(function RootNote({ id, fallback }: { id: string; f
     }
   };
 
-  const content = !error && data ? noteParser(parseFallback) : null;
+  const content = !error && data ? noteParser(data) : null;
 
   if (parseFallback) {
     const contentFallback = noteParser(parseFallback);

src/app/note/components/user/default.tsx

@@ -14,7 +14,7 @@ export const NoteDefaultUser = ({ pubkey, time }: { pubkey: string; time: number
     <div className="group relative z-10 flex h-11 items-center gap-2">
       {isError || isLoading ? (
         <>
-          <div className="h-11 w-11 shrink animate-pulse overflow-hidden rounded-md bg-white bg-zinc-800"></div>
+          <div className="h-11 w-11 shrink animate-pulse overflow-hidden rounded-md bg-white"></div>
           <div className="flex w-full flex-1 items-start justify-between">
             <div className="flex flex-col gap-1">
               <div className="flex items-baseline gap-2">

src/app/note/components/user/repost.tsx

@@ -14,7 +14,7 @@ export const NoteRepostUser = ({ pubkey, time }: { pubkey: string; time: number
     <div className="group flex items-center gap-2">
       {isError || isLoading ? (
         <>
-          <div className="relative h-11 w-11 shrink animate-pulse overflow-hidden rounded-md bg-white bg-zinc-800"></div>
+          <div className="relative h-11 w-11 shrink animate-pulse overflow-hidden rounded-md bg-white"></div>
           <div className="flex w-full flex-1 items-start justify-between">
             <div className="flex flex-col gap-1">
               <div className="flex items-baseline gap-2">

src/app/note/pages/index.page.tsx

@@ -1,7 +1,9 @@
-import { contentParser } from '@lume/app/newsfeed/components/contentParser';
+import NoteMetadata from '@lume/app/note/components/metadata';
-import NoteMetadata from '@lume/app/newsfeed/components/note/metadata';
+import { noteParser } from '@lume/app/note/components/parser';
-import { NoteDefaultUser } from '@lume/app/newsfeed/components/user/default';
+import ImagePreview from '@lume/app/note/components/preview/image';
+import VideoPreview from '@lume/app/note/components/preview/video';
 import NoteReplies from '@lume/app/note/components/replies';
+import { NoteDefaultUser } from '@lume/app/note/components/user/default';
 import { RelayContext } from '@lume/shared/relayProvider';
 import { READONLY_RELAYS } from '@lume/stores/constants';
 import { usePageContext } from '@lume/utils/hooks/usePageContext';
@@ -35,6 +37,8 @@ export function Page() {
     };
   });
 
+  const content = !error && data ? noteParser(data) : null;
+
   return (
     <div className="scrollbar-hide h-full w-full overflow-y-auto">
       <div className="p-3">
@@ -69,8 +73,18 @@ export function Page() {
                   <NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
                   <div className="mt-3">
                     <div className="whitespace-pre-line break-words text-[15px] leading-tight text-zinc-100">
-                      {contentParser(data.content, data.tags)}
+                      {content ? content.parsed : ''}
                     </div>
+                    {Array.isArray(content.images) && content.images.length ? (
+                      <ImagePreview urls={content.images} />
+                    ) : (
+                      <></>
+                    )}
+                    {Array.isArray(content.videos) && content.videos.length ? (
+                      <VideoPreview urls={content.videos} />
+                    ) : (
+                      <></>
+                    )}
                   </div>
                 </div>
                 <div onClick={(e) => e.stopPropagation()} className="mt-5 border-t border-zinc-800 px-5 py-5">