Custom Application Link Handler

Build a rich text editor feature that enables custom deep linking for an internal application ecosystem. Users should be able to type or paste custom protocol URLs (like workspace://projects/123 or task://urgent/456) and have them automatically converted to clickable links.

Requirements

Your implementation should:

1. Support three custom URI schemes:

   • workspace:// - Links to internal workspaces (e.g., workspace://projects/123)
   • task:// - Links to task management items (e.g., task://urgent/456)
   • meeting:// - Links to scheduled meetings (e.g., meeting://daily-standup)

2. Enable automatic link detection for these custom protocols as users type them

3. Ensure that custom protocol links open when clicked in the editor

4. Clean up properly when the editor is destroyed to prevent memory leaks

Test Cases

Your implementation should pass these test cases:

• When a user types workspace://projects/123 followed by a space, it should automatically become a clickable link @test

• When a user sets a link with the custom protocol task://urgent/456, it should be stored correctly and render as a link @test

• Clicking on a custom protocol link like meeting://daily-standup should attempt to open it (verify the href is correctly set) @test

• Standard protocols like https://example.com should continue to work alongside custom protocols @test

Implementation

@generates

API

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

/**
 * Creates and configures an editor with custom protocol support
 *
 * @param element - The HTML element to mount the editor on
 * @returns An editor instance configured with custom link handling
 */
export function createEditorWithCustomLinks(element: HTMLElement): Editor;

/**
 * Cleanup function to properly destroy the editor
 *
 * @param editor - The editor instance to clean up
 */
export function cleanupEditor(editor: Editor): void;

Dependencies { .dependencies }

@tiptap/core { .dependency }

Provides the core editor functionality and extension system.

@tiptap/extension-link { .dependency }

Provides link functionality with support for custom protocol registration.

@tiptap/starter-kit { .dependency }

Provides basic editor extensions (document, paragraph, text, etc).