fetch mention suggestions async

[fridaystreet]

Hi,

We were previously using 4.3.7 and seems all documentation has now dissapeared for any previous versions. The new mention plugin looks much better, but struggling a bit until there is more documentation or a more complex example.

What we need to do and were previpously doing in the older version was to fetch the list of mention suggestions async on the user typing . Am I correct in saying there is no way currently to hook into the onChange event of the combo box through the ?

I looked through the source and it doesn't appear that onChange is available in MentionCombobox and nothing is passed down to combobox. Is there some other way to implement an async search with the current implementation?

Cheers

[zbeyens]

We unfortunately don't have docs versioning. You can browse the repo at a previous version https://github.com/udecode/plate/tree/%40udecode/plate-mention%404.3.7

The mention is using the mention and combobox plugins. Async search should be possible on your end, then you just need to set the items in the combobox store.

[fridaystreet]

Thanks, yeah I can build the items myself externally, but there is no way to hook into the search changes. Or am I missing something?

MentionCombobox, doesn't allow to pass a filter function or an onChnage function or anything to combobox. So how would I trigger my async function to search for new items?

[zbeyens]

I would use a useEffect depending on comboboxStore.use.isOpen() and comboboxStore.use.text()

I also recommend you to fork https://github.com/udecode/plate/blob/cc4815570eae13e04410818331df6e9143db56a5/packages/elements/mention-ui/src/MentionCombobox.tsx if you need more. Combobox is the real component to use, MentionCombobox is just a dumb component providing defaults.

[fridaystreet]

thanks I'll look into those. I was trying to work out how to use that combo store stuff.

I thought I'd just go back to basics and try and get the demo working and I can't even get the standard demo of mentions working in my dev environment, is there something special that isn't in the docs?

I gues the docs are a bit hard to follow from a code perspective as none of the examples are really full code examples. it's quite hard to tell exactly what's required for each example. Is there a reason why all the boiler plate is left out of each example?

[zbeyens]

For maintainability. We store most of the boilerplate into CONFIG, VALUES, PLUGINS objects.

For full code example, see https://codesandbox.io/s/slate-plugins-playground-v1-2mh1c?file=/index.tsx