Hyperlink Toolbar

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

TODO Image

Changing the Hyperlink Toolbar

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

import {
  BlockNoteView,
  HyperlinkToolbar,
  HyperlinkToolbarController,
  useCreateBlockNote,
} from "@blocknote/react";
import "@blocknote/react/style.css";
import { CustomButton } from "./CustomButton";
 
export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote({
    initialContent: [
      {
        type: "paragraph",
        content: "Welcome to this demo!",
      },
      {
        type: "paragraph",
        content: "Hover the link below to see the modified Hyperlink Toolbar",
      },
      {
        type: "paragraph",
        content: [
          // TODO: Fix link styles (think it's website only)
          {
            type: "link",
            href: "https://www.blocknotejs.org/",
            content: [
              {
                type: "text",
                text: "Home Page",
                styles: {},
              },
            ],
          },
        ],
      },
      {
        type: "paragraph",
      },
    ],
  });
 
  // Renders the editor instance.
  return (
    <BlockNoteView editor={editor} hyperlinkToolbar={false}>
      <HyperlinkToolbarController
        hyperlinkToolbar={(props) => (
          // TODO: We don't export the default buttons atm. Also, the edit button
          //  replaces the entire toolbar component when editing, which seems like a
          //  massive pain when you want to customize the hyperlink. Lots of
          //  refactoring probably needed here.
          <HyperlinkToolbar {...props}>
            <CustomButton {...props} />
          </HyperlinkToolbar>
        )}
      />
    </BlockNoteView>
  );
}

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

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

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

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

Formatting Toolbar Custom Schemas