Feature Request: Store only ids of the mention in Mention plugin.

[mkmaker]

Description

Let's say we create a tweet and mention someone whose username is @JimBim but later they change it to @jack_daniels. Currently it saves the username as span tag with something like this:
Hey! <span data-type="mention" data-id="298af7f3-0d20-4ec3-b3b1-74d5c111310e">@jimbim</span> what's up?

But when the username gets changed I want the text to be changed too. I think the best way to achieve that is to store only ids and not text. The text value should be replaced with the current text value (username here) based on data-id at the time of rendering.

Is this possible?

Use Case

Allow mention texts to be changed.

Type

Mention extension enhancement.

[guanriyue]

Use chatgpt to translate. If there is anything unclear, please let me know.

That’s a workable approach! With this setup, you don't need Tiptap to manage it directly, as creating a custom NodeView allows for great flexibility. Here's how the setup works:

1. Custom NodeView Component: MentionNodeView takes in props, accesses the node’s attributes (id and label), and uses a data-fetching hook, useQuery, to get the user information from getUserInfo.

2. Conditional Rendering: The component displays either userInfo.name or node.attrs.label, which ensures it gracefully handles both the loading and fallback states if the data isn’t ready yet.

If you’re managing async data from a source like react-query, this approach ensures that user information loads efficiently without requiring a special feature from Tiptap.

It’s a practical, flexible solution!

const getUserInfo = ...;

const MentionNodeView = (props) => {
  const { node } = props;

  const id = node.attrs.id;

  const { data: userInfo, loading, error } = useQuery({
     fetcher: () => {
        return getUserInfo(id);
     }
  });
 
  return <div>@{userInfo.name || node.attrs.label}</div>
};