Async Mentions

[Samushel]

It would be great if there were examples on how to implement async logic. I was trying to figure out Mentions and Images but haven't been able to make them work with calls to my Backend.

Also, I wanted to ask this on Slack, but there's no way to get in. I clicked on the link but you have to be in the org already, where do you get an invitation?

[dylans]

Did you try this slack link? https://join.slack.com/t/slate-js/shared_invite/zt-f8t986ip-7dA1DyiqPpzootz1snKXkw

[fridaystreet]

@Samushel I've been fighting trying to get my head around this new store setup and what's a component prop and what you need to go to the store for. It's a very different pattern to anything I'm used to, but I htink it's for the better once I get my head around it. With some assistance from @zbeyens regarding the use of comboboxStore.use.isOpen & comboboxStore.use.text, I was able to throw this together. I think it should get you someway towards being able to control the items through an async call. Haven't quite got the combobox filter function to fire yet, I did have it working in 6.x but seems to not be working now in 7.x. I was using that to filter out mentions in the list that were already selected, but possibly v7 does this automatically.

import React, { useCallback, useEffect, useRef } from 'react';
import { Combobox, comboboxStore, ComboboxProps, Data, NoData } from '@udecode/plate-combobox';
import {
  getPlatePluginOptions,
  PlatePluginKey,
  usePlateEditorRef,
} from '@udecode/plate-core';
import {
  ELEMENT_MENTION,
  getMentionOnSelectItem,
  MentionPluginOptions,
} from '@udecode/plate-mention';
import { isFunction } from 'lodash';

export const MentionCombobox = ({
  items,
  component,
  onRenderItem,
  pluginKey = ELEMENT_MENTION,
  id = pluginKey,
  editor,
  onMentionSearchChange,
  excludeItem,
}) => {

  const search = useRef();
  const open = comboboxStore.use.isOpen();
  const text = comboboxStore.use.text();

  const { trigger } = getPlatePluginOptions(
    editor,
    pluginKey
  );

  useEffect(() => {
    console.log('open', open);
    console.log('text', text);
    if (open && search.current !== text) {
      search.current = text;
      if (isFunction(onMentionSearchChange)) onMentionSearchChange(text);
    }
  }, [open, text, search, onMentionSearchChange]);

  const filter = useCallback((s) => (mentionable) => {
    try {
      if (isFunction(excludeItem)) {
        if (excludeItem(mentionable)) return;
      }
      return mentionable.name.toLowerCase().includes(s.toLowerCase())
    } catch (e) {
      //eslint-disable-next-line 
    }
  }, [excludeItem]);

  useEffect(() => {
    comboboxStore.set.setComboboxById({
      id,
      //trigger,
      // searchPattern,
      // maxSuggestions,
      filter,      
      //onSelectItem: onSelectMentionItem,
    });
  }, [comboboxStore, filter, id]);

  return (
    <Combobox
      id={id}
      trigger={trigger}
      controlled
      items={items}
      component={component}
      onRenderItem={onRenderItem}
      onSelectItem={getMentionOnSelectItem({
        pluginKey
      })}
    />
  );
};

[fridaystreet]

Thought I'd just post a quick update to this as I've discovered a few gotchas in the way the combobox store works. It was a bit confusing at first between what is essentially shared values between all comboboxes and what is stored per plugin. The advice to use comboboxstore.use.open and .text actually resulted in all my combo boxes firing their searches and other functionality. It wasn't until looking into the source code of combobox that I discovered it was filtering itself based on activeId. At first I thought that's ok I don't need to pull that up to my component as combobox is already doing it.

But if like above you are firing something off based on open and text (in my case above I want to fetch the first 5 mentions when they type @ without waiting for first letter to search on), that fires on all components accessing the store.use.

to get around it if you are using a component like above. you need to add something like this in to check it really is open

	const focusedEditorId = usePlateEventId('focus');
	const activeId = comboboxStore.use.activeId();

	const open = comboboxStore.use.isOpen();
        const text = comboboxStore.use.text();
	
        const isOpen = useMemo(() => {
		if (
			!open || 
			focusedEditorId !== editor.id ||
			activeId !== id
		) {
			return null;
		}
		return true;
	}, [open, editor.id, focusedEditorId, activeId, id]);

//then is you are using a useEffect to fire off an async search it can be controlled like this

useEffect(() => {
		if (text === null) {
			search.current = text;
			return;
		}
		if (isOpen && text !== search.current) {
			search.current = text;
			if (isFunction(MyAsyncFunctionToGetSomeData)) MyAsyncFunctionToGetSomeData(text);
		}
	}, [isOpen, text, search, onMentionSearchChange]);
	

[giuppidev]

I'm trying to use the MentionPlugin and make async call to my server in order to refetch items based on the search text. I tried to use the solution above but a lot of things seems changed from this answer.
Trying to interact with the store object in the component prop of MentionCombobox, i just get few metadata about the MentionCombobox without any consistent state.

Could please someone show me the right way to achieve my goal? Many thanks!

[fridaystreet]

Not sure how it's working now, we ended up moving to tiptap editor. Much easier cleaner code and plugin system and also doesn't have the under lying issues with android keyboards