Smart Link Editor with Code Context Awareness

Build a rich text editor that automatically detects and creates links from typed URLs, but intelligently skips URLs that appear within inline code formatting.

Requirements

Your editor must:

1. Enable Automatic Link Detection: Configure the editor to automatically convert URLs to clickable links when users type a URL followed by whitespace (space, tab, or newline).

2. Support Inline Code Marks: The editor must support inline code formatting (code marks) for technical text.

3. Respect Code Boundaries: The autolink feature must check whether text is within a code mark before creating links. URLs inside inline code should remain as plain text, not be converted to links.

Implementation Notes

• Configure the editor with autolink enabled
• Implement or configure validation that checks for code mark presence
• The autolink system should skip link creation when detecting URLs within code contexts
• Regular (non-code) URLs should still be auto-linked normally

Test Cases

Create a test file named editor.test.ts with the following tests:

• When typing "Check https://example.com " (with trailing space), the URL becomes a clickable link @test
• When a URL exists within an inline code mark, it does NOT get converted to a link @test
• When autolink is triggered on text that includes both regular text and code marks, only URLs in regular text become links @test

Example Usage

// Create editor instance
const editor = createEditor({
  autolink: true,
  enableCodeMarks: true
});

// User types: "Check out https://tiptap.dev "
// Result: "Check out <a href="https://tiptap.dev">https://tiptap.dev</a>"

// User types: "Use `https://example.com` in code"
// Result: "Use <code>https://example.com</code> in code" (no link created)

Dependencies { .dependencies }

@tiptap/extension-link { .dependency }

Provides link functionality with automatic link detection and code mark awareness.