Dynamic data from React state in Mention

[BenJeau]

Hi,

I have dynamic data (from an API with TanStack Query) that is being used to populate the Mention suggestion items.

I realized that the items function seems to capture the variables on initialization and disregards any updated data from the state. I'm unsure how to accomplish this while using TanStack Query as it auto-manages the state of the API call's response (or with any kind of state variable)

[BenJeau]

Seems like I have found how to accomplish this - useEditor has a dependency array which can be utilized to update the editor on state/prop change. I only needed to add the state to that array

[jsormaz]

Would you be willing to share this section of your code? I am trying to do the same thing and cannot figure this out.

[BenJeau]

Simply pass it as a dependency array, e.g.:

useEditor({
...
}, [state]);

Replace state with your state variable and it can include multiple different states, as it accepts an array of states

[jonahallibone]

AFAIK this does not work anymore

[RoshanShrestha123]

Thank you, the solution worked for me. Not sure why items are not reactive at the first place.

[kresimir-coko]

For me, passing the state as a dependency triggers a re-render whenever the editor content changes, rendering this solution useless. Still have the same problem

[jsormaz]

Thanks! turns out the reason I was so confused is because I am using Vue.
I didn't realize a dependency array was a React specific thing (no experience with React), thought maybe it was a TipTap specific thing.

I ended up getting this to work in Vue using provide/inject

Some more info here for anyone else on the same path:
[https://github.com//issues/1246]