Components
Link Toolbar Button

Link Toolbar Button

A toolbar button for inserting and managing links.

LinkSeparatorToolbarTooltip

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

Get the code ->

🔗 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

Get the code ->

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.
Link Floating ToolbarMedia Toolbar