HomePoststiptap mentions add link

How to add a link to a Tiptap mention

Last Updated
Profile Picture
Peter White@petewht
Post Cover Photo

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 [
            mergeAttributes({ 'data-type': this.name }, { 'href': `/user/${HTMLAttributes['data-id']}` }, this.options.HTMLAttributes, HTMLAttributes),
                options: this.options,

Thanks for Reading!

I always appreciate feedback or suggestions for future blog posts. You can find me on Twitter or if you want to improve the article to help future readers, please feel free to submit a PR.

🦉 2794 days

Duolingo Streak

Proudly created in beautiful Sætre in Norway 🇳🇴