Mentions

Mentions plugin can be used to add mentions dropdown to the editor. The dropdown will be opened when the user types @ followed by a letter in the editor. The dropdown will show the list of users that can be mentioned based on a custom filter logic.

Demo

Result

Loading...

Live Editor

const Demo = () => { const users = [ { id: "1", name: "John Doe", username: "johndoe", }, { id: "2", name: "Jane Doe", username: "janedoe", }, { id: "3", name: "John Smith", username: "johnsmith", }, { id: "4", name: "Jane Smith", username: "janesmith", }, ]; return ( <Editor nodes={[MentionNode]}> <EditorToolbar /> <RichEditor editorContainerProps={{ css: { ".editor-container .editor": { ".twigs-mention": { backgroundColor: "$accent100", display: "inline-block", borderRadius: "$md", padding: "0 $2", }, }, }, }} /> <MentionsPlugin getResults={(searchString) => { return users .filter((user) => user.name .toLowerCase() .includes((searchString || "").toLowerCase()) ) .map((user) => ({ value: user.username, label: user.name, })); }} /> </Editor> ); }; render(<Demo />);

const Demo = () => {
  const users = [
    {
      id: "1",
      name: "John Doe",
      username: "johndoe",
    },
    {
      id: "2",
      name: "Jane Doe",
      username: "janedoe",
    },
    {
      id: "3",
      name: "John Smith",
      username: "johnsmith",
    },
    {
      id: "4",
      name: "Jane Smith",
      username: "janesmith",
    },
  ];

  return (
    <Editor nodes={[MentionNode]}>
      <EditorToolbar />
      <RichEditor
        editorContainerProps={{
          css: {
            ".editor-container .editor": {
              ".twigs-mention": {
                backgroundColor: "$accent100",
                display: "inline-block",
                borderRadius: "$md",
                padding: "0 $2",
              },
            },
          },
        }}
      />
      <MentionsPlugin
        getResults={(searchString) => {
          return users
            .filter((user) =>
              user.name
                .toLowerCase()
                .includes((searchString || "").toLowerCase())
            )
            .map((user) => ({
              value: user.username,
              label: user.name,
            }));
        }}
      />
    </Editor>
  );
};

render(<Demo />);

Props

getResults

Type: (searchString: string) => Promise<{label: string; value: string; [x: string]: any }[]> | {label: string; value: string; [x: string]: any }[]

This function is called when the user types @ followed by a letter in the editor. The function should return a list of users that can be mentioned based on the search string. The function should return an array of objects with label and value keys. The label key is used to display the user name in the dropdown and the value key is used to replace the mention in the editor.

triggerFunction

Type: (searchString: string) => MenuTextMatch | null

MenuTextMatch has the following type:

interface MenuTextMatch {
  leadOffset: number;
  matchingString: string;
  replaceableString: string;
}

This function can be used to override the default trigger function.

Refer base dropdown for more details about the props of the dropdown.