> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/ueberdosis/tiptap/llms.txt
> Use this file to discover all available pages before exploring further.

# Link

> Create clickable links in your editor.

The Link extension allows you to create clickable links. Links are rendered as `<a>` HTML elements with support for various attributes including href, target, rel, class, and title.

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @tiptap/extension-link
  ```

  ```bash yarn theme={null}
  yarn add @tiptap/extension-link
  ```

  ```bash pnpm theme={null}
  pnpm add @tiptap/extension-link
  ```
</CodeGroup>

## Usage

```typescript theme={null}
import { Editor } from '@tiptap/core'
import Link from '@tiptap/extension-link'

const editor = new Editor({
  extensions: [
    Link.configure({
      openOnClick: true,
      linkOnPaste: true,
    }),
  ],
})
```

## Configuration Options

<ParamField path="autolink" type="boolean" default="true">
  If enabled, the extension will automatically add links as you type.

  ```typescript theme={null}
  Link.configure({
    autolink: false,
  })
  ```
</ParamField>

<ParamField path="protocols" type="Array<LinkProtocolOptions | string>" default="[]">
  An array of custom protocols to be registered with linkifyjs.

  ```typescript theme={null}
  Link.configure({
    protocols: ['ftp', 'git'],
  })
  ```
</ParamField>

<ParamField path="defaultProtocol" type="string" default="'http'">
  Default protocol to use when no protocol is specified.

  ```typescript theme={null}
  Link.configure({
    defaultProtocol: 'https',
  })
  ```
</ParamField>

<ParamField path="openOnClick" type="boolean" default="true">
  If enabled, links will be opened on click.

  ```typescript theme={null}
  Link.configure({
    openOnClick: false,
  })
  ```
</ParamField>

<ParamField path="enableClickSelection" type="boolean" default="false">
  If enabled, the link will be selected when clicked.

  ```typescript theme={null}
  Link.configure({
    enableClickSelection: true,
  })
  ```
</ParamField>

<ParamField path="linkOnPaste" type="boolean" default="true">
  Adds a link to the current selection if the pasted content only contains a URL.

  ```typescript theme={null}
  Link.configure({
    linkOnPaste: false,
  })
  ```
</ParamField>

<ParamField path="HTMLAttributes" type="Record<string, any>" default="{ target: '_blank', rel: 'noopener noreferrer nofollow', class: null }">
  HTML attributes to add to the link element.

  ```typescript theme={null}
  Link.configure({
    HTMLAttributes: {
      class: 'my-link-class',
      rel: 'noopener noreferrer',
      target: '_blank',
    },
  })
  ```
</ParamField>

<ParamField path="isAllowedUri" type="function">
  A validation function used for configuring link verification to prevent XSS attacks. Only modify this if you know what you're doing.

  ```typescript theme={null}
  Link.configure({
    isAllowedUri: (url, ctx) => {
      return url.startsWith('./') || ctx.defaultValidate(url)
    },
  })
  ```
</ParamField>

<ParamField path="shouldAutoLink" type="function">
  Determines whether a valid link should be automatically linked in the content.

  ```typescript theme={null}
  Link.configure({
    shouldAutoLink: (url) => {
      return url.startsWith('https://')
    },
  })
  ```
</ParamField>

## Commands

### setLink(attributes)

Set a link mark with the specified attributes. Supports `href`, `target`, `rel`, `class`, and `title` attributes.

```typescript theme={null}
editor.commands.setLink({ 
  href: 'https://tiptap.dev',
  target: '_blank',
  title: 'Tiptap Documentation'
})
```

### toggleLink(attributes)

Toggle a link mark with the specified attributes.

```typescript theme={null}
editor.commands.toggleLink({ 
  href: 'https://tiptap.dev' 
})
```

### unsetLink()

Remove the link mark from the current selection.

```typescript theme={null}
editor.commands.unsetLink()
```

## Link Attributes

The Link extension supports the following attributes:

* **href** - The URL the link points to
* **target** - Where to open the link (e.g., `_blank`)
* **rel** - The relationship between the current document and the linked document
* **class** - CSS class name(s) for the link
* **title** - Tooltip text displayed when hovering over the link (added in v3.19.0)

## Security

The Link extension includes built-in XSS protection. By default, it only allows safe protocols:

* http, https
* ftp, ftps
* mailto, tel, callto, sms
* cid, xmpp

You can customize this behavior using the `isAllowedUri` option, but be careful to maintain security when doing so.

## Autolink Behavior

When autolink is enabled (default), the extension will automatically create links when you:

* Type or paste a URL with an explicit protocol (e.g., `https://example.com`)
* Type a domain with a TLD (e.g., `example.com`)

The extension will NOT autolink:

* IP addresses without a protocol
* Single-word hostnames without a TLD (e.g., `localhost`)
* URLs typed inside inline code marks

## Source Code

View the source code on GitHub:

* [packages/extension-link](https://github.com/ueberdosis/tiptap/tree/main/packages/extension-link)