Mentions Menu

In this example, we create a custom Mention inline content type which is used to tag people. In addition, we create a new Suggestion Menu for mentions which opens with the "@" character.

Try it out: Press the "@" key to open the mentions menu and insert a mention!

Relevant Docs:

GitHub

StackBlitz

import {
  BlockNoteSchema,
  defaultInlineContentSpecs,
} from "@blocknote/core";
import { filterSuggestionItems } from "@blocknote/core/extensions";
import "@blocknote/core/fonts/inter.css";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import {
  DefaultReactSuggestionItem,
  SuggestionMenuController,
  useCreateBlockNote,
} from "@blocknote/react";

import { Mention } from "./Mention";

// Our schema with inline content specs, which contain the configs and
// implementations for inline content  that we want our editor to use.
const schema = BlockNoteSchema.create({
  inlineContentSpecs: {
    // Adds all default inline content.
    ...defaultInlineContentSpecs,
    // Adds the mention tag.
    mention: Mention,
  },
});

// Function which gets all users for the mentions menu.
const getMentionMenuItems = (
  editor: typeof schema.BlockNoteEditor,
): DefaultReactSuggestionItem[] => {
  const users = ["Steve", "Bob", "Joe", "Mike"];

  return users.map((user) => ({
    title: user,
    onItemClick: () => {
      editor.insertInlineContent([
        {
          type: "mention",
          props: {
            user,
          },
        },
        " ", // add a space after the mention
      ]);
    },
  }));
};

export function App() {
  const editor = useCreateBlockNote({
    schema,
    initialContent: [
      {
        type: "paragraph",
        content: "Welcome to this demo!",
      },
      {
        type: "paragraph",
        content: [
          {
            type: "mention",
            props: {
              user: "Steve",
            },
          },
          {
            type: "text",
            text: " <- This is an example mention",
            styles: {},
          },
        ],
      },
      {
        type: "paragraph",
        content: "Press the '@' key to open the mentions menu and add another",
      },
      {
        type: "paragraph",
      },
    ],
  });

  return (
    <BlockNoteView editor={editor}>
      {/* Adds a mentions menu which opens with the "@" key */}
      <SuggestionMenuController
        triggerCharacter={"@"}
        getItems={async (query) =>
          // Gets the mentions menu items
          filterSuggestionItems(getMentionMenuItems(editor), query)
        }
      />
    </BlockNoteView>
  );
}

export default App;

import {  BlockNoteSchema,  defaultInlineContentSpecs,} from "@blocknote/core";import { filterSuggestionItems } from "@blocknote/core/extensions";import "@blocknote/core/fonts/inter.css";import { BlockNoteView } from "@blocknote/mantine";import "@blocknote/mantine/style.css";import {  DefaultReactSuggestionItem,  SuggestionMenuController,  useCreateBlockNote,} from "@blocknote/react";import { Mention } from "./Mention";// Our schema with inline content specs, which contain the configs and// implementations for inline content  that we want our editor to use.const schema = BlockNoteSchema.create({  inlineContentSpecs: {    // Adds all default inline content.    ...defaultInlineContentSpecs,    // Adds the mention tag.    mention: Mention,  },});// Function which gets all users for the mentions menu.const getMentionMenuItems = (  editor: typeof schema.BlockNoteEditor,): DefaultReactSuggestionItem[] => {  const users = ["Steve", "Bob", "Joe", "Mike"];  return users.map((user) => ({    title: user,    onItemClick: () => {      editor.insertInlineContent([        {          type: "mention",          props: {            user,          },        },        " ", // add a space after the mention      ]);    },  }));};export function App() {  const editor = useCreateBlockNote({    schema,    initialContent: [      {        type: "paragraph",        content: "Welcome to this demo!",      },      {        type: "paragraph",        content: [          {            type: "mention",            props: {              user: "Steve",            },          },          {            type: "text",            text: " <- This is an example mention",            styles: {},          },        ],      },      {        type: "paragraph",        content: "Press the '@' key to open the mentions menu and add another",      },      {        type: "paragraph",      },    ],  });  return (    <BlockNoteView editor={editor}>      {/* Adds a mentions menu which opens with the "@" key */}      <SuggestionMenuController        triggerCharacter={"@"}        getItems={async (query) =>          // Gets the mentions menu items          filterSuggestionItems(getMentionMenuItems(editor), query)        }      />    </BlockNoteView>  );}export default App;

import { createReactInlineContentSpec } from "@blocknote/react";

// The Mention inline content.
export const Mention = createReactInlineContentSpec(
  {
    type: "mention",
    propSchema: {
      user: {
        default: "Unknown",
      },
    },
    content: "none",
  },
  {
    render: (props) => (
      <span style={{ backgroundColor: "#8400ff33" }}>
        @{props.inlineContent.props.user}
      </span>
    ),
  },
);

import { createReactInlineContentSpec } from "@blocknote/react";// The Mention inline content.export const Mention = createReactInlineContentSpec(  {    type: "mention",    propSchema: {      user: {        default: "Unknown",      },    },    content: "none",  },  {    render: (props) => (      <span style={{ backgroundColor: "#8400ff33" }}>        @{props.inlineContent.props.user}      </span>    ),  },);

Mentions Menu

Learn

Collaborate

Community

Legal

Theme