fix(Mention): Maintain mention after nym change

api/payIn/lib/item.js

@@ -43,7 +43,20 @@ export async function getMentions (tx, { text, userId }) {
         }
       }
     })
-    return users.map(user => ({ userId: user.id }))
+    const userMap = new Map(users.map(u => [u.name.toLowerCase(), u]))
+    const seen = new Set()
+    const orderedMentions = []
+    for (const name of names) {
+      const lowerName = name.toLowerCase()
+      if (!seen.has(lowerName)) {
+        const user = userMap.get(lowerName)
+        if (user) {
+          orderedMentions.push({ userId: user.id })
+          seen.add(lowerName)
+        }
+      }
+    }
+    return orderedMentions
   }
   return []
 }

api/resolvers/item.js

@@ -1299,6 +1299,14 @@ export default {
         }
       })
     },
+    mentions: async (item, args, { models }) => {
+      const mentions = await models.mention.findMany({
+        where: { itemId: item.id },
+        include: { user: true },
+        orderBy: { id: 'asc' }
+      })
+      return mentions.map(m => m.user)
+    },
     comments: async (item, { sort, cursor }, { me, models }) => {
       if (typeof item.comments !== 'undefined') {
         if (Array.isArray(item.comments)) {

api/typeDefs/item.js

@@ -159,6 +159,7 @@ export default gql`
     cost: Int!
     payIn: PayIn
     meCommentsViewedAt: Date
+    mentions: [User!]!
   }
 
   input ItemForwardInput {

components/comment.js

@@ -287,7 +287,7 @@ export default function Comment ({
                 {item.searchText
                   ? <SearchText text={item.searchText} />
                   : (
-                    <Text itemId={item.id} topLevel={topLevel} rel={item.rel ?? UNKNOWN_LINK_REL} outlawed={item.outlawed} imgproxyUrls={item.imgproxyUrls}>
+                    <Text itemId={item.id} topLevel={topLevel} rel={item.rel ?? UNKNOWN_LINK_REL} outlawed={item.outlawed} imgproxyUrls={item.imgproxyUrls} mentions={item.mentions}>
                       {item.outlawed && !me?.privates?.wildWestMode
                         ? '*stackers have outlawed this. turn on wild west mode in your [settings](/settings) to see outlawed content.*'
                         : truncate ? truncateString(item.text) : item.text}

components/item-full.js

@@ -157,7 +157,7 @@ function TopLevelItem ({ item, noReply, ...props }) {
 function ItemText ({ item }) {
   return item.searchText
     ? <SearchText text={item.searchText} />
-    : <Text itemId={item.id} topLevel rel={item.rel ?? UNKNOWN_LINK_REL} outlawed={item.outlawed} imgproxyUrls={item.imgproxyUrls}>{item.text}</Text>
+    : <Text itemId={item.id} topLevel rel={item.rel ?? UNKNOWN_LINK_REL} outlawed={item.outlawed} imgproxyUrls={item.imgproxyUrls} mentions={item.mentions}>{item.text}</Text>
 }
 
 export default function ItemFull ({ item, fetchMoreComments, bio, rank, ...props }) {

components/text.js

@@ -22,18 +22,6 @@ import Embed from './embed'
 import remarkMath from 'remark-math'
 import remarkToc from '@/lib/remark-toc'
 
-const rehypeSNStyled = () => rehypeSN({
-  stylers: [{
-    startTag: '<sup>',
-    endTag: '</sup>',
-    className: styles.superscript
-  }, {
-    startTag: '<sub>',
-    endTag: '</sub>',
-    className: styles.subscript
-  }]
-})
-
 const baseRemarkPlugins = [
   gfm,
   remarkUnicode,
@@ -53,7 +41,7 @@ export function SearchText ({ text }) {
 }
 
 // this is one of the slowest components to render
-export default memo(function Text ({ rel = UNKNOWN_LINK_REL, imgproxyUrls, children, tab, itemId, outlawed, topLevel }) {
+export default memo(function Text ({ rel = UNKNOWN_LINK_REL, imgproxyUrls, children, tab, itemId, outlawed, topLevel, mentions }) {
   // include remarkToc if topLevel
   const remarkPlugins = topLevel ? [...baseRemarkPlugins, remarkToc] : baseRemarkPlugins
 
@@ -151,6 +139,19 @@ export default memo(function Text ({ rel = UNKNOWN_LINK_REL, imgproxyUrls, child
 
   const carousel = useCarousel()
 
+  const rehypeSNStyled = useMemo(() => () => rehypeSN({
+    mentions,
+    stylers: [{
+      startTag: '<sup>',
+      endTag: '</sup>',
+      className: styles.superscript
+    }, {
+      startTag: '<sub>',
+      endTag: '</sub>',
+      className: styles.subscript
+    }]
+  }), [mentions])
+
   const markdownContent = useMemo(() => (
     <ReactMarkdown
       components={components}
@@ -160,7 +161,7 @@ export default memo(function Text ({ rel = UNKNOWN_LINK_REL, imgproxyUrls, child
     >
       {children}
     </ReactMarkdown>
-  ), [components, remarkPlugins, mathJaxPlugin, children, itemId])
+  ), [components, remarkPlugins, mathJaxPlugin, children, itemId, rehypeSNStyled])
 
   const showOverflow = useCallback(() => setShow(true), [setShow])
 

fragments/items.js

@@ -86,6 +86,9 @@ export const ITEM_FIELDS = gql`
     apiKey
     cost
     meCommentsViewedAt
+    mentions {
+      name
+    }
   }`
 
 export const ITEM_FULL_FIELDS = gql`

lib/rehype-sn.js

@@ -11,9 +11,64 @@ const subRegex = new RegExp('~(' + subGroup + '(?:\\/' + subGroup + ')?)', 'gi')
 const nostrIdRegex = /\b((npub1|nevent1|nprofile1|note1|naddr1)[02-9ac-hj-np-z]+)\b/g
 
 export default function rehypeSN (options = {}) {
-  const { stylers = [] } = options
+  const { stylers = [], mentions } = options
 
   return function transformer (tree) {
+    const mentionMap = {}
+
+    if (mentions?.length) {
+      const textMentions = []
+      visit(tree, 'text', (node, index, parent) => {
+        if (parent && parent.tagName === 'code') return
+        if (parent && parent.tagName === 'a') return
+
+        let text = toString(node)
+        if (['@', '~'].includes(node.value) && parent.children[index + 1]?.tagName === 'strong' && parent.children[index + 1].children[0]?.type === 'text') {
+          text = node.value + '__' + toString(parent.children[index + 1]) + '__'
+        }
+
+        let match
+        while ((match = mentionRegex.exec(text)) !== null) {
+          textMentions.push({ name: match[1], position: textMentions.length })
+        }
+        mentionRegex.lastIndex = 0
+      })
+
+      // Step 1: Try exact name matching first
+      const matched = new Set()
+      const unmatchedText = []
+
+      textMentions.forEach((tm) => {
+        const matchingDbMention = mentions.find(m =>
+          m.name.toLowerCase() === tm.name.toLowerCase() && !matched.has(m.name.toLowerCase())
+        )
+
+        if (matchingDbMention) {
+          if (tm.name !== matchingDbMention.name) {
+            mentionMap[tm.name] = matchingDbMention.name
+          }
+          matched.add(matchingDbMention.name.toLowerCase())
+        } else {
+          unmatchedText.push(tm)
+        }
+      })
+
+      // Step 2: Position-based mapping for unmatched mentions
+      if (unmatchedText.length > 0) {
+        const unmatchedDb = mentions.filter(m => !matched.has(m.name.toLowerCase()))
+
+        if (unmatchedText.length === unmatchedDb.length && unmatchedText.length > 0) {
+          unmatchedText.forEach((tm, idx) => {
+            if (unmatchedDb[idx]) {
+              mentionMap[tm.name] = unmatchedDb[idx].name
+            }
+          })
+        } else if (unmatchedText.length === 1 && unmatchedDb.length === 1) {
+          mentionMap[unmatchedText[0].name] = unmatchedDb[0].name
+        }
+      }
+    }
+
     try {
       visit(tree, (node, index, parent) => {
         if (parent?.tagName === 'code') {
@@ -117,7 +172,7 @@ export default function rehypeSN (options = {}) {
 
             const [fullMatch, mentionMatch, subMatch] = match
 
-            const replacement = mentionMatch ? replaceMention(fullMatch, mentionMatch) : replaceSub(fullMatch, subMatch)
+            const replacement = mentionMatch ? replaceMention(fullMatch, mentionMatch, mentionMap) : replaceSub(fullMatch, subMatch)
             if (replacement) {
               newChildren.push(replacement)
             } else {
@@ -237,7 +292,10 @@ export default function rehypeSN (options = {}) {
         )
   }
 
-  function replaceMention (value, username) {
+  function replaceMention (value, username, mentionMap) {
+    if (mentionMap && mentionMap[username]) {
+      username = mentionMap[username]
+    }
     // split the name by / to allow user paths and still show the user
     return {
       type: 'element',