🤌 Rich text editor with real-time collaboration (Tiptap)

[veeslop]

Hey ! Nice plugin, great work !

I managed to get the mention feature working in the editor (typing @ to mention someone). However, I can’t find a way to retrieve that mention data on the Bubble side.

Is there a plugin state, an exposed event, or some other way to detect “a mention was just created” and get the mentioned user’s data (ID/name) from it? I couldn’t find this documented anywhere.

Thanks

[rico.trevisan]

Could you give me more context; what is the user experience you’re trying to achieve?

---

At the moment there isn’t a dedicated “mention was created” event/state.

The mention is included in the editor’s Content (JSON) state. It looks roughly like:

{
  "type": "mention",
  "attrs": {
    "id": "user-id",
    "label": "User Name",
    "mentionSuggestionChar": "@"
  }
}

The id and label correspond to the ID and label fields you configured for the mention list.

You can react to the editor’s Content updated event and parse Content (JSON) on the Bubble side. That lets you retrieve all mentions, but detecting that a specific mention was just added currently requires comparing the new JSON with the previous value.

So the short answer is: the data is accessible today. For a clean dedicated event plus states for the newly created mention I would need to add that to the plugin.

[veeslop]

Ok, thanks for the explanation!

I was actually trying to trigger a Bubble workflow whenever any mention got created, but I’ll go with comparing the Content (JSON) as you suggested instead.

While I have you, I have another question about the table of contents… It displays correctly on initial load, but when I dynamically switch the tiptap to different content, the table of contents disappears. Any idea why that might be happening, or how to get it to refresh when the content changes?

Thanks again for your help!

[rico.trevisan]

Thanks for the report. Would you mind sharing how you’ve wired the Tiptap editor and the ToC? Is it autobinding or using a Collab provider? You can drop it here or a DM – a video of you walking through it is best.

[veeslop]

Thanks for getting back.

To answer your question: I’m not using autobinding or a Collab provider. My setup is simpler — the Tiptap element’s Content field is directly bound to a dynamic data source where the search is filtered using a URL parameter : its just a live dynamic expression on the parent group, refreshed automatically whenever that URL parameter changes.

The ToC is wired directly to that same Tiptap element’s Table of Content (JSON), so in theory it should recompute whenever the Content changes(?)

That said, I’m wondering if this might just not be the intended way to feed dynamic content into the plugin — happy to switch to a different pattern (e.g. an explicit workflow action to set/refresh the content) if that’s the recommended approach.

Thanks again for your help!

[rico.trevisan]

Your setup is supported. Initial content should react when its dynamic expression changes, provided auto-binding and collaboration are disabled.

The TOC was not being refreshed correctly after that programmatic content change. I’ve fixed this in v4.10.5. Please update the plugin and try it again.

[veeslop]

Updated to 4.10.5, but still having the same issue

Just to clarify ; I’m on a single page, so the content updates dynamically without a full page reload.

[rico.trevisan]

I’ve pushed a fix: could you test?

[veeslop]

Hey

It works

Thank you !