EmojiNode.tsx raw

   1  import Emoji from '@/components/Emoji'
   2  import customEmojiService from '@/services/custom-emoji.service'
   3  import { emojis, shortcodeToEmoji } from '@tiptap/extension-emoji'
   4  import { NodeViewRendererProps, NodeViewWrapper } from '@tiptap/react'
   5  import { useMemo } from 'react'
   6  
   7  export default function EmojiNode(props: NodeViewRendererProps) {
   8    const emoji = useMemo(() => {
   9      const name = props.node.attrs.name
  10      if (customEmojiService.isCustomEmojiId(name)) {
  11        return customEmojiService.getEmojiById(name)
  12      }
  13      return shortcodeToEmoji(name, emojis)?.emoji
  14    }, [props.node.attrs.name])
  15  
  16    if (!emoji) {
  17      return null
  18    }
  19  
  20    if (typeof emoji === 'string') {
  21      return (
  22        <NodeViewWrapper className="inline">
  23          <span>{emoji}</span>
  24        </NodeViewWrapper>
  25      )
  26    }
  27  
  28    return (
  29      <NodeViewWrapper className="inline">
  30        <Emoji emoji={emoji} classNames={{ img: 'mb-1' }} />
  31      </NodeViewWrapper>
  32    )
  33  }
  34