LexKit Docs

LinkExtension

Powerful hyperlink functionality for your editor

Add automatic URL detection, manual link creation, and intelligent paste behavior to your LexKit editor. Handle links with ease and provide a seamless editing experience.

Auto-Link URLsSmart PasteConfigurable

Key Features

Everything you need for professional link handling in your editor.

Smart URL Detection

Automatically detects and converts URLs to clickable links as you type, with customizable validation rules.

Intelligent Paste

Smart paste behavior that handles URLs differently based on context - cursor paste vs. selected text replacement.

Manual Control

Full programmatic control with commands for inserting, editing, and removing links through your UI.

Quick Start

Get up and running with LinkExtension in minutes.

Basic Setup

Import and configure LinkExtension

import { createEditorSystem, linkExtension } from '@lexkit/editor'

const extensions = [linkExtension] as const
const { Provider, useEditor } = createEditorSystem<typeof extensions>()

function MyEditor() {
  const { commands, activeStates } = useEditor()

  return (
    <Provider extensions={extensions}>
      <button
        onClick={() => commands.insertLink()}
        className={activeStates.isLink ? 'active' : ''}
      >
        Insert Link
      </button>
      <button
        onClick={() => commands.removeLink()}
        disabled={!activeStates.isLink}
      >
        Remove Link
      </button>
    </Provider>
  )
}

Auto-Link Configuration

Enable automatic URL detection

import { linkExtension } from '@lexkit/editor'

const extensions = [
  linkExtension.configure({
    autoLinkText: true  // Auto-convert URLs as you type
  })
] as const

Smart Paste Behavior

LinkExtension handles URL pasting intelligently based on your selection context.

Cursor Paste

Paste a URL when no text is selected. Controlled by autoLinkUrls setting.

autoLinkUrls: trueCreates clickable link

autoLinkUrls: falseInserts as plain text

Selected Text

Paste a URL over selected text. Controlled by linkSelectedTextOnPaste setting.

linkSelectedTextOnPaste: trueLinks selected text with URL

linkSelectedTextOnPaste: falseReplaces text with linked URL

Try LinkExtension

Interactive demo showcasing LinkExtension features. Try pasting URLs and using the toolbar!

LinkExtension Demo

Try pasting URLs at cursor vs. over selected text

Try pasting URLs anywhere, selecting text and pasting URLs to link the selected text, or paste links or type them, or use toolbar buttons

Configuration Options

Customize LinkExtension behavior to match your needs.

Option	Type	Description
autoLinkText	boolean	Enable automatic conversion of typed URLs to links. Note: Only affects URLs typed directly in the editor, not pasted content.
autoLinkUrls	boolean	Control whether URLs are automatically linked when pasted. When false, pasted URLs remain as plain text.
linkSelectedTextOnPaste	boolean	When pasting URLs over selected text, control whether to link the selected text or replace it with the URL.
validateUrl	(url: string) ⇒ boolean	Custom validation function for URLs. Return true to accept, false to reject.

Usage Examples

Enable auto-linking for typed URLs

import { linkExtension } from '@lexkit/editor'

const extensions = [
  linkExtension.configure({
    autoLinkText: true  // Auto-convert URLs as you type
  })
] as const

Disable automatic linking for pasted URLs

const extensions = [
  linkExtension.configure({
    autoLinkUrls: false  // Pasted URLs remain as plain text
  })
] as const

Control selected text behavior when pasting URLs

const extensions = [
  linkExtension.configure({
    linkSelectedTextOnPaste: false  // Replace selected text with URL instead of linking it
  })
] as const

Custom URL validation

import { linkExtension } from '@lexkit/editor'

const extensions = [
  linkExtension.configure({
    autoLinkText: true,
    validateUrl: (url: string) => {
      // Custom URL validation
      return url.startsWith('https://') &&
             url.includes('example.com')
    }
  })
] as const

API Reference

Complete reference for LinkExtension commands and state queries.

Commands

insertLink(url?, text?)

Insert or apply link to selection. Prompts for URL if not provided.

removeLink()

Remove link from current selection.

State Queries

isLink()

Check if current selection is within a link.

Best Practices

Tips for getting the most out of LinkExtension.

URL Validation

Use custom validation to restrict links to trusted domains or enforce HTTPS-only policies.

User Experience

Combine auto-linking with manual controls. Let users decide when to auto-link vs. manual insertion.

Performance

Keep validation functions lightweight. Complex validation can impact typing performance.

Accessibility

Ensure link text is descriptive. Consider adding link previews or validation feedback.