Adding Formatting Toolbar Buttons

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";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://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.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={() => (          <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>        )}      />    </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>  );}