handle mentioning npub when posting note

src/components/note/note-contents.tsx

@@ -191,23 +191,6 @@ const embeds: EmbedType[] = [
     ),
     isMedia: false,
   },
-  // npub1 and note1 ids
-  {
-    regexp: /@?((npub1|note1)[qpzry9x8gf2tvdw0s3jn54khce6mua7l]{58})/m,
-    render: (match) => {
-      switch (match[2]) {
-        case "npub1":
-          const key = normalizeToHex(match[1]);
-          return key ? <UserLink color="blue.500" pubkey={key} showAt /> : match[0];
-        case "note1":
-          const noteId = normalizeToHex(match[1]);
-          return noteId ? <QuoteNote noteId={noteId} /> : match[0];
-        default:
-          return match[0];
-      }
-    },
-    isMedia: false,
-  },
   // Nostr Mention Links
   {
     regexp: /#\[(\d+)\]/,

src/components/post-modal/index.tsx

@@ -16,12 +16,14 @@ import moment from "moment";
 import React, { useRef, useState } from "react";
 import { useList } from "react-use";
 import { nostrPostAction, PostResult } from "../../classes/nostr-post-action";
+import { normalizeToHex } from "../../helpers/nip19";
 import { getReferences } from "../../helpers/nostr-event";
+import { mentionNpubOrNote } from "../../helpers/regexp";
 import { useWriteRelayUrls } from "../../hooks/use-client-relays";
 import { useIsMobile } from "../../hooks/use-is-mobile";
 import { useSigningContext } from "../../providers/signing-provider";
 import { DraftNostrEvent, NostrEvent } from "../../types/nostr-event";
-import { CameraIcon, ImageIcon } from "../icons";
+import { ImageIcon } from "../icons";
 import { NoteLink } from "../note-link";
 import { NoteContents } from "../note/note-contents";
 import { PostResults } from "./post-results";
@@ -35,6 +37,32 @@ function emptyDraft(): DraftNostrEvent {
   };
 }
 
+function finalizeNote(draft: DraftNostrEvent) {
+  const updatedDraft: DraftNostrEvent = { ...draft, tags: Array.from(draft.tags), created_at: moment().unix() };
+
+  // replace all occurrences of @npub and @note
+  while (true) {
+    const match = mentionNpubOrNote.exec(updatedDraft.content);
+    if (!match || match.index === undefined) break;
+
+    const hex = normalizeToHex(match[1]);
+    if (!hex) continue;
+    // TODO: find the best relay for this user or note
+    const index = updatedDraft.tags.push([match[2] === "npub1" ? "p" : "e", hex, "", "mention"]) - 1;
+
+    // replace the npub1 or note1 with a mention tag #[0]
+    const c = updatedDraft.content;
+    updatedDraft.content = c.slice(0, match.index) + `#[${index}]` + c.slice(match.index + match[0].length);
+  }
+
+  // add client tag, TODO: find a better place for this
+  if (!updatedDraft.tags.some((t) => t[0] === "client")) {
+    updatedDraft.tags.push(["client", "noStrudel"]);
+  }
+
+  return updatedDraft;
+}
+
 type PostModalProps = {
   isOpen: boolean;
   onClose: () => void;
@@ -84,11 +112,7 @@ export const PostModal = ({ isOpen, onClose, initialDraft }: PostModalProps) =>
 
   const handleSubmit = async () => {
     setWaiting(true);
-    const updatedDraft: DraftNostrEvent = { ...draft, created_at: moment().unix() };
-    // add client tag, TODO: find a better place for this
-    if (!updatedDraft.tags.some((t) => t[0] === "client")) {
-      updatedDraft.tags.push(["client", "noStrudel"]);
-    }
+    const updatedDraft = finalizeNote(draft);
     const event = await requestSignature(updatedDraft);
     setWaiting(false);
     if (!event) return;
@@ -116,7 +140,7 @@ export const PostModal = ({ isOpen, onClose, initialDraft }: PostModalProps) =>
           </Text>
         )}
         {showPreview ? (
-          <NoteContents event={draft} trusted />
+          <NoteContents event={finalizeNote(draft)} trusted />
         ) : (
           <Textarea
             autoFocus

src/helpers/regexp.ts

@@ -0,0 +1 @@
+export const mentionNpubOrNote = /@?((npub1|note1)[qpzry9x8gf2tvdw0s3jn54khce6mua7l]{58})/gi;