refactor text parser

src/shared/notes/kinds/text.tsx

@@ -1,6 +1,16 @@
+import Markdown from 'markdown-to-jsx';
 import { memo } from 'react';
 
-import { ImagePreview, LinkPreview, MentionNote, VideoPreview } from '@shared/notes';
+import {
+  Boost,
+  Hashtag,
+  ImagePreview,
+  Invoice,
+  LinkPreview,
+  MentionNote,
+  MentionUser,
+  VideoPreview,
+} from '@shared/notes';
 
 import { parser } from '@utils/parser';
 
@@ -17,9 +27,30 @@ export function TextNote(props: { content?: string; truncate?: boolean }) {
 
   return (
     <div>
-      <div className="break-p prose prose-neutral max-w-none select-text whitespace-pre-line leading-normal dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-1 prose-a:font-normal prose-a:text-blue-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-blue-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2 hover:prose-a:text-blue-600 prose-a:hover:underline">
+      <Markdown
+        options={{
+          overrides: {
+            Hashtag: {
+              component: Hashtag,
+            },
+            Boost: {
+              component: Boost,
+            },
+            MentionUser: {
+              component: MentionUser,
+            },
+            Invoice: {
+              component: Invoice,
+            },
+          },
+          slugify: (str) => str,
+          forceBlock: true,
+          enforceAtxHeadings: true,
+        }}
+        className="break-p prose prose-neutral max-w-none select-text whitespace-pre-line leading-normal dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-1 prose-a:font-normal prose-a:text-blue-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-blue-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2 hover:prose-a:text-blue-600 prose-a:hover:underline"
+      >
         {richContent.parsed}
-      </div>
+      </Markdown>
       {richContent.images.length ? <ImagePreview urls={richContent.images} /> : null}
       {richContent.videos.length ? <VideoPreview urls={richContent.videos} /> : null}
       {richContent.links.length ? <LinkPreview urls={richContent.links} /> : null}

src/shared/notes/mentions/note.tsx

@@ -75,13 +75,14 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
   }
 
   return (
-    <button
-      type="button"
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus
+    <div
+      role="button"
       onClick={(e) => openThread(e, id)}
       className="mt-3 cursor-default rounded-lg border border-neutral-300 bg-neutral-200 p-3 dark:border-neutral-700 dark:bg-neutral-800"
     >
       <User pubkey={data.pubkey} time={data.created_at} variant="mention" />
       <div className="mt-1 text-left">{renderKind(data)}</div>
-    </button>
+    </div>
   );
 });