Customizing the default formatting toolbar

[ClementEXWiki]

Is your feature request related to a problem? Please describe.
I'd like to be able to remove some buttons from the default formatting toolbar, and also extend it.

For instance, here:

I'd like to remove the link button (as it doesn't make sense in the editor I'm currently working on), and also add some new buttons at the end of the toolbar. Currently, adding new buttons make them float on the right side as they're not part of the same <div>

Describe the solution you'd like

• Adding a prop to toggle every single button in FormattingToolbar
• Adding a new prop in FormattingToolbar to add new buttons

Example of the object shape:

// New options
{
  enabledButtons?: { createLink?: boolean, defaultStyling?: boolean, alignment?: boolean, /* etc. */ }
  additionalButtons: Array<{
    icon: string,
    title: string,
    onClick: (editor: ...) => void,
  }>
}

Describe alternatives you've considered
I currently manually hide buttons in the toolbar using a very ugly hack, which is obviously not viable:

:deep(
  [data-floating-ui-focusable]
    > .bn-toolbar.bn-formatting-toolbar:first-child
    > button:last-child
) {
  display: none;
}

Additional context
N/A

[nperez0111]

Hi @ClementEXWiki, I'm just going to make sure that you saw this: https://www.blocknotejs.org/docs/ui-components/formatting-toolbar

[ClementEXWiki]

Hi @ClementEXWiki, I'm just going to make sure that you saw this: https://www.blocknotejs.org/docs/ui-components/formatting-toolbar

Yes I saw it, but unfortunately this doesn't allow disabling specific buttons nor adding some to existing block types :/

[nperez0111]

but unfortunately this doesn't allow disabling specific buttons

But, it allows you full control of what goes into a formatting toolbar? You'd implement something like the example:

const myToolbar = <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>
        )}
      />

You can leave out any of the buttons you don't want or need like the link button.

I'm not entirely certain what you mean by "nor adding some to existing block types", can you clarify?

[ClementEXWiki]

This is indeed a way to do this, but you need to provide manually every single button.
If one day the default BlockNote toolbar changes (new buttons are added for instance), they won't appear here.

What I'd like to do is to simply write:

<FormattingToolbarController formattingToolbar={() => (
    <FormattingToolbar enabledButtons={{ createLink: false }} appendButtons={[
        { icon: <...>, title: 'Do something', onClick: editor => ... }
    ]} />
)} />

[nperez0111]

This is a purposeful choice of design, if you don't want the default toolbar, then you need to create it for yourself.

To explain the complexity behind the API you proposed, where should we append the buttons? Just to the end of the toolbar? What if someone wants to have some in the front, and some in the middle? What happens when someone just wants to move the link button one place to the right?

If you need a new button, then it is on you to add the whole toolbar for yourself. It may feel more cumbersome to start, but, this gives you the control that you are wanting.

We are not interested in having an API like you propose as it will only grow in size as people want to have full control of every element, and this is exactly what we already support.

[YousefED]

@nperez0111 I think it can make sense that people want to customize the toolbar but don't want to fully eject. It seems a quite common scenario to only want to append a one or more buttons to the built-in toolbar.

Fortunately, it can actually also be accomplished without copying over all buttons, but by reusing getFormattingToolbarItems.

     const items =  getFormattingToolbarItems();
          items.push(

             <BlueButton key={"customButton"} />
          );
const myToolbar = <FormattingToolbarController
        formattingToolbar={() => (
          <FormattingToolbar>
{items}
          </FormattingToolbar>
        )}
      />

@ClementEXWiki does this solve your need for now?

[ClementEXWiki]

Unfortunately not, but I agree with @nperez0111's argument that it may be too complex to implement what I want.

I'll reimplement the toolbar from scratch, even if it's not ideal, I think it's a compromise to make.

Thanks for your help :)