feat: enhance post content parsing and rendering (#263)

src/components/PictureContent/index.tsx

@@ -1,14 +1,19 @@
+import {
+  EmbeddedHashtagParser,
+  EmbeddedMentionParser,
+  EmbeddedNormalUrlParser,
+  EmbeddedWebsocketUrlParser,
+  parseContent
+} from '@/lib/content-parser'
 import { extractImageInfosFromEventTags, isNsfwEvent } from '@/lib/event'
 import { cn } from '@/lib/utils'
 import { Event } from 'nostr-tools'
-import { memo, ReactNode, useMemo } from 'react'
+import { memo, useMemo } from 'react'
 import {
-  embedded,
-  embeddedHashtagRenderer,
-  embeddedNormalUrlRenderer,
-  embeddedNostrNpubRenderer,
-  embeddedNostrProfileRenderer,
-  embeddedWebsocketUrlRenderer
+  EmbeddedHashtag,
+  EmbeddedMention,
+  EmbeddedNormalUrl,
+  EmbeddedWebsocketUrl
 } from '../Embedded'
 import { ImageCarousel } from '../ImageCarousel'
 
@@ -16,24 +21,35 @@ const PictureContent = memo(({ event, className }: { event: Event; className?: s
   const images = useMemo(() => extractImageInfosFromEventTags(event), [event])
   const isNsfw = isNsfwEvent(event)
 
-  const nodes: ReactNode[] = [
-    <ImageCarousel key={`${event.id}-image-gallery`} images={images} isNsfw={isNsfw} />
-  ]
-  nodes.push(
-    <div key={`${event.id}-content`} className="px-4">
-      {embedded(event.content, [
-        embeddedNormalUrlRenderer,
-        embeddedWebsocketUrlRenderer,
-        embeddedHashtagRenderer,
-        embeddedNostrNpubRenderer,
-        embeddedNostrProfileRenderer
-      ])}
-    </div>
-  )
+  const nodes = parseContent(event.content, [
+    EmbeddedNormalUrlParser,
+    EmbeddedWebsocketUrlParser,
+    EmbeddedHashtagParser,
+    EmbeddedMentionParser
+  ])
 
   return (
     <div className={cn('text-wrap break-words whitespace-pre-wrap space-y-2', className)}>
-      {nodes}
+      <ImageCarousel images={images} isNsfw={isNsfw} />
+      <div className="px-4">
+        {nodes.map((node, index) => {
+          if (node.type === 'text') {
+            return node.data
+          }
+          if (node.type === 'url') {
+            return <EmbeddedNormalUrl key={index} url={node.data} />
+          }
+          if (node.type === 'websocket-url') {
+            return <EmbeddedWebsocketUrl key={index} url={node.data} />
+          }
+          if (node.type === 'hashtag') {
+            return <EmbeddedHashtag key={index} hashtag={node.data} />
+          }
+          if (node.type === 'mention') {
+            return <EmbeddedMention key={index} userId={node.data.split(':')[1]} />
+          }
+        })}
+      </div>
     </div>
   )
 })