Multiple Instances: Suggestion Plugin

[Rykuno]

A requirement for utilizing TipTap within our application are multiple suggestion triggers.

Is there any capability for this within TipTap? We tried implementing a solution but it seems one plugin simply overrides the other.

Example

Hello @user welcome to $group

Where @ mentions a User
Where $ mentions a Group

[philippkuehn]

That should be possible. could you provide a codesandbox that shows the issue please?

[d8vjork]

Hey! Had the same issue, and thanks to @Rykuno solution I managed it, but how to solve this warning? It seems related to the name of the node itself but with a Node.configure we cannot access that property...

[Rykuno]

Hey! Had the same issue, and thanks to @Rykuno solution I managed it, but how to solv

I believe that is solved within where you initialize the editor like below

  const editor = useEditor({
    onUpdate({ editor }) {
      setValue(name, editor.getHTML())
    },
    extensions: [
      ...
      Mention.extend({
        name: "userMention",
      }).configure({
        HTMLAttributes: {
          class: styles["mention-user"],
        },
        suggestion: userSuggestions({ refetchUsers }),
      }),
      Mention.extend({
        name: "guildMention",
      }).configure({
        HTMLAttributes: {
          class: styles["mention-guild"],
        },
        suggestion: guildSuggestions({ refetchGuilds }),
      }),
    ],
  })

So each plugin will have a different pluginKey but also a different name within the TipTap hook.

Also, for each PluginKey you can provide a unique name as well.

const userSuggestions = ({ refetchUsers }: Props) => ({
char: "u/",
pluginKey: new PluginKey("userMention"),
items: async ({ query }: { query: string }) => {
  const { data } = await refetchUsers({
    query,
  })

[moshfiqrony]

Thanks @Rykuno

[mrozanski]

I found this while trying to support the same feature (multiple suggestion triggers).
The suggested solution works but I can't get rid of the warning.
Changing the name seems to be an issue.

The documentation says:

The same applies to every aspect of an existing extension, except to the name

https://tiptap.dev/docs/editor/guide/custom-extensions#extend-existing-extensions

We have two extensions to the Mention extension, both use a similar suggestion function, they do the same, the difference is in the character that triggers them: ~ and @

If I add a name this way, the second one stops working, it triggers the suggestions popup but I don't receive back the selected value, which works without the changed name.
(The warning goes away though)

extensions.unshift(
  Mention.extend({ priority: 1000, name: 'mention' }).configure({
    // ...
});
extensions.unshift(
  Mention.extend({ priority: 999, name: 'at-mention' }).configure({
  // ...
})

[verveguy]

Name cannot be changed. I've resorted to having two copies of the Mention source, each with a different name: set.