Link Toolbar

The Link Toolbar appears whenever you hover a link in the editor.

TODO Image

Changing the Link Toolbar

You can change or replace the Link Toolbar with your own React component. In the demo below, a button is added to the default Link Toolbar, which opens a browser alert.

We first define our custom AlertButton. The useComponentsContext hook gets all components used internally by BlockNote, so we want to use Components.LinkToolbar.Button for this.

We use the LinkToolbar component to create a custom Link Toolbar. By specifying its children, we can replace the default buttons in the toolbar with our own.

This custom Link Toolbar is passed to a LinkToolbarController, which controls its position and visibility (above or below the hovered link).

Setting linkToolbar={false} on BlockNoteView tells BlockNote not to show the default Link Toolbar.