Link Extension

@editorcn/editor ships a custom Link extension that extends @tiptap/extension-link.

Features

• All standard link functionality
• Mod-k keyboard shortcut to open the link editor
• Proper link editing via popover UI

Usage

Import the Link extension and add it to your Tiptap extensions:

Copyimport { Link } from "@editorcn/editor";
 
const editor = useEditor({
  extensions: [
    StarterKit,
    Link, // replaces @tiptap/extension-link
  ],
});

Link Control

Use RichTextEditor.Link in your toolbar to add the link popover button:

Copy<RichTextEditor.ControlsGroup>
  <RichTextEditor.Link />
  <RichTextEditor.Unlink />
</RichTextEditor.ControlsGroup>

The link button opens a popover where users can enter or edit a URL. The link is applied to the selected text.