How to add a link to a Tiptap mention

At IndyRiot, we use TipTap as our rich text WYSIWYG editor. We use the mention extension to allow users to tag other users, driving engagement and helping communities thrive.

By default, the mention extension does not include support for linking to other content. However, it is easy to create your own mention extension and add this feautre.

1. Copy the whole mention extension file from here into your project
2. Remove the existing extension-mention import and import your own
3. Modify the renderHTML function to swap 'span' for 'a'
4. Add a href to mergeAttributes, using a value from your suggestion function
5. Done!

    renderHTML({ node, HTMLAttributes }) {
        return [
            'a',
            mergeAttributes({ 'data-type': this.name }, { 'href': `/user/${HTMLAttributes['data-id']}` }, this.options.HTMLAttributes, HTMLAttributes),
            this.options.renderLabel({
                options: this.options,
                node,
            }),
        ]
    },