improve hashtag parser

src/shared/notes/mentions/hashtag.tsx

@@ -7,8 +7,9 @@ export function Hashtag({ tag }: { tag: string }) {
   const setWidget = useWidgets((state) => state.setWidget);
 
   return (
-    <button
+    <span
-      type="button"
+      role="button"
+      tabIndex={0}
       onClick={() =>
         setWidget(db, {
           kind: WidgetKinds.global.hashtag,
@@ -16,9 +17,16 @@ export function Hashtag({ tag }: { tag: string }) {
           content: tag.replace('#', ''),
         })
       }
+      onKeyDown={() =>
+        setWidget(db, {
+          kind: WidgetKinds.global.hashtag,
+          title: tag,
+          content: tag.replace('#', ''),
+        })
+      }
       className="break-words text-fuchsia-400 hover:text-fuchsia-500"
     >
       {tag}
-    </button>
+    </span>
   );
 }

src/shared/notes/mentions/note.tsx

@@ -66,10 +66,10 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
       onKeyDown={(e) => openThread(e, id)}
       role="button"
       tabIndex={0}
-      className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl"
+      className="cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl"
     >
       <User pubkey={data.pubkey} time={data.created_at} size="small" />
-      <div>{renderKind(data)}</div>
+      <div className="mt-1">{renderKind(data)}</div>
     </div>
   );
 });

src/shared/notes/mentions/user.tsx

@@ -12,8 +12,9 @@ export function MentionUser({ pubkey }: { pubkey: string }) {
   const setWidget = useWidgets((state) => state.setWidget);
 
   return (
-    <button
+    <span
-      type="button"
+      role="button"
+      tabIndex={0}
       onClick={() =>
         setWidget(db, {
           kind: WidgetKinds.local.user,
@@ -21,9 +22,16 @@ export function MentionUser({ pubkey }: { pubkey: string }) {
           content: pubkey,
         })
       }
+      onKeyDown={() =>
+        setWidget(db, {
+          kind: WidgetKinds.local.user,
+          title: user?.name || user?.display_name,
+          content: pubkey,
+        })
+      }
       className="break-words text-fuchsia-400 hover:text-fuchsia-500"
     >
       {user?.name || user?.display_name || user?.username || displayNpub(pubkey, 16)}
-    </button>
+    </span>
   );
 }

src/utils/parser.ts

@@ -62,9 +62,12 @@ export function parser(event: NDKEvent) {
 
   // parse hashtag
   const hashtags = content.parsed.split(/\s/gm).filter((s) => s.startsWith('#'));
-  hashtags?.forEach((tag) => {
+  if (hashtags) {
-    content.parsed = content.parsed.replace(tag, ` ~tag-${tag}~ `);
+    const uniqTags = new Set(hashtags);
-  });
+    uniqTags.forEach((tag) => {
+      content.parsed = content.parsed.replaceAll(tag, `~tag-${tag}~`);
+    });
+  }
 
   return content;
 }