Link

Add or edit a hyperlink on text.

Setup

Start with the packages in Getting Started. This complete example registers the feature and renders its UI. In an existing editor, merge the imports and extension entries into your setup, and place the controls inside your existing RichTextProvider.

'use client';

import { EditorContent, useEditor } from '@tiptap/react';
import { Document } from '@tiptap/extension-document';
import { Paragraph } from '@tiptap/extension-paragraph';
import { Text } from '@tiptap/extension-text';
import { RichTextProvider } from 'reactjs-tiptap-editor';
import { Link, RichTextLink } from 'reactjs-tiptap-editor/link';
import { RichTextBubbleLink } from 'reactjs-tiptap-editor/bubble/link';
import 'reactjs-tiptap-editor/style.css';

const extensions = [Document, Paragraph, Text, Link];

export default function LinkExample() {
  const editor = useEditor({
    extensions,
    content: '<p>Try this feature here.</p>',
    immediatelyRender: false,
  });

  if (!editor) return null;

  return (
    <RichTextProvider editor={editor}>
      <RichTextLink />
      <RichTextBubbleLink />
      <EditorContent editor={editor} />
    </RichTextProvider>
  );
}

How to use

Select the text to link, open the toolbar dialog, and enter a URL. Mount RichTextBubbleLink to edit a link after selecting it. Use editor.chain().focus().setLink({ href: "https://example.com" }).run() to apply a link to a selection, and unsetLink() to remove it.

Source

Source • Docs

Contributors

Hung Hoang

hunghg255bot

markok

Found

Loan Nguyen

Condor Hero

Changelog

v1.0.0 on 12/7/2025

c67ed - fix: conflict

51948 - feat: refactor code, dynamic bubble, toolbar, fix error

v0.4.0 on 12/4/2025

6a3a7 - feat: migrate tiptap v2 to v3

v0.3.27 on 10/9/2025

d0bf5 - feat(link): make user experience of link editing better

v0.3.13 on 7/25/2025

b6f7e - fix(link): resolve issues with HTMLAttributes and bubble popup update - Fixed the problem that the HTMLAttributes configuration of the link component does not take effect. - Fixed the problem that when changing the link bubble pop-up window display, switching to other links, the bubble pop-up window data is not updated.

v0.3.11 on 6/27/2025

0f1cc - fix: fix bug not fill the text link when edit link