47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
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 })
|