Rename to contract-mention

web/components/editor.tsx

@@ -18,8 +18,8 @@ import { uploadImage } from 'web/lib/firebase/storage'
 import { useMutation } from 'react-query'
 import { FileUploadButton } from './file-upload-button'
 import { linkClass } from './site-link'
-import { mentionSuggestion } from './editor/mention-suggestion'
-import { DisplayMention } from './editor/mention'
+import { mentionSuggestion } from './editor/contract-mention-suggestion'
+import { DisplayContractMention } from './editor/contract-mention'
 import Iframe from 'common/util/tiptap-iframe'
 import TiptapTweet from './editor/tiptap-tweet'
 import { EmbedModal } from './editor/embed-modal'
@@ -90,7 +90,7 @@ export function useTextEditor(props: {
       CharacterCount.configure({ limit: max }),
       simple ? DisplayImage : Image,
       DisplayLink,
-      DisplayMention.configure({ suggestion: mentionSuggestion }),
+      DisplayContractMention.configure({ suggestion: mentionSuggestion }),
       Iframe,
       TiptapTweet,
     ],
@@ -247,7 +247,7 @@ export function RichContent(props: {
       StarterKit,
       smallImage ? DisplayImage : Image,
       DisplayLink.configure({ openOnClick: false }), // stop link opening twice (browser still opens)
-      DisplayMention,
+      DisplayContractMention,
       Iframe,
       TiptapTweet,
     ],

web/components/editor/contract-mention-suggestion.ts

@@ -5,7 +5,7 @@ import { orderBy } from 'lodash'
 import tippy from 'tippy.js'
 import { getCachedContracts } from 'web/hooks/use-contracts'
 // import { getCachedUsers } from 'web/hooks/use-users'
-import { MentionList } from './mention-list'
+import { MentionList } from './contract-mention-list'
 
 type Suggestion = MentionOptions['suggestion']
 
@@ -13,6 +13,7 @@ const beginsWith = (text: string, query: string) =>
   text.toLocaleLowerCase().startsWith(query.toLocaleLowerCase())
 
 // copied from https://tiptap.dev/api/nodes/mention#usage
+// TODO: merge with mention-suggestion.ts?
 export const mentionSuggestion: Suggestion = {
   char: '%',
   allowSpaces: true,

web/components/editor/contract-mention.tsx

@@ -8,9 +8,9 @@ import clsx from 'clsx'
 import { useContract } from 'web/hooks/use-contract'
 import { ContractCard } from '../contract/contract-card'
 
-const name = 'mention-component'
+const name = 'contract-mention-component'
 
-const MentionComponent = (props: any) => {
+const ContractMentionComponent = (props: any) => {
   const contract = useContract(props.node.attrs.id)
 
   return (
@@ -30,11 +30,11 @@ const MentionComponent = (props: any) => {
  *  https://tiptap.dev/guide/custom-extensions#extend-existing-extensions
  *  https://tiptap.dev/guide/node-views/react#render-a-react-component
  */
-export const DisplayMention = Mention.extend({
+export const DisplayContractMention = Mention.extend({
   parseHTML: () => [{ tag: name }],
   renderHTML: ({ HTMLAttributes }) => [name, mergeAttributes(HTMLAttributes)],
   addNodeView: () =>
-    ReactNodeViewRenderer(MentionComponent, {
+    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',
     }),