diff --git a/web/components/editor.tsx b/web/components/editor.tsx index eb02f81d..e2b5bbc3 100644 --- a/web/components/editor.tsx +++ b/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, ], diff --git a/web/components/editor/mention-list.tsx b/web/components/editor/contract-mention-list.tsx similarity index 100% rename from web/components/editor/mention-list.tsx rename to web/components/editor/contract-mention-list.tsx diff --git a/web/components/editor/mention-suggestion.ts b/web/components/editor/contract-mention-suggestion.ts similarity index 95% rename from web/components/editor/mention-suggestion.ts rename to web/components/editor/contract-mention-suggestion.ts index bc2b72dd..5f7c78f9 100644 --- a/web/components/editor/mention-suggestion.ts +++ b/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, diff --git a/web/components/editor/mention.tsx b/web/components/editor/contract-mention.tsx similarity index 84% rename from web/components/editor/mention.tsx rename to web/components/editor/contract-mention.tsx index 2801e2e5..9e967044 100644 --- a/web/components/editor/mention.tsx +++ b/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', }),