Interactive Link Editor with Custom Click Behaviors

Overview

Build a rich text editor that allows users to create and manage links with customizable click behaviors. The editor should support:

• Opening links in new tabs while editing
• Selecting links when clicking them for easy editing
• Configuring whether links should open on click or not

Requirements

1. Editor Setup

Create a functional rich text editor with link support that includes:

• Basic text editing capabilities
• Ability to add, edit, and remove links
• Link visualization in the editor

2. Click-to-Open Functionality

Implement functionality where:

• Clicking on a link in the editor opens it in a new window/tab
• Links with a target attribute respect that attribute when opening
• Only left-clicks should trigger link opening (button 0)
• This behavior should be configurable (can be enabled or disabled)

3. Click-to-Select Mode

Create an alternative click behavior where:

• Clicking on a link selects the entire link text instead of opening it
• This makes it easier for users to edit or remove links
• This should be a separate configuration option from click-to-open

4. Configuration Interface

Provide a way to toggle between different click behaviors:

• Enable/disable click-to-open functionality
• Enable/disable click-to-select functionality
• Show the current configuration state in the UI

Test Cases { .test-cases }

Test 1: Click to Open Links { .test-case #test-click-open @test }

Setup:

1. Initialize editor with click-to-open enabled
2. Create a link with href="https://example.com"

Actions:

• Click on the link in the editor

Expected:

• A new window/tab opens with the URL https://example.com
• The editor remains in edit mode

Test 2: Click to Select Links { .test-case #test-click-select @test }

Setup:

1. Initialize editor with click-to-select enabled (openOnClick disabled)
2. Create a link with the text "click me" and href="https://example.com"

Actions:

• Click on the link in the editor

Expected:

• The entire link text ("click me") becomes selected
• The link does not open in a new window/tab

Test 3: Respecting Target Attribute { .test-case #test-target-attribute @test }

Setup:

1. Initialize editor with click-to-open enabled
2. Create a link with href="https://example.com" and target="_blank"

Actions:

• Click on the link

Expected:

• The link opens in a new tab (respecting the target attribute)
• The behavior is consistent with standard HTML link behavior

Implementation Notes

• The solution should work within the Tiptap rich text editor framework
• Focus on the click handling and navigation aspects of links
• The implementation should be straightforward for someone familiar with the link extension

Dependencies { .dependencies }

@tiptap/core { .dependency }

Provides the core rich text editor framework and extension system.

@tiptap/starter-kit { .dependency }

Provides basic editor functionality including document structure and text editing capabilities.

@tiptap/extension-link { .dependency }

Provides comprehensive link functionality including click handling and navigation features.