Mention plugin: Insert text at position

[dtslvr]

I'd like to adapt the Mention plugin, that instead of a not editable node, it should insert normal text at the current position.

This is inserting a text for mouse clicks:

<MentionSelect
    {...getMentionSelectProps()}
    onClickMention={(editor, option) => {
        editor.deleteBackward('character');
        editor.insertText(`${option.value} `);
    }}
    renderLabel={renderMentionLabel}
/>

How could I achieve that my value is also inserted via Enter or Tab?

[dtslvr]

I've ended up creating a copy of useMentionPlugin where I override the onAddMention functionality like this:

const onAddMention = useCallback(
  (editor: SPEditor, data: MentionNodeData) => {
    if (targetRange !== null) {
      // Changed the original onAddMention behavior //////
      Transforms.select(editor, targetRange);
      editor.insertText(
        `${data.value}${insertSpaceAfterMention ? " " : ""}`
      );
      ////////////////////////////////////////////////////
    }
  },
  [targetRange, insertSpaceAfterMention]
);

It would be cool to expose onAddMention, similarly to onClickMention.

[zbeyens]

You're right. It's better to start from the combobox if the current state of the mention plugin is not enough.

[davevilela]

Hey @zbeyens is combobox already on NPM?

[davevilela]

do you have any idea of how i could leverage combobox and make my own implementation of slash-command ?

[dylans]

you should be able to use MentionCombobox, select the trigger of /, and then you'd need to populate the data. It's in Plate 5.0 and later though we landed a bunch of fixes so I'd use 5.3.5 or higher. Or use plate-ui-combobox directly.

[davevilela]

you should be able to use MentionCombobox, select the trigger of /, and then you'd need to populate the data. It's in Plate 5.0 and later though we landed a bunch of fixes so I'd use 5.3.5 or higher. Or use plate-ui-combobox directly.

What would be the difference between the MentionCombobox and plate-ui-combobox? Also, would It be possible to fetch async data in the current implementation of MentionCombobox ?