1321b95eb1
* Revert "Revert "Use %mention to embed a contract card in rich text editor (#869)""
This reverts commit e0634cea6d.
* Overwrite name to prevent breakages
* Fix '%' mentioning if you escape out
* Cleanup: merge render functions
43 lines
1.3 KiB
TypeScript
43 lines
1.3 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 { ContractCard } from '../contract/contract-card'
|
|
|
|
const name = 'contract-mention-component'
|
|
|
|
const ContractMentionComponent = (props: any) => {
|
|
const contract = useContract(props.node.attrs.id)
|
|
|
|
return (
|
|
<NodeViewWrapper className={clsx(name, 'not-prose')}>
|
|
{contract && (
|
|
<ContractCard
|
|
contract={contract}
|
|
className="my-2 w-full border border-gray-100"
|
|
/>
|
|
)}
|
|
</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, {
|
|
// On desktop, render cards below half-width so you can stack two
|
|
className: 'inline-block sm:w-[calc(50%-1rem)] sm:mr-1',
|
|
}),
|
|
})
|