Adding Formatting Toolbar Buttons

In this example, we add a blue text/background color and code style button to the Formatting Toolbar. We also make sure it only shows up when some text is selected.

Try it out: Select some text to open the Formatting Toolbar, and click one of the new buttons!

Relevant Docs:

GitHub

StackBlitz

import "@blocknote/core/fonts/inter.css";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import {
  BasicTextStyleButton,
  BlockTypeSelect,
  ColorStyleButton,
  CreateLinkButton,
  FileCaptionButton,
  FileReplaceButton,
  FormattingToolbar,
  FormattingToolbarController,
  NestBlockButton,
  TextAlignButton,
  UnnestBlockButton,
  useCreateBlockNote,
} from "@blocknote/react";

import { BlueButton } from "./BlueButton";

const CustomFormattingToolbar = () => (
  <FormattingToolbar>
    <BlockTypeSelect key={"blockTypeSelect"} />

    {/* Extra button to toggle blue text & background */}
    <BlueButton key={"customButton"} />

    <FileCaptionButton key={"fileCaptionButton"} />
    <FileReplaceButton key={"replaceFileButton"} />

    <BasicTextStyleButton basicTextStyle={"bold"} key={"boldStyleButton"} />
    <BasicTextStyleButton basicTextStyle={"italic"} key={"italicStyleButton"} />
    <BasicTextStyleButton
      basicTextStyle={"underline"}
      key={"underlineStyleButton"}
    />
    <BasicTextStyleButton basicTextStyle={"strike"} key={"strikeStyleButton"} />
    {/* Extra button to toggle code styles */}
    <BasicTextStyleButton key={"codeStyleButton"} basicTextStyle={"code"} />

    <TextAlignButton textAlignment={"left"} key={"textAlignLeftButton"} />
    <TextAlignButton textAlignment={"center"} key={"textAlignCenterButton"} />
    <TextAlignButton textAlignment={"right"} key={"textAlignRightButton"} />

    <ColorStyleButton key={"colorStyleButton"} />

    <NestBlockButton key={"nestBlockButton"} />
    <UnnestBlockButton key={"unnestBlockButton"} />

    <CreateLinkButton key={"createLinkButton"} />
  </FormattingToolbar>
);

export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote({
    initialContent: [
      {
        type: "paragraph",
        content: "Welcome to this demo!",
      },
      {
        type: "paragraph",
        content: [
          {
            type: "text",
            text: "You can now toggle ",
            styles: {},
          },
          {
            type: "text",
            text: "blue",
            styles: { textColor: "blue", backgroundColor: "blue" },
          },
          {
            type: "text",
            text: " and ",
            styles: {},
          },
          {
            type: "text",
            text: "code",
            styles: { code: true },
          },
          {
            type: "text",
            text: " styles with new buttons in the Formatting Toolbar",
            styles: {},
          },
        ],
      },
      {
        type: "paragraph",
        content: "Select some text to try them out",
      },
      {
        type: "image",
        props: {
          url: "https://placehold.co/332x322.jpg",
        },
      },
      {
        type: "paragraph",
        content:
          "Notice that the buttons don't appear when the image block above is selected, as it has no inline content.",
      },
      {
        type: "paragraph",
      },
    ],
  });

  // Renders the editor instance.
  return (
    <BlockNoteView editor={editor} formattingToolbar={false}>
      <FormattingToolbarController formattingToolbar={CustomFormattingToolbar} />
    </BlockNoteView>
  );
}

