Mentions: How do I use a user id to span?

[benpratt22]

Hi!

Using your example at:

https://www.tiptap.dev/examples/suggestions

I have changed it so I am passing the full objects to the MentionList.vue and rendering them in the pop-up. I am wondering if I am able to use an id for the "data-mention" property, or add another property with the user's ID as opposed to the user's name. Example below.

At the moment, I have...

<span class="mention-orange" data-mention="John" contenteditable="false">@John</span>

But ideally, I'd like (for example user-id = 342)

<span class="mention-orange" data-mention="342" contenteditable="false">@John</span>

OR...

<span class="mention-orange" user-id="342" data-mention="John" contenteditable="false">@John</span>

I presumed in selectItem in MentionList.vue, I would be able to pass stuff in there, but I couldn't find the correct document

selectItem(index: number): void {
    const item = this.items[index];
    if (item) {
      this.command({ id: item.firstName });
    }
  }

Any help is appreciated! thank you

[benpratt22]

Found that I can just change mention.ts to my requirements. Thanks

[caparker]

Another way to do it would be to extend the mention object. For example, lets say that you wanted to also include the attribute user to the span.

First extend the Mention by adding the user attribute

const CustomMention = Mention.extend({
  addAttributes() {
    return {
      ...this.parent(),
      user: {
        default: '',
      }
    }
  }
});

And then add the custom extension to the editor object instead of the original.

And then make sure you pass the user value. In the example below item is an object with an id that represents the user-id and a label for the display name

selectItem(index) {
    const item = this.items[index]
    if (item) {
      this.command({ id: item.label, user: item.id })
    }
}

[arifemir]

https://tiptap.dev/docs/editor/extensions/nodes/mention#renderhtml can be useful also

Mention.configure({
  renderHTML({ options, node }) {
    return [
      'a',
      mergeAttributes({ href: '/profile/1' }, options.HTMLAttributes),
      `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`,
    ]
  },
})