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.