MentionNode.tsx raw

   1  import TextWithEmojis from '@/components/TextWithEmojis'
   2  import { Pubkey } from '@/domain'
   3  import { useFetchProfile } from '@/hooks'
   4  import { cn } from '@/lib/utils'
   5  import { NodeViewRendererProps, NodeViewWrapper } from '@tiptap/react'
   6  
   7  export default function MentionNode(props: NodeViewRendererProps & { selected: boolean }) {
   8    const { profile } = useFetchProfile(props.node.attrs.id)
   9  
  10    return (
  11      <NodeViewWrapper
  12        className={cn('inline text-primary', props.selected ? 'bg-primary/20 rounded-sm' : '')}
  13      >
  14        {'@'}
  15        {profile ? (
  16          <TextWithEmojis text={profile.username} emojis={profile.emojis} emojiClassName="mb-1" />
  17        ) : (
  18          Pubkey.tryFromString(props.node.attrs.id)?.formatNpub(12) ?? props.node.attrs.id.slice(0, 12)
  19        )}
  20      </NodeViewWrapper>
  21    )
  22  }
  23