Link Editor Toolbar

Build a simple rich text editor toolbar component that allows users to add, edit, and remove hyperlinks from selected text.

Requirements

Your toolbar should provide the following functionality:

Add Link Button

• When text is selected and the "Add Link" button is clicked, prompt the user for a URL
• Apply the link to the selected text
• The link should open in a new tab with security attributes (noopener, noreferrer)

Edit Link Button

• When the cursor is within an existing link and the "Edit Link" button is clicked, prompt the user for a new URL
• Update the existing link with the new URL
• Preserve the target and rel attributes

Remove Link Button

• When the cursor is within a link and the "Remove Link" button is clicked, remove the link formatting from the text
• The text content should remain unchanged

Toggle Link Button

• When text is selected or cursor is within a link, clicking "Toggle Link" should:
  • Remove the link if one exists at the cursor position
  • Add a link if no link exists (prompting for URL)

Implementation Notes

• Implement four functions as specified in the API
• Each function should receive an editor instance and return void
• For URL input, you may use window.prompt() for simplicity
• Links should include target="_blank" and rel="noopener noreferrer" attributes when appropriate

@generates

API

/**
 * Adds a link to the currently selected text
 */
export function addLink(editor: any): void;

/**
 * Edits the URL of an existing link at the cursor position
 */
export function editLink(editor: any): void;

/**
 * Removes link formatting from the text at the cursor position
 */
export function removeLink(editor: any): void;

/**
 * Toggles link formatting on/off for selected text or at cursor
 */
export function toggleLinkFormat(editor: any): void;

Test Cases

• Calling addLink with selected text "example" and URL "https://example.com" creates a clickable link @test
• Calling removeLink when cursor is within a link removes the link but preserves the text @test
• Calling toggleLinkFormat on linked text removes the link @test
• Calling toggleLinkFormat on unlinked selected text adds a link @test

Dependencies { .dependencies }

@tiptap/extension-link { .dependency }

Provides link functionality for the rich text editor.