Link
A toolbar button and a popover for adding, previewing, editing and removing links. URLs typed into the editor are linked automatically.
Installation
This pattern is built from files in @intentui/editor. Install the editor, then copy the code above into a component of your own.
npm
pnpm
yarn
bun
npx shadcn@latest add @intentui/editor
What's included
| Piece | Why it is here |
|---|---|
RichTextExtension | Lexical's rich text behavior. Every pattern needs it. |
InitialStateExtension | Applies the seeded content immediately, so the server and the client render the same. Leave it out if your editor starts empty. See Seeding initial content. |
FormatStateExtension | Tells the button whether the selection is in a link, so it shows as pressed. |
LinkExtension | Adds the link node and validates URLs. Remove it and links cannot be created. |
AutoLinkExtension | Turns typed or pasted URLs and email addresses into links. Optional. Remove it and only the button creates links. |
LinkToolbarPlugin | The toggle button. |
LinkEditorPlugin | The popover. The button asks it to open its input, so without it the button does nothing when no link is selected. Place it inside the relative content container. |
Toolbar | The container that holds toolbar plugins. See Toolbar. |
Behavior
- With text selected and no link, the button opens the popover with an empty URL field.
- Inside a link, the button removes the link and keeps the text.
- Moving the cursor into a link, or clicking it, opens the popover below the link. It shows the URL, an edit button and a remove button.
- Edit switches to a URL input. Press Enter or the check button to save, or the cross button to cancel.
- Ctrl or Cmd and click on a link opens it in a new tab.
- Saved URLs pass through
sanitizeUrl. Onlyhttp:,https:,mailto:,sms:andtel:are kept, other protocols becomeabout:blank. - Editing an automatically detected link turns it into a regular link.
- The popover does not appear in read-only mode.
There is no keyboard shortcut for inserting a link.
Keyboard
| Key | Action |
|---|---|
| Esc | Closes the popover. While editing, cancels the edit first. |
| Enter | Saves the URL while editing. |
The popover also closes when focus leaves it.
Styling
Links in the content are styled by the link entry in components/editor/theme.ts. The popover is the Intent UI PopoverContent with a max-w-md width, and the URL uses text-primary-subtle-foreground.
link: "cursor-pointer text-primary underline underline-offset-2 hover:text-primary/80",URL rules live in components/editor/extensions/link-extension.ts.
Related patterns
- Floating toolbar to put the link button next to the selection.
- Markdown shortcuts to create links by typing
[text](url). - Text format for inline formats.