manifold/web/components/editor/contract-mention.tsx

import Mention from '@tiptap/extension-mention'
import {
  mergeAttributes,
  NodeViewWrapper,
  ReactNodeViewRenderer,
} from '@tiptap/react'
import clsx from 'clsx'
import { useContract } from 'web/hooks/use-contract'
import { ContractMention } from 'web/components/contract/contract-mention'
import Link from 'next/link'
import { contractMentionSuggestion } from './contract-mention-suggestion'

const name = 'contract-mention-component'

const ContractMentionComponent = (props: any) => {
  const { label, id } = props.node.attrs
  const contract = useContract(id)

  return (
    <NodeViewWrapper className={clsx(name, 'not-prose inline')}>
      {contract ? (
        <ContractMention contract={contract} />
      ) : label ? (
        <Link href={label}>
          <a className="rounded-sm !text-indigo-700 hover:bg-indigo-50">
            {label}
          </a>
        </Link>
      ) : (
        '[loading...]'
      )}
    </NodeViewWrapper>
  )
}

/**
 *  Mention extension that renders React. See:
 *  https://tiptap.dev/guide/custom-extensions#extend-existing-extensions
 *  https://tiptap.dev/guide/node-views/react#render-a-react-component
 */
export const DisplayContractMention = Mention.extend({
  name: 'contract-mention',
  parseHTML: () => [{ tag: name }],
  renderHTML: ({ HTMLAttributes }) => [name, mergeAttributes(HTMLAttributes)],
  addNodeView: () => ReactNodeViewRenderer(ContractMentionComponent),
}).configure({ suggestion: contractMentionSuggestion })