import "@blocknote/core/fonts/inter.css";import { BlockNoteView } from "@blocknote/mantine";import "@blocknote/mantine/style.css";import {  BasicTextStyleButton,  BlockTypeSelect,  ColorStyleButton,  CreateLinkButton,  FileCaptionButton,  FileReplaceButton,  FormattingToolbar,  FormattingToolbarController,  NestBlockButton,  TextAlignButton,  UnnestBlockButton,  useCreateBlockNote,} from "@blocknote/react";import { BlueButton } from "./BlueButton";const CustomFormattingToolbar = () => (  <FormattingToolbar>    <BlockTypeSelect key={"blockTypeSelect"} />    {/* Extra button to toggle blue text & background */}    <BlueButton key={"customButton"} />    <FileCaptionButton key={"fileCaptionButton"} />    <FileReplaceButton key={"replaceFileButton"} />    <BasicTextStyleButton basicTextStyle={"bold"} key={"boldStyleButton"} />    <BasicTextStyleButton basicTextStyle={"italic"} key={"italicStyleButton"} />    <BasicTextStyleButton      basicTextStyle={"underline"}      key={"underlineStyleButton"}    />    <BasicTextStyleButton basicTextStyle={"strike"} key={"strikeStyleButton"} />    {/* Extra button to toggle code styles */}    <BasicTextStyleButton key={"codeStyleButton"} basicTextStyle={"code"} />    <TextAlignButton textAlignment={"left"} key={"textAlignLeftButton"} />    <TextAlignButton textAlignment={"center"} key={"textAlignCenterButton"} />    <TextAlignButton textAlignment={"right"} key={"textAlignRightButton"} />    <ColorStyleButton key={"colorStyleButton"} />    <NestBlockButton key={"nestBlockButton"} />    <UnnestBlockButton key={"unnestBlockButton"} />    <CreateLinkButton key={"createLinkButton"} />  </FormattingToolbar>);export default function App() {  // Creates a new editor instance.  const editor = useCreateBlockNote({    initialContent: [      {        type: "paragraph",        content: "Welcome to this demo!",      },      {        type: "paragraph",        content: [          {            type: "text",            text: "You can now toggle ",            styles: {},          },          {            type: "text",            text: "blue",            styles: { textColor: "blue", backgroundColor: "blue" },          },          {            type: "text",            text: " and ",            styles: {},          },          {            type: "text",            text: "code",            styles: { code: true },          },          {            type: "text",            text: " styles with new buttons in the Formatting Toolbar",            styles: {},          },        ],      },      {        type: "paragraph",        content: "Select some text to try them out",      },      {        type: "image",        props: {          url: "https://placehold.co/332x322.jpg",        },      },      {        type: "paragraph",        content:          "Notice that the buttons don't appear when the image block above is selected, as it has no inline content.",      },      {        type: "paragraph",      },    ],  });  // Renders the editor instance.  return (    <BlockNoteView editor={editor} formattingToolbar={false}>      <FormattingToolbarController formattingToolbar={CustomFormattingToolbar} />    </BlockNoteView>  );}

import "@blocknote/mantine/style.css";
import {
  useBlockNoteEditor,
  useComponentsContext,
  useEditorState,
  useSelectedBlocks,
} from "@blocknote/react";

// Custom Formatting Toolbar Button to toggle blue text & background color.
export function BlueButton() {
  const editor = useBlockNoteEditor();

  const Components = useComponentsContext()!;

  // Tracks whether the text & background are both blue.
  const isSelected = useEditorState({
    editor,
    selector: ({ editor }) =>
      editor.getActiveStyles().textColor === "blue" &&
      editor.getActiveStyles().backgroundColor === "blue",
  });

  // Doesn't render unless a at least one block with inline content is
  // selected. You can use a similar pattern of returning `null` to
  // conditionally render buttons based on the editor state.
  const blocks = useSelectedBlocks();
  if (blocks.filter((block) => block.content !== undefined).length === 0) {
    return null;
  }

  return (
    <Components.FormattingToolbar.Button
      mainTooltip={"Blue Text & Background"}
      onClick={() => {
        editor.toggleStyles({
          textColor: "blue",
          backgroundColor: "blue",
        });
      }}
      isSelected={isSelected}
    >
      Blue
    </Components.FormattingToolbar.Button>
  );
}

import "@blocknote/mantine/style.css";import {  useBlockNoteEditor,  useComponentsContext,  useEditorState,  useSelectedBlocks,} from "@blocknote/react";// Custom Formatting Toolbar Button to toggle blue text & background color.export function BlueButton() {  const editor = useBlockNoteEditor();  const Components = useComponentsContext()!;  // Tracks whether the text & background are both blue.  const isSelected = useEditorState({    editor,    selector: ({ editor }) =>      editor.getActiveStyles().textColor === "blue" &&      editor.getActiveStyles().backgroundColor === "blue",  });  // Doesn't render unless a at least one block with inline content is  // selected. You can use a similar pattern of returning `null` to  // conditionally render buttons based on the editor state.  const blocks = useSelectedBlocks();  if (blocks.filter((block) => block.content !== undefined).length === 0) {    return null;  }  return (    <Components.FormattingToolbar.Button      mainTooltip={"Blue Text & Background"}      onClick={() => {        editor.toggleStyles({          textColor: "blue",          backgroundColor: "blue",        });      }}      isSelected={isSelected}    >      Blue    </Components.FormattingToolbar.Button>  );}

Adding Formatting Toolbar Buttons

Learn

Collaborate

Community

Legal & Theme