feat: customize formatting toolbar and sidemenu

[YousefED]

Work in progress: I think FormattingToolbar can be really simple. If so, we could then expose ToolbarButton to consumers, and they can just use JSX to create a custom formattingtoolbar. I think this is a more extensible approach than for example asking for a custom array defining which buttons to show in what order

• simplify logic of FormattingToolbar
• Expose ToolbarButton / LinkToolbarButton
• Make it possible to pass a custom FormattingToolbar
• Docs & demo
• Does the API FormattingToolbarProps still make sense? or should we (partially) move this to BlockNoteEditor?

Merge update: this includes custom sidemenu #143

[matthewlipski]

Work in progress: I think FormattingToolbar can be really simple. If so, we could then expose ToolbarButton to consumers, and they can just use JSX to create a custom formattingtoolbar. I think this is a more extensible approach than for example asking for a custom array defining which buttons to show in what order

• simplify logic of FormattingToolbar
• Expose ToolbarButton / LinkToolbarButton
• Make it possible to pass a custom FormattingToolbar
• Docs & demo
• Does the API FormattingToolbarProps still make sense? or should we (partially) move this to BlockNoteEditor?

I'm not sure about letting consumers just pass JSX directly into the formatting toolbar, mainly because it seems to be the opposite approach to the slash menu. I agree it makes it more extensible, but idk if extensibility is something we want to focus on for the premade menu, moreso consistency. Might need to have a longer discussion about this since it's relevant for all menus.

Alternative:

type FormattingToolbarButton = {
  name: string;
  execute: (editor: BlockNoteEditor => void);
  icon: JSX.Element;
  shortcut?: string;
}

type FormattingToolbarDropdownItem = {
  name: string;
  execute: (editor: BlockNoteEditor => void);
  active: (editor: BlockNoteEditor => boolean);
  icon: JSX.Element;
}

type FormattingToolbarDropdown = {
  items: FormattingToolbarDropdownItem[];
}

type FormattingToolbarItem = FormattingToolbarButton | FormattingToolbarDropdown;

And pass a FormattingToolbarItem[] as an editor option.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
blocknote-website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 19, 2023 7:29pm

[YousefED]

see inline + double check useCallbacks