Custom Link Command with Transaction Control

Build a custom Tiptap editor command that programmatically inserts formatted links at specific positions while preventing automatic link detection from interfering with your transaction.

Requirements

Your solution should create a custom command called insertFormattedLink that:

1. Takes parameters: text (string), url (string), position (number)
2. Inserts the specified text at the given position
3. Applies a link mark to that text with the specified URL
4. Prevents the autolink plugin from processing this transaction
5. Returns true if successful, false otherwise

The command must handle:

• Inserting text and link at the exact position specified
• Proper transaction coordination to avoid plugin conflicts
• Validation that the position is within document bounds

Implementation

@generates

Test Cases

• Given an empty editor, insertFormattedLink("Click here", "https://example.com", 0) inserts "Click here" as a link at position 0, and the autolink plugin does not modify the transaction @test

• Given an editor with existing text "Hello world", insertFormattedLink("test link", "https://test.com", 6) inserts "test link" as a link at position 6 (after "Hello "), resulting in "Hello test linkworld" with "test link" being a clickable link @test

• Given an editor, calling insertFormattedLink("link", "https://example.com", 9999) with an out-of-bounds position returns false and does not modify the document @test

API

import { Editor } from '@tiptap/core';

/**
 * Inserts formatted text as a link at a specific position while preventing
 * automatic link detection from interfering.
 *
 * @param editor - The Tiptap editor instance
 * @param text - The text to insert
 * @param url - The URL for the link
 * @param position - The position in the document to insert at
 * @returns true if successful, false otherwise
 */
export function insertFormattedLink(
  editor: Editor,
  text: string,
  url: string,
  position: number
): boolean;

Dependencies { .dependencies }

@tiptap/core { .dependency }

Provides the core Tiptap editor functionality and transaction system.

@tiptap/extension-link { .dependency }

Provides link mark functionality and automatic link detection that must be coordinated with.