common/util/parse.ts

@@ -73,6 +73,7 @@ export const exhibitExts = [
   Image,
   Link,
   Mention,
+  Mention.extend({ name: 'contract-mention' }),
   Iframe,
   TiptapTweet,
   TiptapSpoiler,

web/components/editor/contract-mention.tsx

@@ -6,16 +6,28 @@ import {
 } from '@tiptap/react'
 import clsx from 'clsx'
 import { useContract } from 'web/hooks/use-contract'
-import { ContractMention } from '../contract/contract-mention'
+import { ContractMention } from 'web/components/contract/contract-mention'
+import Link from 'next/link'
 
 const name = 'contract-mention-component'
 
 const ContractMentionComponent = (props: any) => {
-  const contract = useContract(props.node.attrs.id)
+  const { label, id } = props.node.attrs
+  const contract = useContract(id)
 
   return (
     <NodeViewWrapper className={clsx(name, 'not-prose inline')}>
-      {contract && <ContractMention contract={contract} />}
+      {contract ? (
+        <ContractMention contract={contract} />
+      ) : label ? (
+        <Link href={label}>
+          <a className="rounded-sm !text-indigo-700 hover:bg-indigo-50">
+            {label}
+          </a>
+        </Link>
+      ) : (
+        '[loading...]'
+      )}
     </NodeViewWrapper>
   )
 }
@@ -29,8 +41,5 @@ 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
-    }),
+  addNodeView: () => ReactNodeViewRenderer(ContractMentionComponent),
 })