Link Toolbar

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 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.

Tip: The children you pass to the LinkToolbar component should be default buttons (e.g. TODO) or custom selects/buttons (ToolbarSelect & ToolbarButton). To see all the components you can use, head to the Link Toolbar's source code.