Strange issue with the NestBlock button in FormattingToolbar

[man-shar]

The bug

I have a few custom blocks that I don't want the formatting toolbar to show up on. So, in order to avoid issue #360, I've set up a CustomFormattingToolbar.js component following the docs on the website.

I check whether I want the toolbar to show up on not using this condition: My custom blocks return the editor.getSelection() as undefined + if the current block is an active block. I use a local state variable called showToolbar that I update when selection changes, and upon console logging, it does calculate the correct value.

But, the problem is, the nest/unnest buttons are always disabled. I added a few of debugger statments and it seems like the canNestBlock variable here is somehow always undefined when something is selected in my version.

Here's code to reproduce my issue. You can run this in any of the playgrounds on the blocknote website.

import { useState } from "react";
import { BlockNoteEditor } from "@blocknote/core";
import {
  BlockNoteView,
  FormattingToolbarPositioner,
  HyperlinkToolbarPositioner,
  SideMenuPositioner,
  SlashMenuPositioner,
  ToggledStyleButton,
  Toolbar,
  ToolbarButton,
  useBlockNote,
  useEditorContentChange,
  useEditorSelectionChange,
  BlockTypeDropdown,
  TextAlignButton,
  ColorStyleButton,
  NestBlockButton,
  UnnestBlockButton,
  CreateLinkButton
} from "@blocknote/react";

const customBlocks = ["custom-1", "custom-2"];

import "@blocknote/core/style.css";


export const CustomFormattingToolbar = ({ editor }) => {
  const [showToolBar, setShowToolBar] = useState(true);

  useEditorSelectionChange(editor, () => {
    setShowToolBar(
      customBlocks.indexOf(editor.getTextCursorPosition()?.block?.type) === -1 &&
        editor.getSelection() !== undefined
    );
  });
  console.log(showToolBar);

  return showToolBar ? (
    <Toolbar>
      <BlockTypeDropdown editor={editor} />
      <ToggledStyleButton editor={editor} toggledStyle={"bold"} />
      <ToggledStyleButton editor={editor} toggledStyle={"italic"} />
      <ToggledStyleButton editor={editor} toggledStyle={"underline"} />
      <ToggledStyleButton editor={editor} toggledStyle={"strike"} />

      <TextAlignButton editor={editor} textAlignment={"left"} />
      <TextAlignButton editor={editor} textAlignment={"center"} />
      <TextAlignButton editor={editor} textAlignment={"right"} />

      <ColorStyleButton editor={editor} />

      <NestBlockButton editor={editor} />
      <UnnestBlockButton editor={editor} />

      <CreateLinkButton editor={editor} />
    </Toolbar>
  ) : null;
};


export default function App() {
  // Creates a new editor instance.
  const editor: BlockNoteEditor = useBlockNote();

  // Renders the editor instance.
  return (
    <BlockNoteView editor={editor} theme={"light"}>
      <FormattingToolbarPositioner
        editor={editor}
        formattingToolbar={CustomFormattingToolbar}
      />
      <HyperlinkToolbarPositioner editor={editor} />
      <SlashMenuPositioner editor={editor} />
      <SideMenuPositioner editor={editor} />
    </BlockNoteView>
  );
}

Another weird thing is that if I just replace showToolBar with true in the return statement, it works fine ha. Like so:

...
return true ? (
    <Toolbar>
      <BlockTypeDropdown editor={editor} />
      <ToggledStyleButton editor={editor} toggledStyle={"bold"} />
      <ToggledStyleButton editor={editor} toggledStyle={"italic"} />
      <ToggledStyleButton...
...

Here's some screenshots:

Any help/pointers on this are appreciated! Love this project :)

[matthewlipski]

Seems to be fixed now! Here's the updated code for 0.13.4:

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

const customBlocks = ["custom-1", "custom-2"];

export const CustomFormattingToolbar = () => {
  const editor = useBlockNoteEditor();

  const [showToolBar, setShowToolBar] = useState(true);

  useEditorSelectionChange(() => {
    setShowToolBar(
      customBlocks.indexOf(editor.getTextCursorPosition()?.block?.type) ===
        -1 && editor.getSelection() !== undefined
    );
  }, editor);
  console.log(showToolBar);

  return showToolBar ? (
    <FormattingToolbar>
      <BlockTypeSelect />
      <BasicTextStyleButton basicTextStyle={"bold"} />
      <BasicTextStyleButton basicTextStyle={"italic"} />
      <BasicTextStyleButton basicTextStyle={"underline"} />
      <BasicTextStyleButton basicTextStyle={"strike"} />

      <TextAlignButton textAlignment={"left"} />
      <TextAlignButton textAlignment={"center"} />
      <TextAlignButton textAlignment={"right"} />

      <ColorStyleButton />

      <NestBlockButton />
      <UnnestBlockButton />

      <CreateLinkButton />
    </FormattingToolbar>
  ) : null;
};

export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote();

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