prosemirror-autolink

A ProseMirror plugin that automatically detects and converts URLs into links as you type, paste, or interact with text.

Features

• Auto-linking on Space: Automatically converts URLs to links when you type a space after them.
• Enter key trigger: Converts URLs to links when pressing Enter (configurable).
• Smart Punctuation Handling: Automatically excludes trailing punctuation (e.g., . , )) from the link.
• Paste Handling: Automatically detects if you are pasting a URL and either linkifies the current selection or inserts a link.
• Click to Open: Option to open links in a new tab when clicked.
• Undo Support: Backspace can undo the auto-link creation.

Installation

npm install prosemirror-autolink
# or
pnpm add prosemirror-autolink

Usage

Add the plugin to your ProseMirror state:

import { autolink } from "prosemirror-autolink";
import { schema } from "./your-schema"; // Ensure your schema has a 'link' mark

const state = EditorState.create({
    schema,
    plugins: [
        ...autolink({
            openOnClick: true,
            enableEnterTrigger: true,
            excludedTrailingChars: ['.', ',', '!', '?', ':', ';', ')', ']', '}']
        })
        // ... other plugins
    ]
});

Options

| Option | Type | Default | Description |

Prefix	Type	Default	Description
excludedTrailingChars	string[]	['.', ',', ...]	Characters to exclude from the end of a detected URL.
urlPattern	RegExp	/^https?:\/\//i	Regex to validate URLs. Must start with http:// or https://.
openOnClick	boolean	true	Whether clicking a link node opens it in a new tab.
enableEnterTrigger	boolean	true	Whether pressing Enter after a URL should auto-link it.
enableBackspaceUndo	boolean	true	Whether Backspace immediately after auto-linking undoes the link.

Requirements

Attribution

This package is built on top of ProseMirror, a robust toolkit for building rich-text editors on the web.