When using <FormattingToolbar>, double-clicking at end of a line causes fatal error

[jonathanmosney]

Describe the bug
When using the <FormattingToolbar>, if the user double-clicks at end of a line, BlockNote crashes.

To Reproduce

1. Use the FormattingToolbar, like this:

<BlockNoteView
    editor={editor}
    formattingToolbar={false}>
  <FormattingToolbar />
</BlockNoteView>

2. Enter a few characters.
3. Double-click at the end of the line.
4. Note errors in the console, Blocknote unreachable. "Uncaught TypeError: Cannot read properties of undefined (reading 'type')"

Sandbox: https://stackblitz.com/edit/github-5bekpt?file=App.tsx

The issue seems to start in this function in TextAlignButton.tsx, where block === undefined, which causes checkBlockHasDefaultProp to error.

  const textAlignment = useMemo(() => {
    const block = selectedBlocks[0];

    if (checkBlockHasDefaultProp("textAlignment", block, editor)) {
      return block.props.textAlignment;
    }

    return;
  }, [editor, selectedBlocks]);

Misc

• Node version: n/a
• Package manager: npm
• Browser: Chrome
• I'm a sponsor and would appreciate if you could look into this sooner than later 💖

[brandon-vaughan]

Also ran into this

Looks like you now need to wrap the FormattingToolbar in the controller https://www.blocknotejs.org/examples/ui-components/formatting-toolbar-buttons

<BlockNoteView
    editor={editor}
    formattingToolbar={false}>
  <FormattingToolbarController
    formattingToolbar={() => (<FormattingToolbar />)}
  />
</BlockNoteView>

[jonathanmosney]

Hmm, thanks but that's not solving my problem. I'm following the demo at https://www.blocknotejs.org/examples/ui-components/static-formatting-toolbar, and if you test that demo and double-click at the end of a line of text in the editor, you should see the page crash. At least that's what happens to me (latest Chrome, latest MacOS). In the demo code you can see this comment:

    // Disables the default formatting toolbar and re-adds it without the
    // `FormattingToolbarController` component. You may have seen
    // `FormattingToolbarController` used in other examples, but we omit it here
    // as we want to control the position and visibility ourselves. BlockNote
    // also uses the `FormattingToolbarController` when displaying the
    // Formatting Toolbar by default.

I think the fix needs to be made in the library, like I mentioned in my original post, in TextAlignButton.tsx.

Would @YousefED be able to weigh in? Thank you!

[jonathanmosney]

This is now fixed in 0.22.0, from my testing. Thank you!