@tiptap/extension-link

What is @tiptap/extension-link?

@tiptap/extension-link is an extension for the Tiptap rich-text editor that allows users to add, edit, and manage hyperlinks within their content. It provides a set of tools and configurations to handle links effectively, making it easier to integrate link functionalities into your Tiptap editor setup.

What are @tiptap/extension-link's main functionalities?

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>',
});

Other packages similar to @tiptap/extension-link

prosemirror-schema-basic

prosemirror-schema-basic provides a basic schema for ProseMirror, including support for links. It is more low-level compared to @tiptap/extension-link and requires more manual setup and configuration.

slate

Slate is a completely customizable framework for building rich text editors. It includes support for links, but requires more configuration and setup compared to @tiptap/extension-link.

draft-js

Draft.js is a framework for building rich text editors in React. It includes support for links, but the API and configuration are different from Tiptap, offering a different set of features and flexibility.

README

@tiptap/extension-link

Introduction

tiptap is a headless wrapper around ProseMirror – a toolkit for building rich-text WYSIWYG editors, which is already in use at many well-known companies such as New York Times, The Guardian or Atlassian.

Offical Documentation

Documentation can be found on the tiptap website.

License

tiptap is open-sourced software licensed under the MIT license.