use new note parser for note component

src/app/note/components/parser.tsx

@@ -9,9 +9,12 @@ export const noteParser = (event: Event) => {
   const references = parseReferences(event);
   const content = { original: event.content, parsed: event.content, images: [], videos: [], others: [] };
 
+  // remove extra whitespace
+  content.parsed = content.parsed.replace(/\s+/g, ' ').trim();
+
   // handle media
   content.original.match(getURLs)?.forEach((url) => {
-    if (url.match(/\.(jpg|jpeg|gif|png|webp|avif)$/i)) {
+    if (url.match(/\.(jpg|jpeg|gif|png|webp|avif)$/im)) {
       // image url
       content.images.push(url.trim());
       // remove url from original content
@@ -21,7 +24,7 @@ export const noteParser = (event: Event) => {
       content.videos.push(url.trim());
       // remove url from original content
       content.parsed = content.parsed.replace(url, '');
-    } else if (url.match(/\.(mp4|webm|mov)$/i)) {
+    } else if (url.match(/\.(mp4|webm|mov)$/im)) {
       // video
       content.videos.push(url.trim());
       // remove url from original content
@@ -34,13 +37,19 @@ export const noteParser = (event: Event) => {
   // handle note references
   references?.forEach((reference) => {
     if (reference?.profile) {
-      content.parsed.replace(reference.text, `<NoteMentionUser pubkey="${reference.profile.pubkey}" />`);
+      content.parsed = content.parsed.replace(
+        reference.text,
+        `<NoteMentionUser pubkey="${reference.profile.pubkey}" />`
+      );
     }
     if (reference?.event) {
-      content.parsed.replace(reference.text, `<NoteQuote id="${reference.event.id}" />;`);
+      content.parsed = content.parsed.replace(reference.text, `<NoteQuote id="${reference.event.id}" />;`);
     }
     if (reference?.address) {
-      content.parsed.replace(reference.text, `<a href="${reference.address}" target="_blank" />`);
+      content.parsed = content.parsed.replace(
+        reference.text,
+        `<a href="${reference.address}" target="_blank">${reference.address}</>`
+      );
     }
   });
 

src/app/note/components/preview/image.tsx

@@ -0,0 +1,31 @@
+export default function ImagePreview({ urls }: { urls: string[] }) {
+  return (
+    <div className="mt-2 grid h-full w-full grid-cols-2">
+      {urls.length === 1 ? (
+        <div className="col-span-2">
+          <img
+            src={urls[0]}
+            alt="image"
+            className="h-auto w-full rounded-lg object-cover"
+            loading="lazy"
+            decoding="async"
+            style={{ contentVisibility: 'auto' }}
+          />
+        </div>
+      ) : (
+        urls.map((url: string) => (
+          <div key={url} className="col-span-1">
+            <img
+              src={url}
+              alt="image"
+              className="h-auto w-full rounded-lg object-cover"
+              loading="lazy"
+              decoding="async"
+              style={{ contentVisibility: 'auto' }}
+            />
+          </div>
+        ))
+      )}
+    </div>
+  );
+}

src/app/note/components/preview/video.tsx

@@ -0,0 +1,11 @@
+import { MediaOutlet, MediaPlayer } from '@vidstack/react';
+
+export default function VideoPreview({ urls }: { urls: string[] }) {
+  return (
+    <div onClick={(e) => e.stopPropagation()} className="relative mt-2 flex w-full flex-col rounded-lg bg-zinc-950">
+      <MediaPlayer src={urls[0]} poster="" controls>
+        <MediaOutlet />
+      </MediaPlayer>
+    </div>
+  );
+}