added content parser

src/components/note/base.tsx

@@ -1,75 +1,24 @@
 import NoteMetadata from '@components/note/metadata';
 import { NoteParent } from '@components/note/parent';
-import { ImagePreview } from '@components/note/preview/image';
-import { VideoPreview } from '@components/note/preview/video';
-import { NoteQuote } from '@components/note/quote';
 import { UserExtend } from '@components/user/extend';
-import { UserMention } from '@components/user/mention';
 
-import destr from 'destr';
+import { contentParser } from '@utils/parser';
+
 import { useRouter } from 'next/navigation';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
-import reactStringReplace from 'react-string-replace';
 
 export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
   const router = useRouter();
+  const content = contentParser(event.content, event.tags);
 
-  const content = useMemo(() => {
+  const parentNote = () => {
-    let parsedContent = event.content;
-    // get data tags
-    const tags = destr(event.tags);
-    // 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} />;
-      } else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
-        // youtube
-        return <VideoPreview key={match + i} url={match} />;
-      } else if (match.match(/\.(mp4|webm)$/i)) {
-        // video
-        return <VideoPreview key={match + i} url={match} />;
-      } else {
-        return (
-          <a key={match + i} href={match} 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.length > 0) {
-      parsedContent = reactStringReplace(parsedContent, /\#\[(\d+)\]/gm, (match) => {
-        if (tags[match][0] === 'p') {
-          // @-mentions
-          return <UserMention key={tags[match][1]} pubkey={tags[match][1]} />;
-        } else if (tags[match][0] === 'e') {
-          // note-quotes
-          return <NoteQuote key={tags[match][1]} id={tags[match][1]} />;
-        } else {
-          return;
-        }
-      });
-    }
-
-    return parsedContent;
-  }, [event.content, event.tags]);
-
-  const parentNote = useMemo(() => {
     if (event.parent_id) {
       if (event.parent_id !== event.eventId && !event.content.includes('#[0]')) {
         return <NoteParent key={event.parent_id} id={event.parent_id} />;
       }
     }
-
+    return <></>;
-    return;
+  };
-  }, [event.content, event.eventId, event.parent_id]);
 
   const openUserPage = (e) => {
     e.stopPropagation();
@@ -90,14 +39,14 @@ export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
       onClick={(e) => openThread(e)}
       className="relative z-10 m-0 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"
     >
-      {parentNote}
+      {parentNote()}
       <div className="relative z-10 flex flex-col">
         <div onClick={(e) => openUserPage(e)}>
           <UserExtend pubkey={event.pubkey} time={event.createdAt || event.created_at} />
         </div>
         <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">
+            <div className="prose	prose-zinc max-w-none whitespace-pre-line 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}
             </div>
           </div>

src/components/note/parent.tsx

@@ -1,29 +1,24 @@
 import NoteMetadata from '@components/note/metadata';
-import { ImagePreview } from '@components/note/preview/image';
-import { VideoPreview } from '@components/note/preview/video';
-import { NoteQuote } from '@components/note/quote';
 import { RelayContext } from '@components/relaysProvider';
 import { UserExtend } from '@components/user/extend';
-import { UserMention } from '@components/user/mention';
 
+import { contentParser } from '@utils/parser';
 import { getParentID } from '@utils/transform';
 
 import useLocalStorage from '@rehooks/local-storage';
-import destr from 'destr';
+import { memo, useCallback, useContext, useEffect, useRef, useState } from 'react';
-import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import reactStringReplace from 'react-string-replace';
 
 export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
   const [pool, relays]: any = useContext(RelayContext);
 
   const [activeAccount]: any = useLocalStorage('activeAccount', {});
   const [event, setEvent] = useState(null);
-
   const unsubscribe = useRef(null);
 
+  const content = event ? contentParser(event?.content, event.tags) : '';
+
   const fetchEvent = useCallback(async () => {
     const { createNote } = await import('@utils/bindings');
-
     unsubscribe.current = pool.subscribe(
       [
         {
@@ -50,7 +45,7 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
           account_id: activeAccount.id,
         }).catch(console.error);
       },
-      100,
+      undefined,
       undefined,
       {
         unsubscribeOnEose: true,
@@ -81,56 +76,6 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
     };
   }, [checkNoteExist]);
 
-  const content = useMemo(() => {
-    let parsedContent = event ? event.content : null;
-
-    if (parsedContent !== null) {
-      // get data tags
-      const tags = destr(event.tags);
-      // 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} />;
-        } else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
-          // youtube
-          return <VideoPreview key={match + i} url={match} />;
-        } else if (match.match(/\.(mp4|webm)$/i)) {
-          // video
-          return <VideoPreview key={match + i} url={match} />;
-        } else {
-          return (
-            <a key={match + i} href={match} 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.length > 0) {
-        parsedContent = reactStringReplace(parsedContent, /\#\[(\d+)\]/gm, (match, i) => {
-          if (tags[match][0] === 'p') {
-            // @-mentions
-            return <UserMention key={tags[match][1]} pubkey={tags[match][1]} />;
-          } else if (tags[match][0] === 'e') {
-            // note-quotes
-            return <NoteQuote key={tags[match][1]} id={tags[match][1]} />;
-          } else {
-            return;
-          }
-        });
-      }
-    }
-
-    return parsedContent;
-  }, [event]);
-
   if (event) {
     return (
       <div className="relative pb-5">
@@ -139,7 +84,7 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
           <UserExtend pubkey={event.pubkey} time={event.createdAt || event.created_at} />
           <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">
+              <div className="prose prose-zinc max-w-none whitespace-pre-line 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}
               </div>
             </div>

src/components/note/placeholder.tsx

@@ -1,8 +1,6 @@
-import { memo } from 'react';
+export const Placeholder = () => {
-
-export const Placeholder = memo(function Placeholder() {
   return (
-    <div className="relative z-10 flex h-min animate-pulse select-text flex-col py-5 px-3">
+    <div className="relative z-10 flex h-min animate-pulse select-text flex-col px-3 py-5">
       <div className="flex items-start gap-2">
         <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-700" />
         <div className="flex w-full flex-1 items-start justify-between">
@@ -27,4 +25,4 @@ export const Placeholder = memo(function Placeholder() {
       </div>
     </div>
   );
-});
+};

src/components/note/quote.tsx

@@ -1,22 +1,21 @@
 import { RelayContext } from '@components/relaysProvider';
 import { UserExtend } from '@components/user/extend';
-import { UserMention } from '@components/user/mention';
 
+import { contentParser } from '@utils/parser';
 import { getParentID } from '@utils/transform';
 
 import useLocalStorage from '@rehooks/local-storage';
-import destr from 'destr';
+import { memo, useCallback, useContext, useEffect, useRef, useState } from 'react';
-import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import reactStringReplace from 'react-string-replace';
 
 export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
   const [pool, relays]: any = useContext(RelayContext);
 
   const [activeAccount]: any = useLocalStorage('activeAccount', {});
   const [event, setEvent] = useState(null);
-
   const unsubscribe = useRef(null);
 
+  const content = contentParser(event.content, event.tags);
+
   const fetchEvent = useCallback(async () => {
     const { createNote } = await import('@utils/bindings');
 
@@ -46,7 +45,7 @@ export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
           account_id: activeAccount.id,
         }).catch(console.error);
       },
-      100,
+      undefined,
       undefined,
       {
         unsubscribeOnEose: true,
@@ -77,40 +76,6 @@ export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
     };
   }, [checkNoteExist]);
 
-  const content = useMemo(() => {
-    let parsedContent = event ? event.content : null;
-
-    if (parsedContent !== null) {
-      // get data tags
-      const tags = destr(event.tags);
-      // handle urls
-      parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => (
-        <a key={match + i} href={match} 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.length > 0) {
-        parsedContent = reactStringReplace(parsedContent, /\#\[(\d+)\]/gm, (match, i) => {
-          if (tags[match][0] === 'p') {
-            // @-mentions
-            return <UserMention key={match + i} pubkey={tags[match][1]} />;
-          } else {
-            return;
-          }
-        });
-      }
-    }
-
-    return parsedContent;
-  }, [event]);
-
   if (event) {
     return (
       <div className="relative mb-2 mt-3 rounded-lg border border-zinc-700 bg-zinc-800 p-2 py-3">
@@ -118,7 +83,7 @@ export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
           <UserExtend pubkey={event.pubkey} time={event.createdAt || event.created_at} />
           <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">
+              <div className="prose prose-zinc max-w-none whitespace-pre-line 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}
               </div>
             </div>

src/components/note/rootNote.tsx

@@ -1,64 +1,14 @@
 import NoteMetadata from '@components/note/metadata';
-import { ImagePreview } from '@components/note/preview/image';
-import { VideoPreview } from '@components/note/preview/video';
-import { NoteQuote } from '@components/note/quote';
 import { UserExtend } from '@components/user/extend';
-import { UserMention } from '@components/user/mention';
 
-import destr from 'destr';
+import { contentParser } from '@utils/parser';
+
 import { useRouter } from 'next/navigation';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
-import reactStringReplace from 'react-string-replace';
 
 export const RootNote = memo(function RootNote({ event }: { event: any }) {
   const router = useRouter();
-
+  const content = contentParser(event.content, event.tags);
-  const content = useMemo(() => {
-    let parsedContent = event.content;
-    // get data tags
-    const tags = destr(event.tags);
-    // 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} />;
-      } else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
-        // youtube
-        return <VideoPreview key={match + i} url={match} />;
-      } else if (match.match(/\.(mp4|webm)$/i)) {
-        // video
-        return <VideoPreview key={match + i} url={match} />;
-      } else {
-        return (
-          <a key={match + i} href={match} 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.length > 0) {
-      parsedContent = reactStringReplace(parsedContent, /\#\[(\d+)\]/gm, (match) => {
-        if (tags[match][0] === 'p') {
-          // @-mentions
-          return <UserMention key={tags[match][1]} pubkey={tags[match][1]} />;
-        } else if (tags[match][0] === 'e') {
-          // note-quotes
-          return <NoteQuote key={tags[match][1]} id={tags[match][1]} />;
-        } else {
-          return;
-        }
-      });
-    }
-
-    return parsedContent;
-  }, [event.content, event.tags]);
 
   const openUserPage = (e) => {
     e.stopPropagation();
@@ -68,7 +18,7 @@ export const RootNote = memo(function RootNote({ event }: { event: any }) {
   const openThread = (e) => {
     const selection = window.getSelection();
     if (selection.toString().length === 0) {
-      router.push(`/newsfeed/${event.parent_id}`);
+      router.push(`/newsfeed/${event.id}`);
     } else {
       e.stopPropagation();
     }
@@ -77,21 +27,21 @@ export const RootNote = memo(function RootNote({ event }: { event: any }) {
   return (
     <div onClick={(e) => openThread(e)} className="relative z-10 flex flex-col">
       <div onClick={(e) => openUserPage(e)}>
-        <UserExtend pubkey={event.pubkey} time={event.createdAt || event.created_at} />
+        <UserExtend pubkey={event.pubkey} time={event.created_at} />
       </div>
       <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">
+          <div className="prose prose-zinc max-w-none whitespace-pre-line 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}
           </div>
         </div>
       </div>
       <div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
         <NoteMetadata
-          eventID={event.eventId}
+          eventID={event.id}
           eventPubkey={event.pubkey}
           eventContent={event.content}
-          eventTime={event.createdAt || event.created_at}
+          eventTime={event.created_at}
         />
       </div>
     </div>

src/utils/parser.tsx

@@ -0,0 +1,55 @@
+import { ImagePreview } from '@components/note/preview/image';
+import { VideoPreview } from '@components/note/preview/video';
+import { NoteQuote } from '@components/note/quote';
+import { UserMention } from '@components/user/mention';
+
+import destr from 'destr';
+import reactStringReplace from 'react-string-replace';
+
+export const contentParser = (noteContent, noteTags) => {
+  let parsedContent = noteContent;
+
+  // 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} />;
+    } else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
+      // youtube
+      return <VideoPreview key={match + i} url={match} />;
+    } else if (match.match(/\.(mp4|webm)$/i)) {
+      // video
+      return <VideoPreview key={match + i} url={match} />;
+    } else {
+      return (
+        <a key={match + i} href={match} 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.length > 0) {
+    parsedContent = reactStringReplace(parsedContent, /\#\[(\d+)\]/gm, (match) => {
+      if (tags[match][0] === 'p') {
+        // @-mentions
+        return <UserMention key={tags[match][1]} pubkey={tags[match][1]} />;
+      } else if (tags[match][0] === 'e') {
+        // note-quotes
+        return <NoteQuote key={tags[match][1]} id={tags[match][1]} />;
+      } else {
+        return;
+      }
+    });
+  }
+
+  return parsedContent;
+};