Components
Link Toolbar Button

Link Toolbar Button

Adds a toolbar button for inserting and editing links in the editor.

Installation

Install the following dependencies:

npm install @udecode/plate-link @radix-ui/react-toolbar @radix-ui/react-tooltip @radix-ui/react-separator

Copy and paste the following code into your project.

Get the code ->

Update the import paths to match your project setup.

Examples

Link

🔗 Link

Add hyperlinks to your text to reference external sources or provide additional information.
How to use links:
  • Press "⌘ + K" to trigger the floating link menu.
  • Enter the URL (must be a valid http:// or https:// address) and the text to display.
  • Use "Tab" to switch between URL and display text fields.
  • Press Enter to insert the link.
  • Select text before pressing "⌘ + K" to pre-fill the display text.
  • Use the floating toolbar's link button when text is selected.
  • Click on an existing link to edit, visit, or remove it.

Floating Toolbar

Floating Toolbar

The floating toolbar provides quick access to formatting options and actions for selected text.
How to use the floating toolbar:
  • Select any text to invoke the floating toolbar.
With the floating toolbar, you can:
  • Ask AI for assistance
  • Add a comment to the selected text
  • Transform the selected into an another block
  • Apply text formatting: bold, italic, underline, strikethrough, code
  • Mark text as an equation
  • Change text color or background color
  • Open the block menu for additional options
Try selecting some text below to see the floating toolbar in action:
Bold text, italic text, underlined text, and combined formatting.