Allow the mention extension to have custom renderHTML

[moham96]

Please describe your changes

Currently the mention extension's renderLabel doesn't allow returning HTML and expect returning string, there is a workaround by tricking the typesystem but this breaks when generating text from JSONContent (i.e using generateText from @tiptap/core , this should allow the user to customize the text and html rendering.

This can be very useful when one wants to render and a tag instead of just a span tag so that it can link to the profile of the mention person

How did you accomplish your changes

Basically introduced two new functions renderText and renderHTML

How have you tested your changes

Yes, tested it on my current project (Laravel with Inertiajs)

How can we verify your changes

It can be tested using the mention demo

Remarks

N/A

Checklist

• The changes are not breaking the editor
• Added tests where possible
• Followed the guidelines
• Fixed linting issues

Related issues

#3325

[netlify]

✅ Deploy Preview for tiptap-embed ready!

Name	Link
🔨 Latest commit	6ff8323
🔍 Latest deploy log	https://app.netlify.com/sites/tiptap-embed/deploys/655e5add6a684d00081263fd
😎 Deploy Preview	https://deploy-preview-4082--tiptap-embed.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[andrictham]

Seems like the original PR author isn’t responding. Any chance this could still be merged? @bdbch

[fabioborges]

Hey guys, is there anything else preventing the merging of this pull request?

[bdbch]

LGTM, cc @svenadlung

[fabioborges]

Hey guys, it seems like this PR is ready to be integrated into a new release, isn't it?
I'm anxiously waiting for it :)
Tks for the amazing job!

[Skryabind]

Is any way to make a link on mention block while this PR hasn't merged?

[andrictham]

@Skryabind Yes, you can extend the stock Mention extension and add whatever methods you want to your extended version.

You can modify the text or HTML being rendered, or render a node view.

See here.

Not sure why this PR isn’t yet merged, though. It’s a fairly small change. Maybe the core team is busy.

[Skryabind]

@andrictham thank you! I did it by using extend and changing the "name" parameter in config.

[MichaelGoff]

Just wanted to give a heads up to anyone that comes across this.

The change to remove renderLabel from the Mention extension's options caused a breaking change in 2.2.0 in my custom Mention extension that was using it. I had to make a code change and switch to use renderText instead.

[rnystrom]

Just a heads up, this completely broke rendering data attributes. We fixed it by extending the mention extension with:

renderHTML({ node, HTMLAttributes }) {
  return [
    'span',
    mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
    `${this.options.suggestion.char}${node.attrs.label ?? node.attrs.id}`
  ]
}

Even the TipTap mentions demo does not render data attributes anymore

https://tiptap.dev/docs/editor/api/nodes/mention

[moham96]

Just wanted to give a heads up to anyone that comes across this.

The change to remove renderLabel from the Mention extension's options caused a breaking change in 2.2.0 in my custom Mention extension that was using it. I had to make a code change and switch to use renderText instead.

can you provide a minimal example with the problem?

[moham96]

Just a heads up, this completely broke rendering data attributes. We fixed it by extending the mention extension with:

renderHTML({ node, HTMLAttributes }) {
  return [
    'span',
    mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
    `${this.options.suggestion.char}${node.attrs.label ?? node.attrs.id}`
  ]
}

Even the TipTap mentions demo does not render data attributes anymore

https://tiptap.dev/docs/editor/api/nodes/mention

Data attributes work fine in the demo, can you provide a reproducible example?

[pondorasti]

Just a heads up, this completely broke rendering data attributes. We fixed it by extending the mention extension with:

renderHTML({ node, HTMLAttributes }) {
  return [
    'span',
    mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
    `${this.options.suggestion.char}${node.attrs.label ?? node.attrs.id}`
  ]
}

Even the TipTap mentions demo does not render data attributes anymore
https://tiptap.dev/docs/editor/api/nodes/mention

Data attributes work fine in the demo, can you provide a reproducible example?

@moham96 you can inspect mention elements in the demo and you will see that no attributes are being attached with the span. This is not just the case for data-id, but any HTMLAttributes that are passed to the node.