@tiptap/extension-link

Add a Link

This feature allows you to add a link to your content. The code sample demonstrates how to configure the Link extension and initialize the editor with a link in the content.

import { Link } from '@tiptap/extension-link';
import { Editor } from '@tiptap/core';

const editor = new Editor({
  extensions: [
    Link.configure({
      openOnClick: false,
    }),
  ],
  content: '<p>Click <a href="https://example.com">here</a> to visit example.com</p>',
});

Edit a Link

This feature allows you to edit an existing link. The code sample shows how to change the href attribute of a link using Tiptap's chainable commands.

editor.chain().focus().extendMarkRange('link').setLink({ href: 'https://new-url.com' }).run();

Remove a Link

This feature allows you to remove a link from the content. The code sample demonstrates how to use the unsetLink command to remove a link.

editor.chain().focus().unsetLink().run();

Open Link on Click

This feature allows links to be opened when clicked. The code sample shows how to configure the Link extension to open links on click.

import { Link } from '@tiptap/extension-link';
import { Editor } from '@tiptap/core';

const editor = new Editor({
  extensions: [
    Link.configure({
      openOnClick: true,
    }),
  ],
  content: '<p>Click <a href="https://example.com">here</a> to visit example.com</p>',
});