usage of mention plugin

[eric-therond]

Hello
I struggle to see how to use the last version of mention plugin.

In the previous versions of plate, it was really easy to pass the list of mentionable users as parameter of MentionCombobox, but now I don't know how to begin to have the same behavior with MentionInputElement:

<MentionCombobox items={users} />

It was also easy to customize how the label is rendered with renderLabel as prop of createMentionPlugin, same thing for the createMentionNode as you can see in the code below. I have read the documentation which indicate to use editor.api.insert.mention but it's really difficult to understand how to use it.

    createMentionPlugin({
      props: (editor) => {
        const renderLabel = (element: any) => {
          return (
            <Link to={`/get-user/${element.user_id}/`}>{element.value}</Link>
          );
        };

        return {
          renderLabel: renderLabel
        };
      },
      options: {
        createMentionNode: (item) => {
          return {
            id: item.key,
            user_id: item.key,
            value: item.text,
          }
        },
      },
    }),

I will appreciate any help and examples on this subject.

Thank you

[abhi-bc]

You can extend the plugin where you define it. See this doc: https://platejs.org/docs/plugin-methods

Code snippet:

            MentionPlugin.configure({
                options: {
                    triggerPreviousCharPattern: /^$|^[\s"']$/,
                    // Old way of creating mention node
                    // createMentionNode: (item: TComboboxItemWithData<TUserWithChannel>) => ({
                    //     value: '@' + item.text,
                    //     userId: item.key,
                    //     atChannel: item.data.atChannel,
                    //     children: [{ text: '@' + item.text }],
                    // }),
                },
            }).extendEditorTransforms<MentionConfig['transforms']>(({ editor, type }) => ({
                insert: {
                    mention: ({ value, search }) => {
                        // NEW way of creating mention node
                        insertNodes<TMentionElement>(editor, {
                            children: [{ text: '' }],
                            type,
                            value,
                        })
                    },
                },
            })),

[bahrijar]

Can the approach above be applied @eric-therond ? I have a similar case here #3702

[eric-therond]

thank you @abhi-bc it's working well now
@bahrijar I will look at your issue if I can help