Contact Link Converter

A rich text editor extension that automatically detects and converts various contact protocols into clickable links.

Capabilities

Email Link Detection

• Typing "contact@example.com " (with trailing space) automatically converts it to a clickable mailto: link @test

Phone Number Link Detection

• Typing "tel:+1-234-567-8900 " (with trailing space) converts it to a clickable tel: link @test

FTP Link Support

• Typing "ftp://files.example.com/download " creates a clickable FTP link @test
• Typing "ftps://secure.example.com/files " creates a clickable FTPS link @test

SMS Link Support

• Typing "sms:+15551234567 " (with trailing space) converts it to a clickable SMS link @test

Implementation

@generates

API

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

/**
 * Creates and configures a rich text editor with protocol support
 * for mailto, tel, ftp, ftps, and sms links.
 *
 * @param element - The HTML element to mount the editor on
 * @returns The configured Editor instance
 */
export function createContactEditor(element: HTMLElement): Editor;

/**
 * Gets all links with non-HTTP protocols from the editor content.
 *
 * @param editor - The Editor instance
 * @returns Array of objects containing link text, href, and protocol type
 */
export function getProtocolLinks(editor: Editor): Array<{
  text: string;
  href: string;
  protocol: string;
}>;

Dependencies { .dependencies }

@tiptap/extension-link { .dependency }

Provides link functionality with automatic detection and protocol support.

@satisfied-by

@tiptap/core { .dependency }

Core Tiptap editor framework.

@satisfied-by

@tiptap/starter-kit { .dependency }

Basic editor extensions for document structure.

@satisfied-by